:root { --bg:#09111e; --panel:#111c31; --ink:#f6efe4; --muted:#b7c1d6; --accent:#ff7a59; --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:linear-gradient(155deg,#09111e,#112445 55%,#1d1024); }
.page { max-width:1180px; 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:#7dd3fc; 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),#ffd166); }
@media (max-width:720px) { .page { padding:18px 12px 48px; } }