:root{ --bg:#0b1220; --fg:#e7ecf3; --muted:#9fb0c8; --card:#121a2b; --brand:#78c0ff; --accent:#5ee1a8 }
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--fg)}
.hero{padding:48px 20px;text-align:center;background:linear-gradient(180deg,rgba(120,192,255,.15),transparent)}
.hero.small{padding:28px 20px}.sub{color:var(--muted)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px;max-width:1100px;margin:0 auto}
.card{background:var(--card);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,.06)}
.card h2{margin-top:0}
.span2{grid-column:1/-1}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:none;border-radius:10px;padding:10px 14px;background:var(--brand);color:#001225;font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.2)}
.btn:active{transform:translateY(1px)}
footer{padding:20px;text-align:center;color:var(--muted)} footer nav{display:flex;gap:16px;justify-content:center;margin-bottom:6px}
.content{max-width:800px;margin:0 auto;padding:20px}
code{background:#0b1528;padding:2px 6px;border-radius:6px;color:#aee}
@media (max-width:800px){.grid{grid-template-columns:1fr}}