@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

.sec-root{
  --cy:#00C2FF; --cy2:#5AD9FF; --lm:#A3E635; --bg:#0B0F14; --bg2:#080C10;
  --ink:#F8FAFC; --mut:#94A3B8; --dim:#64748B;
  --line:rgba(255,255,255,.08); --glass:rgba(255,255,255,.035);
  --glow:0 0 28px rgba(0,194,255,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative; isolation:isolate;
  background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.sec-root *,.sec-root *::before,.sec-root *::after{box-sizing:border-box;}
.sec-root h1,.sec-root h2,.sec-root h3,.sec-root h4{
  font-family:'Space Grotesk','Manrope',sans-serif; font-weight:700;
  line-height:1.04; letter-spacing:-.03em; margin:0;
}
.sec-root p{margin:0;}
.sec-root a{color:inherit;text-decoration:none;}
.sec-root ul{margin:0;padding:0;list-style:none;}
/* Named .sec-shell, not .sec-wrap: the child theme's style.css carries an
   About Us block scoped to .sec-wrap that sets line-height:0, padding:0
   !important and hides direct <p> children. Sharing that class name let
   those rules land on this page. */
.sec-shell{width:min(1220px,90%);margin:0 auto;position:relative;z-index:2;}
.sec-sect{padding:clamp(90px,10vw,150px) 0;position:relative;z-index:2;}

/* ---------- reading progress ---------- */
.sec-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;}
.sec-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cy),var(--lm));box-shadow:0 0 14px rgba(0,194,255,.8);}

/* ---------- the neural field — fixed behind the entire page ---------- */
.sec-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;}
.sec-fog{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 85% at 50% 44%,transparent 26%,rgba(11,15,20,.5) 66%,rgba(11,15,20,.94) 100%);}
/* a heavier scrim that only rises once the reading sections begin, so body
   copy never has to fight the mesh still moving behind it */
.sec-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(11,15,20,.5),rgba(11,15,20,.74));}

/* ---------- nav ---------- */
.sec-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(11,15,20,.5);border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,transform .75s var(--ease),opacity .5s;}
.sec-nav.is-hidden{transform:translateY(-105%);opacity:0;pointer-events:none;}
.sec-nav.is-stuck{background:rgba(11,15,20,.88);border-bottom-color:rgba(255,255,255,.07);}
.sec-nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0;}
.sec-nav-in img{height:38px;width:auto;display:block;}
.sec-nav-links{display:flex;gap:30px;align-items:center;}
.sec-nav-links a{color:#cbd5e1;font-size:.94rem;position:relative;transition:color .3s;}
.sec-nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--cy);transition:width .35s var(--ease);}
.sec-nav-links a:hover{color:var(--cy2);}
.sec-nav-links a:hover::after{width:100%;}
.sec-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:800;
  font-size:.92rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--cy),#0072FF);color:#fff;box-shadow:var(--glow);
  transition:transform .35s var(--ease),box-shadow .35s;}
.sec-btn:hover{transform:translateY(-3px);box-shadow:0 0 42px rgba(0,194,255,.55);}
.sec-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.4),transparent 80%);
  transform:translateX(-140%);transition:transform .8s var(--ease);}
.sec-btn:hover::after{transform:translateX(140%);}
.sec-btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.92rem;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--ink);
  transition:border-color .35s,color .35s,transform .35s var(--ease),background .35s;}
.sec-btn-ghost:hover{border-color:rgba(0,194,255,.6);color:var(--cy2);transform:translateY(-3px);background:rgba(0,194,255,.06);}

/* ---------- reveal system ---------- */
.sec-root [data-reveal]{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform;}
.sec-root [data-reveal="fade"]{transform:none;}
.sec-root [data-reveal="left"]{transform:translate3d(-40px,0,0);}
.sec-root [data-reveal="right"]{transform:translate3d(40px,0,0);}
.sec-root [data-reveal="scale"]{transform:scale(.94);}
.sec-root [data-reveal].is-in{opacity:1;transform:none;}
/* masked line rise — type slides up out of its own overflow box */
.sec-root [data-reveal="mask"]{opacity:1;transform:none;transition:none;display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0;}
.sec-root [data-reveal="mask"]>span{display:inline-block;transform:translate3d(0,110%,0);
  transition:transform 1.15s var(--ease);transition-delay:var(--d,0ms);will-change:transform;}
