:root { --bg:#0d1324; --panel:#111c33; --ink:#f6efe3; --muted:#bec7d9; --accent:#ff5b57; --cyan:#64d8ff; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
body { margin:0; font-family:"IBM Plex Sans","Segoe UI",sans-serif; color:var(--ink); background:radial-gradient(circle at top right, rgba(100,216,255,.18), transparent 22%), linear-gradient(155deg,#0d1324,#17284b 60%,#2a1121); }
.page { max-width:1100px; margin:0 auto; padding:28px 18px 64px; }
.hero, .card { border:1px solid var(--line); background:rgba(11,18,34,.86); border-radius:24px; box-shadow:0 20px 54px rgba(0,0,0,.34); }
.hero { padding:28px; margin-bottom:20px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { padding:22px; }
.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:.16em; color:var(--cyan); font-size:.75rem; }
h1,h2 { margin:0 0 10px; font-family:"Space Grotesk","IBM Plex Sans",sans-serif; }
h1 { font-size:clamp(2.1rem,4vw,3.8rem); text-transform:uppercase; }
.lede { color:var(--muted); }
.button { display:inline-block; margin-top:12px; padding:12px 16px; border-radius:999px; text-decoration:none; color:var(--ink); background:linear-gradient(135deg,var(--accent),#ff9f73); }
@media (max-width:720px) { .page { padding:18px 12px 48px; } }