:root {
  --sindybad-light-canvas: #f6f7fc;
  --sindybad-light-ink: #171629;
  --sindybad-light-muted: #62677a;
  --sindybad-purple: #7137d6;
  --sindybad-orange: #f09a2b;
  --sindybad-dark: #15111d;
}

html {
  background: var(--sindybad-light-canvas);
}

body {
  min-height: 100%;
  background: var(--sindybad-light-canvas);
}

/*
  One fixed canvas for the whole page. It does not restart when a new
  light section enters the viewport, so section boundaries remain seamless.
*/
.sindybad-light-canvas {
  --canvas-x: 50%;
  --canvas-y: 42%;
  --scroll-drift: 0px;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--canvas-x) var(--canvas-y), rgba(255, 255, 255, .92) 0 5%, transparent 28%),
    var(--sindybad-light-canvas);
}

.sindybad-light-canvas::before {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(113, 55, 214, .16) .75px, transparent .9px);
  background-position: 0 var(--scroll-drift);
  background-size: 24px 24px;
  content: "";
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, #000 12%, transparent 78%);
}

.sindybad-light-canvas::after {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(88vw, 1500px);
  aspect-ratio: 1.7;
  border: 1px solid rgba(113, 55, 214, .055);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow:
    0 0 0 80px rgba(113, 55, 214, .018),
    0 0 0 160px rgba(240, 154, 43, .012);
}

.sindybad-light-canvas__orb,
.sindybad-light-canvas__cursor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.sindybad-light-canvas__orb {
  width: clamp(290px, 34vw, 700px);
  aspect-ratio: 1;
  filter: blur(90px);
  opacity: .48;
}

.sindybad-light-canvas__orb--purple {
  left: -9%;
  top: 6%;
  background: rgba(113, 55, 214, .16);
  transform: translate3d(var(--purple-x, 0), var(--purple-y, 0), 0);
}

.sindybad-light-canvas__orb--blue {
  right: -8%;
  top: 30%;
  background: rgba(65, 187, 226, .13);
  transform: translate3d(var(--blue-x, 0), var(--blue-y, 0), 0);
}

.sindybad-light-canvas__orb--orange {
  left: 38%;
  bottom: -24%;
  background: rgba(240, 154, 43, .11);
  transform: translate3d(var(--orange-x, 0), var(--orange-y, 0), 0);
}

.sindybad-light-canvas__cursor {
  left: var(--canvas-x);
  top: var(--canvas-y);
  width: min(34vw, 520px);
  aspect-ratio: 1;
  opacity: .6;
  background: radial-gradient(circle, rgba(255, 255, 255, .76), transparent 68%);
  transform: translate(-50%, -50%);
  transition: left .75s cubic-bezier(.22, 1, .36, 1), top .75s cubic-bezier(.22, 1, .36, 1);
}

/* All existing and future light sections share the single canvas. */
:where(
  .sindybad-light-section,
  .about,
  .market,
  .sbm-capabilities,
  .sbs-supplies,
  .feedback
) {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* The About text panel must also reveal the shared canvas. */
.about__content {
  background: transparent !important;
}

.about__content[data-glow-panel] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Remove only section-level ambient layers that caused visible color bands. */
.about::before,
.about::after,
.market::before,
.market::after,
.feedback::before,
.feedback::after,
.about__content::after,
.about__content > .panel-orb,
.market__orb,
.feedback__orb,
.sbm-capabilities__grid,
.sbm-capabilities__grid-bg,
.sbm-capabilities__aura,
.sbs-supplies__dots,
.sbs-supplies__orb {
  display: none !important;
}

@media (max-width: 700px) {
  .sindybad-light-canvas__orb {
    width: 78vw;
    filter: blur(76px);
    opacity: .38;
  }

  .sindybad-light-canvas__orb--orange {
    left: 22%;
    bottom: -12%;
  }

  .sindybad-light-canvas::before {
    opacity: .28;
    background-size: 21px 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sindybad-light-canvas__orb,
  .sindybad-light-canvas__cursor {
    transition: none !important;
    transform: none !important;
  }
}


/* Sindybad V2.4.7 global canvas integration */
.site-header,
#app,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Custom Code owns its own background. */
.custom-code-host,
.custom-code-frame {
  background: transparent;
}

/* Normal Page Builder sections now inherit the shared canvas unless they carry
   an explicit managed background image/video. Custom Code still owns its CSS. */
.managed-section:not(.has-managed-background) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Old site-level dark artwork is no longer part of the active background system. */
#orbital-canvas,
.background-watermark,
.cursor-glow {
  display: none !important;
}


/* V2.5.3 Global canvas scope: light sections only */
.sindybad-light-canvas{
  z-index:0 !important;
}

/* Light sections intentionally reveal the canvas. */
.sindybad-light-section,
.managed-section:not(.is-dark-section):not(.has-dark-background),
.custom-code-host.is-light-section{
  position:relative;
  background-color:transparent !important;
}

/* Dark site regions must fully cover the global light canvas. */
.site-footer,
.sindybad-dark-section,
.is-dark-section,
.has-dark-background,
[data-section-theme="dark"],
[data-canvas-scope="dark"]{
  position:relative;
  z-index:2;
  background-color:#0d1020;
  isolation:isolate;
}

/* Footer owns its own neutral dark surface. */
.site-footer{
  background:#252b35 !important;
}

/* Do not force Custom Code frames transparent globally.
   Their own CSS must decide whether the section is light or dark. */
.custom-code-frame{
  background:transparent;
}