:root{
  --bg:#070a12; --bg-elev:#0b1020; --panel:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.1);
  --text:#e8edff; --muted:#9fb0d9; --primary:#6be7ff; --accent:#00f5b0; --danger:#ff6b6b;
  --ring:0 0 0 2px rgba(107,231,255,.35); --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.5);
  --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:
radial-gradient(1000px 600px at 100% 0%, rgba(0,245,176,.12), transparent 40%),
radial-gradient(900px 600px at 0% 100%, rgba(107,231,255,.12), transparent 45%),
var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial; line-height:1.6}
a{color:var(--primary)}
.container{width:min(100% - 2rem, var(--maxw)); margin-inline:auto}
.header{position:sticky; top:0; z-index:1000; backdrop-filter: blur(10px); background:rgba(7,10,18,.6); border-bottom:1px solid rgba(255,255,255,.08)}
.navbar{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; gap:.7rem; align-items:center; font-weight:800}
.brand img{width:28px;height:28px}
.nav-links{display:flex; gap:.8rem; flex-wrap:wrap}
.nav-links a{padding:.55rem .9rem; border-radius:999px; color:var(--text); text-decoration:none}
.nav-links a:hover{background:var(--panel)}
.btn{appearance:none; border:none; cursor:pointer; font-weight:800; padding:.8rem 1.1rem; border-radius:14px; color:#04101a;
background:linear-gradient(135deg, var(--primary), #8ea1ff); box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18); box-shadow:none}
.burger{display:none; border:1px solid rgba(255,255,255,.18); background:transparent; padding:.5rem .7rem; border-radius:12px}
.burger span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0}
@media(max-width:980px){
  .burger{display:block}
  .nav-links{display:none; position:absolute; right:1rem; top:60px; background:var(--bg-elev); padding:.8rem; border:1px solid rgba(255,255,255,.1); border-radius:14px}
  .nav-links.open{display:flex; flex-direction:column; align-items:stretch}
}
.hero{padding:5rem 0 3rem}
.kicker{color:var(--muted); text-transform:uppercase; font-weight:800; letter-spacing:.12em; font-size:.82rem}
.h1{font-size:clamp(2rem, 3vw, 3.2rem); line-height:1.08; letter-spacing:-.02em; margin:.3rem 0 1rem}
.lead{color:var(--muted); font-size:1.2rem}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.12); padding:1.1rem; border-radius:var(--radius); transition:transform .2s ease, background .2s ease}
.card:hover{transform:translateY(-3px); background:var(--panel-2)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media(max-width:980px){.grid-3,.grid-2{grid-template-columns:1fr}}
.section{padding:3rem 0; border-top:1px solid rgba(255,255,255,.06)}
.badge{display:inline-block; padding:.34rem .6rem; border-radius:999px; background:rgba(0,245,176,.15); color:var(--accent); border:1px solid rgba(0,245,176,.35); font-weight:700; font-size:.8rem}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--radius); background:var(--panel); border:1px solid rgba(255,255,255,.12)}
.table th, .table td{padding:1rem; text-align:left; vertical-align:top}
.table thead th{background:rgba(255,255,255,.06); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}
pre, code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
pre{background:#0b1428; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1rem; overflow:auto}
.tag{display:inline-block; padding:.2rem .5rem; border-radius:8px; background:#0e1931; border:1px solid rgba(255,255,255,.12); color:#bcd0ff; font-size:.78rem}
.footer{margin-top:3rem; padding:2.5rem 0; background:linear-gradient(180deg, transparent, rgba(255,255,255,.06)); border-top:1px solid rgba(255,255,255,.08)}
.footer .cols{display:grid; grid-template-columns:1.2fr .8fr .8fr 1fr; gap:1.5rem}
@media(max-width:980px){.footer .cols{grid-template-columns:1fr 1fr}}
.reveal{opacity:0; transform:translateY(8px); transition:.55s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.input, textarea, select{width:100%; padding:.85rem 1rem; border-radius:12px; background:var(--bg-elev); border:1px solid rgba(255,255,255,.12); color:var(--text); outline:none}
.input:focus, textarea:focus, select:focus{box-shadow:var(--ring)}
small.muted{color:var(--muted)}