:root { color-scheme: dark; --bg:#111; --paper:#fff; --ink:#171717; --gold:#ffdd2d; --muted:#c9c9c9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Open Sans",Arial,sans-serif; color:#fff; background:var(--bg); line-height:1.65; }
a { color:inherit; }
.wrap { width:min(1040px,calc(100% - 40px)); margin:auto; }
header { padding:24px 0; border-bottom:1px solid #2b2b2b; }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { max-width:240px; text-decoration:none; font-weight:700; line-height:1.25; }
.button { display:inline-block; padding:13px 24px; color:#111; background:var(--gold); border-radius:999px; text-decoration:none; font-weight:700; }
.hero { padding:88px 0 72px; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
h1,h2 { font-family:Ubuntu,Arial,sans-serif; line-height:1.12; }
h1 { max-width:900px; margin:14px 0 24px; font-size:clamp(42px,7vw,82px); }
.lead { max-width:760px; color:var(--muted); font-size:clamp(18px,2.2vw,24px); }
.content { padding:72px 0; color:var(--ink); background:var(--paper); }
.grid { display:grid; grid-template-columns:2fr 1fr; gap:56px; }
h2 { margin:0 0 20px; font-size:clamp(30px,4vw,48px); }
h3 { margin:32px 0 10px; font-size:24px; }
li { margin:.55em 0; }
.card { align-self:start; padding:28px; color:#fff; background:#111; border-radius:4px; }
.card .button { margin-top:14px; }
footer { padding:32px 0; color:#aaa; }
@media (max-width:760px) { header .wrap { align-items:flex-start; } .hero { padding:60px 0; } .grid { grid-template-columns:1fr; gap:34px; } }