/* Infinite Collective Digital, cinematic home page.
   One idea: scattered leads gather into one calm system.
   The hero is a scroll-driven video ("the scrub"). Phones and reduced-motion
   visitors get a designed still hero instead. The five media queries marked
   GATE below must match the GATES list in home.js character for character. */

:root{
  --canvas:#100E26;
  --panel:#1A1740;
  --panel-2:#221E52;
  --accent:#10B981;
  --accent-hover:#34D399;
  --accent-muted:rgba(16,185,129,.22);
  --indigo:#6366F1;
  --indigo-soft:#A5B4FC;
  --line:rgba(165,180,252,.16);
  --line-strong:rgba(165,180,252,.42);
  --text-secondary:#B4B3D1;
  --text-primary:#F4F2EC;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text-primary);background:var(--canvas);
  line-height:1.6;-webkit-font-smoothing:antialiased;animation:pagein .9s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--text-primary);color:var(--canvas);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* one fixed environment behind the whole page */
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:envdrift 80s ease-in-out -20s infinite alternate}
.env i:nth-child(1){width:60vw;height:60vw;left:-18vw;top:-10vw;background:radial-gradient(circle,rgba(99,102,241,.38),transparent 68%)}
.env i:nth-child(2){width:52vw;height:52vw;right:-16vw;top:38vh;background:radial-gradient(circle,rgba(76,60,170,.42),transparent 68%);animation-duration:96s;animation-delay:-50s}
.env i:nth-child(3){width:40vw;height:40vw;left:22vw;bottom:-22vw;background:radial-gradient(circle,rgba(16,185,129,.14),transparent 68%);animation-duration:110s;animation-delay:-70s}
@keyframes envdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-5vh,0) scale(1.15)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;
  text-decoration:none;border-radius:12px;padding:16px 28px;border:none;cursor:pointer;position:relative;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .35s var(--ease),border-color .35s var(--ease)}
.btn-primary{background:var(--accent);color:#06281C;box-shadow:0 10px 30px -12px rgba(16,185,129,.7)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(16,185,129,.8)}
.btn-quiet{background:rgba(255,255,255,.04);color:var(--text-primary);border:1.5px solid var(--line-strong)}
.btn-quiet:hover{border-color:var(--text-primary);transform:translateY(-2px)}
.btn .arr{transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.tlink{font-weight:600;text-decoration:none;color:var(--indigo-soft);display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.tlink:hover{color:var(--text-primary);border-color:var(--line-strong)}
.tlink .arr{transition:transform .35s var(--ease-out)}
.tlink:hover .arr{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}.tlink{min-height:44px}}

/* ---------- Header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);border-bottom:1px solid transparent}
.top.solid{background:rgba(16,14,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand img{width:38px;height:38px;transition:transform 1s var(--ease-out)}
.brand:hover img{transform:rotate(120deg)}
.brand .name{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.08rem;line-height:1.05}
.brand .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--text-secondary);margin-top:3px}
.navlinks{display:flex;align-items:center;gap:4px}
.navlinks a:not(.btn){text-decoration:none;font-weight:500;font-size:.94rem;color:var(--text-secondary);padding:10px 13px;border-radius:8px;transition:color .3s var(--ease)}
.navlinks a:not(.btn):hover{color:var(--text-primary)}
.navlinks .btn{padding:11px 20px;font-size:.92rem;margin-left:10px}
.burger{display:none;background:none;border:none;width:46px;height:46px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
@media(max-width:900px){
  .burger{display:block}
  .navlinks{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#100E26;padding:10px 28px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .35s var(--ease)}
  .navlinks a:not(.btn){padding:15px 2px;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0}
  .navlinks .btn{margin:18px 0 0}
  .top.open{background:#100E26}
  .top.open .navlinks{transform:none;opacity:1;pointer-events:auto}
  .top.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .top.open .burger span:nth-child(2){opacity:0}
  .top.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ---------- Hero: the scrub ---------- */
.hero{position:relative;height:400vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0D0B22}
/* the film: poster, video, and resting plate share one box so they always line up */
.film{position:absolute;inset:0}
/* on very wide screens, fit the film by height instead of stretching it across. It stays
   sharper, the atom is never cropped, and the edges fade into the page */
@media (min-aspect-ratio: 2/1){
  .film{left:50%;right:auto;width:calc(100vh * 1.7704);width:calc(100svh * 1.7704);transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
}
/* on squarer screens (tablets held sideways, small windows) keep the right side of the film
   in view, so the atom is never cut off at the edge */
@media (max-aspect-ratio: 3/2){
  .film{left:auto;right:0;width:calc(100vh * 1.7704);width:calc(100svh * 1.7704)}
  .bands .band{width:min(520px,40vw)}
}
.poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.hero-video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready .hero-video{opacity:1}
.stage.video-failed .hero-video{display:none}
/* once the scroll reaches the end, a still plate with drawn electrons takes over so they keep orbiting */
.rest{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);background:center/cover no-repeat;transform:translateZ(0)}
.rest svg{position:absolute;inset:0;width:100%;height:100%}
.stage.at-rest .rest{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,9,24,.72) 0%,rgba(10,9,24,.38) 38%,rgba(10,9,24,0) 62%),
             radial-gradient(ellipse 120% 90% at 55% 45%,rgba(10,10,18,0) 40%,rgba(10,10,18,.55) 100%)}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;background:linear-gradient(180deg,rgba(16,14,38,0),var(--canvas))}
