:root{
  --void:#080B10;
  --panel:rgba(13,18,25,0.72);
  --chalk:#E8E6E0;
  --dim:#8E9299;
  --steel:#5A6270;
  --signal:#FF5A36;
  --tele:#5FC4E8;
  --carb:#E8E6E0;
  --line:rgba(232,230,224,0.10);
  --line-2:rgba(232,230,224,0.20);
  --veil:rgba(8,11,16,0.62);   /* section veil: lower = more scene shows through */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--void);
  color:var(--chalk);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
:focus-visible{outline:2px solid var(--tele);outline-offset:3px;}

/* ---------- INTRO ---------- */
#intro{
  position:fixed;inset:0;z-index:999;background:var(--void);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
#intro .brandmark{
  font-family:'Anton',sans-serif;font-size:clamp(40px,7vw,76px);
  text-transform:uppercase;letter-spacing:0.03em;overflow:hidden;height:1em;line-height:1;
}
#intro .brandmark span{display:block;transform:translateY(105%);}
.introbar{width:min(280px,60vw);height:1px;background:var(--line-2);position:relative;}
.introbar i{position:absolute;inset:0;background:var(--tele);transform:scaleX(0);transform-origin:left;display:block;}
#introCount{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);letter-spacing:0.2em;}

/* ---------- CANVAS + OVERLAYS ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
#hud{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;}
.tag{
  position:absolute;top:0;left:0;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;
  white-space:nowrap;will-change:transform;
}
.tag .stem{display:block;width:44px;height:1px;background:var(--tele);margin-bottom:6px;}
.tag .txt{color:var(--tele);}
.tag.alert .stem{background:var(--signal);}
.tag.alert .txt{color:var(--signal);}
.tag::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:currentColor;}

#patReadout{
  position:fixed;right:26px;bottom:34px;z-index:4;opacity:0;pointer-events:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;
  text-align:right;color:var(--steel);text-transform:uppercase;
  background:rgba(8,11,16,0.55);padding:10px 14px;border:1px solid var(--line);
}
#patReadout b{display:block;color:var(--chalk);font-weight:500;font-size:13px;margin-bottom:3px;}
#patReadout u{text-decoration:none;color:var(--tele);}

.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- CHROME ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;}
.progress i{display:block;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;}
header{position:fixed;top:0;left:0;right:0;z-index:55;}
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,16,0.85),rgba(8,11,16,0));
}
nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1180px;margin:0 auto;}
.logo{font-family:'Anton',sans-serif;font-size:21px;letter-spacing:0.03em;display:flex;align-items:center;gap:7px;}
.logo b{width:7px;height:7px;background:var(--signal);border-radius:50%;display:inline-block;}
.navlinks{display:flex;gap:30px;}
.navlinks a{font-size:13.5px;color:var(--dim);transition:color .2s;}
.navlinks a:hover{color:var(--chalk);}
.btn{
  font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:1px;display:inline-block;cursor:pointer;
  border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.3,1),background .2s,border-color .2s;
}
.btn-solid{background:var(--signal);color:var(--void);}
.btn-solid:hover{transform:translateY(-2px);}
.btn-ghost{border-color:var(--line-2);color:var(--chalk);}
.btn-ghost:hover{border-color:var(--dim);transform:translateY(-2px);}

.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:16px;}
.rail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.rail .rl{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--steel);
  opacity:0;transform:translateX(6px);transition:.3s;text-transform:uppercase;
}
.rail .rd{width:18px;height:1px;background:var(--line-2);transition:.3s;}
.rail a:hover .rl,.rail a.on .rl{opacity:1;transform:none;color:var(--chalk);}
.rail a.on .rd{background:var(--signal);width:28px;}

/* ---------- SECTIONS ---------- */
section{position:relative;z-index:2;}
.ghost{background:transparent;}
.solid{background:var(--veil);border-top:1px solid var(--line);}
.marquee,footer{background:var(--veil);}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .solid,.marquee,footer{
    -webkit-backdrop-filter:blur(22px) saturate(0.8);
    backdrop-filter:blur(22px) saturate(0.8);
  }
}
.pad{padding:120px 0;}
.sechead{max-width:640px;margin-bottom:56px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--tele);display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--tele);}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-0.02em;margin:0 0 20px;line-height:1.1;}
.lede{color:var(--dim);font-size:17px;max-width:560px;}
.mask{overflow:hidden;display:block;}
.mask>span{display:block;}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;}
#hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,11,16,0.90) 0%,rgba(8,11,16,0.62) 34%,rgba(8,11,16,0) 62%);
}
#hero .wrap{position:relative;z-index:1;}
#hero .col{max-width:600px;}
h1{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(46px,7.4vw,96px);line-height:0.94;letter-spacing:0.005em;margin:0 0 26px;
}
h1 em{font-style:normal;color:var(--signal);}
#hero .sub{font-size:18px;color:var(--dim);max-width:470px;margin:0 0 34px;}
.ctas{display:flex;gap:14px;flex-wrap:wrap;}
.scrollcue{
  position:absolute;bottom:38px;left:32px;z-index:1;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
  color:var(--steel);text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.scrollcue i{width:1px;height:26px;background:var(--line-2);position:relative;overflow:hidden;}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--tele);animation:cue 2s infinite;}