.sec-root [data-reveal="mask"].is-in>span{transform:none;}
/* statement row reveal — the quote un-wipes upward, its parts arriving behind
   it. The trigger has to sit on the ROW, not the quote: an element clipped to
   zero height reports zero intersection, so observing it would deadlock. */
.sec-root [data-reveal="row"]{opacity:1;transform:none;transition:none;}
.sec-root [data-reveal="row"] .sec-st-quote{
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  transition:-webkit-clip-path 1.25s var(--ease),clip-path 1.25s var(--ease);}
.sec-root [data-reveal="row"].is-in .sec-st-quote{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}
.sec-root [data-reveal="row"] .sec-st-quote>*{opacity:0;transform:translate3d(0,32px,0);
  transition:opacity .85s var(--ease),transform .95s var(--ease);}
.sec-root [data-reveal="row"].is-in .sec-st-quote>*{opacity:1;transform:none;}
.sec-root [data-reveal="row"].is-in .sec-st-quote>*:nth-child(1){transition-delay:.22s}
.sec-root [data-reveal="row"].is-in .sec-st-quote>*:nth-child(2){transition-delay:.34s}
.sec-root [data-reveal="row"].is-in .sec-st-quote>*:nth-child(3){transition-delay:.46s}
.sec-root [data-reveal="row"] .sec-st-index{opacity:0;transition:opacity 1.1s var(--ease);}
.sec-root [data-reveal="row"].is-in .sec-st-index{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .sec-root [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;
    -webkit-clip-path:none !important;clip-path:none !important;}
  .sec-root [data-reveal="mask"]>span{transform:none !important;}
  .sec-root [data-reveal="row"] .sec-st-quote,
  .sec-root [data-reveal="row"] .sec-st-quote>*,
  .sec-root [data-reveal="row"] .sec-st-index{opacity:1 !important;transform:none !important;
    -webkit-clip-path:none !important;clip-path:none !important;}
}

/* ---------- ACT 0 — the intro, self-playing ---------- */
/* This act runs on its own clock, not on scroll: the mark lands, holds and
   clears, then the title takes its place and stays put as the resting state
   of the screen. Everything below this section is still scroll-driven. */
.sec-intro{position:relative;height:100svh;z-index:2;}
.sec-intro-pin{position:relative;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;}

.sec-intro-logo{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
  position:relative;z-index:3;opacity:0;will-change:transform,opacity,filter;
  animation:secLogoBeat 4.2s var(--ease) .25s both;}
.sec-intro-logo img{width:min(430px,64vw);height:auto;display:block;
  filter:drop-shadow(0 0 48px rgba(0,194,255,.45));}
@keyframes secLogoBeat{
  0%  {opacity:0;transform:translate3d(0,46px,0) scale(.84);filter:blur(16px)}
  20% {opacity:1;transform:none;filter:blur(0)}
  58% {opacity:1;transform:none;filter:blur(0)}
  100%{opacity:0;transform:translate3d(0,-90px,0) scale(1.22);filter:blur(20px)}
}

.sec-intro-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1120px,88vw);text-align:center;
  z-index:3;opacity:0;pointer-events:none;will-change:transform,opacity,filter;
  animation:secTitleBeat 1.2s var(--ease) 3.95s both;}
.sec-intro-title span{display:block;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(.6rem,1.1vw,.76rem);letter-spacing:.44em;text-transform:uppercase;
  color:var(--cy2);padding-left:.44em;margin-bottom:clamp(20px,2.6vw,30px);}
.sec-intro-title h2{font-size:clamp(2.3rem,6.4vw,5.3rem);line-height:1.06;}
.sec-intro-title i{display:block;width:clamp(64px,9vw,120px);height:1px;margin:clamp(26px,3.4vw,40px) auto 0;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);}
@keyframes secTitleBeat{
  from{opacity:0;transform:translate(-50%,calc(-50% + 52px)) scale(.94);filter:blur(12px)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}

/* rings that open around the mark as it lands, and leave with it */
.sec-intro-ring{position:absolute;left:50%;top:50%;width:min(720px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.5);border-radius:50%;opacity:0;
  border:1px solid rgba(90,217,255,.16);pointer-events:none;z-index:2;
  animation:secRingBeat 4.2s var(--ease) .25s both;}
.sec-intro-ring::after{content:"";position:absolute;inset:10%;border-radius:50%;
  border:1px dashed rgba(163,230,53,.16);animation:secSpin 40s linear infinite;}
.sec-intro-ring::before{content:"";position:absolute;inset:26%;border-radius:50%;
  border:1px solid rgba(90,217,255,.1);animation:secSpin 24s linear infinite reverse;}
@keyframes secRingBeat{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.5)}
  20% {opacity:.9;transform:translate(-50%,-50%) scale(1.06)}
  58% {opacity:.9;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@keyframes secSpin{to{transform:rotate(360deg)}}

.sec-intro-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--dim);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:0;
  animation:secCueIn .9s var(--ease) 5s both;}
