:root{
  --glow-a:#2b6bf3;
  --glow-b:#1b2e6b;
  --soft-bg:#f7f8fb;
}
[data-bs-theme="dark"]{ --soft-bg:#0f1220; }

body{ background:var(--soft-bg); }

.landing-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  background:
    radial-gradient(62vw 46vh at 6% -12%, rgba(122,45,255,.40), rgba(122,45,255,0) 60%),
    radial-gradient(54vw 50vh at 98% 4%, rgba(218,21,184,.30), rgba(218,21,184,0) 60%),
    radial-gradient(70vw 42vh at 88% 96%, rgba(122,45,255,.22), rgba(122,45,255,0) 65%),
    radial-gradient(88vw 64vh at 42% 112%, rgba(159,84,255,.20), rgba(159,84,255,0) 70%);
}
.glow{ position:absolute; transform:translateZ(0); mix-blend-mode:screen; will-change:transform }
.glow-a{ top:-120px; left:-60px }
.glow-b{ right:-120px; top:160px }
.soft-wave{ position:absolute; top:0; left:0; right:0; opacity:.7 }

.hero-video{ position:relative; z-index:1 }
.hero-video__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(154,104,255,.35), rgba(154,104,255,0) 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(255,77,216,.28), rgba(255,77,216,0) 60%),
    radial-gradient(60% 60% at 50% 110%, rgba(0,0,0,.35), rgba(0,0,0,0) 70%);
}

.brand-grad{
  -webkit-text-fill-color:transparent;
  background-clip:text; -webkit-background-clip:text;
  white-space:nowrap;
}
.brand-grad.wb{ background-image:linear-gradient(90deg,#7b2cff,#4aa3ff) }

.section-wave-top{ position:relative; isolation:isolate }
.section-wave-top::before{
  content:""; position:absolute; inset:-60px 0 auto 0; height:160px; z-index:-1;
  background:radial-gradient(50% 100% at 50% 0%, rgba(122,162,255,.18), rgba(122,162,255,0) 70%);
  mask-image:linear-gradient(to bottom, #000, transparent);
}

@media (prefers-reduced-motion: reduce){ .glow{ transition:none!important } }