:root{--sky1:#bfe4ff;--sky2:#eef7ff;--grass:#9fe08a;--grass2:#6cc46f;--ink:#2a2d4a;--muted:#6b7090;--violet:#6c5ce7;--violet-d:#4b3fc4;--mint:#2ec4b6;--mint-d:#1c9a8e;--sun:#ffd23f;--f:"Fredoka","Trebuchet MS",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;font-family:var(--f);color:var(--ink);background:#fff;font-size:18px;line-height:1.5}
a{color:var(--violet)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1120px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:26px;color:var(--violet);text-decoration:none}
.brand .logo svg{width:44px;height:44px;display:block}
.nav nav{display:flex;gap:18px;flex-wrap:wrap}.nav nav a{text-decoration:none;color:var(--ink);font-weight:500}.nav nav a:hover{color:var(--violet)}
.hero{position:relative;background:linear-gradient(180deg,var(--sky1),var(--sky2));overflow:hidden;padding:40px 0 120px}
.hero-in{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.1;margin:0 0 16px;color:var(--violet)}
.lead{font-size:20px;color:var(--ink)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.badge{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-weight:600}
.badge.soon{background:#fff;color:var(--ink);border:2px solid #d9d6f5}
.hero-g{position:relative;text-align:center}.hero-g svg{width:min(70%,320px);height:auto;filter:drop-shadow(0 14px 12px rgba(40,90,40,.22));animation:bob 2.6s ease-in-out infinite}
.bulle{display:inline-block;background:#fff;border-radius:22px;padding:10px 18px;font-weight:600;color:var(--violet);box-shadow:0 6px 18px rgba(60,60,120,.14);margin-bottom:-10px;position:relative;z-index:1}
.hills{position:absolute;left:-10vw;right:-10vw;bottom:-40px;height:160px;background:radial-gradient(ellipse at 30% 100%,var(--grass) 0 55%,transparent 56%),radial-gradient(ellipse at 75% 100%,var(--grass2) 0 60%,transparent 61%)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
svg .eyes{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:center}@keyframes blink{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
svg .tail{transform-box:fill-box;transform-origin:0% 100%;animation:wag 1.1s ease-in-out infinite}@keyframes wag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
section{padding:56px 0}
h2{font-size:clamp(26px,3.4vw,38px);color:var(--violet);margin:0 0 18px}
h3{margin:0 0 8px;font-size:22px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:28px;padding:24px;box-shadow:0 10px 30px rgba(60,60,120,.12);position:relative}
.card.accent{background:var(--violet);color:#fff}.card.accent h3{color:#fff}
.card .num{width:44px;height:44px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-weight:700;font-size:22px;margin-bottom:10px}
.big{font-size:44px;font-weight:700;margin:4px 0;color:var(--violet)}.accent .big{color:var(--sun)}
.band{background:linear-gradient(180deg,#f3f9ff,#eaf7e6)}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cl{background:#fff;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:6px;border:3px solid transparent}
.cl b{font-size:20px;color:var(--violet)}.cl span{color:var(--muted);font-size:16px}.cl em{font-style:normal;font-size:14px;font-weight:600;color:var(--muted)}
.cl.on{border-color:var(--mint)}.cl.on em{color:var(--mint-d)}
.small{font-size:14px;color:var(--muted)}
.doc h1{color:var(--violet);font-size:clamp(30px,4vw,44px)}.doc h2{font-size:24px;margin-top:28px}.doc{max-width:820px}
footer{background:var(--ink);color:#fff;padding:36px 0}footer a{color:#fff}
@media(max-width:800px){.hero-in{grid-template-columns:1fr}.cards3,.classes{grid-template-columns:1fr}.hero{padding-bottom:90px}}