.sec-intro-cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,transparent,rgba(90,217,255,.55));}
@keyframes secCueIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){
  /* no timeline: both beats simply sit on the page, stacked */
  .sec-intro,.sec-intro-pin{height:auto;}
  .sec-intro-pin{flex-direction:column;gap:clamp(70px,12vw,140px);padding:clamp(80px,12vw,150px) 0;}
  .sec-intro-logo,.sec-intro-title{animation:none !important;opacity:1 !important;
    filter:none !important;transform:none !important;}
  .sec-intro-title{position:relative;left:auto;top:auto;}
  .sec-intro-ring,.sec-intro-cue{display:none;}
}

/* ---------- ACT 1 — SERVICES, pinned neural chapter ---------- */
.sec-stage{position:relative;height:700vh;z-index:2;}
.sec-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
.sec-pin-inner{width:min(1220px,90%);margin:0 auto;align-self:stretch;height:100%;display:grid;
  grid-template-columns:1fr minmax(330px,430px);gap:36px;align-items:center;}
.sec-ghostnum{align-self:end;padding-bottom:8vh;white-space:nowrap;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(5rem,13vw,11.5rem);font-weight:700;line-height:.82;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(90,217,255,.22);user-select:none;}
.sec-ghostnum sup{font-size:.19em;-webkit-text-stroke:1px rgba(90,217,255,.32);vertical-align:super;letter-spacing:0;}
.sec-panels{position:relative;min-height:400px;}
/* panels arrive from the right and leave to the left, so the chapter reads
   as a reel being pulled through the frame rather than a crossfade */
.sec-panel{position:absolute;inset:0;opacity:0;transform:translate3d(84px,0,0);pointer-events:none;
  transition:opacity .5s var(--ease),transform .75s var(--ease);
  padding:34px 34px 32px;border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(17,24,39,.86),rgba(11,15,20,.78));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
.sec-panel.is-out{opacity:0;transform:translate3d(-84px,0,0);}
.sec-panel.is-pre{transition:none;transform:translate3d(84px,0,0);}
.sec-panel.is-on{opacity:1;transform:none;pointer-events:auto;}
/* the rows inside cascade in just behind the panel itself */
.sec-panel>*{opacity:0;transform:translate3d(30px,0,0);
  transition:opacity .5s var(--ease),transform .62s var(--ease);}