.bands{position:absolute;inset:0;z-index:2}
.band{position:absolute;left:max(28px,calc((100vw - var(--max))/2 + 28px));top:50%;width:min(560px,46vw);transform:translateY(-50%);opacity:0;text-shadow:var(--tshadow);pointer-events:none}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-30% -22% -30% -30%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 42% 50%,rgba(5,5,10,.62) 0%,rgba(5,5,10,.4) 46%,rgba(5,5,10,0) 76%)}
.band .mono{display:block;margin-bottom:20px}
.band h1,.band .h{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.04;font-size:clamp(2.3rem,4.6vw,4.1rem)}
.band p{margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.22rem);color:#DAD9EC;max-width:34ch}
.band .btn{text-shadow:none}
.band .g{color:var(--accent-hover)}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* entrance 1, scatter: characters start apart and gather (echoes the scattered lights) */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* entrance 2, drift-down: words settle from above (echoes the lights falling in) */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance 3, staged settle: words rise in order, then the line, then the buttons */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.band .sub{--ks:clamp(0,(var(--k,0) - .5)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.band .cta{--kb:clamp(0,(var(--k,0) - .68)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px));margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

.ring{position:absolute;right:30px;bottom:30px;width:40px;height:40px;z-index:3;color:var(--indigo-soft);transform:rotate(-90deg);transition:opacity .8s var(--ease)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .6s var(--ease)}
.cue i{width:1px;height:38px;background:linear-gradient(180deg,var(--indigo-soft),transparent);transform-origin:top;animation:cue 2.6s var(--ease) -1s infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(16px);opacity:0}}
.cue.gone{opacity:0}
@media (max-height:560px){.cue,.ring{display:none}}

/* ---------- Hero: the still version. GATE: these five queries match home.js exactly ---------- */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
    background:#0D0B22 url('/assets/hero-ending-m.jpg') center 56px/min(100%,560px) auto no-repeat}
  .poster,.hero-video,.rest,.ring,.cue,.band.b1,.band.b2{display:none}
  .scrim{background:linear-gradient(180deg,rgba(13,11,34,.9) 0,rgba(13,11,34,0) 90px,rgba(13,11,34,0) min(92vw,516px),var(--canvas) min(112vw,640px))}
  .stage::after{display:none}
  .bands{position:relative;inset:auto;width:100%}
  .band.b3{position:relative;left:auto;top:auto;transform:none;opacity:1 !important;width:auto;padding:calc(min(96vw,540px) + 40px) 24px 56px;--k:1 !important;pointer-events:auto}
  .band.b3::before{display:none}
  .band .cta{flex-direction:column;align-items:stretch;gap:14px}
  .band .cta .tlink{justify-content:center}
}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding:120px 0}
.sec-title{font-size:clamp(2rem,4vw,3.1rem);max-width:18ch;margin-top:16px}
.sec-lede{color:var(--text-secondary);font-size:1.1rem;margin-top:18px;max-width:54ch}
@media(max-width:720px){.sec{padding:84px 0}}

