:root{
  --bg-void:#070014; --bg-deep:#0d0224; --bg-panel:#160637; --bg-panel-2:#1d0a4a; --grid-line:#3a1d8a;
  --magenta:#ff2e97; --pink:#ff5ca8; --cyan:#16f2ff; --purple:#b14aed; --yellow:#ffd319; --orange:#ff7a18;
  --bright:#f4ecff; --mute:#a07fd6; --dim:#6b4fa0;
  --pixel:'Press Start 2P',monospace; --display:'Orbitron',sans-serif; --term:'VT323',monospace; --body:'Chakra Petch',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-void);color:var(--bright);font-family:var(--body);overflow-x:hidden}
a{cursor:pointer;text-decoration:none;color:inherit}
canvas.fx{position:absolute;display:block}

/* ---------- shared ---------- */
.eyebrow{font-family:var(--pixel);font-size:10px;letter-spacing:2px;color:var(--cyan)}
.eyebrow.yellow{color:var(--yellow)} .eyebrow.magenta{color:var(--magenta)} .eyebrow.purple{color:var(--purple)} .eyebrow.cyan{color:var(--cyan)}
.eyebrow-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--cyan);
  background:#16f2ff14;border-radius:2px;box-shadow:0 0 16px #16f2ff55}
.btn-pixel{display:inline-flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:12px;
  letter-spacing:1px;padding:15px 28px;border-radius:2px;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer}