.sec-panel.is-on>*{opacity:1;transform:none;}
.sec-panel.is-on>*:nth-child(1){transition-delay:.12s}
.sec-panel.is-on>*:nth-child(2){transition-delay:.18s}
.sec-panel.is-on>*:nth-child(3){transition-delay:.24s}
.sec-panel.is-on>*:nth-child(4){transition-delay:.30s}
.sec-panel.is-on>*:nth-child(5){transition-delay:.36s}
.sec-panel .tag{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lm);font-weight:700;margin-bottom:16px;}
.sec-panel .tag i{width:22px;height:1px;background:var(--lm);display:block;}
.sec-panel h3{font-size:clamp(1.55rem,2.6vw,2.1rem);margin-bottom:14px;}
.sec-panel p{color:#b6c2d1;font-size:.98rem;}
.sec-panel ul{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;}
.sec-panel li{font-size:.77rem;color:#9fb0c2;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);}
.sec-panel .go{display:inline-flex;align-items:center;gap:9px;color:var(--cy2);font-weight:700;font-size:.9rem;transition:gap .3s var(--ease);}
.sec-panel .go:hover{gap:16px;}
.sec-labels{position:fixed;inset:0;z-index:1;pointer-events:none;}
.sec-nodelabel{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(206,235,250,.9);opacity:0;
  padding:5px 11px;border-radius:999px;border:1px solid rgba(90,217,255,.22);background:rgba(8,14,20,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);will-change:transform,opacity;}

/* ---------- ACT 2 — hero ---------- */
.sec-hero{min-height:100svh;display:flex;align-items:center;position:relative;padding:110px 0 120px;}
.sec-eyebrow{display:inline-flex;align-items:center;gap:11px;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(0,194,255,.28);background:rgba(0,194,255,.07);color:var(--cy2);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.sec-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--lm);box-shadow:0 0 10px var(--lm);
  animation:secPulse 2.4s ease-in-out infinite;}
@keyframes secPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.sec-h1{font-size:clamp(2.85rem,7.4vw,6.2rem);line-height:1.06;margin:30px 0 34px;max-width:15ch;}
.sec-h1 .w{display:inline-block;opacity:0;transform:translate3d(0,.42em,0);
  transition:opacity .85s var(--ease),transform 1.05s var(--ease);
  transition-delay:calc(var(--i,0)*85ms);will-change:transform,opacity;}
.sec-h1.is-in .w{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.sec-h1 .w{opacity:1;transform:none;transition:none;}}
.sec-grad{background:linear-gradient(100deg,var(--cy2) 0%,#8FE9FF 38%,var(--lm) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sec-lede{color:#c3cfdd;font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch;}
.sec-hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px;}
.sec-scrollcue{position:absolute;right:4vw;bottom:26px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dim);
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;}
.sec-scrollcue i{display:block;width:1px;height:52px;background:linear-gradient(180deg,transparent,rgba(90,217,255,.5));position:relative;overflow:hidden;}
.sec-scrollcue i::after{content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--lm);animation:secCue 2.2s ease-in-out infinite;}
@keyframes secCue{0%{transform:translateY(0)}70%,100%{transform:translateY(104px)}}

/* ---------- ACT 3 — stat ribbon ---------- */
.sec-ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,12,16,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;z-index:2;}
.sec-ribbon-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.sec-stat{padding:36px 24px;text-align:center;border-left:1px solid var(--line);}
.sec-stat:first-child{border-left:0;}
.sec-stat b{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.85rem,3.3vw,2.6rem);color:var(--ink);
  display:block;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s;}
.sec-stat.is-counting b{color:var(--lm);}
.sec-stat span{color:var(--mut);font-size:.85rem;}

/* ---------- section heading ---------- */
.sec-head{max-width:840px;}
.sec-head.center{margin:0 auto;text-align:center;}
.sec-kicker{display:inline-block;color:var(--cy);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:20px;}
.sec-head h2{font-size:clamp(2.05rem,5.2vw,4rem);}
.sec-head p{color:var(--mut);margin-top:20px;font-size:1.03rem;max-width:64ch;}
.sec-head.center p{margin-left:auto;margin-right:auto;}

/* ---------- ACT 4 — WHY, the reel ---------- */
/* A pinned stage where each reason is a scene that dissolves into the next.
   `overflow-x:clip` rather than `overflow:hidden`: hidden would make this box
   the sticky element's scroll container and silently kill the pin.
   Only opacity and transform move — no filter, no backdrop-filter — so every
   frame stays on the compositor. */
.sec-reel-sect{position:relative;z-index:2;overflow-x:clip;padding:0;}
.sec-reel-intro{padding:clamp(90px,11vw,150px) 0 clamp(36px,5vw,60px);}

.sec-reel-stage{position:relative;padding-bottom:clamp(60px,9vw,110px);}
.sec-reel.is-scrub .sec-reel-stage{padding-bottom:0;}
.sec-reel-pin{position:relative;}
.sec-reel.is-scrub .sec-reel-pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.sec-reel-pin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 46%,rgba(0,194,255,.11),transparent 70%);}

.sec-reel-scenes{position:relative;height:100%;width:min(1220px,90%);margin:0 auto;}
.sec-reel-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(.9rem,1.8vw,1.5rem);
  padding:clamp(2.4rem,6vw,3.6rem) 0;will-change:transform,opacity;}
.sec-reel.is-scrub .sec-reel-scene{position:absolute;inset:0;padding:0;opacity:0;}
/* the first scene is lit before the scrub takes over */
.sec-reel.is-scrub .sec-reel-scene:first-child{opacity:1;}
.sec-reel:not(.is-scrub) .sec-reel-scene + .sec-reel-scene{border-top:1px solid var(--line);}

