
:root{
  --bg:#0b0f14;
  --card:#111721;
  --muted:#9aa4b2;
  --text:#e6edf3;
  --accent:#2aa7ff;
  --accent-2:#6bd0ff;
  --max: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.header{position:sticky;top:0;background:#0c121b;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #1c2432;z-index:20}
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand img{width:30px;height:30px;border-radius:6px;display:block;box-shadow:0 0 12px rgba(42,167,255,.25)}
.brand span{font-size:18px}
.spacer{flex:1}
.nav a.btn{padding:10px 14px;border:1px solid #223048;border-radius:12px;background:#0d1622}
.nav a.btn.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}
.container{max-width:var(--max);margin:0 auto;padding:28px 20px}
.hero{display:grid;gap:18px;grid-template-columns:1.3fr 1fr;align-items:center;margin-top:18px}
.hero .card{background:var(--card);padding:26px;border:1px solid #1a2331;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.badge{display:inline-block;font-size:12px;color:#9fea;letter-spacing:.6px;border:1px dashed #2a364b;padding:6px 10px;border-radius:999px;margin-bottom:8px}
h1{font-size:38px;line-height:1.15;margin:6px 0 8px}
h2{font-size:26px;margin:24px 0 10px}
h3{margin:10px 0 6px}
ul{padding-left:20px;margin:10px 0}
.card{background:var(--card);padding:20px;border:1px solid #1a2331;border-radius:16px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}
.footer{border-top:1px solid #1c2432;color:var(--muted);padding:26px 20px;margin-top:30px;background:#0c121b}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.small{color:var(--muted);font-size:14px}
.kicker{color:var(--muted);margin-top:8px}
.cta{display:inline-block;background:var(--accent);color:#061a28;font-weight:700;border-radius:12px;padding:12px 16px}
.cta:hover{filter:brightness(1.05)}
blockquote{border-left:3px solid #2a364b;margin:12px 0;padding:8px 12px;color:#c7d2df}
