/* ============================================================================
   HELIX — autonomous micro-drone launch
   Palette: near-black ground, off-white ink, violet→magenta accent,
   plus a lavender-white inverted chapter.
   ========================================================================== */

/* ------------------------------ tokens ---------------------------------- */
:root{
  --ground:      #080809;
  --ground-lift: #0e0e12;
  --light:       #edebf5;

  --ink:         #f2f0f7;         /* animated on inversion */
  --ink-dim:     rgba(242,240,247,.58);
  --ink-faint:   rgba(242,240,247,.30);
  --hairline:    rgba(242,240,247,.14);
  --cursor-ink:  #f2f0f7;
  --scrim:       rgba(8,8,9,.92);   /* animated on inversion */

  --a1:#7b5cff;
  --a2:#ff3dcb;
  --accent: linear-gradient(120deg, var(--a1), var(--a2));

  --pad: clamp(1rem, 3.4vw, 3.25rem);
  --rail-w: clamp(2.6rem, 4.4vw, 4.5rem);

  --display:'Archivo','Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --sans:'Space Grotesk','Helvetica Neue',Arial,sans-serif;

  --e-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ground);
  scrollbar-width:thin;
  scrollbar-color:rgba(140,130,160,.35) transparent;
}
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(140,130,160,.35); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,61,203,.55); }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.95rem,1.02vw,1.06rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:2px solid var(--a2);
  outline-offset:3px;
  border-radius:2px;
}

main{ position:relative; z-index:2; }
section{ position:relative; }

/* helpers ------------------------------------------------------------- */
.tag,.chapter__num,.hud,.status,.rail,.legal,.hero__scroll{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}

.chapter{ position:relative; z-index:4; max-width:min(46rem,90vw); }
.chapter--center{ margin-inline:auto; text-align:center; }
.chapter__num{
  display:block; color:var(--a2); margin-bottom:1.1rem;
  font-size:.62rem; letter-spacing:.24em;
}
.chapter__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem,7.2vw,6.4rem);
  line-height:.92;
  letter-spacing:-.035em;
  font-stretch:112%;
}
.chapter__title em{
  font-style:normal;
  background:var(--accent);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transform:skewX(-9deg); display:inline-block;
}
.chapter__lede{
  margin-top:1.4rem; max-width:34rem; color:var(--ink-dim);
  font-size:clamp(.95rem,1.15vw,1.12rem); line-height:1.6;
}
.chapter--center .chapter__lede{ margin-inline:auto; }

/* ========================================================================
   PRELOADER
   ====================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--ground);
  display:grid; place-items:center;
  will-change:clip-path;
}
.preloader__inner{ width:min(30rem,74vw); text-align:center; }

.pre-orb{
  position:relative; width:6.5rem; height:6.5rem; margin:0 auto 2.2rem;
  border-radius:50%;
}
.pre-orb__fill{
  position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  transform:scale(.18); opacity:.9;
  filter:blur(2px);
  box-shadow:0 0 60px 10px rgba(123,92,255,.45), 0 0 120px 30px rgba(255,61,203,.22);
  will-change:transform;
}
.pre-orb__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(242,240,247,.16);
}
.pre-orb__ring::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(242,240,247,.07);
}

.pre-meta{ display:flex; justify-content:space-between; color:var(--ink-faint); margin-bottom:.7rem; }
.pre-meta__label{ font-size:.58rem; letter-spacing:.24em; }
.pre-meta__label--r{ color:var(--a2); }

.pre-count{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(3rem,9vw,5.5rem); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.pre-count i{ font-style:normal; font-size:.3em; vertical-align:.9em; color:var(--ink-faint); margin-left:.15em; }

.pre-bar{ height:1px; background:var(--hairline); margin-top:1.4rem; overflow:hidden; }
.pre-bar__fill{ display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }

.flash{
  position:fixed; inset:0; z-index:9500; background:#fff;
  opacity:0; pointer-events:none;
}

/* ========================================================================
   CURSOR
   ====================================================================== */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9800;
  pointer-events:none; border-radius:50%;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor{ width:6px; height:6px; background:var(--cursor-ink); margin:-3px 0 0 -3px; }
.cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid var(--cursor-ink);
  display:grid; place-items:center;
}
.cursor-ring__label{
  font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cursor-ink); opacity:0; white-space:nowrap;
}
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none; } }

/* ========================================================================
   INVERSION GROUND (fixed, wipes in for the light chapter)
   ====================================================================== */