.sec-reel-index{font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;color:var(--cy2);}
.sec-reel-scene h3{font-size:clamp(1.9rem,5.2vw,4.1rem);max-width:16ch;}
.sec-reel-scene p{color:#c2cfde;font-size:clamp(1.02rem,1.9vw,1.42rem);line-height:1.5;
  max-width:44ch;margin:0 auto;text-wrap:balance;}
.sec-reel-meta{display:flex;flex-direction:column;gap:.4rem;margin-top:clamp(1.2rem,2.6vw,2rem);}
.sec-reel-meta strong{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:700;
  letter-spacing:-.01em;color:var(--lm);}
.sec-reel-meta span{font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);}

/* numbered rail tracking position down the left edge */
.sec-reel-rail{position:absolute;left:clamp(1.5rem,4vw,3rem);top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:.9rem;pointer-events:none;}
.sec-reel:not(.is-scrub) .sec-reel-rail{display:none;}
.sec-reel-tick{display:flex;align-items:center;gap:.6rem;font-family:'Space Grotesk',sans-serif;
  font-size:.62rem;font-weight:600;letter-spacing:.2em;color:rgba(248,254,254,.3);
  transition:color .45s var(--ease);}
.sec-reel-tick::before{content:"";width:18px;height:1px;background:currentColor;
  transition:width .45s var(--ease),background .45s var(--ease);}
.sec-reel-tick.is-on{color:var(--cy2);}
.sec-reel-tick.is-on::before{width:38px;background:var(--cy);box-shadow:0 0 10px var(--cy);}

@media (prefers-reduced-motion:reduce){
  .sec-reel-scene{opacity:1 !important;transform:none !important;}
}

/* ---------- ACT 5 — PROOF, the statement spreads ---------- */
.sec-proof{position:relative;z-index:2;overflow:hidden;padding:clamp(90px,10vw,150px) 0;}
.sec-st-head{position:relative;}
/* sits on the kicker's baseline, top-right of the spread — down at the head's
   bottom edge it would crowd the first statement */
.sec-st-note{position:absolute;right:0;top:.15rem;font-size:.78rem;letter-spacing:.08em;color:var(--dim);}
.sec-st-note strong{color:var(--ink);font-weight:600;}
.sec-st-heading{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,7vw,6rem);font-weight:700;
  line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 clamp(3.5rem,8vw,7rem);}
.sec-st-rows{display:flex;flex-direction:column;gap:clamp(4.5rem,11vw,9rem);}
.sec-st-row{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:center;}
.sec-st-index{grid-column:1/span 4;grid-row:1;font-family:'Space Grotesk',sans-serif;
  font-size:clamp(3.2rem,8vw,7rem);font-weight:700;line-height:.9;letter-spacing:.02em;
  color:rgba(248,254,254,.11);pointer-events:none;
  transform:translate3d(0,var(--py,0px),0);will-change:transform;}
.sec-st-quote{grid-column:3/span 9;grid-row:1;z-index:1;
  transform:translate3d(0,var(--py,0px),0);will-change:transform;}
.sec-st-row--flip .sec-st-index{grid-column:9/span 4;text-align:right;}
.sec-st-row--flip .sec-st-quote{grid-column:1/span 9;}
.sec-st-quote .stars{display:block;color:var(--lm);letter-spacing:.42em;font-size:.82rem;margin-bottom:1.3rem;}
.sec-st-quote p{font-size:clamp(1.15rem,2vw,1.72rem);line-height:1.5;letter-spacing:-.005em;color:#dce6f0;}
.sec-st-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin-top:1.7rem;
  padding-top:1.1rem;border-top:1px solid var(--line);max-width:44ch;}
.sec-st-who strong{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--cy2);}
.sec-st-who span{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}

