@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/fredoka-latin.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/fredoka-latin-ext.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#27406b;--ink2:#4a5b78;--mute:#6b7a92;--hot:#f05670;--hot-lo:#c43850;--card:#fff;--line:#d6e6f2;
  --r:28px;--round:Fredoka,ui-rounded,"SF Pro Rounded",Nunito,system-ui,sans-serif;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:17px/1.55 var(--sans);background:linear-gradient(180deg,#7ed4ff 0,#bfe8fb 520px,#eaf7ff 1100px,#fff8ee 100%);min-height:100vh;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--round);line-height:1.08;margin:0;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border-radius:10px;z-index:9}
:focus-visible{outline:3px solid #ffcf4a;outline-offset:3px;border-radius:10px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;padding-bottom:6px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark span{display:flex;flex-direction:column;line-height:1}
.mark b{font:700 27px/1 var(--round);letter-spacing:-.02em}
.mark small{font:700 10px/1 var(--round);letter-spacing:.42em;text-transform:uppercase;opacity:.7;margin-top:4px}
.top nav{display:flex;gap:4px}
.top nav a{font:600 16px/1 var(--round);text-decoration:none;padding:10px 14px;border-radius:999px}
.top nav a:hover{background:rgba(255,255,255,.6)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:999px;font:700 18px/1 var(--round);text-decoration:none;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px)}
.btn-hot{background:var(--hot);color:#fff;box-shadow:0 6px 0 var(--hot-lo),0 12px 24px rgba(240,86,112,.28)}
.btn-hot:active{box-shadow:0 2px 0 var(--hot-lo)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:0 6px 0 #c9dcec}
.btn-soft:active{box-shadow:0 2px 0 #c9dcec}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.actions.center{justify-content:center}

.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px;padding-top:30px;padding-bottom:40px}
.eyebrow{font:700 14px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:#1f6fa8;margin:0 0 14px}
.hero h1{font-size:clamp(46px,7.4vw,86px);font-weight:700;color:#fff;-webkit-text-stroke:0;text-shadow:0 4px 0 #2f6fb0,0 10px 30px rgba(20,60,120,.25)}
.hero h1 span{color:#ffe36e}
.lead{font-size:20px;color:#23406a;max-width:30em;margin:22px 0 0}
.hero-art{position:relative;height:440px}
.sun{position:absolute;right:6%;top:0;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0,#ffe68a 45%,rgba(255,230,138,0) 70%)}
.puff{position:absolute;background:#fff;border-radius:999px;opacity:.85}
.puff.p1{width:220px;height:70px;left:-4%;top:62%;box-shadow:60px -26px 0 -6px #fff}
.puff.p2{width:160px;height:52px;right:-2%;top:18%;opacity:.7;box-shadow:-40px -18px 0 -4px #fff}
.hero-nubbu{position:absolute;left:50%;top:20px;width:min(300px,70%);height:auto;transform:translateX(-50%);animation:bob 4.2s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(30,70,130,.18))}
.rain{position:absolute;left:30%;right:30%;top:270px;z-index:1;bottom:0;overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.rain i{position:absolute;top:-30px;width:26px;height:26px;border-radius:8px;border:3px solid var(--ink);box-shadow:inset 0 -6px 0 rgba(0,0,0,.14),inset 0 4px 0 rgba(255,255,255,.5);animation:fall 3.4s cubic-bezier(.45,0,.8,.6) infinite}
@keyframes bob{50%{transform:translate(-50%,-12px)}}
@keyframes fall{0%{translate:0 0;rotate:-12deg;opacity:0}12%{opacity:1}100%{translate:0 200px;rotate:28deg;opacity:0}}

.block{padding-top:56px;padding-bottom:10px;scroll-margin-top:20px}
.block>h2{font-size:clamp(32px,4.4vw,44px);font-weight:700}
.sub{color:var(--ink2);max-width:40em;margin:10px 0 0;font-size:18px}

.game{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:22px;background:var(--card);border-radius:36px;padding:36px;box-shadow:0 20px 50px rgba(39,64,107,.14);overflow:hidden;position:relative}
.game::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#ffe3e8,rgba(255,227,232,0) 70%)}
.game-copy{position:relative}
.game-head{display:flex;align-items:center;gap:16px}
.game-head svg{border-radius:22px;box-shadow:0 8px 20px rgba(39,64,107,.25);flex:none}
.game h3{font-size:40px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chips span{font:600 13px/1 var(--round);padding:7px 10px;border-radius:999px;background:#eef6fc;color:#1f6fa8}
.game-pitch{font-size:18px;color:var(--ink2);margin:20px 0 0}
.facts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.facts li{padding-left:28px;position:relative;color:var(--ink2)}
.facts li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:#6fd95a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.facts li:nth-child(2)::before{background:#3ec8ea}.facts li:nth-child(3)::before{background:#4d8ef0}
.facts b{color:var(--ink)}
.soon{font-size:14px;color:var(--mute);margin:16px 0 0}
.phones{position:relative;min-height:470px}
.phone{position:absolute;width:220px;height:auto;border-radius:30px;border:7px solid #1d2744;box-shadow:0 24px 50px rgba(20,40,80,.3);background:#1d2744}
.phone.front{left:50%;top:10px;transform:translateX(-30%) rotate(3deg);z-index:1}
.phone.back{left:50%;top:40px;transform:translateX(-95%) rotate(-7deg);opacity:.95}

.ways{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ways li{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:0 8px 22px rgba(39,64,107,.08)}
.ways .dot{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--soft)}
.ways h3{font-size:21px;margin-top:16px;font-weight:600}
.ways p{color:var(--ink2);margin:8px 0 0;font-size:16px}

.crew{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.crew li{text-align:center;background:linear-gradient(180deg,var(--soft),#fff);border-radius:var(--r);padding:22px 12px 20px;transition:transform .2s}
.crew li:hover{transform:translateY(-4px) rotate(-1deg)}
.crew li svg{width:min(128px,80%);height:auto}
.crew h3{font-size:24px;margin-top:8px;color:var(--deep);font-weight:700}
.crew p{margin:4px 0 0;color:var(--ink2);font-size:15px}

.contact{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;background:linear-gradient(135deg,#2f6fb0,#27406b);color:#fff;border-radius:36px;padding:30px 36px;margin-top:10px;box-shadow:0 20px 50px rgba(39,64,107,.25)}
.contact h2{font-size:38px;font-weight:700}
.contact p,.contact li{color:#dcecff;margin:8px 0 0}
.contact a:not(.btn){color:#fff;font-weight:600}
.mails{list-style:none;padding:0;margin:0}

.lost{text-align:center;padding-top:40px;padding-bottom:60px}
.lost h1{font-size:clamp(34px,6vw,56px);margin-top:10px}
.lost .lead{margin-left:auto;margin-right:auto}

.foot{margin-top:70px;background:rgba(255,255,255,.85);border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 30px;padding-top:28px;padding-bottom:28px}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand p{margin:0;color:var(--ink2);font-size:15px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600;font-size:15px}
.foot nav a{text-decoration:none}.foot nav a:hover{text-decoration:underline}
.copy{grid-column:1/-1;margin:0;color:var(--mute);font-size:13px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:14px}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .actions{justify-content:center}
  .hero-art{height:360px;order:-1;margin-bottom:-30px}
  .rain{top:220px}
  .game{grid-template-columns:1fr;padding:26px}
  .phones{min-height:420px}
  .ways{grid-template-columns:1fr 1fr}
  .crew{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .top nav a{padding:9px 9px;font-size:15px}
  .top nav a:first-child{display:none}
  .mark svg{width:40px}
  .hero-art{height:300px}
  .hero-nubbu{width:230px}
  .rain{top:170px}
  .lead{font-size:18px}
  .btn{height:52px;padding:0 22px;font-size:17px}
  .actions{justify-content:center}
  .game h3{font-size:32px}
  .game-head svg{width:68px;height:68px}
  .phone{width:180px;border-radius:24px;border-width:6px}
  .phones{min-height:360px}
  .ways{grid-template-columns:1fr}
  .crew{gap:10px}
  .crew h3{font-size:20px}
  .crew p{font-size:13px}
  .contact{padding:26px 20px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rain i{top:var(--y);rotate:14deg}}