:root { --sky: #1D2B53; --ink: #14182B; --snow: #F4F7FB; --gold: #F2B632; --red: #D7263D; --paper: #F7EEDC; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sky); color: var(--snow); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -0.5px; }
h2 { font-size: 22px; margin: 32px 0 8px; color: var(--gold); }
p, li { color: rgba(244, 247, 251, 0.9); }
a { color: var(--gold); }
.tag { color: var(--gold); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
.hero { text-align: center; padding-top: 24px; }
.hero img { width: min(420px, 100%); height: auto; margin: 24px 0; }
.button { display: inline-block; background: var(--red); color: var(--snow); text-decoration: none; font-weight: 800; padding: 14px 28px; border-radius: 999px; }
nav { display: flex; gap: 20px; justify-content: center; margin-top: 40px; font-size: 15px; }
.card { background: rgba(20, 24, 43, 0.45); border: 1px solid rgba(242, 182, 50, 0.4); border-radius: 16px; padding: 4px 20px 12px; }
small { color: rgba(244, 247, 251, 0.6); }