/* ---------- faq ---------- */
.sec-faq{max-width:880px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px;}
.sec-q{border:1px solid var(--line);border-radius:18px;background:rgba(11,16,22,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;transition:border-color .4s,background .4s;}
.sec-q.is-open{border-color:rgba(0,194,255,.35);background:rgba(0,194,255,.06);}
.sec-q>button{all:unset;cursor:pointer;display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;
  gap:18px;padding:22px 26px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.01rem;transition:color .3s;}
.sec-q>button:hover{color:var(--cy2);}
.sec-q .pm{width:30px;height:30px;min-width:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:var(--mut);
  transition:transform .45s var(--ease),color .3s,border-color .3s,background .3s;}
.sec-q.is-open .pm{transform:rotate(135deg);color:var(--cy2);border-color:rgba(0,194,255,.5);background:rgba(0,194,255,.1);}
.sec-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.sec-q.is-open .sec-a{grid-template-rows:1fr;}
.sec-a>div{overflow:hidden;}
.sec-a p{color:var(--mut);padding:0 26px 24px;font-size:.95rem;}

/* ---------- cta ---------- */
.sec-cta{position:relative;padding:clamp(56px,8vw,88px) clamp(28px,6vw,76px);border-radius:34px;text-align:center;overflow:hidden;
  border:1px solid rgba(0,194,255,.2);background:linear-gradient(150deg,rgba(0,194,255,.16),rgba(163,230,53,.06)),#0E141C;
  box-shadow:0 40px 90px rgba(0,0,0,.5);}
.sec-cta .blob{position:absolute;width:520px;height:520px;border-radius:50%;top:-260px;right:-140px;
  background:radial-gradient(circle,rgba(0,194,255,.35),transparent 68%);filter:blur(30px);}
.sec-cta .mesh{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);}
.sec-cta .orbit{position:absolute;left:50%;top:50%;width:min(880px,120%);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(90,217,255,.14);animation:secSpin 60s linear infinite;pointer-events:none;}
.sec-cta .orbit::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--lm);box-shadow:0 0 16px var(--lm);}
@media (prefers-reduced-motion:reduce){.sec-cta .orbit{animation:none;}}
.sec-cta h2{font-size:clamp(2.05rem,5vw,3.8rem);position:relative;z-index:2;}
.sec-cta p{color:#d3e0ec;max-width:60ch;margin:20px auto 34px;position:relative;z-index:2;}
.sec-cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;}


/* ---------- contact form ---------- */
.sec-cta-head{position:relative;z-index:2;}
.sec-form{position:relative;z-index:2;text-align:left;width:min(860px,100%);
  margin:clamp(34px,5vw,50px) auto 0;}
.sec-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);}
.sec-fld{display:flex;flex-direction:column;gap:8px;min-width:0;}
.sec-fld--wide{grid-column:1/-1;}
/* the consent row is also a <label> inside a field, so it has to be excluded
   or it inherits the uppercase key styling meant for the field captions */
.sec-fld label:not(.sec-consent){font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);}
.sec-fld label:not(.sec-consent) b{color:var(--lm);}
.sec-fld input,.sec-fld select,.sec-fld textarea{
  font-family:inherit;font-size:.97rem;color:var(--ink);width:100%;
  background:rgba(8,13,19,.62);border:1px solid rgba(255,255,255,.13);border-radius:14px;
  padding:14px 16px;outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s;}
.sec-fld textarea{resize:vertical;min-height:140px;line-height:1.6;}
.sec-fld select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235AD9FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;}
/* the popup list is drawn by the OS - without this it renders white on white */
.sec-fld select option{background:#0E141C;color:#F8FAFC;}
.sec-fld input::placeholder,.sec-fld textarea::placeholder{color:#5C6C7E;}
.sec-fld input:focus,.sec-fld select:focus,.sec-fld textarea:focus{
  border-color:rgba(0,194,255,.6);background:rgba(0,194,255,.07);
  box-shadow:0 0 0 3px rgba(0,194,255,.15);}
.sec-fld.is-bad input,.sec-fld.is-bad select,.sec-fld.is-bad textarea{border-color:rgba(255,120,120,.65);}
.sec-err{font-size:.75rem;color:#FF9B9B;min-height:1.1em;line-height:1.2;}
.sec-consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:.86rem;color:var(--mut);line-height:1.5;}
.sec-consent input{width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:var(--cy);cursor:pointer;}
.sec-consent a{color:var(--cy2);text-decoration:underline;}
.sec-form-foot{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px;}
.sec-form-foot .sec-btn{border:0;cursor:pointer;font-family:inherit;}
.sec-form-foot .sec-btn[disabled]{opacity:.6;cursor:progress;}
.sec-status{font-size:.9rem;color:var(--mut);flex:1 1 16rem;min-width:0;}
.sec-status a{color:var(--cy2);}
.sec-status.is-ok{color:var(--lm);}
.sec-status.is-bad{color:#FF9B9B;}
/* honeypot - a real visitor never sees or fills this */
.sec-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:720px){.sec-form-grid{grid-template-columns:1fr;}}

/* ---------- ACT 7 — footer, marquee wordmark ---------- */
.sec-foot{position:relative;z-index:2;overflow:hidden;background:var(--bg2);
  border-top:2px solid var(--cy);padding-top:clamp(2.5rem,5vw,4rem);}
.sec-foot-ghost{display:block;padding-left:clamp(1.5rem,5vw,3.5rem);
  font-family:'Space Grotesk',sans-serif;font-size:clamp(3.2rem,13vw,11rem);font-weight:700;
  line-height:.92;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);opacity:.09;padding-bottom:clamp(1.5rem,3vw,2.5rem);
  pointer-events:none;will-change:transform;transform:translateX(6%);}
.sec-foot-grid{display:grid;grid-template-columns:minmax(13rem,19rem) 1fr;
  gap:clamp(1.1rem,2.2vw,1.8rem) clamp(2rem,5vw,4rem);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem);}
