:root {
  --bg: #0b0f1a;
  --card: #12182b;
  --accent: #4da3ff;
  --accent-soft: rgba(77,163,255,.15);
  --text: #e6e9f0;
  --muted: #9aa4bf;
  --radius: 16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,system-ui,sans-serif;
background:radial-gradient(circle at top,#121a3a,var(--bg));
color:var(--text)
}
header{text-align:center;padding:70px 20px}
nav{margin-top:30px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;padding:10px 18px;border-radius:999px;background:var(--accent-soft)}
nav a:hover{background:var(--accent);color:#000}
main{max-width:1200px;margin:auto;padding:40px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.card{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
footer{text-align:center;padding:30px;color:var(--muted);border-top:1px solid rgba(255,255,255,.1)}