.light-ground{
  position:fixed; inset:0; z-index:1;
  background:var(--light);
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;
  pointer-events:none;
  overflow:hidden;
}
.light-ground__media{ position:absolute; inset:-6%; opacity:.62; filter:saturate(.72) brightness(1.1); }
.light-ground__media img,.light-ground__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.light-ground__media video{ opacity:0; transition:opacity .5s ease; }
.light-ground__media video.is-ready{ opacity:1; }
.light-ground__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(237,235,245,.72) 0%, rgba(237,235,245,.34) 40%, rgba(237,235,245,.60) 100%),
    radial-gradient(70% 46% at 50% 22%, rgba(237,235,245,.86) 0%, rgba(237,235,245,0) 100%),
    radial-gradient(60% 40% at 32% 62%, rgba(237,235,245,.80) 0%, rgba(237,235,245,0) 100%);
}

/* ========================================================================
   HUD
   ====================================================================== */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.85rem,2vw,1.5rem) var(--pad);
  padding-right:calc(var(--rail-w) + .4rem);
  color:var(--ink);
  pointer-events:none;
  isolation:isolate;
}
.hud::before{  /* keeps the HUD legible over whatever scrolls under it */
  content:''; position:absolute; inset:-1px 0 auto 0; height:calc(100% + 1.6rem); z-index:-1;
  background:linear-gradient(180deg, var(--scrim) 0%, var(--scrim) 52%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud__mark{ display:inline-flex; align-items:center; gap:.55rem; letter-spacing:.28em; font-weight:600; }
.hud__mark svg{ width:1.15rem; height:1.15rem; color:var(--a2); }
.hud__nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); }
.hud__nav a{ position:relative; color:var(--ink); opacity:.72; transition:opacity .3s ease; }
.hud__nav a:hover{ opacity:1; }
.hud__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-.35rem; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--e-out);
}
.hud__nav a:hover::after{ transform:scaleX(1); }
.hud__cart{ display:inline-flex; align-items:center; gap:.45rem; opacity:1 !important; }
.hud__cart svg{ width:1rem; height:1rem; }
.hud__cart-count{
  font-style:normal; display:grid; place-items:center;
  min-width:1.15rem; height:1.15rem; padding:0 .3rem;
  border:1px solid currentColor; border-radius:1rem; font-size:.55rem;
}
@media (max-width:780px){
  .hud__nav a:not(.hud__cart){ display:none; }
  .hud__cart span{ display:none; }
}

/* right-edge tick rail --------------------------------------------------- */
.rail{
  position:fixed; top:0; right:0; bottom:0; z-index:190;
  width:var(--rail-w);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem;
  border-left:1px solid var(--hairline);
  color:var(--ink);
  pointer-events:none;
}
.rail__ticks{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; width:100%; padding-right:.9rem; }
.rail__tick{ height:1px; width:.55rem; background:currentColor; opacity:.22; transform-origin:100% 50%; }
.rail__tick.is-on{ opacity:1; width:1.35rem; background:var(--a2); }
.rail__thumb{
  position:absolute; right:0; width:2px; height:2.4rem; top:0;
  background:var(--accent);
  will-change:transform;
}
.rail__pct{
  position:absolute; top:calc(50% - 8.5rem); right:.55rem;
  writing-mode:vertical-rl; font-size:.55rem; letter-spacing:.24em; opacity:.5;
  font-variant-numeric:tabular-nums;
}
.rail__social{
  position:absolute; bottom:1.2rem; display:flex; flex-direction:column; gap:.85rem;
  pointer-events:auto;
}
.rail__social a{ font-size:.55rem; letter-spacing:.1em; opacity:.5; transition:opacity .3s, color .3s; }
.rail__social a:hover{ opacity:1; color:var(--a2); }
@media (max-width:640px){
  .rail__ticks,.rail__pct{ display:none; }
  .rail{ width:2.2rem; }
}