.sec-foot-brand{grid-column:1;grid-row:1/span 3;}
.sec-foot-brand img{width:min(160px,100%);height:auto;display:block;margin-bottom:1rem;}
.sec-foot-brand p{font-size:.86rem;color:var(--mut);max-width:26rem;}
.sec-foot-col{grid-column:2;display:flex;align-items:baseline;gap:.35rem .9rem;
  padding-bottom:clamp(.8rem,1.6vw,1.1rem);border-bottom:1px solid var(--line);}
.sec-foot-col h4{flex:0 0 7.5rem;font-family:'Space Grotesk',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--cy);}
/* the links live in their own box beside the key, so a run that wraps starts
   its second line under the first link instead of back at the key column */
.sec-foot-run{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .9rem;}
.sec-foot-run a,.sec-foot-run span{position:relative;font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
/* the dot trails each item rather than leading the next one — a run that
   wraps then starts its new line on a word instead of an orphaned separator */
.sec-foot-run>a::after,.sec-foot-run>span::after{
  content:"\00B7";position:absolute;right:-.55rem;color:var(--cy);opacity:.5;}
.sec-foot-run>a:last-child::after,.sec-foot-run>span:last-child::after{content:none;}
.sec-foot-run a{transition:color .3s;}
.sec-foot-run a:hover{color:var(--cy2);}
.sec-foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:1.3rem 0 1.6rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.sec-foot-bottom a:hover{color:var(--cy2);}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .sec-pin-inner{grid-template-columns:1fr;align-content:end;}
  .sec-ghostnum{display:none;}
  .sec-pin{align-items:flex-end;padding-bottom:6vh;}
  .sec-panels{min-height:360px;}
  .sec-stage{height:600vh;}
  .sec-nav-links{display:none;}
}
@media(max-width:900px){
  .sec-st-row{display:block;}
  .sec-st-index{display:block;font-size:clamp(2.6rem,13vw,4.2rem);margin-bottom:.35rem;text-align:left;}
  .sec-st-row--flip .sec-st-index{text-align:left;}
  .sec-st-quote p{font-size:clamp(1.08rem,4.4vw,1.4rem);}
  .sec-st-rows{gap:clamp(3.2rem,12vw,5rem);}
  .sec-st-note{display:none;}
  .sec-foot-grid{display:block;}
  .sec-foot-brand{margin-bottom:2rem;}
  .sec-foot-col{flex-direction:column;gap:.5rem;margin-bottom:1.6rem;}
  .sec-foot-col h4{flex:none;margin-bottom:.3rem;}
  .sec-foot-run{flex-direction:column;gap:.5rem;}
  .sec-foot-run>*::after{content:none !important;}
  .sec-foot-bottom{justify-content:center;text-align:center;}
}
@media(max-width:720px){
  .sec-ribbon-grid{grid-template-columns:1fr 1fr;}
  .sec-stat:nth-child(3){border-left:0;}
  .sec-stat:nth-child(n+3){border-top:1px solid var(--line);}
  .sec-panel{padding:26px 24px;}
  .sec-nodelabel{display:none;}
  /* the deck reads as an ordinary stack once there is no room to pin */
  .sec-intro{height:150vh;}
}