:root{
  --bg:#0b0b0d;--bg-elev:#121214;--ink:#f2f2f2;--muted:#b5b5b5;--accent:#e11d2e;--edge:#8a8f98;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Arial,Helvetica,sans-serif}
a{color:var(--ink);text-decoration:none} a:hover{color:var(--accent)}
.header,.footer{background:var(--bg-elev)} .container{max-width:1200px;margin:0 auto;padding:16px}
.button{display:inline-block;padding:12px 18px;border:1px solid var(--edge);text-transform:uppercase;letter-spacing:.06em}
.button--primary{background:var(--accent);border-color:var(--accent);color:white}
.announcement{background:linear-gradient(90deg,var(--accent),#b30e36);color:#fff;text-align:center;padding:8px 12px;font-weight:600}
.logo-text{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.nav a{margin:0 8px;color:var(--muted)}
.grid{display:grid;gap:20px}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg-elev);padding:16px;border:1px solid rgba(255,255,255,.06);border-radius:12px}
.hero{position:relative;background:radial-gradient(1200px 400px at center,var(--bg-elev),var(--bg));padding:56px 0;margin-bottom:20px}
.hero__title{font-size:clamp(28px,4vw,56px);line-height:1.05;margin:0}
.hero__subtitle{margin:12px 0 24px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge);padding:6px 10px;border-radius:999px;color:var(--muted)}
.footer{color:var(--muted)}
small,.caption{color:var(--muted)}