:root{--ink:#101113;--paper:#fff;--soft:#f6f6f3;--line:#e2e3e5;--muted:#62666c;--coral:#ff5b3a;--sun:#ffc21a;--sky:#2f7bff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Bebas,'Arial Narrow',Arial,sans-serif;font-weight:700;line-height:.92;letter-spacing:.005em}
h2{font-size:clamp(64px,7vw,112px);text-wrap:balance}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:600;color:var(--muted)}
.c-coral{color:var(--coral)}.c-sun{color:var(--sun)}.c-sky{color:var(--sky)}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:52px;padding:13px 26px;border-radius:40px;border:1.5px solid transparent;font-size:14px;font-weight:600;transition:transform .2s,background .2s,color .2s}
.pill:hover{transform:translateY(-2px)}
.pill.ink{background:var(--ink);color:#fff}
.pill.ink:hover{background:#2b2d30}
.pill.line{border-color:var(--ink)}
.pill.line:hover{background:var(--ink);color:#fff}
.pill.white{background:#fff;color:var(--ink);border-color:#fff}
.pill.ghost{background:transparent;color:#fff;border-color:#ffffff99}
.pill.ghost:hover{border-color:#fff}

/* header */
.kh{position:sticky;top:0;z-index:50;height:80px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#ffffffe6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:34px;height:38px;object-fit:contain;mix-blend-mode:multiply}
.brand>span{font-family:Arial,Helvetica,sans-serif;font-size:23px;letter-spacing:-1px;font-weight:800;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:1.5px;font-weight:600;margin-top:7px;color:var(--muted)}
.kh nav{display:flex;gap:28px;font-size:13px;font-weight:500}
.kh nav a:hover{text-decoration:underline;text-underline-offset:6px}
.kh .pill{min-height:42px;padding:10px 22px;font-size:12px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4%;align-items:center;padding:70px 5% 70px}
.hero h1{font-size:clamp(84px,10.4vw,170px);margin-top:26px}
.hero-copy>p{margin-top:28px;font-size:17px;line-height:1.7;color:#3d4045;max-width:470px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.buddy-wrap{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;justify-self:center}
.buddy-sun{position:absolute;inset:9%;border-radius:50%;background:var(--sun)}
.orbit{position:absolute;inset:0;border-radius:50%;animation:spin 18s linear infinite;pointer-events:none}
.orbit::before{content:"";position:absolute;border-radius:50%}
.o1::before{width:44px;height:44px;background:var(--coral);top:6%;left:16%}
.o2{animation-duration:26s;animation-direction:reverse}.o2::before{width:26px;height:26px;background:var(--sky);bottom:10%;right:8%}
.o3{animation-duration:34s;inset:3%}.o3::before{width:14px;height:14px;background:var(--ink);top:44%;right:-1%}
@keyframes spin{to{transform:rotate(360deg)}}
.buddy{position:absolute;left:50%;top:52%;width:58%;transform:translate(-50%,-50%);border:0;background:none;padding:0;border-radius:40%}
.buddy svg{display:block;width:100%;height:auto;overflow:visible}
#buddy-body{transform-origin:120px 240px;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.buddy.jump #buddy-body{animation:jump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{30%{transform:translateY(-34px) scale(1.02,.98)}60%{transform:translateY(0) scale(1.06,.92)}100%{transform:none}}
.bubble{position:absolute;right:-18%;top:-10%;max-width:220px;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;line-height:1.35;text-align:left;box-shadow:0 18px 30px -18px #0007;transition:transform .25s}
.buddy.jump .bubble{transform:scale(1.06)}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 4%;margin:0 5%;padding:44px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{position:relative;padding-bottom:22px}
.fact b{display:block;font-family:Bebas,'Arial Narrow',sans-serif;font-size:clamp(72px,7vw,110px);line-height:.9;font-variant-numeric:tabular-nums}
.fact b small{font-size:.42em;margin-left:4px;vertical-align:.9em}
.fact span{display:block;margin-top:10px;font-size:14px;color:var(--muted);max-width:240px}
.bar{position:absolute;left:0;bottom:0;width:54px;height:5px;border-radius:5px}
.bar.coral{background:var(--coral)}.bar.sun{background:var(--sun)}.bar.sky{background:var(--sky)}
.facts-src{grid-column:1/-1;margin-top:22px;font-size:11px;letter-spacing:1px;color:#8a8e93}

/* section heads */
.visit,.parents{padding:120px 5%}
.k-head{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:35px;align-items:start;margin-bottom:52px}
.k-head .eyebrow{padding-top:12px}
.k-head p{font-size:15px;line-height:1.7;color:var(--muted);max-width:320px;padding-top:10px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.steps li{border:1px solid var(--line);border-radius:28px;padding:26px 24px 30px;transition:transform .3s,border-color .3s}
.steps li:hover{transform:translateY(-4px);border-color:#c5c8cc}
.num{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-family:Bebas,'Arial Narrow',sans-serif;font-size:34px;line-height:1}
.num.coral{background:var(--coral);color:#fff}.num.sun{background:var(--sun)}.num.sky{background:var(--sky);color:#fff}.num.ink{background:var(--ink);color:#fff}
.steps h3{font-size:36px;margin-top:46px}
.steps p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}

/* brush timer */
.brush{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:center;padding:110px 5%;background:var(--sky);color:#fff}
.brush .eyebrow{color:#ffffffb3}
.brush h2{margin-top:24px}
.brush-copy>p{margin-top:26px;font-size:16px;line-height:1.7;color:#ffffffe0;max-width:420px}
.brush-ctrl{display:flex;gap:12px;margin-top:30px}
.dial-wrap{position:relative;width:100%;max-width:470px;aspect-ratio:1/1;justify-self:center}
.dial{display:block;width:100%;height:100%;overflow:visible}
.zone-track{fill:none;stroke:#ffffff30;stroke-width:22;stroke-linecap:round}
.zone-fill{fill:none;stroke:var(--sun);stroke-width:22;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.zone-track.active{stroke:#ffffff70;animation:glow 1s ease-in-out infinite alternate}
@keyframes glow{to{stroke:#ffffffb0}}
#brush-dot{filter:drop-shadow(0 0 8px #fff)}
.dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.dial-center b{font-family:Bebas,'Arial Narrow',sans-serif;font-size:clamp(76px,9vw,124px);line-height:.9;font-variant-numeric:tabular-nums}
.dial-center span{margin-top:8px;font-size:12px;letter-spacing:1.6px;font-weight:700;max-width:60%}
.dial-labels span{position:absolute;font-size:10px;letter-spacing:1.4px;font-weight:700;color:#ffffffb3}
.dial-labels .tl{left:-2%;top:2%}.dial-labels .tr{right:-2%;top:2%}.dial-labels .br{right:-2%;bottom:2%}.dial-labels .bl{left:-2%;bottom:2%}
.dial-labels span.on{color:#fff}
.done-burst{position:absolute;width:12px;height:12px;border-radius:50%;pointer-events:none;animation:burst 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}

/* faq */
.faq{margin-left:calc((100% - 70px)/3.7 + 35px);border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:26px 0}
.faq summary::-webkit-details-marker{display:none}
.faq h3{font-size:clamp(30px,3vw,44px)}
.faq i{margin-left:auto;font-style:normal;font-size:30px;font-weight:300;transition:transform .25s}
.faq details[open] i{transform:rotate(45deg)}
.faq details p{max-width:640px;padding:0 0 26px;font-size:15px;line-height:1.7;color:var(--muted)}

/* cta */
.cta{position:relative;margin:0 5% 60px;padding:80px 6%;border-radius:36px;background:var(--soft);overflow:hidden}
.cta-in{position:relative;z-index:2;max-width:640px}
.cta h2{margin-top:22px}
.cta-phone{display:inline-block;margin-top:30px;font-family:Bebas,'Arial Narrow',sans-serif;font-size:clamp(42px,5vw,76px);line-height:1}
.cta-in>p{margin-top:16px;font-size:15px;line-height:1.7;color:var(--muted)}
.cta-shapes i{position:absolute;border-radius:50%}
.cta-shapes i:nth-child(1){width:300px;height:300px;right:-60px;top:-80px;background:var(--sun)}
.cta-shapes i:nth-child(2){width:180px;height:180px;right:170px;bottom:-60px;background:var(--coral)}
.cta-shapes i:nth-child(3){width:110px;height:110px;right:60px;bottom:90px;background:var(--sky)}

/* footer */
.kf{margin:0 5%;padding:34px 0 44px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:12px;color:#888}
.kf .brand{color:var(--ink)}
.kf>div{display:flex;gap:26px;justify-content:end;flex-wrap:wrap;font-size:14px;color:#444}
.kf>span{text-align:right}

@media(max-width:1000px){
 .kh nav{gap:16px;font-size:12px}
 .hero{grid-template-columns:1fr 1fr}
 .bubble{right:-4%;top:-8%;max-width:180px;font-size:13px}
 .facts{grid-template-columns:1fr 1fr 1fr}
 .k-head{grid-template-columns:1fr 2fr}.k-head p{grid-column:2;padding:0}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .faq{margin-left:0}
 .cta-shapes i:nth-child(1){width:220px;height:220px}
}
@media(max-width:700px){
 .kh{height:68px;padding:0 6%}
 .kh nav{display:none}
 .brand>span{font-size:20px}.brand img{width:28px;height:32px}.brand small{font-size:8px;letter-spacing:1px}
 .kh .pill{font-size:11px;padding:9px 15px;min-height:38px}
 .hero{display:flex;flex-direction:column-reverse;gap:10px;padding:26px 6% 56px}
 .buddy-wrap{max-width:360px}
 .bubble{right:-4%;top:-12%;max-width:160px;font-size:12px;padding:10px 12px}
 .hero h1{font-size:21vw;margin-top:18px}
 .hero-copy>p{font-size:15px}
 .hero-actions .pill{flex:1 1 auto}
 .facts{grid-template-columns:1fr;margin:0 6%;gap:26px;padding:34px 0 22px}
 .fact b{font-size:84px}
 .visit,.parents{padding:80px 6%}
 .k-head{display:block;margin-bottom:32px}
 .k-head h2{margin:20px 0 16px;font-size:18vw}
 .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -6%;padding:0 6% 8px;scrollbar-width:none}
 .steps::-webkit-scrollbar{display:none}
 .steps li{scroll-snap-align:start}
 .steps h3{margin-top:34px}
 .brush{display:flex;flex-direction:column;align-items:stretch;gap:44px;padding:80px 6%}
 .brush h2{font-size:18vw}
 .dial-wrap{max-width:330px}
 .dial-labels span{font-size:9px}
 .dial-labels .tl,.dial-labels .bl{left:-4%}.dial-labels .tr,.dial-labels .br{right:-4%}
 .brush-ctrl .pill{flex:1}
 .faq summary{padding:20px 0}
 .cta{margin:0 0 40px;border-radius:0;padding:64px 6% 200px}
 .cta h2{font-size:17vw}
 .cta-shapes i:nth-child(1){width:180px;height:180px;right:-50px;top:auto;bottom:-50px}
 .cta-shapes i:nth-child(2){width:110px;height:110px;right:140px;bottom:-30px}
 .cta-shapes i:nth-child(3){width:70px;height:70px;right:120px;bottom:90px}
 .cta .hero-actions{flex-direction:column}
 .kf{margin:0 6%;display:block}.kf>div{justify-content:start;margin:22px 0;gap:16px}.kf>p{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .orbit,#buddy-body,.zone-track.active{animation:none}
 *{transition:none!important}
}

/* ---------- вкладки страницы ---------- */
.kid-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:34px 5% 0}
.kid-tabs a{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:40px;font-size:13px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.kid-tabs a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.kid-tabs i{width:10px;height:10px;border-radius:50%}
.kid-tabs i.coral{background:var(--coral)}.kid-tabs i.sun{background:var(--sun)}.kid-tabs i.sky{background:var(--sky)}.kid-tabs i.ink{background:var(--ink)}

/* ---------- игра ---------- */
.game,.teeth{padding:120px 5%}
.game{background:var(--soft)}
.g-box{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr);gap:16px}
.g-stage{position:relative;border-radius:30px;overflow:hidden;background:#fff;border:1px solid var(--line)}
#g{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:760/460;touch-action:manipulation;cursor:crosshair}
.g-hud{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1.4px;font-weight:700;color:var(--muted);pointer-events:none}
.g-hud b{font-family:Bebas,'Arial Narrow',sans-serif;font-size:30px;letter-spacing:0;color:var(--ink);margin-left:6px;vertical-align:-4px;font-variant-numeric:tabular-nums}
.g-lives{display:flex;gap:6px}
.g-lives i{width:22px;height:22px;border-radius:50%;background:var(--coral);transition:transform .3s,background .3s}
.g-lives i.off{background:#e3e4e6;transform:scale(.7)}
.g-over{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#ffffffe0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.g-over>div{max-width:380px}
.g-over h3{font-size:clamp(46px,5vw,72px)}
.g-over p{margin:12px 0 22px;font-size:15px;color:var(--muted)}
.g-side{display:flex;flex-direction:column;gap:16px}
.g-best{padding:24px;border-radius:26px;background:var(--sun)}
.g-best .eyebrow{color:#5a4a10}
.g-best b{display:block;margin-top:6px;font-family:Bebas,'Arial Narrow',sans-serif;font-size:84px;line-height:.9;font-variant-numeric:tabular-nums}
.g-legend{list-style:none;margin:0;padding:22px;border-radius:26px;background:#fff;border:1px solid var(--line);display:grid;gap:16px}
.g-legend li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.g-legend b{display:block;font-family:Bebas,'Arial Narrow',sans-serif;font-size:22px;color:var(--ink);line-height:1}
.g-legend i{width:30px;height:30px}
.lg-sugar{background:#fff;border:2px solid #d8d1bd;border-radius:7px;transform:rotate(12deg)}
.lg-germ{border-radius:50%;background:radial-gradient(circle at 35% 35%,#8ee06a,#4fb33a);box-shadow:0 0 0 3px #4fb33a44}
.lg-gold{border-radius:9px;background:linear-gradient(135deg,#ffd75a,#ffb000);transform:rotate(-20deg)}
.g-tip{padding:0 6px;font-size:13px;line-height:1.6;color:var(--muted)}

/* ---------- карта зубов ---------- */
.t-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:stretch}
.t-map{padding:26px 26px 30px;border:1px solid var(--line);border-radius:30px;background:#fff}
#jaw{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.tooth{cursor:pointer;outline:none}
.tooth .shape{fill:#f1f2f3;stroke:#d5d7da;stroke-width:1.5;transition:fill .35s,stroke .35s}
.tooth.up .shape{fill:#fff;stroke:var(--ink);stroke-width:2}
.tooth.up.g-inc .shape{fill:#ffe3dc}.tooth.up.g-can .shape{fill:#fff1c4}.tooth.up.g-mol .shape{fill:#dbe7ff}
.tooth:hover .shape,.tooth:focus-visible .shape{stroke:var(--sky);stroke-width:3}
.tooth.sel .shape{fill:var(--ink)!important;stroke:var(--ink)}
.jaw-label{font-family:Bebas,'Arial Narrow',sans-serif;font-size:18px;fill:#9a9ea3;letter-spacing:1px}
.t-age{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:18px}
.t-age label{font-size:11px;letter-spacing:1.4px;font-weight:700;color:var(--muted)}
.t-age input{width:100%;accent-color:var(--sky)}
.t-age b{font-family:Bebas,'Arial Narrow',sans-serif;font-size:28px;min-width:120px;text-align:right}
.t-info{display:flex;flex-direction:column;gap:16px}
.t-count{display:flex;align-items:center;gap:18px;padding:24px;border-radius:26px;background:var(--sky);color:#fff}
.t-count b{font-family:Bebas,'Arial Narrow',sans-serif;font-size:96px;line-height:.85;font-variant-numeric:tabular-nums}
.t-count span{font-size:14px;line-height:1.5;color:#ffffffe0}
.t-card{flex:1;padding:26px;border-radius:26px;border:1px solid var(--line);background:#fff}
.t-card h3{font-size:42px;margin-top:8px}
.t-card dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 0}
.t-card dt{font-size:10px;letter-spacing:1.4px;font-weight:700;color:var(--muted)}
.t-card dd{margin:4px 0 0;font-family:Bebas,'Arial Narrow',sans-serif;font-size:34px;line-height:1}
.t-src{font-size:12px;line-height:1.6;color:#8a8e93;padding:0 6px}

@media(max-width:1000px){.g-box,.t-box{grid-template-columns:1fr}.g-side{display:grid;grid-template-columns:1fr 1.4fr;align-items:start}.g-tip{grid-column:1/-1}}
@media(max-width:700px){
 .kid-tabs{padding:26px 6% 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.kid-tabs::-webkit-scrollbar{display:none}.kid-tabs a{flex:0 0 auto}
 .game,.teeth{padding:80px 6%}
 .g-stage{border-radius:22px;margin:0 -2%}
 #g{aspect-ratio:760/600}
 .g-hud{top:10px;left:12px;right:12px;font-size:10px}.g-hud b{font-size:24px}.g-lives i{width:16px;height:16px}
 .g-side{display:flex}
 .g-best b{font-size:64px}
 .t-map{padding:18px 14px 22px}
 .t-age{grid-template-columns:1fr auto}.t-age label{grid-column:1/-1}
 .t-count b{font-size:72px}
}

/* ---------- персонажи ---------- */
.duo{display:none}
.has-duo .duo{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px #10111322)}
.has-duo .buddy svg{display:none}
.has-duo .buddy{width:72%;top:50%}
.has-duo .bubble{right:-34%;top:-6%}
.char{position:relative;display:grid;grid-template-columns:44% 1fr;align-items:end;gap:12px;padding:16px 16px 0;border-radius:26px;background:#fff;border:1px solid var(--line);overflow:hidden}
.char img{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:char-bob 3.4s ease-in-out infinite}
@keyframes char-bob{50%{transform:translateY(-6px) rotate(-1deg)}}
.char .say{align-self:center;margin-bottom:16px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;line-height:1.35}
.char.pop img{animation:char-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes char-pop{40%{transform:translateY(-14px) scale(1.04)}}
.b-char{max-width:420px;margin-top:30px;background:#ffffff1f;border-color:#ffffff40}
.b-char .say{background:#fff;color:var(--ink)}
@media(max-width:700px){.has-duo .buddy{width:72%}.has-duo .bubble{right:-8%;top:-12%;max-width:150px}.char{grid-template-columns:40% 1fr}.char .say{font-size:13px}}
@media(prefers-reduced-motion:reduce){.char img{animation:none}}