@keyframes cue{0%{transform:translateY(-100%);}100%{transform:translateY(100%);}}

/* PROBLEM */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.bigline{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,4.4vw,54px);line-height:1.02;}
.bigline .off{color:var(--steel);}

/* MARQUEE */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;position:relative;z-index:2;}
.marquee .track{display:flex;gap:48px;width:max-content;animation:slide 34s linear infinite;}
.marquee span{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.14em;
  color:var(--steel);text-transform:uppercase;white-space:nowrap;
}
.marquee span u{text-decoration:none;color:var(--tele);}
@keyframes slide{to{transform:translateX(-50%);}}

/* PINNED STAGES */
.pinstage{height:100vh;position:relative;display:flex;align-items:flex-end;}
.pinstage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,11,16,0.92) 0%,rgba(8,11,16,0.55) 26%,rgba(8,11,16,0) 54%);
}
.panels{position:relative;z-index:1;width:100%;padding:0 32px 90px;max-width:1180px;margin:0 auto;}
.panel{position:absolute;bottom:90px;max-width:410px;opacity:0;border-left:2px solid var(--signal);padding-left:20px;}
.panel .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--tele);margin-bottom:10px;text-transform:uppercase;}
.panel h3{font-size:24px;margin:0 0 10px;font-weight:700;letter-spacing:-0.01em;}
.panel p{margin:0;color:var(--dim);font-size:15.5px;}
.panel .macros{display:flex;gap:18px;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;}
.panel .macros i{font-style:normal;display:flex;align-items:center;gap:6px;color:var(--dim);}
.panel .macros i::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.panel .macros .p{color:var(--tele);}
.panel .macros .c{color:var(--carb);}
.panel .macros .f{color:var(--signal);}

/* FEATURES */
.frow{display:grid;grid-template-columns:88px 1fr;gap:32px;padding:30px 0;border-top:1px solid var(--line);}
.frow .ft{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--signal);padding-top:3px;}
.frow h3{font-size:19px;margin:0 0 8px;font-weight:600;}
.frow p{margin:0;color:var(--dim);font-size:15.5px;max-width:620px;}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.step{border-top:2px solid var(--line-2);padding-top:22px;}
.step .n{font-family:'IBM Plex Mono',monospace;color:var(--tele);font-size:13px;display:block;margin-bottom:14px;}
.step h3{font-size:18px;margin:0 0 10px;font-weight:600;}
.step p{color:var(--dim);font-size:15px;margin:0;}

/* LOOP */
.loopwrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.loop{border:1px solid var(--line);background:var(--panel);padding:8px 26px;}
.loop div{
  display:flex;justify-content:space-between;align-items:center;padding:15px 0;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--dim);border-bottom:1px dashed var(--line);
}
.loop div:last-child{border-bottom:none;}
.loop div s{text-decoration:none;color:var(--signal);}


/* CTA */
#cta{min-height:86vh;display:flex;align-items:center;text-align:center;}
#cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 46% at 50% 50%,rgba(8,11,16,0.90) 0%,rgba(8,11,16,0.55) 55%,rgba(8,11,16,0) 100%);
}
#cta .wrap{position:relative;z-index:1;width:100%;}
#cta h2{max-width:660px;margin:0 auto 34px;}
.form{display:flex;gap:10px;max-width:450px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.form input{
  flex:1;min-width:230px;background:rgba(13,18,25,0.8);border:1px solid var(--line-2);
  color:var(--chalk);padding:13px 16px;font-family:'Inter',sans-serif;font-size:15px;border-radius:1px;
}
.form input::placeholder{color:var(--steel);}

footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:44px 0;}
.frow2{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.flinks{display:flex;gap:26px;}
.flinks a{font-size:13px;color:var(--dim);}
.flinks a:hover{color:var(--chalk);}
.fc{font-size:12px;color:var(--steel);margin-top:26px;}

/* motion reduced (or GSAP unavailable): stack the pinned panels as static text */
body.reduced .pinstage{height:auto;display:block;padding:110px 0;}
body.reduced .pinstage::before{display:none;}
body.reduced .panel{opacity:1;position:static;max-width:660px;margin:0 0 36px;}
body.reduced #patReadout{display:none;}

@media (max-width:900px){
  .navlinks,.rail,#patReadout{display:none;}
  .split,.loopwrap{grid-template-columns:1fr;gap:30px;}
  .steps{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr;gap:8px;}
  .pad{padding:84px 0;}
  .panel{max-width:100%;bottom:70px;}
  .panels{padding:0 24px 70px;}
  .wrap{padding:0 24px;}
  .scrollcue{left:24px;}
  #hero::before{background:linear-gradient(to top,rgba(8,11,16,0.92) 10%,rgba(8,11,16,0.6) 55%,rgba(8,11,16,0.2) 100%);}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}