:root{
  color-scheme:dark;
  --void:#03050C; --deep:#070B1A; --panel:#0B1126;
  --line:rgba(160,190,255,.14); --line-2:rgba(160,190,255,.28);
  --ice:#EAF2FF; --mist:#9DACCF; --dim:#64709A;
  --teal:#44E3C6; --sky:#5BB8FF; --violet:#8B6CFF;
  --ok:#5BE3A8; --warn:#FFD27A; --bad:#FF8B7A;
  --grad:linear-gradient(100deg,var(--teal),var(--sky) 55%,var(--violet));
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--ice);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
p{margin:0;max-width:62ch}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.01em;line-height:.95;text-wrap:balance}
h1 i,h2 i,h3 i{font-family:var(--serif);font-style:italic;text-transform:none;font-weight:400;letter-spacing:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.br{color:var(--teal)}
.pill{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1em 1.6em;border-radius:999px;border:1px solid var(--line-2);color:var(--ice);background:rgba(10,16,40,.55);backdrop-filter:blur(6px);cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s;font-weight:500}
.pill:hover{border-color:var(--sky);box-shadow:0 0 0 1px rgba(91,184,255,.25),0 0 30px -6px rgba(139,108,255,.8);transform:translateY(-1px)}
.pill.solid{background:var(--ice);color:#050814;border-color:var(--ice)}
.pill.solid:hover{background:#fff}
.pill[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(3,5,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.menu{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.menu a{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mist)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ice)}
.menu .pill{padding:.7em 1.1em;color:#050814}
@media (max-width:820px){.menu a:not(.pill){display:none}}

/* sections */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,130px)}
.sec.tight{padding-top:0}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:start;margin-bottom:clamp(28px,4vw,48px)}
.sec-head .tag{padding-top:.9em}
.sec-head h2{font-size:clamp(2.6rem,6vw,5rem)}
.sec-head p{grid-column:2;color:var(--mist);margin-top:8px}
@media (max-width:640px){.sec-head{grid-template-columns:1fr}.sec-head p{grid-column:1}}
.lead{font-size:1.1rem;color:var(--mist)}
.fill{background:rgba(255,210,122,.14);color:var(--warn);border-bottom:1px dashed var(--warn);padding:0 .25em;border-radius:3px}

/* hero: three steps (fly, build, deliver) */
.hx{--ease:cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;background:radial-gradient(ellipse 55% 70% at 74% 42%,#0C1846 0%,rgba(7,11,26,.55) 48%,var(--void) 78%)}
.hx-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(160,190,255,.18) 1px,transparent 1.3px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 60% 65% at 72% 45%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 60% 65% at 72% 45%,#000 10%,transparent 72%)}
.hx::after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(transparent,var(--void));pointer-events:none}
.hx-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center;min-height:min(88vh,860px);padding-block:clamp(48px,7vw,88px) clamp(40px,5vw,64px)}
.hx-copy{display:grid;gap:22px;justify-items:start}
.hx h1{font-size:clamp(2.9rem,5vw,4.6rem)}
.hx-sub{color:var(--mist);font-size:1.08rem;max-width:42ch}
.hx-sub strong{color:var(--ice);font-weight:600}
.hx .ctas{display:flex;gap:10px;flex-wrap:wrap}
.hx-badge{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);text-decoration:none;padding:.15em 0;border-bottom:1px dashed var(--line-2);transition:color .2s,border-color .2s}
.hx-badge:hover{color:var(--ice);border-color:var(--warn)}
.hx-badge b{color:var(--warn);font-weight:500}
.hx-badge .sep{width:1px;height:1em;background:var(--line-2)}
.hx-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:hxpulse 2.4s infinite}
@keyframes hxpulse{0%{box-shadow:0 0 0 0 rgba(91,227,168,.55)}70%,100%{box-shadow:0 0 0 8px rgba(91,227,168,0)}}

