/* Tokens */
:root{
  --bg:#07070a; --text:#eeecf7; --muted:#c9c5d6; --line:rgba(255,255,255,.08);
  --red:#c1121f; --red2:#8a0e18; --gold:#ffb400; --gold2:#a86b00; --neon:#ff2740;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:inherit; text-decoration:none}

/* Background canvases */
.bg{position:fixed; inset:0; z-index:-3; pointer-events:none}
#cyber,#grid{position:absolute; inset:0; display:block}

/* Header */
.site-header{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.25)); border-bottom:1px solid var(--line); backdrop-filter: blur(8px)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand img{height:28px; filter: drop-shadow(0 0 16px rgba(255,180,0,.4))}
.nav{display:flex; align-items:center; gap:18px}
.nav a{padding:10px 0; color:var(--muted)} .nav a:hover{color:var(--text)}
.hamburger{display:none; width:42px; height:42px; background:transparent; border:1px solid var(--line); border-radius:10px; position:relative}
.hamburger span{position:absolute; left:9px; right:9px; height:2px; background:#fff; border-radius:2px}
.hamburger span:nth-child(1){top:12px} .hamburger span:nth-child(2){top:20px} .hamburger span:nth-child(3){top:28px}

/* Hero */
.hero{position:relative; max-width:1200px; margin:0 auto; padding:110px 20px 56px}
.layers{position:absolute; inset:-10vh 0 0 0; z-index:-1; pointer-events:none}
#plasma{position:absolute; inset:0; width:100%; height:100%}
.scanlines{position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,0,0,.06) 0 2px, transparent 2px 4px); mix-blend-mode:screen; opacity:.15}
.sparks{position:absolute; inset:0; background-image: radial-gradient(rgba(255,220,80,.2), transparent 30%), radial-gradient(rgba(255,60,0,.15), transparent 30%); background-size:4px 4px, 3px 3px; background-repeat:repeat; animation: drift 18s linear infinite alternate}
@keyframes drift{to{transform:translateY(-12px)}}

.kicker{letter-spacing:.28em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.headline{margin:10px 0 12px; font-size: clamp(38px,6vw,80px); line-height:1.02; position:relative; text-shadow: 0 10px 50px rgba(0,0,0,.7)}
.gold{color:var(--gold); text-shadow: 0 0 20px rgba(255,180,0,.55), 0 0 36px rgba(255,80,0,.25)}
.lede{color:var(--muted); max-width: 980px}
.cta{display:flex; gap:10px; margin-top:14px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--text); transition: transform .2s ease, box-shadow .2s ease}
.btn-primary{background:linear-gradient(180deg, var(--gold), var(--gold2)); color:#2a1700; font-weight:900; box-shadow: 0 16px 36px rgba(255,180,0,.35), inset 0 0 18px rgba(255,255,255,.18)}
.btn-ghost{background:rgba(255,255,255,.02)}
.magnet:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,180,0,.2)}

.voice{position:absolute; right:20px; top:18px; padding:10px 12px; font-size:13px; border:none; border-radius:10px; color:#2a1700; background:linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow:0 10px 30px rgba(255,180,0,.35); cursor:pointer}

/* Sections */
.section{max-width:1200px; margin:0 auto; padding:70px 20px}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.section-head h2{margin:0 0 10px; font-size: clamp(26px,3.2vw,44px)}
.section-head p{margin:0 0 14px; color:var(--muted)}
.flame-underline{display:inline-block; position:relative}
.flame-underline:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg, #ff3b3b, #ffb400, #ff3b3b); box-shadow: 0 0 18px rgba(255,80,0,.55)}

.accordions details{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); padding:12px 14px; margin:10px 0}
.accordions summary{cursor:pointer; font-weight:800}
.longcopy{max-width: 980px; font-size: 18px; line-height: 1.65}
.longcopy p{margin: 12px 0} .longcopy strong{color:#fff}

.bullets{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.b{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); padding:14px}
.b strong{display:block; font-size:18px; margin-bottom:4px}

/* Footer */
.footer{padding:24px; text-align:center; color:var(--muted); border-top:1px solid var(--line); background:rgba(0,0,0,.32)}

/* Responsive */
@media (max-width:980px){
  .nav{display:none} .hamburger{display:block}
  .bullets{grid-template-columns:1fr}
}
:focus-visible{outline:2px solid #ff7b00; outline-offset:2px}