/* reveal choreography */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*110ms)}
.js .in .rv,.js .rv.in{opacity:1;transform:none}
.js .in.done .rv,.js .rv.in.done{transition-delay:0s}

/* orbit divider that draws itself */
.orbit-rule{display:block;width:min(520px,80%);height:70px;margin:0 auto;color:var(--indigo-soft);opacity:.55}
.orbit-rule ellipse{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.2s var(--ease)}
.orbit-rule ellipse:nth-child(2){transition-delay:.25s}
.orbit-rule circle{fill:var(--accent);opacity:0;transition:opacity .8s var(--ease) 1.6s}
.orbit-rule.in ellipse{stroke-dashoffset:0}
.orbit-rule.in circle{opacity:1}

/* A. Problem: headline left, three voices stepping down the right */
.problem .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.problem .lead{position:sticky;top:120px}
.voices{display:flex;flex-direction:column;gap:22px}
.voice{background:linear-gradient(160deg,rgba(34,30,82,.75),rgba(26,23,64,.55));border:1px solid var(--line);border-radius:20px;padding:30px 32px;position:relative;
  transition:transform .5s var(--ease-out),border-color .5s var(--ease)}
.voice:hover{transform:translateX(-6px);border-color:var(--line-strong)}
.voice:nth-child(2){margin-left:36px}
.voice:nth-child(3){margin-left:72px}
.voice q{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.32rem;line-height:1.25;quotes:"\201C" "\201D"}
.voice p{color:var(--text-secondary);margin-top:10px;font-size:1rem}
.voice::before{content:"";position:absolute;left:-1px;top:28px;bottom:28px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--indigo),transparent)}
@media(max-width:900px){.problem .wrap{grid-template-columns:1fr;gap:40px}.problem .lead{position:static}.voice:nth-child(2),.voice:nth-child(3){margin-left:0}}