/* status line ------------------------------------------------------------ */
.status{
  position:fixed; left:var(--pad); bottom:clamp(.9rem,2vw,1.4rem); z-index:190;
  display:flex; align-items:center; gap:.6rem;
  color:var(--ink); opacity:.62;
  font-size:.56rem; letter-spacing:.2em;
  max-width:min(70vw,32rem);
  pointer-events:none;
  isolation:isolate;
}
.status::before{
  content:''; position:absolute; left:calc(var(--pad) * -1); right:-2rem;
  bottom:calc(clamp(.9rem,2vw,1.4rem) * -1); height:calc(100% + 2.4rem); z-index:-1;
  background:linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.status__dot{
  width:5px; height:5px; border-radius:50%; background:var(--a2); flex:none;
  animation:blip 2.4s infinite;
}
@keyframes blip{ 0%,72%{opacity:1} 80%{opacity:.15} 88%{opacity:1} 100%{opacity:1} }
.status__sec{ color:var(--a2); }
.status__msg{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:640px){ .status__msg,.status__sep{ display:none; } }

/* ========================================================================
   01 · HERO
   ====================================================================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:5.5rem var(--pad) 4.75rem;
  padding-right:calc(var(--rail-w) + var(--pad));
  overflow:hidden;
}
.hero__stage{
  position:relative;
  display:grid; place-items:center;
  min-height:min(50svh,26rem);
  margin-inline:auto; width:100%;
}
.hero__glow{
  position:absolute; width:min(44rem,78vw); aspect-ratio:1.7;
  background:radial-gradient(ellipse at center, rgba(123,92,255,.22), rgba(255,61,203,.09) 40%, transparent 66%);
  filter:blur(30px);
  z-index:0;
}

.ghost{ position:absolute; z-index:1; inset:0; display:grid; place-items:center; margin:0; }
.ghost__word{
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:clamp(3.6rem,20vw,17rem);
  line-height:.82; letter-spacing:-.045em;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,240,247,.34);
  text-shadow:0 0 90px rgba(123,92,255,.16);
  white-space:nowrap;
  transform:skewX(-8deg);
  will-change:transform;
}

/* The product is the element that blends — anything that creates a stacking
   context ON THE BLENDED ELEMENT is fine, but a stacking context on an
   ANCESTOR isolates the group and the screen blend stops seeing the ghost. */
.hero__product{
  position:relative; z-index:2;
  width:min(58rem,92%,96svh);   /* 16:9 — the svh clamp keeps it off the fold */
  mix-blend-mode:screen;
  will-change:transform;
}
.hero__product::after{  /* under-glow puddle */
  content:''; position:absolute; left:50%; bottom:8%; translate:-50% 0;
  width:46%; height:14%;
  background:radial-gradient(ellipse at center, rgba(255,61,203,.55), transparent 70%);
  filter:blur(24px);
  z-index:-1;
}
.hero__still,.hero__video{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  /* crush the near-black plate so `screen` lifts only the product */
  filter:contrast(1.5) brightness(1.06) saturate(1.1);
  -webkit-mask-image:radial-gradient(ellipse 58% 66% at 50% 48%, #000 30%, rgba(0,0,0,0) 78%);
          mask-image:radial-gradient(ellipse 58% 66% at 50% 48%, #000 30%, rgba(0,0,0,0) 78%);
}
.hero__video{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero__video.is-ready{ opacity:1; }
.hero__streak{
  position:absolute; top:44%; right:52%; height:2px; width:60vw;
  background:linear-gradient(90deg, transparent, rgba(123,92,255,.0) 10%, rgba(255,61,203,.75) 90%, rgba(255,255,255,.9));
  filter:blur(1.5px);
  opacity:0; transform-origin:100% 50%;
}

.frontword{
  position:absolute; z-index:3;
  bottom:-3%;
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:clamp(2.2rem,8.6vw,7rem);
  line-height:.8; letter-spacing:-.05em;
  color:var(--ink);
  transform:skewX(-8deg);
  text-shadow:0 10px 60px rgba(8,8,9,.9);
  will-change:transform;
}

.hero__foot{
  position:relative; z-index:4;
  margin-top:clamp(1rem,2.6vw,2.2rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:1.5rem;
}
.hero__blurb{ display:flex; flex-direction:column; gap:.15rem; color:var(--ink-dim); max-width:19rem; font-size:.86rem; }
.hero__blurb span:first-child{ color:var(--ink); }

/* FLY orb ---------------------------------------------------------------- */
.orb{
  position:relative; justify-self:center;
  width:clamp(4.6rem,7vw,6.2rem); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  isolation:isolate;
}
.orb__core{
  position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 44px rgba(123,92,255,.55), 0 0 100px rgba(255,61,203,.32), inset 0 -8px 22px rgba(255,255,255,.28);
  transition:transform .6s var(--e-out);
}
.orb__pulse{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,61,203,.65);
  animation:orbPulse 2.6s var(--e-out) infinite;
}
@keyframes orbPulse{
  0%{ transform:scale(1); opacity:.8 }
  70%{ transform:scale(1.85); opacity:0 }
  100%{ transform:scale(1.85); opacity:0 }
}
.orb__label{
  position:relative; z-index:2; color:#fff; font-weight:700;
  letter-spacing:.24em; font-size:.72rem; text-indent:.24em;
}
.orb:hover .orb__core{ transform:scale(1.09); }

.legal{ display:flex; gap:1rem; justify-self:end; flex-wrap:wrap; justify-content:flex-end; color:var(--ink-faint); }
.legal a:hover{ color:var(--a2); }

.hero__scroll{
  position:absolute; left:50%; bottom:clamp(.9rem,2vw,1.4rem); translate:-50% 0;
  display:flex; align-items:center; gap:.55rem; color:var(--ink-faint);
}
.hero__scroll i{ display:block; width:1.6rem; height:1px; background:currentColor; animation:sweep 2.2s var(--e-out) infinite; transform-origin:0 50%; }
@keyframes sweep{ 0%{transform:scaleX(0)} 50%{transform:scaleX(1)} 100%{transform:scaleX(0); transform-origin:100% 50%} }

@media (max-width:820px){
  .hero__foot{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.6rem; }
  .hero__blurb{ align-items:center; }
  .legal{ justify-self:center; justify-content:center; }
  .hero__scroll{ display:none; }
}
@media (max-width:640px){
  /* the product has to bleed past the column or it reads as a postage stamp */
  .hero__stage{ min-height:min(44svh,20rem); }
  .hero__product{ width:min(150%,74svh); }
  .hero__still,.hero__video,.unfold__still,.unfold__video{
    -webkit-mask-image:radial-gradient(ellipse 64% 72% at 50% 49%, #000 34%, rgba(0,0,0,0) 84%);
            mask-image:radial-gradient(ellipse 64% 72% at 50% 49%, #000 34%, rgba(0,0,0,0) 84%);
  }
  .unfold__craft{ width:142%; margin-inline:-21%; }
  .ghost__word{ font-size:clamp(3.2rem,22vw,9rem); }
  .frontword{ font-size:clamp(2.2rem,13vw,5rem); bottom:2%; }
}

/* ========================================================================
   02 · UNFOLD (pinned scrub)
   ====================================================================== */
.unfold{ height:520vh; }
.unfold__pin{
  position:relative; height:100svh; overflow:hidden;
  padding:6rem var(--pad) 4rem;
  padding-right:calc(var(--rail-w) + var(--pad));
  display:flex; flex-direction:column;
}
.unfold__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(123,92,255,.10), transparent 70%),
    linear-gradient(180deg, var(--ground), var(--ground-lift) 60%, var(--ground));
}
.unfold .chapter{ position:relative; max-width:min(30rem,54vw); }
.unfold .chapter__title{ font-size:clamp(2.2rem,4.8vw,4.2rem); }
.unfold .chapter__lede{ font-size:.88rem; max-width:24rem; }

.unfold__stage{
  position:absolute; inset:0; display:grid; place-items:center;
  z-index:2; pointer-events:none;
}
.unfold__glow{
  position:absolute; width:min(46rem,86vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(123,92,255,.22), transparent 62%);
  filter:blur(20px);
}
.unfold__craft{
  position:relative; width:min(46rem,74vw);
  mix-blend-mode:screen;
  will-change:transform;
}
.unfold__still,.unfold__video{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  /* crush the near-black plate so `screen` lifts only the product */
  filter:contrast(1.55) brightness(1.08) saturate(1.12);
  -webkit-mask-image:radial-gradient(ellipse 56% 62% at 50% 50%, #000 26%, rgba(0,0,0,0) 74%);
          mask-image:radial-gradient(ellipse 56% 62% at 50% 50%, #000 26%, rgba(0,0,0,0) 74%);
}
.unfold__video{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.unfold__video.is-ready{ opacity:1; }

.leaders{
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  overflow:visible;
}
.leader{
  fill:none; stroke:var(--a2); stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;
  opacity:.62;
}

.callout{ position:absolute; margin:0; z-index:4; max-width:11.5rem; opacity:0; }
.callout figcaption{ display:flex; flex-direction:column; gap:.2rem; }
.callout b{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.callout span{ font-size:.68rem; color:var(--ink-dim); letter-spacing:.02em; line-height:1.45; }
.callout::before{ content:''; display:block; width:1.4rem; height:1px; background:var(--a2); margin-bottom:.5rem; }
.callout--a{ left:3.5%;  top:56%; }
.callout--b{ right:3.5%; top:19%; text-align:right; }
.callout--b::before{ margin-left:auto; }
.callout--c{ left:3.5%;  bottom:11%; }
.callout--d{ right:3.5%; bottom:19%; text-align:right; }
.callout--d::before{ margin-left:auto; }

.macro{
  position:absolute; right:calc(var(--rail-w) + var(--pad)); bottom:clamp(3rem,7vw,5rem);
  z-index:5; width:min(23rem,64vw); margin:0;
  opacity:0;
}
.macro img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:contrast(1.05) saturate(1.1); }
.macro__meta{ padding-top:.85rem; border-top:1px solid var(--hairline); margin-top:.85rem; }
.macro__meta .tag{ display:block; color:var(--a2); margin-bottom:.5rem; }
.macro__meta p{ font-size:.78rem; color:var(--ink-dim); line-height:1.5; }

@media (max-width:900px){
  .unfold{ height:auto; }
  .unfold__pin{ height:auto; min-height:auto; padding-block:clamp(5rem,14vw,8rem); display:block; }
  .unfold__stage{ position:relative; inset:auto; margin-top:2.5rem; min-height:44vw; }
  .unfold__craft{ width:100%; }
  .callout{ display:none; }
  .leaders{ display:none; }
  .macro{ position:relative; inset:auto; width:100%; margin-top:2.5rem; }
}

/* ========================================================================
   03 · EXPLODED
   ====================================================================== */
.explode{ height:420vh; background:var(--ground); }
.explode__pin{
  position:relative; height:100svh; overflow:hidden;
  padding:4.5rem var(--pad) 3.6rem;
  padding-right:calc(var(--rail-w) + var(--pad));
  display:flex; flex-direction:column; align-items:center;
}
.explode .chapter{ max-width:min(50rem,88vw); }
.explode .chapter__title{ font-size:clamp(1.8rem,3.9vw,3.3rem); text-wrap:balance; }
.explode__stage{
  position:relative; flex:1; min-height:0; width:min(37rem,62vw);
  display:grid; place-items:center;
  margin-top:.75rem;
}
.explode__glow{
  position:absolute; width:120%; aspect-ratio:1.3;
  background:radial-gradient(ellipse at center, rgba(255,61,203,.18), transparent 65%);
  filter:blur(24px);
}
.slice{
  position:absolute; top:50%; left:50%; width:100%;
  translate:-50% -50%;
  mix-blend-mode:screen;
  will-change:transform,filter;
}
/* Each slice is the same still masked to one horizontal band. The band edges
   are feathered, not clipped: at rest the five masks add back up to a single
   seamless image, and as they pull apart the cuts dissolve instead of showing
   the rectangular edge of the photographic plate. */
.slice img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:brightness(1.0) contrast(2.0) saturate(1.3);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.slice[data-slice="0"] img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 19%,transparent 30%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 19%,transparent 30%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.slice[data-slice="1"] img{
  -webkit-mask-image:linear-gradient(180deg,transparent 21%,#000 30%,#000 39%,transparent 48%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 21%,#000 30%,#000 39%,transparent 48%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.slice[data-slice="2"] img{
  -webkit-mask-image:linear-gradient(180deg,transparent 39%,#000 48%,#000 57%,transparent 66%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 39%,#000 48%,#000 57%,transparent 66%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.slice[data-slice="3"] img{
  -webkit-mask-image:linear-gradient(180deg,transparent 57%,#000 66%,#000 75%,transparent 84%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 57%,#000 66%,#000 75%,transparent 84%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.slice[data-slice="4"] img{
  -webkit-mask-image:linear-gradient(180deg,transparent 75%,#000 84%,#000 93%,transparent 100%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 75%,#000 84%,#000 93%,transparent 100%), linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}

.parts{
  position:relative; z-index:5; width:100%;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  border-top:1px solid var(--hairline);
  margin:1.5rem 0 -3.6rem;
  padding-bottom:3.6rem;
  background:var(--ground);
}
.parts::before{  /* scrim so an over-travelling slice never runs into the copy */
  content:''; position:absolute; left:0; right:0; bottom:100%; height:4.5rem;
  background:linear-gradient(to top, var(--ground), rgba(8,8,9,0));
  pointer-events:none;
}
.part{
  padding:1rem .9rem 0; position:relative;
  display:flex; flex-direction:column; gap:.25rem;
}
.part__rule{
  position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--a2); transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}
.part__id{ font-size:.56rem; letter-spacing:.22em; color:var(--a2); }
.part b{ font-size:.9rem; font-weight:600; letter-spacing:-.01em; }
.part__spec{ font-size:.68rem; color:var(--ink-dim); line-height:1.45; }

@media (max-width:900px){
  .explode{ height:auto; }
  .explode__pin{ height:auto; padding-block:clamp(5rem,14vw,8rem); }
  .explode__stage{ min-height:56vw; width:100%; margin-block:2.5rem; }
  .parts{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; margin-bottom:0; padding-bottom:0; }
  .part{ padding-inline:0; border-top:1px solid var(--hairline); }
}
@media (max-width:460px){ .parts{ grid-template-columns:1fr; } }

/* ========================================================================
   04 · TECHNOLOGY — the inversion
   ====================================================================== */
.tech{ height:560vh; }
.tech__pin{
  position:relative; height:100svh; overflow:hidden;
  padding:6rem var(--pad) 4rem;
  padding-right:calc(var(--rail-w) + var(--pad));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tech__head{ position:absolute; top:clamp(4.5rem,10vh,7rem); left:50%; translate:-50% 0; width:min(48rem,88vw); }
.tech .chapter__title{ font-size:clamp(1.9rem,4vw,3.3rem); text-wrap:balance; }

.claims{ position:relative; width:min(38rem,58vw); min-height:20rem; margin-right:auto; margin-left:0; }
.claim{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:1rem;
  opacity:0;
}
.claim__idx{ font-size:.58rem; letter-spacing:.24em; color:var(--a2); }
.claim h3{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:.98; letter-spacing:-.03em;
}
.claim p{ max-width:30rem; color:var(--ink-dim); font-size:clamp(.9rem,1.1vw,1.05rem); }
.claim__stat{
  margin-top:.4rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  display:inline-flex; align-items:baseline; gap:.55rem;
}
.claim__stat b{
  font-family:var(--display); font-size:1.9rem; font-weight:700; letter-spacing:-.02em;
  background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tech__plate{
  position:absolute; right:calc(var(--rail-w) + var(--pad)); bottom:clamp(3rem,8vh,6rem);
  width:min(20rem,44vw); margin:0;
  opacity:0;
  box-shadow:0 30px 80px rgba(60,40,90,.18);
}
.tech__plate img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

.tech__ticker{
  position:absolute; bottom:clamp(3.2rem,7vh,4.5rem); left:0; width:100%;
  display:flex; gap:2rem; white-space:nowrap; overflow:hidden;
  font-size:.58rem; letter-spacing:.26em; opacity:.4;
}
.tech__ticker span{ display:inline-block; will-change:transform; }

@media (max-width:900px){
  .tech{ height:auto; }
  .tech__pin{ height:auto; padding-block:clamp(6rem,16vw,9rem); align-items:flex-start; }
  .tech__head{ position:relative; top:auto; left:auto; translate:none; width:100%; text-align:left; }
  .tech__head .chapter__lede{ margin-inline:0; }
  .claims{ width:100%; min-height:0; margin-top:3rem; display:flex; flex-direction:column; gap:3.5rem; }
  .claim{ position:relative; inset:auto; }
  .tech__plate{ position:relative; inset:auto; width:100%; margin-top:3rem; }
  .tech__ticker{ position:relative; bottom:auto; margin-top:3rem; }
}

/* ========================================================================
   05 · FLIGHT
   ====================================================================== */
.flight{
  position:relative; min-height:100svh; z-index:3;
  background:var(--ground);
  padding:clamp(6rem,14vh,10rem) var(--pad);
  padding-right:calc(var(--rail-w) + var(--pad));
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.flight__media{ position:absolute; inset:0; }
.flight__media img{
  width:100%; height:120%; object-fit:cover; will-change:transform;
  position:absolute; top:-10%; left:0;
}
.flight__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,9,.62) 0%, rgba(8,8,9,.12) 32%, rgba(8,8,9,.86) 78%, var(--ground) 100%);
}
.flight__body{ position:relative; z-index:2; width:100%; }

.figures{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(2.5rem,7vh,5rem);
  border-top:1px solid var(--hairline);
}
.fig{ padding:1.4rem 1rem 0; position:relative; }
.fig::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--hairline);
}
.fig:first-child::after{ display:none; }
.fig dt{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--a2); }
.fig dd{
  margin:.5rem 0 .35rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(2.2rem,5.4vw,4.2rem); line-height:.95; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.fig dd i{ font-style:normal; font-size:.26em; letter-spacing:.06em; margin-left:.3em; color:var(--ink-dim); }
.fig p{ font-size:.68rem; color:var(--ink-faint); letter-spacing:.04em; }

@media (max-width:860px){
  .figures{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; }
  .fig{ padding-inline:0 1rem; }
  .fig:nth-child(3)::after{ display:none; }
  .fig:nth-child(odd){ padding-left:0; }
  .fig:nth-child(even){ padding-left:1.2rem; }
}

/* ========================================================================
   06 · SPECS
   ====================================================================== */
.specs{
  background:var(--ground); z-index:3;
  padding:clamp(6rem,14vh,10rem) var(--pad);
  padding-right:calc(var(--rail-w) + var(--pad));
}
.specs__grid{ display:grid; grid-template-columns:minmax(16rem,1fr) minmax(0,2fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.specs__sticky{ position:sticky; top:22vh; }
.specs__sticky .chapter__title{ font-size:clamp(2.4rem,5.4vw,4.6rem); }

.ghostbtn{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
  padding:.75rem 1.4rem; border:1px solid var(--hairline);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  transition:border-color .4s ease, color .4s ease, background .4s ease;
}
.ghostbtn:hover{ border-color:var(--a2); color:var(--a2); }

.specrow{
  display:grid; grid-template-columns:minmax(9rem,1.4fr) 1fr 1fr; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--hairline);
  font-size:clamp(.78rem,.95vw,.92rem);
  will-change:transform,opacity;
}
.specrow span:first-child{ color:var(--ink-dim); }
.specrow--head{
  border-bottom-color:var(--ink);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  padding-top:2.4rem; color:var(--ink);
}
.specrow--head span:first-child{ color:var(--a2); }
.specrow--head span:not(:first-child){ color:var(--ink-faint); }
.specrow:first-child{ padding-top:0; }

@media (max-width:900px){
  .specs__grid{ grid-template-columns:1fr; }
  .specs__sticky{ position:static; }
  .specrow{ grid-template-columns:1fr; gap:.15rem; padding:.9rem 0; }
  .specrow--head{ grid-template-columns:1fr; }
  .specrow--head span:not(:first-child){ display:none; }
  .specrow span:not(:first-child)::before{ content:attr(data-col); }
  .specrow span:nth-child(2)::before{ content:'ND-2 · '; color:var(--ink-faint); }
  .specrow span:nth-child(3)::before{ content:'PRO · '; color:var(--ink-faint); }
}

/* ========================================================================
   07 · ORDER
   ====================================================================== */
.order{
  background:var(--ground); z-index:3;
  padding:clamp(6rem,14vh,10rem) var(--pad);
  padding-right:calc(var(--rail-w) + var(--pad));
  text-align:center;
}
.tiers{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,2rem);
  max-width:66rem; margin:clamp(3rem,7vh,5rem) auto 0; text-align:left;
}
.tier{
  position:relative; isolation:isolate;
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:1.2rem;
  transition:border-color .5s var(--e-out), transform .5s var(--e-out);
  overflow:hidden;
}
.tier::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 60% at 50% 0%, rgba(123,92,255,.22), transparent 70%);
  opacity:0; transition:opacity .55s ease;
}
.tier::after{
  content:''; position:absolute; left:0; top:0; height:2px; width:100%; z-index:1;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--e-out);
}
.tier:hover,.tier:focus-visible{ border-color:rgba(242,240,247,.34); transform:translateY(-5px); }
.tier:hover::before,.tier:focus-visible::before{ opacity:1; }
.tier:hover::after,.tier:focus-visible::after{ transform:scaleX(1); }

.tier__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tier__name{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:.04em; }
.tier__badge{
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.3rem .6rem; border:1px solid var(--hairline); color:var(--ink-dim);
}
.tier__badge--hot{ border-color:transparent; background:var(--accent); color:#fff; }
.tier__price{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(2.6rem,5.4vw,4rem); line-height:1; letter-spacing:-.04em;
}
.tier__price i{ font-style:normal; font-size:.4em; vertical-align:.55em; margin-right:.1em; color:var(--ink-dim); }
.tier__list{ display:flex; flex-direction:column; gap:.55rem; font-size:.85rem; color:var(--ink-dim); }
.tier__list li{ padding-left:1.1rem; position:relative; }
.tier__list li::before{ content:''; position:absolute; left:0; top:.62em; width:.45rem; height:1px; background:var(--a2); }
.tier__cta{
  margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--hairline);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
}
.tier:hover .tier__cta span{ transform:translateX(4px); }
.tier__cta span{ display:inline-block; transition:transform .4s var(--e-out); }
.order__fine{ margin-top:2.5rem; font-size:.68rem; color:var(--ink-faint); max-width:36rem; margin-inline:auto; }

@media (max-width:760px){ .tiers{ grid-template-columns:1fr; } }

/* ========================================================================
   08 · FOOTER
   ====================================================================== */
.foot{
  background:var(--ground); z-index:3; position:relative;
  padding-bottom:clamp(4rem,10vh,7rem);
  border-top:1px solid var(--hairline);
}
.marquee{ overflow:hidden; padding:clamp(1.6rem,4vw,2.6rem) 0; border-bottom:1px solid var(--hairline); }
.marquee__track{ display:flex; gap:1.6rem; white-space:nowrap; will-change:transform; }
.marquee__track span{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(2rem,6.4vw,5rem); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(242,240,247,.28);
}
.marquee__track span:nth-child(2n){ -webkit-text-stroke:0; background:var(--accent); -webkit-background-clip:text; background-clip:text; }

.foot__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(3rem,7vw,5rem) var(--pad) clamp(2.5rem,6vw,4rem);
  padding-right:calc(var(--rail-w) + var(--pad));
}
.signup label{ display:block; font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2rem); font-weight:600; letter-spacing:-.02em; }
.signup__row{ display:flex; gap:.75rem; margin-top:1.4rem; flex-wrap:wrap; }
.signup input{
  flex:1 1 14rem; min-width:0;
  background:transparent; border:0; border-bottom:1px solid var(--hairline);
  color:var(--ink); font:inherit; padding:.7rem 0;
  transition:border-color .4s ease;
}
.signup input::placeholder{ color:var(--ink-faint); }
.signup input:focus{ outline:none; border-bottom-color:var(--a2); }
.signup button{
  border:0; background:var(--accent); color:#fff; font:inherit; font-weight:600;
  padding:.7rem 1.5rem; cursor:pointer;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:filter .3s ease;
}
.signup button:hover{ filter:brightness(1.15); }
.signup__note{ margin-top:.9rem; font-size:.7rem; color:var(--ink-faint); }
.signup__note.is-ok{ color:var(--a2); }

.foot__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.foot__links h3{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem; font-weight:500; }
.foot__links a{ display:block; padding:.28rem 0; font-size:.86rem; color:var(--ink-dim); transition:color .3s ease; }
.foot__links a:hover{ color:var(--a2); }

.foot__fine{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  padding:1.4rem var(--pad) 0;
  padding-right:calc(var(--rail-w) + var(--pad));
  border-top:1px solid var(--hairline);
  font-size:.6rem; letter-spacing:.12em; color:var(--ink-faint);
}

@media (max-width:760px){
  .foot__grid{ grid-template-columns:1fr; }
}

/* ========================================================================
   SPLIT-TYPE LINE MASKS
   ====================================================================== */
.split .line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.split .word{ display:inline-block; will-change:transform; }

/* ========================================================================
   STATIC LIGHT CHAPTER — used when the pin is collapsed (mobile / reduced)
   ====================================================================== */
.tech--static{
  --ink:#14111a;
  --ink-dim:rgba(20,17,26,.66);
  --ink-faint:rgba(20,17,26,.40);
  --hairline:rgba(20,17,26,.16);
  color:var(--ink);
  background:var(--light);
  z-index:3;
}
.tech--static .tech__pin{
  background:
    linear-gradient(180deg, rgba(237,235,245,.78), rgba(237,235,245,.40) 45%, rgba(237,235,245,.86)),
    url('/preset-sites/helix/assets/img/helix-glass-a.jpg') center/cover no-repeat;
  background-attachment:scroll, fixed;
}
.tech--static .claim,
.tech--static .tech__plate{ opacity:1 !important; }

/* ========================================================================
   REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  .orb__pulse,.status__dot,.hero__scroll i{ animation:none !important; }
  .hero__streak{ display:none; }
  .callout,.macro,.tech__plate,.claim{ opacity:1 !important; }
  .leader{ stroke-dashoffset:0 !important; }
  .part__rule{ transform:scaleX(1) !important; }
  .unfold,.explode,.tech{ height:auto !important; }
  .unfold__pin,.explode__pin,.tech__pin{ height:auto !important; display:block !important; padding-block:5rem; }
  .unfold__stage,.claims,.tech__head,.tech__plate,.macro,.tech__ticker,.callout{
    position:relative !important; inset:auto !important; translate:none !important;
  }
  .unfold__stage{
    display:flex !important; flex-direction:column; align-items:flex-start; gap:1.6rem;
    width:100% !important; margin-top:2.5rem;
  }
  .explode__stage{ width:min(36rem,90%) !important; min-height:46vw; margin-block:2.5rem; }
  .unfold__craft{ width:100% !important; }
  .callout{ max-width:none; text-align:left !important; }
  .callout::before{ margin-left:0 !important; }
  .leaders{ display:none !important; }
  .macro{ width:min(28rem,100%) !important; margin-top:2.5rem; }
  .tech__plate{ width:min(24rem,100%) !important; margin-top:2.5rem; }
  .tech__head,.tech__ticker{ width:100% !important; }
  .tech__ticker{ margin-top:2.5rem; }
  .claims{ display:flex; flex-direction:column; gap:3rem; width:100% !important; min-height:0; margin-top:2.5rem; }
  .claim{ position:relative; inset:auto; }
  .light-ground{ display:none; }
}