.hx-stage{margin:0 calc(-1 * min(80px, max(0px, (100vw - 1180px) / 2))) 0 0;display:grid;gap:20px;min-width:0}
.hx-box{position:relative;aspect-ratio:4/3;container-type:inline-size;isolation:isolate}
.hx-box::before{content:"";position:absolute;inset:6% 2% 0;z-index:-1;background:radial-gradient(closest-side,rgba(91,184,255,.2),rgba(139,108,255,.08) 60%,transparent);filter:blur(24px)}
.hx-scr{position:absolute;inset:0;overflow:hidden;background:#03050C;transform-origin:0 0;clip-path:inset(0 0 0 0 round 18px);transition:transform .75s var(--ease),clip-path .75s var(--ease)}
.hx-scr::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none;transition:opacity .4s}
.hx-scr video{display:block;width:100%;height:100%;object-fit:cover;background:#03050C}
.hx-veil{position:absolute;inset:0;background:#03050C;opacity:0;pointer-events:none}
.dl .hx-scr{clip-path:inset(8.33% 0 8.33% 0 round 10px)}
.dl .hx-scr::after{opacity:0}

/* laptop */
.hx-lap{position:absolute;left:2.4%;top:6.9%;width:75.2%;height:64.2%;border-radius:1.9cqw 1.9cqw .5cqw .5cqw;background:linear-gradient(160deg,#151b33,#070a15 60%);box-shadow:inset 0 0 0 1px rgba(200,220,255,.16),inset 0 1px 0 rgba(255,255,255,.12),0 40px 70px -24px rgba(0,0,0,.95);opacity:0;transform:scale(1.05);transform-origin:45% 40%;transition:opacity .45s,transform .75s var(--ease)}
.hx-lap::before{content:"";position:absolute;left:50%;top:.55cqw;width:.55cqw;height:.55cqw;margin-left:-.27cqw;border-radius:50%;background:#1d2440}
.hx-lap .base{position:absolute;left:-4.5%;right:-4.4%;top:100%;height:1.9cqw;border-radius:0 0 1.6cqw 1.6cqw/0 0 1.1cqw 1.1cqw;background:linear-gradient(180deg,#3a4366 0%,#1a2038 35%,#0b0e1b 100%);box-shadow:0 18px 30px -12px rgba(0,0,0,.9)}
.hx-lap .base::after{content:"";position:absolute;left:43%;width:14%;top:0;height:.6cqw;border-radius:0 0 .7cqw .7cqw;background:rgba(0,0,0,.45)}
.dl .hx-lap{opacity:1;transform:none}
.dl .hx-scr{transform:translate(4%,3%) scale(.72)}

/* viewer chrome inside the laptop screen */
.hx-chrome{position:absolute;left:4%;top:9%;width:72%;height:7%;display:flex;align-items:center;justify-content:space-between;padding:0 1.3cqw;border-radius:7px 7px 0 0;background:linear-gradient(rgba(4,7,18,.94),rgba(4,7,18,.5));opacity:0;transition:opacity .3s}
.dl .hx-chrome{opacity:1;transition:opacity .45s .3s}
.hx-logo{display:none;align-items:center;gap:.6cqw;font:600 1.55cqw/1 var(--body);color:#fff;letter-spacing:.01em;white-space:nowrap}
.hx-logo .mk{width:2.1cqw;height:2.1cqw;flex:none}
.hx-chrome .hx-logo.b0{font:500 1.6cqw/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
[data-brand="0"] .hx-logo.b0,[data-brand="1"] .hx-logo.b1,[data-brand="2"] .hx-logo.b2{display:flex}
.dl .hx-chrome .hx-logo{animation:hxstamp .5s .62s var(--ease) both}
@keyframes hxstamp{from{opacity:0;transform:scale(1.5);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.hx-tools{display:flex;gap:.7cqw}
.hx-tools i{width:1.5cqw;height:1.5cqw;border-radius:.35cqw;background:rgba(255,255,255,.14)}
.hx-tools i.on{background:var(--teal);box-shadow:0 0 1cqw rgba(68,227,198,.7)}

/* glass panels shared by processing and files */
.hx-proc,.hx-files{position:absolute;border-radius:1.8cqw;background:rgba(6,10,26,.72);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(160,190,255,.22),0 2cqw 5cqw -1cqw rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}

/* processing: machines with turning gears */
.hx-proc{left:50%;top:52%;width:50%;padding:2.2cqw 2.4cqw 2.4cqw;transform:translate(-50%,-44%) scale(.94)}
.pr .hx-proc{opacity:1;transform:translate(-50%,-50%)}
.hx-proc .rigs{display:flex;justify-content:space-around;margin-bottom:1.8cqw;color:var(--sky)}
.hx-proc .rig{position:relative;display:grid;justify-items:center}
.hx-proc .pc{width:7.4cqw;height:6.2cqw;color:#7FB8FF}
.hx-proc .gear{width:4.4cqw;height:4.4cqw;color:var(--teal);margin-bottom:-.6cqw;filter:drop-shadow(0 0 .8cqw rgba(68,227,198,.6))}
.pr .hx-proc .gear{animation:hxspin 1.6s linear infinite}
.pr .hx-proc .gear.g2{animation-direction:reverse;animation-duration:1.2s;color:var(--sky)}
@keyframes hxspin{to{transform:rotate(360deg)}}
.hx-proc .pl{display:flex;justify-content:space-between;align-items:baseline;font:500 1.5cqw/1.2 var(--mono);color:var(--ice);letter-spacing:.04em;margin-bottom:1cqw}
.hx-proc .st{position:relative;display:block;height:1.3em;overflow:hidden;flex:1}
.hx-proc .st b{position:absolute;inset:0;font-weight:500;opacity:0;transform:translateY(60%);transition:opacity .25s,transform .35s var(--ease)}
.hx-proc .st b.on{opacity:1;transform:none}
.hx-proc .pct{color:var(--teal)}
.hx-proc .pb{height:.55cqw;border-radius:1cqw;background:rgba(160,190,255,.16);overflow:hidden}
.hx-proc .pb i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 1cqw rgba(91,184,255,.8)}

/* files delivered to the pilot */
.hx-files{left:3.5%;top:50%;width:43%;padding:1.8cqw 1.8cqw 1.4cqw;transform:translate(-6%,-50%) scale(.96)}
.fl .hx-files{opacity:1;transform:translate(0,-50%)}
.hx-files .fh{display:flex;justify-content:space-between;align-items:center;font:500 1.25cqw/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding-bottom:1.2cqw;margin-bottom:.6cqw;border-bottom:1px solid rgba(160,190,255,.18)}
.hx-files .fh b{font-weight:500;color:#050814;background:var(--ice);border-radius:2cqw;padding:.55cqw 1cqw;letter-spacing:.1em}
.hx-files ul{list-style:none;margin:0;padding:0;display:grid;gap:.3cqw}
.hx-files li{display:grid;grid-template-columns:2.6cqw 1fr auto 2cqw;align-items:center;gap:1cqw;padding:.75cqw .4cqw;font:500 1.6cqw/1.1 var(--body);color:var(--ice);opacity:0;transform:translateX(40%) scale(.9);filter:blur(4px)}
.hx-files li svg{width:2.4cqw;height:2.4cqw;color:var(--teal)}
.hx-files li em{font:400 1.2cqw/1 var(--mono);font-style:normal;color:var(--mist);letter-spacing:.06em}
.hx-files li i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--ok);transform:scale(0);position:relative}
.hx-files li i::after{content:"";position:absolute;left:34%;top:20%;width:24%;height:44%;border:solid #04150d;border-width:0 .28cqw .28cqw 0;transform:rotate(45deg)}
.fl .hx-files li{animation:hxfile .5s var(--ease) both}
.fl .hx-files li i{animation:hxtick .35s var(--ease) both}
.fl .hx-files li:nth-child(1),.fl .hx-files li:nth-child(1) i{animation-delay:.15s,.45s}
.fl .hx-files li:nth-child(2){animation-delay:.27s}.fl .hx-files li:nth-child(2) i{animation-delay:.57s}
.fl .hx-files li:nth-child(3){animation-delay:.39s}.fl .hx-files li:nth-child(3) i{animation-delay:.69s}
.fl .hx-files li:nth-child(4){animation-delay:.51s}.fl .hx-files li:nth-child(4) i{animation-delay:.81s}
.fl .hx-files li:nth-child(5){animation-delay:.63s}.fl .hx-files li:nth-child(5) i{animation-delay:.93s}
.fl .hx-files li:nth-child(1) i{animation-delay:.45s}
@keyframes hxfile{from{opacity:0;transform:translateX(60%) scale(.85);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes hxtick{from{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}

/* the logo card that whooshes onto the viewer */
.hx-brand{position:absolute;left:50%;top:46%;display:grid;justify-items:center;gap:1.6cqw;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;transition:opacity .3s,transform .5s var(--ease)}
.hx-brand .card{display:grid;place-items:center;padding:2.6cqw 3.4cqw;border-radius:2.2cqw;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(8,12,28,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 3cqw 6cqw -2cqw rgba(0,0,0,.8),0 0 6cqw -1cqw rgba(255,180,110,.35)}
.hx-brand .bc{display:none;align-items:center;gap:1.6cqw}
[data-brand="0"] .hx-brand .b0,[data-brand="1"] .hx-brand .b1,[data-brand="2"] .hx-brand .b2{display:flex}
.hx-brand .mk{width:6.6cqw;height:6.6cqw}
.hx-brand .wm{display:grid;gap:.5cqw}
.hx-brand .wm b{font:600 4.4cqw/1 var(--body);color:#fff;letter-spacing:-.01em;white-space:nowrap}
.hx-brand .b0 .wm b{font:500 5cqw/.9 var(--cond);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(90deg,#fff,#FFE2B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-brand .wm i{font:500 1.35cqw/1 var(--mono);font-style:normal;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,226,176,.85)}
.hx-brand .b1 .wm i{color:#FFB09E}.hx-brand .b2 .wm i{color:#DDF78E}
.hx-brand .cap{font:500 1.3cqw/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice);text-align:center;background:rgba(4,7,18,.78);border:1px solid rgba(160,190,255,.2);border-radius:3cqw;padding:.8cqw 1.4cqw}
.lg .hx-brand{opacity:1;transform:translate(-50%,-50%)}
.lg .hx-brand .card{animation:hxpop .55s var(--ease) both}
@keyframes hxpop{from{transform:scale(.6) rotate(-4deg);filter:blur(6px)}to{transform:none;filter:none}}
.lgf .hx-brand{animation:hxwhoosh .6s cubic-bezier(.7,0,.25,1) forwards}
.lgf .hx-brand .cap{opacity:0;transition:opacity .15s}
@keyframes hxwhoosh{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:none}
  45%{filter:blur(2px)}
  100%{transform:translate(calc(-50% - 37cqw),calc(-50% - 24.6cqw)) scale(.22);opacity:.0;filter:blur(1px)}}
.lgf 
.hx-streak{position:absolute;left:50%;top:44%;width:45cqw;height:.7cqw;margin-top:-.35cqw;border-radius:1cqw;transform-origin:0 50%;transform:rotate(213.7deg) scaleX(0);background:linear-gradient(90deg,rgba(255,200,130,0),rgba(255,214,150,.95));filter:blur(.3cqw);opacity:0;pointer-events:none}
.lgf .hx-streak{animation:hxstreak .62s cubic-bezier(.7,0,.25,1) forwards}
@keyframes hxstreak{0%{opacity:0;transform:rotate(213.7deg) scaleX(0)}25%{opacity:1}75%{opacity:.8;transform:rotate(213.7deg) scaleX(1)}100%{opacity:0;transform:rotate(213.7deg) scaleX(1)}}

/* pills under the laptop */
.hx-pills{position:absolute;left:4%;top:76%;display:grid;gap:1cqw;justify-items:start}
.hx-pills span{display:inline-flex;align-items:center;gap:.9cqw;font:500 1.35cqw/1 var(--mono);letter-spacing:.06em;color:var(--ice);background:rgba(6,10,26,.8);border:1px solid rgba(160,190,255,.25);border-radius:3cqw;padding:.9cqw 1.4cqw;opacity:0;transform:translateY(1cqw)}
.hx-pills i{font-style:normal;display:grid;place-items:center;width:2cqw;height:2cqw;border-radius:50%;background:var(--ok);color:#04150d;font-size:1.2cqw}
.hx-pills .p2 i{background:var(--warn);color:#2a1a00}
.dl .hx-pills span{animation:hxpill .5s var(--ease) both}
.dl .hx-pills .p1{animation-delay:.5s}.dl .hx-pills .p2{animation-delay:1s}
@keyframes hxpill{to{opacity:1;transform:none}}

/* phone */
.hx-ph{position:absolute;right:3.2%;bottom:3%;width:21%;aspect-ratio:9/19;border-radius:2.8cqw;padding:.6cqw;background:linear-gradient(160deg,#1a2140,#05070f 55%);box-shadow:inset 0 0 0 1px rgba(200,220,255,.2),0 30px 50px -14px rgba(0,0,0,.95),-1.5cqw 0 4cqw -1cqw rgba(91,184,255,.28);opacity:0;transform:translate(26%,6%) rotate(5deg);transition:opacity .35s,transform .55s var(--ease)}
.dl .hx-ph{opacity:1;transform:none;transition:opacity .5s 1s,transform .9s 1s var(--ease)}
.hx-ph .ps{position:relative;width:100%;height:100%;border-radius:2.25cqw;overflow:hidden;background:#04060f}
.hx-ph img,.hx-ph canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-ph .isl{position:absolute;top:.75cqw;left:50%;width:30%;height:1.25cqw;margin-left:-15%;border-radius:1cqw;background:#000}
.hx-ph .pbar{position:absolute;inset:0 0 auto;display:flex;justify-content:center;padding:3cqw .8cqw 2.2cqw;background:linear-gradient(rgba(4,7,18,.95) 45%,rgba(4,7,18,0))}
.hx-ph .pbar .hx-logo{font-size:1.25cqw}
.hx-ph .pbar .hx-logo .mk{width:1.7cqw;height:1.7cqw}
.hx-ph .pbar .hx-logo.b0{font:500 1.3cqw/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.hx-ph .note{position:absolute;left:5%;right:5%;top:2.6cqw;z-index:2;display:grid;gap:.25cqw;padding:.9cqw 1cqw;border-radius:1.3cqw;background:rgba(236,242,255,.94);color:#0a0f22;font:500 1.2cqw/1.25 var(--body);box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.45);opacity:0;transform:translateY(-130%)}
.hx-ph .note b{font-weight:700;font-size:1.05em}
.hx-ph .note b span{display:none}
[data-brand="0"] .note .b0,[data-brand="1"] .note .b1,[data-brand="2"] .note .b2{display:inline}
.live.dl .hx-ph .note{animation:hxnote 2.4s 1.5s var(--ease) both}
@keyframes hxnote{0%{opacity:0;transform:translateY(-130%)}16%,74%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-40%)}}

/* small stages (phones): larger type inside the animation */
@container (max-width:520px){
  .hx-proc{width:66%}.hx-proc .pl{font-size:2.3cqw}.hx-proc .pb{height:.9cqw}
  .hx-files{width:58%;left:2.5%}.hx-files li{font-size:2.3cqw;grid-template-columns:3.4cqw 1fr auto 2.6cqw}.hx-files li em{font-size:1.75cqw}.hx-files li svg{width:3.2cqw;height:3.2cqw}.hx-files .fh{font-size:1.8cqw}.hx-files li i{width:2.5cqw;height:2.5cqw}
  .hx-brand .cap{font-size:2cqw}
  .hx-pills span{font-size:2cqw}.hx-pills i{width:2.8cqw;height:2.8cqw;font-size:1.7cqw}
  .hx-chrome .hx-logo{font-size:2.1cqw}.hx-chrome .hx-logo.b0{font-size:2.2cqw}.hx-logo .mk{width:2.8cqw;height:2.8cqw}
  .hx-ph .note{font-size:1.75cqw}
}

/* the three steps under the stage */
.hx-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.hx-rail button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;width:100%;padding-bottom:4px}
.hx-rail button:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:4px}
.hx-rail .bar{display:block;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-bottom:10px}
.hx-rail .bar b{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.hx-rail .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--teal)}
.hx-rail .t{font-family:var(--cond);font-size:clamp(1rem,1.35vw,1.18rem);white-space:nowrap;text-transform:uppercase;line-height:1.02;color:var(--dim);transition:color .35s}
.hx-rail .d{font-size:.86rem;line-height:1.35;color:var(--dim);transition:color .35s}
.hx-rail li.on .t,.hx-rail button:hover .t{color:var(--ice)}
.hx-rail li.on .d{color:var(--mist)}
.hx-box:not(.live) ~ .hx-rail .bar b{transform:none}

@media (max-width:900px){
  .hx-grid{grid-template-columns:1fr;min-height:0;gap:34px;padding-block:44px 40px}
  .hx-stage{margin-right:0}
  .hx-copy{gap:18px}
}
@media (max-width:560px){
  .hx-rail{gap:14px 12px;grid-template-columns:1fr 1fr}
  .hx-rail .d{font-size:.78rem}
  .hx-rail .t{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
  .hx-scr,.hx-lap,.hx-ph,.hx-chrome,  .hx-badge .dot,.dl .hx-chrome .hx-logo{animation:none}
}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.stats div{padding:22px 18px;display:grid;gap:2px}
.stats div+div{border-left:1px solid var(--line)}
.stats b{font-family:var(--cond);font-weight:300;font-size:2.6rem;line-height:1}
.stats span{color:var(--mist);font-size:.9rem}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}}

/* two audiences */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aud>*{min-width:0}
.card{border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;gap:12px;align-content:start;background:linear-gradient(180deg,rgba(91,184,255,.07),transparent 60%)}
.card h3{font-size:2.2rem}
.card p,.card li{color:var(--mist);font-size:1rem}
.card ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
@media (max-width:860px){.aud{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.step{border-top:1px solid var(--line-2);padding-top:18px;display:grid;gap:8px;align-content:start}
.step .n{font-family:var(--mono);font-size:.8rem;color:var(--teal)}
.step h3{font-size:1.9rem}
.step p{color:var(--mist);font-size:.98rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* film */
.film{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#000}
.film video{display:block;width:100%;aspect-ratio:1280/660;object-fit:cover}
.film::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(3,5,12,.75));pointer-events:none}
.film .cap{position:absolute;left:18px;top:16px;z-index:2}
.film .vid-toggle{position:absolute;right:16px;bottom:16px;z-index:2}
.demo-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;color:var(--mist)}

/* list */
.list{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:70px 1.1fr 1.4fr 1fr;gap:20px;align-items:baseline;padding-block:22px;border-bottom:1px solid var(--line);position:relative}
.item::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,var(--teal),transparent);transition:width .6s}
.item:hover::before{width:100%}
.item .n{font-family:var(--mono);color:var(--dim);font-size:.8rem}
.item h3{font-size:2rem}
.item p{color:var(--mist);font-size:1rem}
.item .f{font-family:var(--mono);font-size:.78rem;color:var(--sky);letter-spacing:.04em}
.badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;border:1px solid var(--warn);color:var(--warn);padding:.2em .6em;border-radius:999px;vertical-align:middle;margin-left:8px}
@media (max-width:860px){.item{grid-template-columns:44px 1fr}.item p,.item .f{grid-column:2}}

/* pricing */
.price-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}
.price-grid>*{min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:.98rem}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:400}
.tbl td.p{font-family:var(--cond);font-size:1.6rem;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-box{border:1px solid var(--line);border-radius:20px;overflow-x:auto;background:var(--deep)}
.tbl-box h3{font-size:1.6rem;padding:18px 14px 6px}
.tbl-box .note{color:var(--mist);font-size:.92rem;padding:12px 14px 16px}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}

/* founders */
.deal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.deal>*{min-width:0}
.box{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--deep)}
.box ul{margin:10px 0 0;padding-left:1.1em;display:grid;gap:8px;font-size:.98rem}
.box.ask{border-color:rgba(91,184,255,.35);box-shadow:inset 0 0 40px -20px rgba(139,108,255,.6)}
.stack{display:grid;gap:14px}
.fine{color:var(--dim);font-size:.9rem}
@media (max-width:860px){.deal{grid-template-columns:1fr}}

/* forms */
form.f{border:1px solid var(--line-2);border-radius:22px;padding:clamp(20px,3vw,30px);background:rgba(11,17,38,.85);display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label,.agree,.lbl{font-size:.92rem;color:var(--mist)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:1rem;color:var(--ice);background:#060A1A;border:1px solid var(--line-2);border-radius:10px;padding:.75em .85em;width:100%}
textarea{min-height:90px;resize:vertical}
select option{background:#060A1A}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border:0;padding:0;margin:0}
.checks legend{font-size:.92rem;color:var(--mist);margin-bottom:8px;padding:0}
.checks label,.agree,.radio label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.96rem;color:var(--ice)}
.checks input,.agree input,.radio input{width:18px;height:18px;margin-top:3px;accent-color:var(--teal);flex:none}
.radio{display:grid;gap:10px;border:0;padding:0;margin:0}
.radio legend{font-size:.92rem;color:var(--mist);margin-bottom:8px;padding:0}
.radio small{display:block;color:var(--mist);font-size:.88rem}
.msg{font-size:.95rem}
.msg.ok{color:var(--ok)} .msg.err{color:var(--bad)}
@media (max-width:560px){.two,.checks{grid-template-columns:1fr}}

/* upload */
.drop{display:grid;place-items:center;text-align:center;gap:10px;border:1.5px dashed rgba(91,184,255,.45);border-radius:20px;padding:44px 20px;background:rgba(91,184,255,.04);cursor:pointer;transition:border-color .2s,background .2s}
.drop.over,.drop:hover{border-color:var(--teal);background:rgba(68,227,198,.07)}
.drop b{font-family:var(--cond);font-weight:300;font-size:2rem;text-transform:uppercase}
.drop span{color:var(--mist);font-size:.95rem}
.limits{display:flex;gap:10px 18px;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;color:var(--mist);letter-spacing:.06em}
.beta-note{border:1px solid rgba(255,210,122,.35);background:rgba(255,210,122,.06);color:var(--ice);border-radius:14px;padding:12px 16px;font-size:.95rem}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.meter{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--deep);display:grid;gap:8px}
.meter .v{font-family:var(--cond);font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.meter .v small{font-size:.45em;color:var(--mist);margin-left:4px}
.meter .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s}
.meter.over .bar i{background:var(--bad)}
.meter.over .v{color:var(--bad)}
.progress{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 14px var(--sky);transition:width .25s}
.files{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-size:.78rem;color:var(--mist)}
.files div{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line)}
.files div:last-child{border-bottom:0}
.files .bad{color:var(--bad)}
@media (max-width:560px){.meters{grid-template-columns:1fr}}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding-block:18px}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;font-size:1.1rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--teal);align-self:start;width:1em;text-align:center;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--mist)}

/* legal */
.legal h2{font-size:clamp(2rem,4vw,3rem);margin:42px 0 12px}
.legal p,.legal li{color:var(--mist);margin-bottom:10px}
.legal ul{padding-left:1.2em}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--dim);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer img{height:22px;width:auto;opacity:.85}
footer a{color:var(--mist)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes rise{from{opacity:.1;transform:translateY(30px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  }
}
@media (prefers-reduced-motion:no-preference){
  .in>*{animation:in 1.1s cubic-bezier(.2,.7,.2,1) both}
  .in>*:nth-child(2){animation-delay:.12s}.in>*:nth-child(3){animation-delay:.24s}
  @keyframes in{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}

/* scroll story (3D) */
.story{position:relative;margin-block:clamp(40px,6vw,80px) 0}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.story-stage canvas,.story-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-poster{object-fit:cover;opacity:.5;transition:opacity 1s}
.story canvas{opacity:0;transition:opacity 1.4s}
.story.ready canvas{opacity:1}.story.ready .story-poster{opacity:0}
.story-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,12,.8) 0%,rgba(3,5,12,.3) 34%,transparent 55%),linear-gradient(0deg,var(--void),transparent 16%),linear-gradient(180deg,var(--void),transparent 14%)}
.story-hud{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;left:0;top:0;opacity:0;transition:opacity .45s;display:grid;gap:3px;padding:9px 13px;border-radius:12px;background:rgba(3,5,12,.74);border:1px solid var(--line-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;will-change:transform}
.lbl b{font-family:var(--cond);font-weight:400;font-size:2rem;line-height:1}
.lbl span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.story-frame{position:absolute;top:13vh;bottom:11vh;left:41vw;right:5vw;border:1px solid rgba(234,242,255,.32);border-radius:18px;opacity:0;box-shadow:0 30px 120px -30px rgba(91,184,255,.45),inset 0 0 80px -40px rgba(139,108,255,.7)}
.story-frame .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(234,242,255,.18);background:rgba(3,5,12,.7);border-radius:18px 18px 0 0;font-family:var(--mono);font-size:.72rem;color:var(--mist)}
.story-frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(234,242,255,.22)}
.story-frame .bar span{margin-left:10px;padding:.35em .9em;border-radius:999px;background:rgba(234,242,255,.07);flex:1;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.story-frame .bar em{margin-left:auto;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#050814;background:var(--ice);padding:.35em .9em;border-radius:999px;font-size:.66rem}
.story-count{position:absolute;right:clamp(16px,4vw,40px);bottom:28px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--dim)}
.story-count b{color:var(--ice);font-weight:500}
.story-bar{position:absolute;left:clamp(16px,4vw,40px);right:clamp(110px,12vw,160px);bottom:34px;height:1px;background:var(--line)}
.story-bar i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.story-beats{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.beat{min-height:100vh;min-height:100svh;display:flex;align-items:center;pointer-events:none}
.beat .wrap{width:100%}
.beat .card{pointer-events:auto;max-width:440px;gap:0;background:rgba(3,5,12,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .6s,transform .6s}
.story.ready .beat:not(.on) .card{opacity:.25;transform:translateY(10px)}
.beat h2{font-size:clamp(2.6rem,5.2vw,4.4rem);margin-top:14px}
.beat h3{font-size:clamp(2.2rem,4vw,3.3rem)}
.beat p{margin-top:14px}
.beat .n{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.beat .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.prof{display:block;width:100%;height:auto;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.prof .a{fill:rgba(91,184,255,.12)}.prof .l{fill:none;stroke:var(--teal);stroke-width:1.6;vector-effect:non-scaling-stroke}
.story.no3d .story-poster{opacity:.75}.story.no3d .story-hud{display:none}
@media (max-width:900px){
  .beat .card,.lbl{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,5,12,.88)}
  .beat{align-items:flex-end;padding-bottom:9vh}
  .beat .card{max-width:none;padding:20px}
  .story-shade{background:linear-gradient(0deg,rgba(3,5,12,.92) 0%,rgba(3,5,12,.35) 42%,transparent 62%),linear-gradient(180deg,var(--void),transparent 14%)}
  .story-frame{top:9vh;bottom:46vh;left:4vw;right:4vw}
  .story-frame .bar span{display:none}
  .story-count{top:80px;bottom:auto}
  .story-bar{top:88px;bottom:auto;right:110px}
  .lbl b{font-size:1.5rem}
}

/* viewer page */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vx-hero{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,80px);background:radial-gradient(ellipse at 50% 0%,#0B1640 0%,var(--void) 60%)}
.vx-head{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(28px,4vw,44px)}
.vx-head h1{font-size:clamp(3rem,7.4vw,6.4rem)}
.vx{position:relative;margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);background:#000;box-shadow:0 40px 120px -40px rgba(91,184,255,.45),0 0 0 1px rgba(139,108,255,.15)}
.vx-shot{display:block;width:100%;height:auto;transition:filter .5s}
.vx.focus .vx-shot{filter:brightness(.62) saturate(.8)}
.vx-logo{position:absolute;left:.98%;top:1.38%;width:8.62%;height:5.0%;border-radius:8px;display:grid;place-items:center;outline:2px dashed rgba(68,227,198,.85);outline-offset:3px;transition:outline-color .6s,background .3s}
.vx-logo img{display:none;max-width:94%;max-height:86%;object-fit:contain}
.vx-logo.has{background:rgb(18,23,33)}.vx-logo.has img{display:block}
.vx.branded .vx-logo{outline-color:rgba(68,227,198,0)}
.vx.show .vx-logo:not(.has){animation:lp 2.4s ease-in-out infinite}
@keyframes lp{50%{outline-color:rgba(68,227,198,.25)}}
.vx-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vx-lines .rings *{fill:none;stroke:var(--teal);stroke-width:3;opacity:0;transition:opacity .4s,stroke-width .3s;vector-effect:non-scaling-stroke}
.vx-lines .leads path{fill:none;stroke:rgba(234,242,255,.55);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400}
.vx.show .vx-lines .leads path{transition:stroke-dashoffset .9s .4s ease}
.vx.show .vx-lines .leads path{stroke-dashoffset:0}
.vx.show .vx-lines .rings *{opacity:.32}
.vx-lines .rings .hot{opacity:1!important;stroke-width:4;filter:drop-shadow(0 0 6px rgba(68,227,198,.9))}
.vx-chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%) translateY(6px);opacity:0;pointer-events:auto;cursor:default;white-space:nowrap;font-size:clamp(.62rem,.95vw,.8rem);color:var(--mist);background:rgba(3,5,12,.78);border:1px solid var(--line-2);border-radius:999px;padding:.38em .9em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .5s,transform .5s,border-color .25s,color .25s}
.chip b{color:var(--ice);font-weight:600;margin-right:.4em}
.chip.r{transform:translate(var(--tx,-50%),0) translateY(6px);top:var(--y)}
.vx.show .chip{opacity:1;transform:translate(0,-50%);transition-delay:calc(var(--i)*70ms + .2s)}
.vx.show .chip.r{transform:translate(var(--tx,-50%),0)}
.chip.hot{border-color:var(--teal);color:var(--ice);transition-delay:0s}
.brandchip{border-color:rgba(68,227,198,.7)}
.brandchip b{color:var(--teal)}
.vx-drop{position:absolute;inset:0;display:none;place-items:center;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(3,5,12,.7);border:2px dashed var(--teal);border-radius:22px}
.vx.drag .vx-drop{display:grid}
.vx-try{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:18px}
.vx-try label{cursor:pointer}
.vx-list{display:none;margin:22px 0 0;padding-left:1.4em;color:var(--mist);gap:8px}
.vx-list b{color:var(--ice)}
@media (prefers-reduced-motion:reduce){.chip,.vx-lines *{transition:none!important}.vx-logo{animation:none!important}}
@media (max-width:760px){.vx-chips,.vx-lines .leads{display:none}.vx-lines .rings *{opacity:.8}.vx-list{display:grid}}
.fl{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.fl>*{min-width:0}
.fl-vid{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);background:#000;aspect-ratio:16/9}
.fl-vid video{display:block;width:100%;height:100%;object-fit:cover}
.fl-q{position:absolute;left:clamp(12px,3%,26px);bottom:clamp(12px,4%,30px);display:grid;gap:4px;max-width:78%;padding:12px 16px;border-radius:14px;background:rgba(3,5,12,.74);border:1px solid var(--line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.fl-q.on{opacity:1;transform:none}
.fl-q b{font-family:var(--cond);font-weight:300;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1}
.fl-q b i{font-family:var(--serif);font-style:italic;text-transform:none;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fl-q small{color:var(--mist);font-size:.88rem}
.fl-win{position:absolute;inset:0;pointer-events:none;opacity:0}
.fl-vid.enter video{animation:win .95s cubic-bezier(.2,.8,.2,1)}
.fl-vid.enter .fl-win{animation:flash .95s ease-out}
@keyframes win{0%{clip-path:inset(34% 40% 34% 40% round 10px);transform:scale(1.06)}100%{clip-path:inset(0 0 0 0 round 0);transform:none}}
@keyframes flash{0%{opacity:1;box-shadow:inset 0 0 0 2px var(--teal),inset 0 0 120px rgba(68,227,198,.5)}100%{opacity:0;box-shadow:inset 0 0 0 0 var(--teal)}}
.fl-pts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.fl-pts li{display:grid;grid-template-columns:44px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.fl-pts .n{font-family:var(--mono);font-size:.8rem;color:var(--teal)}
.fl-pts h3{font-size:1.7rem}
.fl-pts p{color:var(--mist);font-size:.98rem;margin-top:4px}
@media (max-width:900px){.fl{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fcard{border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:8px;align-content:start;background:linear-gradient(180deg,rgba(91,184,255,.06),transparent 70%);transition:border-color .25s,transform .25s}
.fcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.fcard .tag{color:var(--teal)}
.fcard h3{font-size:1.9rem}
.fcard p{color:var(--mist);font-size:.96rem}
@media (max-width:1000px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feat{grid-template-columns:1fr}}
/* Oct 7: hosting plans box spans the pricing grid */
.tbl-box.wide{grid-column:1/-1}

/* how it works video (Oct 7) */
.hiw .sec-head{margin-bottom:clamp(20px,3vw,32px)}
.hiw-frame{position:relative;margin:0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#03050C;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.85),0 0 70px -24px rgba(68,227,198,.3)}
.hiw-frame video{display:block;width:100%;height:100%;object-fit:cover}
.hiw-sound{position:absolute;right:14px;bottom:14px;font-size:.7rem;padding:.8em 1.2em}
.hiw-cta{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:22px}
.hiw-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--mist)}
@media (max-width:640px){.hiw-sound{top:8px;right:8px;bottom:auto;font-size:.6rem;padding:.55em .9em}}

/* headings: option C (Oct 7): normal case, one clean sans, the key word in color */
h1,h2,h3{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.015em;line-height:1.08}
h1 i,h2 i,h3 i{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;padding-right:0}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.sec-head .tag{padding-top:.55em}
.hx h1{font-size:clamp(2.4rem,4.2vw,3.8rem)}
.card h3{font-size:1.5rem}
.step h3{font-size:1.3rem}
.item h3{font-size:1.4rem}
.tbl-box h3{font-size:1.15rem}
.legal h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.beat h2{font-size:clamp(2rem,3.8vw,3.1rem)}
.beat h3{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.vx-head h1{font-size:clamp(2.4rem,5vw,4.3rem)}
.fl-pts h3{font-size:1.25rem}
.fcard h3{font-size:1.35rem}

/* hero second path: viewer only (Oct 8) */
.hx-paths{display:grid;gap:12px;justify-items:start}
.hx-badge.alt b{color:var(--teal)}
.hx-badge.alt:hover{border-color:var(--teal)}