/* B. System: the hold-to-gather orbit beside four steps */
.system{background:linear-gradient(180deg,transparent,rgba(26,23,64,.55) 18%,rgba(26,23,64,.55) 82%,transparent)}
.system .head{text-align:center}
.system .sec-title{margin-left:auto;margin-right:auto}
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:64px}
.gather{position:relative;aspect-ratio:1/1;width:min(460px,100%);margin:0 auto}
.gather svg{width:100%;height:100%;overflow:visible}
.gather .rings ellipse{fill:none;stroke:var(--indigo-soft);stroke-width:1.4;opacity:calc(.12 + .78*var(--p,0));transition:opacity .4s var(--ease)}
.gather .rings{transform-origin:230px 230px}
.gather.done .rings{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gather .core{fill:url(#coreglow);opacity:calc(.25 + .75*var(--p,0));transform-origin:230px 230px;transform:scale(calc(.6 + .4*var(--p,0)))}
.gather .dot{transform:translate(calc((1 - var(--p,0))*var(--dx,0px)),calc((1 - var(--p,0))*var(--dy,0px)));opacity:calc(.55 + .45*var(--p,0))}
.gather .lead{transform:translate(calc((1 - var(--p,0))*var(--dx,0px)),calc((1 - var(--p,0))*var(--dy,0px)));opacity:calc(.85 - .85*var(--p,0))}
.gather .lead.em{fill:var(--accent-hover)}
.gather .lead.in{fill:var(--indigo-soft)}
.gather .dot.em{fill:var(--accent-hover)}
.gather .dot.in{fill:var(--indigo-soft)}
.gather .float{animation:float 7s ease-in-out -2s infinite alternate}
.gather .float:nth-child(2n){animation-duration:9s;animation-delay:-5s}
.gather .float:nth-child(3n){animation-duration:11s;animation-delay:-3s}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(5px,-9px)}}
.gather.done .float{animation:none}
.hold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;border:none;cursor:pointer;background:rgba(16,14,38,.55);color:var(--text-primary);
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out),background-color .4s var(--ease);touch-action:none;-webkit-user-select:none;user-select:none}
.hold::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--line-strong)}
.hold::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:holdpulse 3.2s var(--ease) -1s infinite}
@keyframes holdpulse{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
.hold:hover{background:rgba(26,23,64,.8)}
.gather.done .hold{opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}
.gather-note{text-align:center;margin-top:18px;color:var(--text-secondary);font-size:.95rem;min-height:1.6em;transition:opacity .6s var(--ease)}
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:6px}
.steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:4px 18px;padding:20px 0;border-bottom:1px solid var(--line);opacity:.5;transition:opacity .8s var(--ease),transform .8s var(--ease-out);transform:translateX(10px)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:"0" counter(s);font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--indigo-soft);padding-top:6px;grid-row:span 2;transition:color .8s var(--ease)}
.steps h3{font-size:1.3rem}
.steps p{color:var(--text-secondary);font-size:1rem}
.steps.lit li{opacity:1;transform:none}
.steps.lit li::before{color:var(--accent-hover)}
.steps.lit li:nth-child(1){transition-delay:.1s}.steps.lit li:nth-child(2){transition-delay:.45s}.steps.lit li:nth-child(3){transition-delay:.8s}.steps.lit li:nth-child(4){transition-delay:1.15s}
.system .more{text-align:center;margin-top:48px}
@media(max-width:900px){.sys-grid{grid-template-columns:1fr;gap:36px}}

/* C. Proof: three big numbers on a line, then two quotes offset */
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.num{padding:42px 32px;border-right:1px solid var(--line)}
.num:last-child{border-right:none}
.num b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,6.4vw,5rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--text-primary) 20%,var(--indigo-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.num span{display:block;color:var(--text-secondary);margin-top:14px;max-width:26ch}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.quote{padding:8px 0 8px 28px;border-left:2px solid var(--indigo)}
.quote:nth-child(2){margin-top:48px}
.quote blockquote{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.3rem;line-height:1.35}
.quote figcaption{margin-top:16px;color:var(--text-secondary);font-size:.95rem}
.quote figcaption b{color:var(--text-primary);font-weight:600}
.proof .more{margin-top:48px}
@media(max-width:820px){.nums{grid-template-columns:1fr}.num{border-right:none;border-bottom:1px solid var(--line);padding:32px 4px}.num:last-child{border-bottom:none}.quotes{grid-template-columns:1fr}.quote:nth-child(2){margin-top:0}}

/* D. Plans: three orbit levels, a row list rather than cards */
.plans .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.plan-list{margin-top:56px;border-top:1px solid var(--line)}
.plan{display:grid;grid-template-columns:64px 220px 1fr auto;gap:28px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;
  transition:background-color .5s var(--ease),padding .5s var(--ease-out)}
.plan:hover{background:rgba(99,102,241,.07);padding-left:20px;padding-right:20px}
.plan svg{width:56px;height:56px;color:var(--indigo-soft)}
.plan svg ellipse{fill:none;stroke:currentColor;stroke-width:1.3}
.plan svg circle{fill:var(--accent)}
.plan h3{font-size:1.7rem}
.plan h3 small{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);font-weight:500;margin-top:8px}
.plan p{color:var(--text-secondary);max-width:52ch}
.plan .arr{font-size:1.4rem;color:var(--indigo-soft);transition:transform .5s var(--ease-out),color .5s var(--ease)}
.plan:hover .arr{transform:translateX(6px);color:var(--text-primary)}
@media(max-width:900px){.plan{grid-template-columns:56px 1fr;gap:10px 18px}.plan p{grid-column:2}.plan .arr{display:none}}

