:root { --bg: #2560D2; --deep: #0B2F7E; --gold: #F8CB2E; --ink: #fff; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
  background: radial-gradient(circle at 50% 0, #3b78e8, var(--bg) 45%, var(--deep));
}
a { color: var(--gold); }
.hero { flex: 1; max-width: 560px; margin: 0 auto; padding: 48px 16px 32px; text-align: center; }
.board { width: min(220px, 60vw); transform: rotate(-4deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); border: 4px solid var(--gold); border-radius: 10px; }
h1 { font-size: clamp(56px, 16vw, 88px); line-height: 1; margin: 28px 0 8px; font-weight: 900; letter-spacing: 2px;
     -webkit-text-stroke: 3px #10235a; paint-order: stroke fill; }
h1 small { display: block; font-size: .3em; letter-spacing: 8px; color: var(--gold); -webkit-text-stroke: 0; margin-top: 6px; }
.b { color: #29A8F2; } .r { color: #E8222B; } .g { color: #05A64A; } .y { color: #FFDC1A; }
.lead { font-size: 19px; opacity: .92; }
.cta { display: inline-block; margin: 16px 0 28px; padding: 14px 28px; border-radius: 999px; background: var(--gold); color: #10235a;
       font-weight: 800; text-decoration: none; box-shadow: 0 5px 0 #b58d0c; }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #b58d0c; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: left; }
.features li { background: rgba(11,47,126,.55); border: 1px solid rgba(248,203,46,.35); border-radius: 12px; padding: 12px 16px; }
footer { text-align: center; padding: 20px 16px; font-size: 14px; opacity: .85; }
.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }
.doc h1 { font-size: 36px; -webkit-text-stroke: 0; margin: 8px 0; }
.doc h2 { color: var(--gold); font-size: 20px; margin-top: 28px; }
.muted { opacity: .8; font-size: 15px; }