/* Variant: IGNITION — deep navy night, the particle field turns into sparks.
   Sparks burst and re-form on every section, embers rise between sections, the cursor stirs a vortex.
   Surfaces are lit from above (a bright top edge fading down), never glass. */
:root{
  --bg:#040a1c;--bg2:#071029;--panel:#0a1432;--panel2:#0e1a3e;
  --p-rgb:200,214,255;--line:rgba(var(--p-rgb),.10);--line2:rgba(var(--p-rgb),.2);
  --ink:#f5f8ff;--ink2:#cdd8f2;--ink3:#93a2c6;--ink4:#64729a;
  --green:#2ee6a6;--g-rgb:46,230,166;--bg-rgb:4,10,28;--hi-rgb:220,230,255;--plat:#c8d4f0;
  --input:#050c24;--bar:#08122e;
  --vsl-bg:radial-gradient(90% 110% at 50% 0%,#17306a,#071133 55%,#040a1c);
  --one-bg:radial-gradient(70% 140% at 0% 0%,rgba(46,230,166,.14),transparent 60%),linear-gradient(180deg,#0c1a40,#060d26);
  --kv-bg:linear-gradient(180deg,rgba(16,30,70,.55),rgba(6,12,32,.3));
  --fcard-bg:linear-gradient(180deg,rgba(14,27,64,.95),rgba(5,11,30,.96));
  --phone-bg:linear-gradient(160deg,#22356b,#070d24);
  --big-a:linear-gradient(180deg,#ffffff 22%,#bcd0ff 62%,#5b74b8 100%);
  --big-b:linear-gradient(180deg,#e3ebff 10%,#8aa0dc 66%,#34477f 100%);
  --btn-ink:#02160f;--btn-hover:#5cf0bd;
  --pp-rgb:150,185,255;--pg-rgb:70,240,175;--pr-rgb:255,112,124;--p-blend:lighter;--p-boost:1.15;
  --lit:linear-gradient(180deg,rgba(190,210,255,.42),rgba(190,210,255,.07) 38%,rgba(190,210,255,.03));
  --r:20px
}
body{background:#040a1c}
main{overflow-x:clip}

/* nav: a floating dark capsule */
.nav{top:14px;left:50%;right:auto;transform:translateX(-50%);width:min(1120px,calc(100% - 28px));height:58px;border-radius:999px;padding:0 10px 0 22px;
  background:rgba(6,13,36,.78);border:1px solid rgba(var(--p-rgb),.16);box-shadow:0 18px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
.nav .btn.sm{border-radius:999px}

/* hero: the wordmark rises over a lit planet rim; the video sits on the horizon */
.hero{position:relative;padding-top:clamp(150px,19vh,200px)}
.hero .vsl-wrap::before{content:"";position:absolute;left:50%;top:-34px;width:max(1900px,165vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,transparent 98.6%,rgba(150,185,255,.75) 99.7%,rgba(150,185,255,0) 100%);
  box-shadow:0 -30px 90px -20px rgba(70,120,255,.55);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 420px);mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 420px)}
.hero::after{content:"";position:absolute;left:-20vw;right:-20vw;top:clamp(360px,44vh,520px);height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 60% at 50% 70%,rgba(48,92,210,.26),transparent 70%)}
.tag{background:rgba(10,20,52,.7);border-color:rgba(var(--p-rgb),.22)}
.big{letter-spacing:-.045em}
.hero .vsl-wrap{margin-top:clamp(64px,9vh,110px)}

/* lit surfaces */
.vsl,.frame,.fcard,.kv,.one,.vfoot,.dui,.phone,.pos-shot,.sample{border:1px solid transparent!important;background-clip:padding-box}
.vsl{border-radius:var(--r);background:var(--vsl-bg) padding-box,var(--lit) border-box}
.frame{border-radius:16px;background:#000 padding-box,var(--lit) border-box}
.fcard{border-radius:26px;background:var(--fcard-bg) padding-box,var(--lit) border-box}
.kv{border-radius:var(--r);background:var(--kv-bg) padding-box,var(--lit) border-box}
.one{border-radius:28px;background:var(--one-bg) padding-box,linear-gradient(180deg,rgba(46,230,166,.6),rgba(46,230,166,.08) 45%,rgba(46,230,166,.04)) border-box}
.vfoot{border-radius:24px;background:linear-gradient(180deg,#0b1738,#060d26) padding-box,var(--lit) border-box}
.dui{border-radius:18px;background:#1e1f22 padding-box,var(--lit) border-box}
.phone{background:var(--phone-bg) padding-box,var(--lit) border-box}
.sample{background:rgba(10,20,52,.6) padding-box,var(--lit) border-box}
.chart .frame{background:#fff padding-box,var(--lit) border-box}

/* buttons: lit top edge, a sheen that crosses once on hover */
.btn{border-radius:999px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 34px -14px rgba(46,230,166,.55)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media (hover:hover) and (pointer:fine){.btn:hover::after{transform:translateX(120%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}}
.ghost{border-radius:999px;background:rgba(10,20,52,.5)}
.blurple{border-radius:999px}

/* type: labels as small lit caps */
.lab{font:700 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--plat);display:inline-flex;align-items:center;gap:10px}
.lab::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(var(--g-rgb),.16)}
.h2{letter-spacing:-.03em}
.statement{color:#fff}

/* centred chapter openers */
.stack-intro,.ind-head,#strategies>.rv:first-child{text-align:center;margin-inline:auto}
.stack-intro .statement,.stack-intro .lede,.ind-head .lede,#strategies>.rv:first-child .lede{margin-inline:auto}
.stack-intro .statement{max-width:14ch}
.ind-head{max-width:820px}
#strategies>.rv:first-child{max-width:860px}
#strategies .sample{display:flex;width:max-content;max-width:100%;margin-inline:auto}

/* every section opens with a line of light that ignites from the centre */
section{position:relative}
section::before{content:"";position:absolute;top:0;left:50%;width:min(900px,80vw);height:1px;margin-left:min(-450px,-40vw);
  background:linear-gradient(90deg,transparent,rgba(170,195,255,.55),transparent);transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
section.lit::before{transform:scaleX(1)}

/* cards follow the cursor with a soft light */
.modc,.vi,.ea,.how li,.part{position:relative}
.spot{--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(150,185,255,.10),transparent 70%)}
@media (hover:hover) and (pointer:fine){.spot:hover::after{opacity:1}}

.modc:hover b{color:var(--green)}
.verdict{border-color:rgba(255,112,124,.4)}
.verdict b{color:#ff707c}

/* words rise and sharpen into place */
.wd{display:inline-block;transform:translateY(.45em);opacity:0;filter:blur(8px);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s;transition-delay:calc(var(--i)*45ms)}
.words.in .wd{transform:none;opacity:1;filter:none}

.close{background:radial-gradient(60% 70% at 72% 50%,rgba(48,92,210,.22),transparent 70%)}
footer{background:#030817}
@media (prefers-reduced-motion:reduce){.wd{transform:none;opacity:1;filter:none}section::before{transform:scaleX(1)}}
@media(max-width:900px){.nav{padding-left:16px}}

/* the tool grid overflowed at phone width (also present on the baseline :8080) */
@media(max-width:980px){.tool,.tool.rev{grid-template-columns:minmax(0,1fr)}}

/* launch 2026-10-07: on phones the floating nav sits over moving text; near-opaque so nothing reads through it even where backdrop blur is off */
@media(max-width:760px){.nav{background:rgba(6,13,36,.95)}}