/* E. Rob: portrait with an orbit ring, promises as a quiet list */
.rob .wrap{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:center}
.portrait{position:relative;aspect-ratio:1/1;max-width:400px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:50%;position:relative;z-index:1;filter:saturate(.92)}
.portrait::before{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid var(--line-strong)}
.portrait::after{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle at 50% 0,var(--accent) 0 5px,transparent 6px);animation:spin 26s linear -6s infinite}
.promises{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;margin:34px 0 36px}
.promises li{padding-left:26px;position:relative;font-weight:500}
.promises li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;border-radius:2px;background:var(--accent)}
@media(max-width:900px){.rob .wrap{grid-template-columns:1fr;gap:48px}.portrait{max-width:260px;margin-left:18px}.promises{grid-template-columns:1fr}}

/* F. Questions */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.2rem;padding:26px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .3s var(--ease)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--indigo-soft)}
summary i{flex-shrink:0;width:14px;height:14px;position:relative;transition:transform .5s var(--ease-out)}
summary i::before,summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--accent)}
summary i::after{transform:rotate(90deg);transition:opacity .4s var(--ease)}
details[open] summary i{transform:rotate(180deg)}
details[open] summary i::after{opacity:0}
details p{padding:0 0 28px;color:var(--text-secondary);max-width:60ch;animation:ans .6s var(--ease) both}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.faq .wrap{grid-template-columns:1fr;gap:36px}}

/* G. Final call to action: the ending frame returns as the backdrop */
.final{padding:130px 0 120px;overflow:hidden}
.final .bg{position:absolute;inset:0;z-index:-1;background:url('/assets/hero-ending.jpg') 30% 50%/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.final .bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.final .bg.live{background-image:none}
.final .bg.live svg{opacity:1}
.final .head{text-align:center}
.final .sec-title{margin-left:auto;margin-right:auto}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:60px;align-items:start}
.door{background:rgba(16,14,38,.72);border:1px solid var(--line);border-radius:24px;padding:38px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.door.main{border-color:rgba(16,185,129,.45);box-shadow:0 40px 80px -50px rgba(16,185,129,.6)}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover);border:1px solid var(--accent-muted);background:rgba(16,185,129,.08);padding:7px 12px;border-radius:99px}
.door h3{font-size:1.7rem;margin:20px 0 12px}
.door p{color:var(--text-secondary)}
.door .btn{margin-top:28px}
.form-card{background:#fff;border-radius:16px;overflow:hidden;margin-top:24px}
.form-card iframe{width:100%;min-height:560px;border:none;display:block}
.form-note{font-size:.86rem;color:var(--text-secondary);margin-top:14px;text-align:center}
@media(max-width:900px){.doors{grid-template-columns:1fr}.door{padding:28px 22px}}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:64px 0 44px;color:var(--text-secondary);font-size:.93rem;background:rgba(13,11,34,.6)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot h4{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-soft);margin-bottom:16px}
.foot ul{list-style:none}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none;transition:color .3s var(--ease)}
.foot a:hover{color:var(--text-primary)}
.foot .fbrand p{margin-top:16px;max-width:36ch}
.foot .contact{margin-top:16px;display:flex;flex-direction:column;gap:6px;color:var(--text-primary)}
.disclaimer{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:.78rem;line-height:1.6;color:#8C8BAE}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .fbrand{grid-column:1/-1}}

/* pause looping motion off-screen tabs */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---------- Reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .orbit-rule ellipse{stroke-dashoffset:0}.orbit-rule circle{opacity:1}
  .gather{--p:1}
  .gather .hold{display:none}
  .steps li{opacity:1;transform:none}
  .steps li::before{color:var(--accent-hover)}
  .band.b3{--k:1}
}