:root{
  --bg:#0a0a0b; --fg:#e8e8ea; --muted:#9ea0a6; --grid:#ffffff10; --acc:#19e28c; --acc2:#ff5acd;
  --ring: rgba(25,226,140,.14);
}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";text-rendering:optimizeLegibility}
::selection{background:rgba(25,226,140,.25)}

/* ======= LAYERS ======= */
.stage{position:relative;min-height:100vh;overflow-x:hidden}
.grid{position:fixed;inset:0;z-index:-3;background:
  radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 1px);
  background-size:18px 18px;mask-image:linear-gradient(#000,transparent 80vh)}
.spot{position:fixed;inset:0;z-index:-2;pointer-events:none;mix-blend:overlay}
.noise{position:fixed;inset:0;z-index:-1;opacity:.035;pointer-events:none;background-size:300px 300px;animation:stat 12s linear infinite}

@keyframes stat{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2%,0,0)}}
.noise.burst{background-size:180px 180px;animation:stat .9s linear infinite}

.noise{background-image:url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">\
    <filter id="n">\
      <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/>\
      <feColorMatrix type="saturate" values="0"/>\
    </filter>\
    <rect width="160" height="160" filter="url(%23n)" opacity="0.9"/>\
  </svg>')}

/* ======= HERO ======= */
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.topline{position:absolute;top:18px;left:18px;color:#a9abb2;letter-spacing:.22em;text-transform:uppercase;font-size:10px}
.hotkey{position:absolute;top:18px;right:18px;color:#8c8f96;font-size:10px;display:flex;gap:8px;align-items:center}
kbd{border:1px solid #202227;background:#0d0e10;padding:4px 8px;border-radius:6px}

.hero{min-height:100vh;display:grid;place-items:center;text-align:center}

.wordmark{font-weight:900;letter-spacing:-.02em;line-height:.8;font-size:20vw;text-transform:uppercase;position:relative;display:inline-block}
.wordmark .l1,.wordmark .l2{position:absolute;inset:0;pointer-events:none;transition:transform .18s cubic-bezier(.22,.61,.36,1), opacity .24s ease}
.wordmark .l0{background:linear-gradient(180deg,#f7f7f8 0%,#c9c9cf 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .6px rgba(255,255,255,.06))}
.wordmark .l1{color:transparent;text-shadow:  .6vw -.2vw 0 rgba(25,226,140,.42);opacity:.34;transform:translate(6px,-2px)}
.wordmark .l2{color:transparent;text-shadow: -.65vw .15vw 0 rgba(255,90,205,.42);opacity:.34;transform:translate(-6px,2px)}
.glitched .l1{animation:g1 .65s steps(2,end) 1}
.glitched .l2{animation:g2 .65s steps(2,end) 1}
@keyframes g1{0%{transform:translate(0,0)}50%{transform:translate(.3vw,-.2vw)}100%{transform:translate(0,0)}}
@keyframes g2{0%{transform:translate(0,0)}50%{transform:translate(-.28vw,.12vw)}100%{transform:translate(0,0)}}

.sub{max-width:68ch;margin:16px auto 0;color:var(--muted);font-size:clamp(14px, 2vw, 18px)}

.ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{--b:#1c1f23;background:#0f1114;border:1px solid var(--b);color:#d9dbe1;padding:12px 16px;border-radius:14px;font-weight:600;font-size:13px;display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.btn:hover{background:#121419;border-color:#23272d}
.btn-acc{background:rgba(25,226,140,.08);border:1px solid rgba(25,226,140,.32);color:#b8ffd8}
.btn-acc:hover{background:rgba(25,226,140,.12)}

/* ======= CARDS ======= */
.section{min-height:88vh;display:grid;place-items:center;padding:72px 24px}
.cards{display:grid;grid-template-columns:1fr;gap:14px;width:100%;max-width:1100px}
@media (min-width:780px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:1px solid #1d2026;background:linear-gradient(180deg,#0e1013, #0b0d10);border-radius:22px;padding:20px;overflow:hidden}
.card::before{content:"";position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(400px 260px at var(--mx,50%) var(--my,50%), var(--ring), transparent 50%);opacity:0;transition:opacity .2s}
.card:hover::before{opacity:1}
.ey{color:#7d8088;text-transform:uppercase;letter-spacing:.2em;font-size:10px}
.title{margin-top:6px;font-size:24px;font-weight:700}
.desc{margin-top:8px;color:#a7aab0;font-size:13.5px;line-height:1.6}

/* ======= FOOTER ======= */
footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;border-top:1px solid #121317;color:#8b8e94;font-size:12px}
.pulse{width:8px;height:8px;border-radius:99px;background:rgba(25,226,140,.8);box-shadow:0 0 12px rgba(25,226,140,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}

/* ======= ACCESSIBILITY ======= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}