:root{
  --blue:#0A84C7; --blue-deep:#06608F; --gold:#F5B700; --gold-deep:#E09A00;
  --ink:#0B2540; --ink-soft:#3D5570; --beak:#FF6B2C; --paper:#FFFFFF; --mist:#EEF6FB;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scrollbar-color:var(--blue) var(--mist)}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
::selection{background:var(--gold);color:var(--ink)}
a{color:var(--blue-deep);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header.top{background:var(--blue)}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em}
.brand img{width:40px;height:40px}
nav .links a{color:#fff;margin-left:22px;font-weight:600;text-decoration:none}
nav .links a:hover{text-decoration:underline}
.hero{background:var(--blue);color:#fff;padding:56px 0 96px}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;max-width:12ch}
.hero p{font-size:1.2rem;margin-top:22px;max-width:46ch;color:#E3F2FB}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;background:var(--gold);color:var(--ink);font-weight:700;font-size:1.05rem;padding:15px 26px;border-radius:999px;text-decoration:none;transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.cta:hover{background:#FFC929;transform:translateY(-2px)}
.mascot{width:100%;max-width:340px;justify-self:center;animation:hop 2.6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.mascot{animation:none}}
section{padding:88px 0}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.025em;line-height:1.1;max-width:20ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:18px}
.steps h3{font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em;margin-bottom:6px}
.steps p{color:var(--ink-soft);max-width:32ch}
.fair{background:var(--mist)}
.fair .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.fair dt{font-weight:700;font-size:1.1rem}
.fair dd{color:var(--ink-soft);margin:4px 0 26px;max-width:44ch}
.payout{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.payout span{background:#fff;border:1px solid #CFE3F0;padding:10px 18px;border-radius:999px;font-weight:600}
footer{background:var(--ink);color:#B9C8D8;padding:48px 0;font-size:.95rem}
footer a{color:#fff}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.legal{padding:64px 0 96px}
.legal h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.025em}
.legal .upd{color:var(--ink-soft);margin:8px 0 40px}
.legal h2{font-size:1.4rem;margin:40px 0 10px;max-width:none}
.legal p,.legal li{max-width:70ch;color:#22384F}
.legal ul{padding-left:22px;margin:8px 0}
@media (max-width:760px){
  .hero .grid,.fair .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:32px}
  .mascot{max-width:220px;order:-1}
  nav .links a{margin-left:14px;font-size:.95rem}
}
.form{display:grid;gap:18px;max-width:560px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid #B9D3E4;border-radius:10px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--blue)}
.form button{border:0;cursor:pointer;justify-self:start;margin-top:6px}
.hp{position:absolute;left:-9999px}
.note{max-width:560px;padding:14px 16px;border-radius:10px;margin-bottom:24px;font-weight:600}
.note.ok{background:#E3F6EC;color:#11603A}.note.err{background:#FDECEA;color:#9B2317}