.btn-pixel:hover{transform:translateY(-2px)}
.btn-magenta{background:var(--magenta);color:var(--bg-void);box-shadow:0 0 24px #ff2e97cc}
.btn-cyan-outline{background:#070014cc;color:var(--cyan);border:1.5px solid var(--cyan);box-shadow:0 0 18px #16f2ff55}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,5vw,62px);letter-spacing:1px;line-height:1.05;
  text-align:center;text-shadow:0 0 28px #ff2e9788}
.h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:1px;text-shadow:0 0 20px #16f2ff66}
.h3.left{text-align:left}

/* ---------- nav ---------- */
.nav{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:22px 48px;background:var(--bg-void)}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{font-family:var(--pixel);font-size:18px;color:var(--cyan)}
.logo-text{font-family:var(--pixel);font-size:15px;letter-spacing:1px;color:var(--bright)}
.nav-links{display:flex;gap:34px}
.nav-links a{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:2px;color:var(--mute)}
.nav-links a:hover{color:var(--cyan)}
.nav-cta{padding:11px 22px;font-size:11px}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;height:clamp(820px,96vh,1040px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg-void)}
.fx-liquid{inset:0;width:100%;height:100%}
.fx-floor{left:0;bottom:0;width:100%;height:46%}
.fx-scanlines{inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.32}
.fx-pulse{mix-blend-mode:screen;opacity:.85}
.sun{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#ffe65a 0%,#ffd319 30%,#ff7a18 55%,#ff2e97 80%,#b14aed 100%);
  box-shadow:0 0 120px 10px #ff2e9766;z-index:2}
.sun-sm{width:220px;height:220px;top:8%}
/* Full-bleed legibility scrim. Covers the whole hero (inset:0) with a centered
   radial that fades to fully transparent before any edge — so it darkens behind
   the headline without the old 96%x62% box reading as a faint rectangle. */
.scrim{position:absolute;inset:0;z-index:4;
  background:radial-gradient(ellipse 68% 58% at 50% 44%,#060012b0 0%,#0600125e 46%,rgba(6,0,18,0) 74%)}
.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:26px;
  text-align:center;padding:0 24px;max-width:1100px}
.headline{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-weight:800;
  font-size:clamp(44px,8.4vw,82px);letter-spacing:2px;line-height:1.02}
.hl-white{color:var(--bright);text-shadow:0 0 26px #16f2ff88}
.hl-magenta{color:var(--magenta);text-shadow:0 0 30px #ff2e97aa,0 2px 8px #1a0030cc}
.subhead{max-width:760px;font-size:19px;line-height:1.55;color:var(--bright);text-shadow:0 1px 10px #060012cc}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.trust{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding-top:8px}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:2px;
  color:var(--bright);text-shadow:0 1px 8px #060012cc}
.trust i{font-family:var(--pixel);font-size:9px;color:var(--yellow);font-style:normal}

/* ---------- mid ---------- */
.mid{position:relative;z-index:5}
.band{padding:88px 64px}
.header-band{background:var(--bg-deep);border-top:2px solid var(--grid-line);border-bottom:2px solid var(--grid-line);
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.band-sub{max-width:760px;font-size:18px;font-weight:500;line-height:1.5;color:var(--mute);text-align:center}
.band-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.band-head.center{align-items:center;text-align:center}

.feature-band{background:var(--bg-void)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:var(--bg-panel);border:1.5px solid var(--cyan);border-radius:22px;padding:32px;
  display:flex;flex-direction:column;gap:14px}
.card .idx{font-family:var(--pixel);font-size:18px}
.card h4{font-family:var(--display);font-weight:700;font-size:20px;color:var(--bright)}
.card p{font-size:14px;font-weight:500;line-height:1.5;color:var(--mute)}
.c-cyan{border-color:var(--cyan);box-shadow:0 0 22px #16f2ff3a} .c-cyan .idx{color:var(--cyan)}
.c-magenta{border-color:var(--magenta);box-shadow:0 0 22px #ff2e973a} .c-magenta .idx{color:var(--magenta)}
.c-yellow{border-color:var(--yellow);box-shadow:0 0 22px #ffd3193a} .c-yellow .idx{color:var(--yellow)}
.c-purple{border-color:var(--purple);box-shadow:0 0 22px #b14aed3a} .c-purple .idx{color:var(--purple)}

.how-band{background:var(--bg-deep);border-top:2px solid var(--grid-line)}
.flow{display:flex;gap:18px;justify-content:center;align-items:center}
.step{flex:1;background:var(--bg-panel);border-radius:22px;padding:32px;display:flex;flex-direction:column;
  align-items:center;gap:18px;text-align:center}
.step-num{font-family:var(--display);font-weight:800;font-size:56px}
.step-title{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:2px;color:var(--bright)}
.step p{font-size:14px;font-weight:500;line-height:1.5;color:var(--mute)}
.s-cyan{border:1.5px solid var(--cyan);box-shadow:0 0 22px #16f2ff3a} .s-cyan .step-num{color:var(--cyan);text-shadow:0 0 18px #16f2ff99}
.s-magenta{border:1.5px solid var(--magenta);box-shadow:0 0 22px #ff2e973a} .s-magenta .step-num{color:var(--magenta);text-shadow:0 0 18px #ff2e9799}
.s-yellow{border:1.5px solid var(--yellow);box-shadow:0 0 22px #ffd3193a} .s-yellow .step-num{color:var(--yellow);text-shadow:0 0 18px #ffd31999}
.arrow{font-family:var(--display);font-size:34px;color:var(--purple);text-shadow:0 0 14px #b14aedaa}

.mcp-band{background:var(--bg-panel-2);border-top:2px solid var(--grid-line);display:flex;gap:56px;align-items:center}
.mcp-copy{flex:0 0 460px;display:flex;flex-direction:column;gap:22px}
.mcp-body{font-size:16px;font-weight:500;line-height:1.5;color:var(--mute)}
.bullets{list-style:none;display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--bright)}
.bullets i{font-family:var(--pixel);font-size:9px;color:var(--yellow);font-style:normal}
.terminal{flex:1;background:var(--bg-void);border:1.5px solid var(--cyan);border-radius:4px;overflow:hidden;
  box-shadow:0 0 30px #16f2ff55}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#0d0224;border-bottom:1px solid var(--grid-line)}
.dot{width:10px;height:10px;border-radius:50%} .dot.r{background:var(--magenta)} .dot.y{background:var(--yellow)} .dot.g{background:var(--cyan)}
.term-title{font-family:var(--term);font-size:18px;color:var(--mute);margin-left:6px}
.live{margin-left:auto;font-family:var(--pixel);font-size:8px;letter-spacing:2px;color:var(--cyan)}
.term-body{font-family:var(--term);font-size:19px;line-height:1.3;padding:20px;white-space:pre-wrap;word-break:break-word}
.t-cyan{color:var(--cyan)} .t-dim{color:var(--dim)} .t-yellow{color:var(--yellow)} .t-magenta{color:var(--magenta)}
.t-bright{color:var(--bright)} .t-mute{color:var(--mute)}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.stats-band{background:var(--bg-void);border-top:2px solid var(--grid-line);display:flex;flex-direction:column;gap:36px}
.center-eye{letter-spacing:3px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.stat-val{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,58px);letter-spacing:1px}
.v-magenta{color:var(--magenta);text-shadow:0 0 24px #ff2e97aa} .v-cyan{color:var(--cyan);text-shadow:0 0 24px #16f2ffaa}
.v-yellow{color:var(--yellow);text-shadow:0 0 24px #ffd319aa} .v-purple{color:var(--purple);text-shadow:0 0 24px #b14aedaa}
.stat-lbl{font-family:var(--pixel);font-size:10px;letter-spacing:2px;color:var(--mute)}

/* ---------- cta ---------- */
.cta{position:relative;height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-void)}
.cta .fx-floor{height:46%}
.cta .fx-scanlines{opacity:.5}
.cta-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:0 24px}
.cta-head{font-family:var(--display);font-weight:800;font-size:clamp(36px,5vw,58px);letter-spacing:1px;color:var(--bright);text-shadow:0 0 28px #16f2ff99}
.cta-sub{max-width:620px;font-size:18px;line-height:1.5;color:var(--bright);text-shadow:0 1px 10px #060012cc}
.capture{display:flex;margin-top:6px}
.capture input{width:320px;height:54px;padding:0 18px;background:#07001488;border:1.5px solid var(--cyan);border-right:none;
  color:var(--bright);font-family:var(--term);font-size:22px;outline:none}
.capture input::placeholder{color:var(--mute)}
.capture button{height:54px;border:none}

/* ---------- footer ---------- */
.footer{background:var(--bg-void);border-top:2px solid var(--magenta);box-shadow:0 -1px 14px #ff2e97aa}
.footer-top{display:flex;justify-content:space-between;gap:40px;padding:56px 48px 40px;flex-wrap:wrap}
.footer-brand{max-width:340px;display:flex;flex-direction:column;gap:16px}
.footer-tag{font-size:14px;line-height:1.5;color:var(--dim)}
.footer-cols{display:flex;gap:72px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:14px}
.col h5{font-family:var(--pixel);font-size:10px;letter-spacing:1px;color:var(--purple)}
.col a{font-size:14px;color:var(--mute)} .col a:hover{color:var(--cyan)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 48px;background:var(--bg-deep);flex-wrap:wrap;gap:12px}
.copy{font-family:var(--term);font-size:20px;color:var(--dim)}
.social{display:flex;gap:18px}
.social span{font-family:var(--pixel);font-size:10px;color:var(--cyan);padding:7px 11px;background:#160637;border:1px solid var(--grid-line);border-radius:2px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cards,.stats{grid-template-columns:repeat(2,1fr)}
  .mcp-band{flex-direction:column} .mcp-copy{flex:1}
  .flow{flex-direction:column} .arrow{transform:rotate(90deg)}
  .nav-links{display:none}
}
@media(max-width:560px){
  .band{padding:64px 22px} .nav{padding:18px 20px}
  .cards,.stats{grid-template-columns:1fr}
  .capture{flex-direction:column;gap:10px;width:100%} .capture input{width:100%;border-right:1.5px solid var(--cyan)}
  .footer-top,.footer-bottom{padding-left:22px;padding-right:22px}
}