:root{
  --bg:#0b0d10;
  --panel:#0f1720;
  --muted:#c9d1d9;
  --accent:#ff3fcb;
  --accent-2:#ffd447;
  --radius:12px;
  --gap:20px;
  --max:1100px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--font); background:linear-gradient(180deg,#071020 0%,var(--bg) 60%); color:var(--muted); -webkit-font-smoothing:antialiased}
.container{max-width:var(--max); margin:0 auto; padding:20px}
.site-header{position:sticky; top:0; background:rgba(6,8,10,0.6); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,0.04);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px}
.brand{display:flex; gap:12px; align-items:center}
.logo{border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); padding:6px}
.wordmark{margin:0; font-size:1.05rem; font-weight:700}
.tag{margin:0; font-size:0.81rem; color:#98a3b3}

.nav a{color:var(--muted); text-decoration:none; margin-left:12px; font-weight:600}
.nav a:hover{color:var(--accent)}

.hero{padding:40px 0 10px}
.hero h2{margin:0 0 8px; font-size:2rem; color:#fff}
.lede{margin:0 0 14px; color:#c3ccd6; max-width:56ch}
.cta-row .btn{margin-right:10px}

.section{margin-top:24px; margin-bottom:24px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:var(--radius); border:1px solid rgba(255,255,255,0.03)}

.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:900px){ .grid.two{grid-template-columns:1fr} }

.btn{display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700; color:var(--bg); background:var(--muted);}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#071018}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04)}

.small{max-width:360px}

.site-footer{padding:16px 0; color:#98a3b3; border-top:1px solid rgba(255,255,255,0.03); display:flex; justify-content:space-between; gap:12px; align-items:center}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}