:root{
  --brand:#0B5ED7;
  --bg:#0b0f14;
  --text:#f4f7fb;
  --muted:#a7b0bf;
  --card:#121923;
  --accent:#1e293b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:#66c1ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:auto;padding:24px}
.header{position:sticky;top:0;background:linear-gradient(180deg,var(--accent),transparent);backdrop-filter:blur(8px);z-index:2;border-bottom:1px solid #273244}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{font-weight:800;font-size:20px;letter-spacing:.4px}
.menu a{margin:0 12px;color:var(--muted)}
.hero{padding:68px 0 36px;background:linear-gradient(180deg,var(--card),transparent)}
.hero h1{font-size:38px;margin:0 0 8px}
.hero p{color:var(--muted);max-width:800px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0}
.card{background:var(--card);border:1px solid #233042;border-radius:14px;padding:18px;min-height:160px}
.card h3{margin:0 0 6px}
.cta{display:inline-block;margin-top:8px;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px}
.section h2{margin-top:8px}
.footer{margin-top:36px;background:#0c131c;border-top:1px solid #273244}
.footer .grid{display:grid;grid-template-columns:1fr;gap:8px}
.kv{display:flex;gap:10px;align-items:flex-start;color:#c8d2e3}
.kv svg{flex:0 0 20px;margin-top:2px}
.small{color:var(--muted);font-size:13px}
.badge{display:inline-grid;grid-auto-flow:column;gap:8px;place-items:center;background:#0a1622;padding:8px 12px;border:1px solid #1d2a3a;border-radius:12px;color:#b8c3d6;font-weight:600}
hr{border:0;border-top:1px solid #223147;margin:18px 0}
ul{padding-left:18px}
@media(min-width:720px){
 .footer .grid{grid-template-columns:1fr 1fr}
}