@font-face{font-family:Nunito;src:url(assets/nunito_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(assets/nunito_bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(assets/nunito_extrabold.ttf) format("truetype");font-weight:800;font-display:swap}
:root{
  --bg:#FFF9F2;--surface:#fff;--sunken:#F7F0E5;--border:#E8DECF;
  --ink:#2C2136;--ink-soft:#6B6475;--ink-faint:#A99C8A;
  --coral:linear-gradient(165deg,#FF9E7A 0%,#FF6A45 52%,#E8482A 100%);
  --teal:linear-gradient(165deg,#6FD6D2 0%,#2ECFC9 52%,#17A8A3 100%);
  --berry:linear-gradient(165deg,#C9A6FF 0%,#9A5CFF 52%,#7433E0 100%);
  --sun:linear-gradient(165deg,#FFDE7A 0%,#F6B220 52%,#D8920A 100%);
  --shadow:0 7px 30px -11px rgba(44,33,54,.2);
  --shadow-coral:0 10px 39px -14px rgba(184,50,27,.48);
  --shadow-teal:0 10px 39px -14px rgba(18,112,126,.48);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
.bloom{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.b1{width:640px;height:640px;left:-240px;top:-160px;background:radial-gradient(closest-side,rgba(154,92,255,.16),transparent)}
.b2{width:720px;height:720px;right:-260px;top:320px;background:radial-gradient(closest-side,rgba(46,207,201,.18),transparent)}
.b3{width:620px;height:620px;left:20%;top:1500px;background:radial-gradient(closest-side,rgba(246,178,32,.16),transparent)}
img{max-width:100%;height:auto}
a{color:#17A8A3;font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #2ECFC9;outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance;font-weight:800}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:8px}
p{margin:0 0 14px}
.sub{color:var(--ink-soft);font-weight:700;max-width:62ch}
.top{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px}
.top .logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:24px;font-weight:800}
.top .logo img{border-radius:12px}
.top nav{margin-left:auto;display:flex;gap:6px}
.top nav a{color:var(--ink-soft);padding:8px 14px;border-radius:999px;font-weight:800}
.top nav a:hover{background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.lang{display:flex;background:var(--surface);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.lang button{border:0;background:transparent;font:inherit;font-weight:800;color:var(--ink-faint);padding:6px 12px;border-radius:999px;cursor:pointer}
.lang button.on{background:var(--ink);color:#fff}
@media (max-width:760px){.top nav{display:none}}
main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding:40px 0 70px}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr);padding-top:16px}}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#17A8A3;margin-bottom:10px}
h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.01em;margin-bottom:16px}
.lede{font-size:20px;color:var(--ink-soft);font-weight:700;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.chips span{background:var(--surface);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800;box-shadow:var(--shadow)}
.wait label{display:block;font-weight:800;margin-bottom:8px}
.wait .row{display:flex;gap:10px;max-width:520px}
.wait input{flex:1;min-width:0;width:120px;border:2px solid var(--border);border-radius:999px;padding:14px 20px;font:inherit;font-weight:700;background:var(--surface);color:var(--ink)}
.wait input:focus{border-color:#2ECFC9;outline:none}
.btn{display:inline-block;border:0;cursor:pointer;background:var(--coral);color:#fff;font:inherit;font-weight:800;font-size:17px;padding:14px 26px;border-radius:999px;box-shadow:var(--shadow-coral),inset 0 2px 0 0 rgba(255,255,255,.5);white-space:nowrap;transition:transform .12s}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(2px)}
.fine,.ok{font-size:13.5px;color:var(--ink-faint);font-weight:700;margin-top:8px}
.ok{color:#1E8A45}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.badge{background:var(--ink);color:#fff;border-radius:14px;padding:10px 18px;font-size:14px;font-weight:700}
.hero-vis{position:relative;display:flex;justify-content:center;min-height:540px}
.phone{width:280px;aspect-ratio:9/19.5;border-radius:40px;background:#1a1420;padding:10px;box-shadow:0 30px 80px -30px rgba(44,33,54,.5)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:32px;display:block;background:#FFF9F2}
.mascot{position:absolute;right:-14px;bottom:-10px;width:min(168px,24vw);pointer-events:none}
/* Sized to peek past the phone, not sit on it: at 300px against a 280px phone it
   covered the video's own captions. Keep it clear of the screen area. */
.float{animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}html{scroll-behavior:auto}}
.sec{padding:60px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border-radius:26px;padding:26px;box-shadow:var(--shadow)}
.step h3{font-size:20px;margin:14px 0 6px}
.step p{color:var(--ink-soft);font-weight:700;font-size:15.5px;margin:0}
.orb{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:inset 0 2px 0 0 rgba(255,255,255,.5),inset 0 -12px 24px -8px rgba(0,0,0,.25)}
.orb.teal{background:var(--teal);box-shadow:var(--shadow-teal)}.orb.coral{background:var(--coral);box-shadow:var(--shadow-coral)}.orb.sun{background:var(--sun)}
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
@media (max-width:900px){.games{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.games{grid-template-columns:1fr}}
.tile{border-radius:30px;padding:24px 22px;min-height:230px;position:relative;overflow:hidden}
.tile .g{font-size:44px;font-weight:800;line-height:1;margin-bottom:10px}
.tile h3{font-size:19px;margin-bottom:6px}
.tile p{font-size:14.5px;font-weight:700;margin:0}
.tile.glossy{background:var(--coral);color:#fff;box-shadow:var(--shadow-coral),inset 0 2px 0 0 rgba(255,255,255,.6),inset 0 -14px 30px -8px rgba(120,20,0,.5)}
.tile.glossy:before{content:"";position:absolute;left:-14px;top:-32px;width:105%;height:45%;border-radius:50%;background:rgba(255,255,255,.32)}
.tile.glossy>*{position:relative}
.tile.paper{background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.tile.paper p{color:var(--ink-faint)}
.teal-t{color:#2ECFC9}.berry-t{color:#9A5CFF}.sun-t{color:#F6B220}
.screens{display:flex;gap:24px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.screens img{width:min(280px,42vw);border-radius:28px;box-shadow:0 30px 80px -30px rgba(44,33,54,.45)}
.promise{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center}
@media (max-width:760px){.promise{grid-template-columns:1fr}.mascot-side{width:180px;margin:0 auto}}
.vows{list-style:none;padding:0;margin:18px 0}
.vows li{background:var(--surface);border-radius:22px;padding:16px 20px;margin-bottom:10px;box-shadow:var(--shadow);display:grid;gap:2px}
.vows b{font-size:18px;font-weight:800}
.vows span{color:var(--ink-soft);font-weight:700;font-size:15px}
.faq{max-width:760px;display:grid;gap:10px;margin-top:22px}
details{background:var(--surface);border-radius:20px;padding:6px 20px;box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:800;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:24px;color:var(--ink-faint)}
details[open] summary:after{content:"–"}
details p{color:var(--ink-soft);font-weight:700;padding-bottom:12px;margin:0}
.cta{text-align:center;padding:60px 0 80px}
.cta h2{margin:10px 0 22px}
.follow{margin-top:26px;color:var(--ink-faint);font-weight:700}
footer{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--ink-faint);font-weight:700;font-size:14px}
footer nav{display:flex;gap:18px}
footer a{color:var(--ink-soft)}
/* subpages */
.doc{max-width:760px;margin:0 auto;padding:20px 24px 80px;position:relative;z-index:1}
.doc h1{font-size:clamp(32px,5vw,48px);margin:20px 0 6px}
.doc h2{font-size:24px;margin:34px 0 8px}
.doc p,.doc li{color:var(--ink);font-weight:600}
.doc .meta{color:var(--ink-faint);font-weight:700;font-size:14px}
.doc .card{background:var(--surface);border-radius:22px;padding:20px 24px;box-shadow:var(--shadow);margin:18px 0}

/* The store name is Latin even where the site is Cyrillic. Apple does no
   transliteration, so a parent searching «Боцко» finds nothing — say which
   spelling to type. */
.findus{font-size:14.5px;color:var(--ink-soft,#6B6475);font-weight:700;margin:12px 0 0;opacity:.9}