/* «Малыш» — site styles. Clay / claymorphism language of the app. */
@font-face{font-family:"Nunito";src:url(/fonts/nunito-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-800.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}

:root{
  --bg:#F6F2FF; --bg2:#EFE8FF; --surface:#FFFFFF; --surface2:#F7F4FF; --line:rgba(76,47,209,.10);
  --text:#1E1633; --muted:#615978; --hint:#8B83A3;
  --primary:#6D4AFF; --primary-2:#A78BFF; --primary-3:#4B2FD1; --accent-soft:#EDE7FF; --on-primary:#fff;
  --grad:linear-gradient(135deg,#A78BFF 0%,#6D4AFF 48%,#4B2FD1 100%);
  --feed:#FFB38A; --sleep:#7AA7FF; --diaper:#5FD3A6; --health:#FF8FB1; --food:#C8E66B; --sun:#FFD66B;
  --t-feed:linear-gradient(150deg,#FFF0E7 0%,#FFD2BB 100%);
  --t-sleep:linear-gradient(150deg,#EEF4FF 0%,#C6DAFF 100%);
  --t-diaper:linear-gradient(150deg,#E6FBF2 0%,#B5EDD5 100%);
  --t-health:linear-gradient(150deg,#FFEEF3 0%,#FFCADB 100%);
  --t-food:linear-gradient(150deg,#F5FBDF 0%,#DDF0A4 100%);
  --t-lav:linear-gradient(150deg,#F3EFFF 0%,#D9CEFF 100%);
  --t-sunny:linear-gradient(150deg,#FFF7DE 0%,#FFE4A0 100%);
  --t-white:linear-gradient(150deg,#FFFFFF 0%,#F4F0FF 100%);
  --clay:0 1px 0 rgba(255,255,255,.9) inset,0 -10px 24px rgba(109,74,255,.05) inset,0 26px 50px -26px rgba(76,47,209,.38),0 6px 14px -6px rgba(76,47,209,.12);
  --clay-sm:0 1px 0 rgba(255,255,255,.9) inset,0 12px 26px -14px rgba(76,47,209,.35),0 3px 8px -4px rgba(76,47,209,.12);
  --clay-btn:0 1px 0 rgba(255,255,255,.35) inset,0 -6px 14px rgba(40,16,140,.25) inset,0 18px 30px -14px rgba(76,47,209,.65);
  --r-xl:32px; --r-lg:26px; --r-md:20px; --r-sm:14px;
  --gut:16px; --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15111F; --bg2:#1B1628; --surface:#211B31; --surface2:#2A2340; --line:rgba(200,185,255,.10);
    --text:#F3EEFF; --muted:#B9AFD6; --hint:#9187AE; --accent-soft:#2F2650;
    --t-feed:linear-gradient(150deg,#4A3330 0%,#3A2727 100%);
    --t-sleep:linear-gradient(150deg,#26325A 0%,#1E2747 100%);
    --t-diaper:linear-gradient(150deg,#1F4238 0%,#18332C 100%);
    --t-health:linear-gradient(150deg,#4A2B3E 0%,#3A2232 100%);
    --t-food:linear-gradient(150deg,#39432A 0%,#2C3421 100%);
    --t-lav:linear-gradient(150deg,#332A55 0%,#282044 100%);
    --t-sunny:linear-gradient(150deg,#4A3F25 0%,#3A311D 100%);
    --t-white:linear-gradient(150deg,#262037 0%,#211B31 100%);
    --clay:0 1px 0 rgba(255,255,255,.06) inset,0 -10px 24px rgba(0,0,0,.18) inset,0 26px 50px -24px rgba(0,0,0,.7),0 6px 14px -6px rgba(0,0,0,.4);
    --clay-sm:0 1px 0 rgba(255,255,255,.06) inset,0 12px 26px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:600;font-size:17px;line-height:1.55;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--primary);text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-color-scheme:dark){a{color:#B9A6FF}}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- i18n ---------- */
html.js[lang="ru"] body [lang="en"],html.js[lang="en"] body [lang="ru"]{display:none!important}
html.no-js body [lang="en"]:not(.doc-article):not(.doc-article *){display:none!important}
.nojs-note{display:none}
html.no-js .nojs-note{display:block}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:700px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:40px}}
section{position:relative}
.sec{padding-block:clamp(72px,11vw,140px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:var(--accent-soft);padding:7px 14px 7px 8px;border-radius:999px;margin-bottom:18px}
@media (prefers-color-scheme:dark){.eyebrow{color:#C9BAFF}}
.eyebrow img{width:22px;height:22px}
.h2{font-size:clamp(32px,5.4vw,60px);letter-spacing:-.025em}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:620px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme:dark){.grad-text{background:linear-gradient(135deg,#D2C4FF,#A78BFF 50%,#FFB38A);-webkit-background-clip:text;background-clip:text}}
.center{text-align:center}.center .lead{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{--bh:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .3s,background-color .3s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--clay-btn)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--text);box-shadow:var(--clay-sm)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-sm{--bh:44px;padding:0 18px;font-size:15px}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:8px 22px 8px 14px;border-radius:20px;text-decoration:none;color:#fff;background:#17122A;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 30px -16px rgba(23,18,42,.7);transition:transform .35s var(--spring),opacity .3s}
.store:hover{transform:translateY(-3px)}
.store svg{width:32px;height:32px;flex:none}
.store small{display:block;font-size:11.5px;font-weight:700;opacity:.75;line-height:1.1;letter-spacing:.02em}
.store b{display:block;font-size:19px;font-weight:800;line-height:1.15}
@media (prefers-color-scheme:dark){.store{background:#F3EEFF;color:#17122A;box-shadow:0 18px 30px -16px rgba(0,0,0,.8)}}
.store.is-soon{cursor:default}
.store.is-soon:hover{transform:none}
.store .soon-badge{position:absolute;top:-9px;right:-6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--feed);color:#3A1E10;padding:3px 9px;border-radius:999px;box-shadow:0 6px 12px -6px rgba(0,0,0,.4);display:none}
.store.is-soon .soon-badge{display:block}
.store.is-soon.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;padding-top:10px;transition:transform .4s var(--ease)}
.hdr-in{display:flex;align-items:center;gap:12px;height:60px;padding:0 10px 0 12px;border-radius:22px;background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 1px var(--line),0 14px 34px -22px rgba(76,47,209,.45);transition:background-color .3s}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:20px;letter-spacing:-.01em;margin-right:auto}
.brand img{width:38px;height:38px;border-radius:12px;box-shadow:0 8px 16px -8px rgba(76,47,209,.6)}
.nav{display:none;gap:4px}
.nav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:15px;padding:9px 12px;border-radius:12px;transition:color .2s,background-color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:var(--accent-soft)}
.lang{display:inline-flex;padding:4px;border-radius:14px;background:var(--accent-soft);gap:2px}
.lang button{border:0;background:transparent;cursor:pointer;font-weight:800;font-size:13px;letter-spacing:.04em;min-width:40px;height:34px;border-radius:10px;color:var(--muted);transition:background-color .25s,color .25s,box-shadow .25s}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--primary);box-shadow:0 4px 10px -4px rgba(76,47,209,.4)}
@media (prefers-color-scheme:dark){.lang button[aria-pressed="true"]{color:#D2C4FF}}
.hdr .btn-sm{display:none}
.menu-btn{width:44px;height:44px;border-radius:14px;border:0;background:var(--accent-soft);cursor:pointer;display:grid;place-items:center}
.menu-btn span{display:block;width:18px;height:2.5px;border-radius:2px;background:var(--text);position:relative;transition:transform .3s var(--ease),background-color .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2.5px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.nav-open .menu-btn span{background:transparent}
.nav-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{display:grid;gap:4px;margin-top:8px;padding:10px;border-radius:22px;background:var(--surface);box-shadow:var(--clay);transform-origin:top right;transform:scale(.96) translateY(-6px);opacity:0;visibility:hidden;transition:transform .35s var(--spring),opacity .2s,visibility 0s .35s}
.nav-open .mnav{transform:none;opacity:1;visibility:visible;transition:transform .35s var(--spring),opacity .2s}
.mnav a{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:14px;color:var(--text);text-decoration:none;font-weight:800}
.mnav a img{width:30px;height:30px}
.mnav a:hover{background:var(--accent-soft)}
@media (min-width:980px){.nav{display:flex}.menu-btn,.mnav{display:none}.hdr .btn-sm{display:inline-flex}}

/* ---------- clay cards ---------- */
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--clay);padding:28px}
.tile{position:relative;border-radius:var(--r-xl);padding:26px;box-shadow:var(--clay);overflow:hidden;isolation:isolate}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.55),transparent 55%);z-index:-1}
@media (prefers-color-scheme:dark){.tile::after{background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.07),transparent 55%)}}
.t-feed{background:var(--t-feed)}.t-sleep{background:var(--t-sleep)}.t-diaper{background:var(--t-diaper)}.t-health{background:var(--t-health)}.t-food{background:var(--t-food)}.t-lav{background:var(--t-lav)}.t-sunny{background:var(--t-sunny)}.t-white{background:var(--t-white)}
.ico{width:64px;height:64px;filter:drop-shadow(0 10px 12px rgba(76,47,209,.18))}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-pop{opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .6s var(--ease),transform .9s var(--spring);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv-pop.in{opacity:1;transform:none}

/* =================== HERO =================== */
.hero{position:relative;min-height:100svh;padding-top:96px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 50% at 85% 20%,rgba(167,139,255,.35),transparent 70%),
  radial-gradient(50% 45% at 10% 85%,rgba(255,179,138,.35),transparent 70%),
  radial-gradient(40% 40% at 55% 105%,rgba(95,211,166,.22),transparent 70%),
  linear-gradient(180deg,#F8F4FF 0%,var(--bg) 100%)}
@media (prefers-color-scheme:dark){.hero-bg{background:
  radial-gradient(60% 50% at 85% 20%,rgba(109,74,255,.35),transparent 70%),
  radial-gradient(50% 45% at 10% 85%,rgba(255,143,177,.14),transparent 70%),
  radial-gradient(40% 40% at 55% 105%,rgba(95,211,166,.10),transparent 70%),
  linear-gradient(180deg,#1A1428 0%,var(--bg) 100%)}}
.hero-grid{display:grid;gap:20px;align-items:center}
.hero-copy{position:relative;z-index:3;padding-top:clamp(8px,4vh,40px)}
.hero h1{font-size:clamp(40px,12.6vw,92px);line-height:1;letter-spacing:-.035em;margin-bottom:22px}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .hi{display:inline-block;width:.78em;height:.78em;vertical-align:-.06em;margin-left:.06em;filter:drop-shadow(0 .08em .08em rgba(76,47,209,.2))}
.js .hero h1 .w{opacity:0;transform:translateY(.5em) rotate(4deg);animation:wordIn 1s var(--ease) forwards;animation-delay:calc(var(--i) * 140ms + 150ms)}
.js .hero h1 .hi{animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
@keyframes wordIn{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-.1em) rotate(6deg)}}
.hero .lead{margin-bottom:28px}
.js .hero .fade-in{opacity:0;animation:fadeUp .9s var(--ease) forwards;animation-delay:var(--dl,.6s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;color:var(--muted);font-size:14.5px;font-weight:700}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust i{width:8px;height:8px;border-radius:50%;background:var(--diaper);box-shadow:0 0 0 4px color-mix(in srgb,var(--diaper) 25%,transparent)}
.trust span:nth-child(2) i{background:var(--sleep);box-shadow:0 0 0 4px color-mix(in srgb,var(--sleep) 25%,transparent)}
.trust span:nth-child(3) i{background:var(--feed);box-shadow:0 0 0 4px color-mix(in srgb,var(--feed) 25%,transparent)}

/* 3D stage */
.stage{position:relative;height:clamp(560px,150vw,640px);perspective:1400px;perspective-origin:50% 40%;z-index:2}
.stage-in{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) translateY(calc(var(--hp,0) * -60px)) rotateX(calc(8deg + var(--hp,0) * 22deg - var(--my,0) * 7deg)) rotateY(calc(-16deg + var(--mx,0) * 14deg + var(--hp,0) * 16deg)) rotateZ(calc(2deg - var(--hp,0) * 4deg)) scale(calc(1 - var(--hp,0) * .12))}
.js .stage-in{animation:phoneIn 1.4s var(--ease) .2s both}
@keyframes phoneIn{from{opacity:0;translate:0 80px;scale:.85}to{opacity:1;translate:0 0;scale:1}}

/* CSS 3D phone */
.phone{--pw:260px;--ph:calc(var(--pw) * 2.12);--pr:calc(var(--pw) * .16);position:relative;width:var(--pw);height:var(--ph);transform-style:preserve-3d}
.phone .slab{position:absolute;inset:0;border-radius:var(--pr);background:linear-gradient(135deg,#5A4A86,#2A2140 40%,#1A1428 70%,#4C3E73);transform:translateZ(calc(var(--z) * 1px))}
.phone .back{position:absolute;inset:0;border-radius:var(--pr);background:linear-gradient(140deg,#B9A6FF,#7D60FF 55%,#5236DD);transform:translateZ(-7px) rotateY(180deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.phone .back::before{content:"";position:absolute;left:12%;top:5%;width:30%;aspect-ratio:1;border-radius:28%;background:rgba(20,10,60,.25);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.phone .face{position:absolute;inset:0;border-radius:var(--pr);background:#0F0B1A;transform:translateZ(7px);padding:calc(var(--pw) * .035);box-shadow:inset 0 0 0 2px #3B3156,inset 0 0 0 4px #120E1F}
.phone .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pr) * .8);overflow:hidden;background:#F4F0FF}
.phone .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.phone .screen::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 48%,transparent 56%);transform:translateX(calc(var(--mx,0) * 18% - var(--hp,0) * 30%));pointer-events:none}
.phone .island{position:absolute;top:calc(var(--pw) * .055);left:50%;width:28%;height:calc(var(--pw) * .075);transform:translateX(-50%);background:#0F0B1A;border-radius:999px;z-index:2}
.phone-shadow{position:absolute;left:50%;top:50%;width:var(--pw,260px);height:calc(var(--pw,260px) * 2.12);transform:translate(-40%,-44%) translateZ(-120px);border-radius:60px;background:rgba(60,30,160,.35);filter:blur(40px);pointer-events:none}
@media (prefers-color-scheme:dark){.phone-shadow{background:rgba(0,0,0,.6)}}

/* floating chips */
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:20px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--clay);white-space:nowrap;font-size:14px;line-height:1.25}
.chip img{width:40px;height:40px;flex:none}
.chip b{display:block;font-weight:800;font-size:15px}
.chip small{display:block;color:var(--muted);font-weight:700;font-size:12.5px}
.chip-1{left:-34px;top:16%;transform:translateZ(90px)}
.chip-2{right:-40px;top:58%;transform:translateZ(130px)}
.chip-3{left:-18px;bottom:6%;transform:translateZ(60px)}
.chip .tick{font-variant-numeric:tabular-nums}
.js .chip{animation:chipFloat 6s ease-in-out infinite}
.chip-2{animation-delay:-2s!important}.chip-3{animation-delay:-4s!important}
@keyframes chipFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.chip .pulse{width:10px;height:10px;border-radius:50%;background:var(--health);box-shadow:0 0 0 0 rgba(255,143,177,.6);animation:pulse 1.8s infinite;flex:none;margin-left:2px}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,143,177,0)}100%{box-shadow:0 0 0 0 rgba(255,143,177,0)}}

#gl{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;transition:opacity 1s}
.gl-on #gl{opacity:1}
.hero-clay{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .6s}
.gl-on .hero-clay{opacity:0}
.hero-clay img{position:absolute;width:var(--s,70px);height:var(--s,70px);animation:floaty 7s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:none;width:26px;height:42px;border-radius:14px;border:2.5px solid color-mix(in srgb,var(--text) 35%,transparent)}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--primary);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

@media (min-width:600px){.phone{--pw:280px}.stage{height:700px}}
@media (min-width:1000px){
  .hero{display:flex;align-items:center;padding-top:80px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:24px;width:100%}
  .stage{height:min(780px,92vh);min-height:640px}
  .phone{--pw:clamp(270px,22vw,300px)}
  .scroll-cue{display:block}
}

/* =================== MARQUEE STRIP =================== */
.strip{padding:22px 0;overflow:hidden;position:relative}
.strip-track{display:flex;gap:14px;width:max-content;animation:marq 40s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-item{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--clay-sm);font-weight:800;white-space:nowrap}
.strip-item img{width:34px;height:34px}
@keyframes marq{to{transform:translateX(-50%)}}

/* =================== REMINDERS =================== */
.rem-grid{display:grid;gap:44px;align-items:center}
.lock{position:relative;max-width:400px;margin-inline:auto;width:100%;aspect-ratio:9/15;border-radius:44px;padding:28px 18px;overflow:hidden;background:linear-gradient(170deg,#2A1E58 0%,#5236DD 55%,#A78BFF 100%);box-shadow:0 40px 80px -40px rgba(76,47,209,.8),inset 0 0 0 8px #120E1F;color:#fff;isolation:isolate}
.lock::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 40% at 80% 100%,rgba(255,179,138,.55),transparent 70%),radial-gradient(60% 30% at 10% 20%,rgba(122,167,255,.35),transparent 70%);z-index:-1}
.lock-time{text-align:center;font-weight:800;font-size:clamp(64px,18vw,88px);line-height:1;letter-spacing:-.03em;margin-top:14px}
.lock-date{text-align:center;font-weight:700;opacity:.8;margin-bottom:22px}
.notif{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:22px;background:rgba(255,255,255,.92);color:#1E1633;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);margin-bottom:10px;transform-origin:top center}
.notif img{width:42px;height:42px;flex:none}
.notif .n-app{font-size:12px;font-weight:800;color:#6D4AFF;letter-spacing:.02em;display:flex;justify-content:space-between;gap:8px}
.notif .n-app span{color:#8B83A3;font-weight:700}
.notif b{display:block;font-size:16px;line-height:1.25}
.notif small{display:block;font-size:13.5px;color:#615978;font-weight:700;line-height:1.35}
.notif .n-btns{display:flex;gap:8px;margin-top:8px}
.notif .n-btns span{font-size:12.5px;font-weight:800;color:#6D4AFF;background:#EDE7FF;padding:5px 10px;border-radius:999px}
.js .lock .notif{opacity:0;transform:translateY(-30px) scale(.9)}
.js .lock.in .notif{animation:notifIn .8s var(--spring) forwards}
.js .lock.in .notif:nth-of-type(2){animation-delay:1.1s}
.js .lock.in .notif:nth-of-type(3){animation-delay:2.2s}
.js .lock.in .notif:nth-of-type(1){animation-delay:.3s}
@keyframes notifIn{to{opacity:1;transform:none}}
.ring{position:absolute;right:18px;bottom:18px;width:84px;height:84px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35))}
.js .lock.in .ring{animation:ringBell 2.4s ease-in-out 3s infinite;transform-origin:50% 15%}
@keyframes ringBell{0%,40%,100%{transform:rotate(0)}5%{transform:rotate(16deg)}10%{transform:rotate(-14deg)}15%{transform:rotate(11deg)}20%{transform:rotate(-8deg)}25%{transform:rotate(5deg)}30%{transform:rotate(-2deg)}}
.feat-list{display:grid;gap:14px;margin-top:28px;padding:0;list-style:none}
.feat-list li{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--clay-sm)}
.feat-list img{width:52px;height:52px;flex:none}
.feat-list b{display:block;font-size:18px;margin-bottom:2px}
.feat-list span{color:var(--muted);font-size:15.5px;display:block;line-height:1.45}
@media (min-width:900px){.rem-grid{grid-template-columns:.9fr 1.1fr;gap:72px}}

/* =================== BENTO =================== */
.bento{display:grid;gap:16px;margin-top:44px;grid-template-columns:1fr}
.bento .tile{min-height:250px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .4s}
.bento .tile h3{font-size:clamp(23px,2.4vw,28px);margin:14px 0 8px}
.bento .tile p{color:var(--muted);font-size:16px;margin:0;max-width:480px}
@media (prefers-color-scheme:dark){.bento .tile p{color:#CFC6EA}}
.tile .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tile .tags span{font-size:13px;font-weight:800;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.65);color:var(--text)}
@media (prefers-color-scheme:dark){.tile .tags span{background:rgba(255,255,255,.08)}}
.tile .big{font-size:clamp(44px,6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1}
.tile-shot{position:relative;margin-top:22px;align-self:center;width:min(270px,78%);aspect-ratio:600/1300;margin-bottom:-120px;border-radius:30px 30px 0 0;overflow:hidden;box-shadow:0 0 0 7px #120E1F,0 30px 50px -20px rgba(40,20,120,.55);transform:translateZ(30px) rotate(-3deg);transition:transform .6s var(--ease)}
.tile-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.tile:hover .tile-shot{transform:translateZ(50px) rotate(0) translateY(-10px)}
.tile .corner-ico{position:absolute;right:18px;top:18px;width:84px;height:84px;transform:translateZ(40px);filter:drop-shadow(0 14px 14px rgba(76,47,209,.2));transition:transform .6s var(--spring)}
.tile:hover .corner-ico{transform:translateZ(60px) rotate(-10deg) scale(1.08)}
.foods{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.foods img{width:58px;height:58px;border-radius:50%;box-shadow:0 10px 16px -10px rgba(60,80,0,.5);transition:transform .5s var(--spring)}
.foods img:hover{transform:translateY(-8px) rotate(-8deg) scale(1.1)}
.js .foods img{animation:foodBob 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes foodBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.chart-img{margin-top:18px;border-radius:20px;overflow:hidden;box-shadow:var(--clay-sm);background:#fff}
.chart-img img{width:100%}
.mini-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.mini{flex:1;min-width:100px;background:rgba(255,255,255,.7);border-radius:18px;padding:12px 14px}
@media (prefers-color-scheme:dark){.mini{background:rgba(255,255,255,.06)}}
.mini b{display:block;font-size:24px;line-height:1.1}
.mini small{color:var(--muted);font-weight:700;font-size:12.5px}
.wake{margin-top:18px;background:rgba(255,255,255,.7);border-radius:18px;padding:14px}
@media (prefers-color-scheme:dark){.wake{background:rgba(255,255,255,.06)}}
.wake-bar{position:relative;height:12px;border-radius:6px;background:rgba(122,167,255,.25);overflow:hidden;margin:8px 0 6px}
.wake-bar i{position:absolute;inset:0 auto 0 0;width:72%;border-radius:6px;background:linear-gradient(90deg,#9EC0FF,#5D97F5);transform-origin:left;transform:scaleX(var(--wp,0));transition:transform 2s var(--ease)}
.in .wake-bar i{--wp:1}
.wake small{font-weight:700;color:var(--muted);font-size:13px}
.stash{display:flex;gap:10px;margin-top:18px}
.stash div{flex:1;background:rgba(255,255,255,.7);border-radius:18px;padding:12px}
@media (prefers-color-scheme:dark){.stash div{background:rgba(255,255,255,.06)}}
.stash b{font-size:22px}.stash small{display:block;color:var(--muted);font-weight:700;font-size:12.5px}
.teeth-row{display:flex;gap:6px;margin-top:18px;align-items:flex-end}
.teeth-row img{width:44px;height:44px}
.teeth-row img:nth-child(2){width:56px;height:56px}
@media (min-width:720px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-feed{grid-row:span 2}
}
@media (min-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(270px,auto)}
  .b-feed{grid-column:span 2;grid-row:span 2}
  .b-food{grid-column:span 2}
  .b-growth{grid-column:span 2}
}
.tile.tilt{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}
.tile .glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s;z-index:0}
.tile.tilt .glow{opacity:1}
@media (prefers-color-scheme:dark){.tile .glow{background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(167,139,255,.18),transparent 45%)}}
.more-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.more-chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--surface);box-shadow:var(--clay-sm);font-weight:800;font-size:15px}
.more-chips img{width:30px;height:30px}

/* =================== DAY → NIGHT =================== */
.dn{height:340vh;position:relative}
.dn-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.dn-sky{position:absolute;inset:0;z-index:-3}
.dn-sky div{position:absolute;inset:0;transition:none}
.sky-day{background:linear-gradient(180deg,#CFE3FF 0%,#EFE8FF 55%,#FFF4EC 100%)}
.sky-sunset{background:linear-gradient(180deg,#8E7BEA 0%,#E6A2C9 45%,#FFC49E 75%,#FFE2C6 100%);opacity:var(--o2,0)}
.sky-night{background:radial-gradient(80% 50% at 70% 10%,#3B2D73 0%,transparent 70%),linear-gradient(180deg,#120E22 0%,#1E1638 60%,#2A1E52 100%);opacity:var(--o3,0)}
.stars{position:absolute;inset:0;z-index:-2;opacity:var(--o3,0)}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25}}
.celestial{position:absolute;left:50%;top:50%;width:0;height:0;z-index:-1}
.celestial img{position:absolute;max-width:none;width:clamp(90px,14vw,150px);height:auto;left:0;top:0;margin:calc(clamp(90px,14vw,150px) / -2) 0 0 calc(clamp(90px,14vw,150px) / -2);filter:drop-shadow(0 30px 40px rgba(255,170,60,.45))}
.celestial .moon-i{filter:drop-shadow(0 0 40px rgba(122,167,255,.6))}
.hills{position:absolute;left:-10%;right:-10%;bottom:-2px;height:28vh;z-index:-1}
.hills svg{width:100%;height:100%}
.dn-inner{height:100%;display:grid;align-content:center;justify-items:center;gap:18px;padding-top:70px;padding-bottom:20px;text-align:center}
.dn h2{font-size:clamp(28px,4.6vw,54px);max-width:900px;margin:0 auto;color:var(--dn-text,#1E1633);transition:color .6s}
.dn .lead{color:var(--dn-muted,#4E4669);margin:0 auto;transition:color .6s;font-size:clamp(15px,1.6vw,19px)}
.dn.is-night{--dn-text:#F3EEFF;--dn-muted:#C9BEEA}
.dn-phone{position:relative;--pw:min(220px,48vw);width:var(--pw);height:calc(var(--pw) * 2.12);border-radius:calc(var(--pw) * .16);padding:calc(var(--pw) * .035);background:#0F0B1A;box-shadow:0 40px 70px -30px rgba(20,10,60,.7),inset 0 0 0 2px #3B3156;transform:rotate(calc(-4deg + var(--p,0) * 8deg))}
.dn-phone .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .13);overflow:hidden}
.dn-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.dn-phone .s2{opacity:var(--o2,0)}.dn-phone .s3{opacity:var(--o3,0)}
.dn-clock{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 10px;border-radius:999px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -18px rgba(20,10,60,.6);color:#1E1633;font-weight:800}
.dn-clock .t{font-size:22px;font-variant-numeric:tabular-nums;min-width:62px;text-align:left}
.dn-clock .lbl{font-size:14px;color:#615978}
.dn-clock .dots{display:flex;gap:6px}
.dn-clock .dots i{width:9px;height:9px;border-radius:50%;background:#D9CFFF;transition:background-color .3s,transform .3s}
.dn-clock .dots i.on{background:#6D4AFF;transform:scale(1.25)}
@media (min-height:760px){.dn-phone{--pw:min(250px,48vw)}}
@media (max-height:700px){.dn-phone{--pw:min(180px,40vw)}}
.dn-static{display:none}
@media (prefers-reduced-motion:reduce){
  .dn{height:auto}
  .dn-sticky{position:relative;height:auto;padding:110px 0 80px}
  .dn .dn-phone{display:none}
  .dn-static{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .dn-static .dn-phone{display:block;transform:none}
  .stars,.celestial,.dn-clock{display:none}
}

/* =================== CAROUSEL RING =================== */
.ring-sec{overflow:hidden;padding-bottom:40px}
.ring-stage{position:relative;height:clamp(440px,120vw,560px);perspective:1600px;perspective-origin:50% 30%;margin-top:24px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ring-stage.dragging{cursor:grabbing}
.ring3d{position:absolute;left:50%;top:40px;width:var(--iw);height:calc(var(--iw) * 2.16);margin-left:calc(var(--iw) / -2);transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1)) rotateY(var(--rot,0deg))}
.ring-sec{--iw:170px;--R:360px}
@media (min-width:700px){.ring-sec{--iw:200px;--R:470px}}
@media (min-width:1100px){.ring-sec{--iw:220px;--R:560px}}
.ring3d figure{position:absolute;inset:0;margin:0;transform:rotateY(calc(var(--i) * 30deg)) translateZ(var(--R));backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px;overflow:hidden;box-shadow:0 0 0 6px #120E1F,0 30px 40px -24px rgba(30,15,90,.6);background:#120E1F}
.ring3d figure img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.ring-floor{position:absolute;left:50%;bottom:10px;width:min(900px,120%);height:120px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(109,74,255,.25),transparent 70%);filter:blur(10px)}
.ring-caption{text-align:center;margin-top:8px;min-height:64px}
.ring-caption b{display:block;font-size:22px}
.ring-caption span{color:var(--muted);font-weight:700}
.ring-hint{display:inline-flex;align-items:center;gap:8px;color:var(--hint);font-size:14px;font-weight:700;margin-top:6px}
.ring-nav{display:flex;justify-content:center;gap:10px;margin-top:10px}
.ring-nav button{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--surface);box-shadow:var(--clay-sm);display:grid;place-items:center;transition:transform .3s var(--spring)}
.ring-nav button:active{transform:scale(.9)}
.ring-nav svg{width:22px;height:22px;stroke:var(--text)}
@media (prefers-reduced-motion:reduce){
  .ring-stage{perspective:none;height:auto;overflow-x:auto;cursor:auto;scroll-snap-type:x mandatory}
  .ring3d{position:static;display:flex;gap:16px;transform:none;width:auto;height:auto;margin:0;padding:10px var(--gut) 30px}
  .ring3d figure{position:relative;flex:none;width:var(--iw);height:calc(var(--iw)*2.16);transform:none;scroll-snap-align:center}
  .ring-floor,.ring-nav,.ring-hint{display:none}
}

/* =================== FAMILY SYNC =================== */
.fam-grid{display:grid;gap:40px;align-items:center}
.fam-box{position:relative;width:100%;aspect-ratio:560/430}
.fam-scale{position:absolute;left:0;top:0;width:560px;height:430px;transform-origin:0 0;transform:scale(var(--k,1))}
.fam-svg{position:absolute;inset:0;width:560px;height:430px;overflow:visible}
.mph{position:absolute;top:120px;width:206px;height:300px;border-radius:34px;background:#0F0B1A;padding:7px;box-shadow:0 30px 50px -24px rgba(30,15,90,.6),inset 0 0 0 2px #3B3156}
.mph.a{left:0;transform:rotate(-5deg)}.mph.b{right:0;transform:rotate(5deg)}
.mph .scr{position:relative;height:100%;border-radius:28px;overflow:hidden;background:#F6F2FF;padding:30px 12px 12px;color:#1E1633}
@media (prefers-color-scheme:dark){.mph .scr{background:#1B1628;color:#F3EEFF}}
.mph .who{position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text)}
.mph .who i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff}
.mph.a .who i{background:linear-gradient(135deg,#FFB38A,#F0805A)}.mph.b .who i{background:linear-gradient(135deg,#7AA7FF,#4B6FE0)}
.mph .ttl{font-weight:800;font-size:15px;margin-bottom:8px}
.mph .act{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.mph .act>span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:800;padding:6px 4px;border-radius:12px;text-align:center;line-height:1.15}
.mph .act img{width:24px;height:24px}
.mph .act .f{background:#FFE3D3;color:#5A2E1A}.mph .act .d{background:#D6F6E8;color:#14533B}
@media (prefers-color-scheme:dark){.mph .act .f{background:#4A3330;color:#FFD9C6}.mph .act .d{background:#1F4238;color:#C8F5E2}}
.mph .rec{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:10.5px;font-weight:800;padding:8px;border-radius:12px;background:#fff;margin-bottom:6px;box-shadow:0 6px 12px -8px rgba(76,47,209,.4)}
@media (prefers-color-scheme:dark){.mph .rec{background:#2A2340}}
.mph .rec i{width:8px;height:8px;border-radius:50%;flex:none}
.mph .rec em{font-style:normal;color:#8B83A3;margin-left:auto;font-size:10.5px}

.fam-cloud{position:absolute;left:50%;top:10px;width:150px;margin-left:-75px;text-align:center}
.fam-cloud img{width:120px;height:120px;margin:0 auto;filter:drop-shadow(0 20px 20px rgba(76,47,209,.25))}
.fam-cloud b{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;background:var(--surface);padding:5px 10px;border-radius:999px;box-shadow:var(--clay-sm);margin-top:-14px;position:relative;white-space:nowrap}
.fam-cloud b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--diaper)}
.play .fam-cloud img{animation:cloudPulse 8s infinite}
@keyframes cloudPulse{0%,20%,45%,70%,95%,100%{transform:scale(1)}25%,75%{transform:scale(1.08)}}
.play .tap-f{animation:tap 8s infinite}
.play .tap-d{animation:tap 8s infinite 4s}
@keyframes tap{0%,4%{transform:scale(1)}7%{transform:scale(.88);box-shadow:0 0 0 6px rgba(109,74,255,.25)}12%,100%{transform:scale(1);box-shadow:none}}
.play .a .r1,.play .b .r1{animation:recIn 8s infinite}
.play .b .r1{animation-delay:1.9s}
.play .b .r2,.play .a .r2{animation:recIn 8s infinite 4s}
.play .a .r2{animation-delay:5.9s}
@keyframes recIn{0%{opacity:0;max-height:0;padding-block:0;margin-bottom:0;transform:translateX(-14px)}6%,92%{opacity:1;max-height:40px;padding-block:8px;margin-bottom:6px;transform:none}100%{opacity:0;max-height:0;padding-block:0;margin-bottom:0}}
.steps{display:grid;gap:12px;margin-top:26px;counter-reset:st;padding:0;list-style:none}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--clay-sm);counter-increment:st}
.steps li::before{content:counter(st);flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad);box-shadow:var(--clay-btn)}
.steps b{display:block}.steps span{color:var(--muted);font-size:15.5px}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--accent-soft);font-size:15px;color:var(--muted)}
.note img{width:32px;height:32px;flex:none}
@media (min-width:960px){.fam-grid{grid-template-columns:1.05fr .95fr;gap:72px}}

/* =================== PRIVACY =================== */
.priv{position:relative;border-radius:40px;padding:clamp(28px,5vw,64px);overflow:hidden;color:#F3EEFF;background:radial-gradient(70% 60% at 100% 0%,#5236DD 0%,transparent 70%),radial-gradient(60% 60% at 0% 100%,#3A2A78 0%,transparent 70%),#1A1430;box-shadow:0 50px 90px -50px rgba(40,20,140,.9),inset 0 1px 0 rgba(255,255,255,.08);isolation:isolate}
.priv .h2{color:#fff}
.priv .lead{color:#C9BEEA}
.priv-grid{display:grid;gap:16px;margin-top:34px}
.priv-item{padding:20px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);display:flex;gap:14px;align-items:flex-start}
.priv-item img{width:48px;height:48px;flex:none}
.priv-item b{display:block;font-size:17.5px;margin-bottom:3px;color:#fff}
.priv-item span{color:#C9BEEA;font-size:15px;display:block}
.priv-art{position:absolute;right:-30px;top:-20px;width:clamp(150px,26vw,300px);opacity:.95;z-index:-1;pointer-events:none}
.priv-art img{width:100%}
.js .priv-art img{animation:floaty 8s ease-in-out infinite}
.priv-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.priv-links a{color:#fff;font-weight:800;text-decoration:none;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .25s}
.priv-links a:hover{background:rgba(255,255,255,.18)}
@media (min-width:800px){.priv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.priv-art{width:130px;right:-20px;top:-10px;opacity:.5}}

/* =================== EXTRAS =================== */
.ex-grid{display:grid;gap:16px;margin-top:44px}
.ex-grid .tile{min-height:340px;display:flex;flex-direction:column}
.ex-grid h3{font-size:24px;margin:0 0 6px}
.ex-grid p{color:var(--muted);font-size:16px;margin:0}
@media (prefers-color-scheme:dark){.ex-grid p{color:#CFC6EA}}
.homescreen{position:relative;margin-top:auto;padding-top:22px}
.homescreen .wall{position:relative;border-radius:26px;padding:18px 14px 16px;background:linear-gradient(160deg,#B7A3FF,#FFC6A8);overflow:hidden}
@media (prefers-color-scheme:dark){.homescreen .wall{background:linear-gradient(160deg,#3B2D73,#6A3F62)}}
.homescreen .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.homescreen .apps i{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.45)}
.homescreen .apps i:first-child{background:url(/favicon.svg) center/cover;box-shadow:0 6px 12px -6px rgba(76,47,209,.6)}
.homescreen .wimg{border-radius:20px;width:100%;box-shadow:0 18px 30px -18px rgba(40,20,120,.55);transition:transform .6s var(--spring)}
.tile:hover .wimg{transform:translateY(-6px) scale(1.02)}
.watch-wrap{margin-top:auto;padding-top:20px;display:grid;place-items:center}
.watch{position:relative;width:200px;height:240px}
.watch .strap{position:absolute;left:50%;width:110px;margin-left:-55px;height:70px;background:linear-gradient(90deg,#5236DD,#8E73FF 50%,#5236DD);border-radius:18px}
.watch .strap.t{top:-8px}.watch .strap.bt{bottom:-8px}
.watch .case{position:absolute;left:10px;top:30px;width:180px;height:180px;border-radius:50%;background:linear-gradient(145deg,#CFC3F7,#6F5BB0);padding:9px;box-shadow:0 26px 40px -18px rgba(40,20,120,.6)}
.watch .crown{position:absolute;right:2px;top:100px;width:14px;height:34px;border-radius:6px;background:linear-gradient(90deg,#8E7BD0,#CFC3F7)}
.watch .dial{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#2A2140,#0F0B1A);color:#fff;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.watch .dial svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);transform:rotate(-90deg)}
.watch .dial circle{fill:none;stroke-width:7;stroke-linecap:round}
.watch .dial .trk{stroke:rgba(255,255,255,.1)}
.watch .dial .bar{stroke:url(#wg);stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 2.2s var(--ease)}
.in .watch .dial .bar{stroke-dashoffset:120}
.watch .dial b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.watch .dial small{display:block;font-size:11px;font-weight:700;opacity:.7;margin-top:4px}
.watch .dial .wbtn{display:inline-block;margin-top:8px;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#A78BFF,#6D4AFF)}
.noise{margin-top:auto;padding-top:24px;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:150px}
.noise i{display:block;width:12px;border-radius:6px;background:linear-gradient(180deg,#A78BFF,#6D4AFF);height:30%;transform-origin:bottom}
.js .noise i{animation:eq 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.17s)}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.noise i:nth-child(odd){background:linear-gradient(180deg,#9EC0FF,#5D97F5)}
.noise .note-ico{width:64px;height:64px;align-self:center;margin:0 10px}
.report{display:grid;gap:24px;align-items:center}
.fan{position:relative;height:340px;perspective:1200px}
.fan img{position:absolute;left:50%;top:10px;width:200px;margin-left:-100px;border-radius:12px;box-shadow:0 30px 50px -24px rgba(30,15,90,.55),0 0 0 1px rgba(76,47,209,.08);transition:transform 1s var(--spring);background:#fff}
.fan img:nth-child(1){transform:rotate(-3deg)}
.fan img:nth-child(2){transform:rotate(1deg)}
.fan img:nth-child(3){transform:rotate(4deg)}
.in .fan img:nth-child(1){transform:translateX(-40%) rotate(-10deg) rotateY(18deg)}
.in .fan img:nth-child(2){transform:translateY(-8px) translateZ(40px)}
.in .fan img:nth-child(3){transform:translateX(40%) rotate(10deg) rotateY(-18deg)}
.fan:hover img:nth-child(1){transform:translateX(-48%) rotate(-13deg) rotateY(18deg)}
.fan:hover img:nth-child(3){transform:translateX(48%) rotate(13deg) rotateY(-18deg)}
@media (min-width:760px){.ex-grid{grid-template-columns:repeat(3,1fr)}.ex-wide{grid-column:1/-1}.report{grid-template-columns:1fr 1.1fr}}
@media (max-width:420px){.fan img{width:170px;margin-left:-85px}.fan{height:280px}}

/* =================== FAQ =================== */
.faq{max-width:860px;margin:40px auto 0;display:grid;gap:12px}
.faq details{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--clay-sm);overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--clay)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 20px 20px 22px;font-weight:800;font-size:17.5px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:32px;height:32px;border-radius:11px;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D4AFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{padding:0 22px 20px;color:var(--muted);font-size:16px}
.faq .ans p:last-child{margin:0}
.faq details[open] .ans{animation:fadeUp .45s var(--ease)}

/* =================== CTA =================== */
.cta{position:relative;border-radius:44px;padding:clamp(36px,7vw,90px) clamp(22px,5vw,70px);text-align:center;color:#fff;overflow:hidden;background:radial-gradient(60% 80% at 15% 0%,#B9A6FF 0%,transparent 60%),radial-gradient(60% 70% at 100% 100%,#FF9C7A 0%,transparent 60%),linear-gradient(135deg,#7D60FF,#4B2FD1);box-shadow:0 60px 100px -60px rgba(76,47,209,.95),inset 0 1px 0 rgba(255,255,255,.3);isolation:isolate}
.cta h2{font-size:clamp(34px,6vw,68px);color:#fff;letter-spacing:-.03em}
.cta p{color:rgba(255,255,255,.85);font-size:clamp(17px,1.8vw,20px);max-width:600px;margin:0 auto 30px}
.cta .stores{justify-content:center}
.cta .store{background:#fff;color:#17122A}
.cta small.req{display:block;margin-top:18px;opacity:.75;font-weight:700}
.cta-float{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-float img{position:absolute;width:var(--s);animation:floaty 7s ease-in-out infinite;animation-delay:var(--dl,0s);opacity:.95}
@media (max-width:640px){.cta-float img{opacity:.35}}

/* =================== FOOTER =================== */
.ftr{padding:64px 0 40px;margin-top:80px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.ftr-grid{display:grid;gap:30px}
.ftr h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{color:var(--text);text-decoration:none;font-weight:700}
.ftr a:hover{color:var(--primary)}
.ftr .brand{margin-bottom:12px}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
@media (min-width:800px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* =================== DOC PAGES =================== */
.doc-hero{position:relative;padding:130px 0 40px;overflow:hidden;isolation:isolate}
.doc-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 90% 0%,rgba(167,139,255,.35),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(255,179,138,.25),transparent 70%)}
@media (prefers-color-scheme:dark){.doc-hero::before{background:radial-gradient(50% 70% at 90% 0%,rgba(109,74,255,.35),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(255,143,177,.12),transparent 70%)}}
.doc-hero .wrap{display:flex;gap:24px;align-items:center}
.doc-hero h1{font-size:clamp(32px,5.4vw,58px);letter-spacing:-.03em;margin-bottom:10px}
.doc-hero .meta{display:flex;flex-wrap:wrap;gap:8px}
.doc-hero .meta span{font-size:14px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--clay-sm);color:var(--muted)}
.doc-hero .art{flex:none;width:clamp(84px,14vw,150px);height:auto;filter:drop-shadow(0 20px 24px rgba(76,47,209,.25))}
.js .doc-hero .art{animation:floaty 7s ease-in-out infinite}
.doc-layout{display:grid;gap:24px;align-items:start;padding-bottom:40px}
.toc{position:relative;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--clay-sm);padding:18px}
.toc b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);margin-bottom:8px}
.toc ol{margin:0;padding:0 0 0 22px;display:grid;gap:4px;font-size:14.5px}
.toc a{color:var(--muted);text-decoration:none;font-weight:700}
.toc a:hover,.toc a.on{color:var(--primary)}
.toc details summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center}
.toc details summary::-webkit-details-marker{display:none}
.toc details summary::after{content:"▾";color:var(--primary);transition:transform .3s}
.toc details[open] summary::after{transform:rotate(180deg)}
.toc details[open] summary{margin-bottom:10px}
.doc{border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--clay);padding:clamp(22px,4vw,56px);font-weight:500;font-size:16.5px;line-height:1.7;min-width:0}
.doc h2{font-size:clamp(21px,2.4vw,26px);margin:2em 0 .6em;padding-top:.2em;scroll-margin-top:90px;display:flex;gap:12px;align-items:baseline}
.doc h2 .n{flex:none;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:11px;background:var(--accent-soft);color:var(--primary);font-size:15px}
@media (prefers-color-scheme:dark){.doc h2 .n{color:#C9BAFF}}
.doc h2:first-of-type{margin-top:.4em}
.doc h3{font-size:18px;margin:1.4em 0 .4em}
.doc p,.doc li{color:var(--text)}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 1em}
.doc li{margin-bottom:.35em}
.doc li::marker{color:var(--primary)}
.doc strong{font-weight:800}
.doc .muted{color:var(--muted)}
.doc table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.2em;font-size:15px;display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.doc th{font-weight:800;background:var(--surface2)}
.doc th:first-child{border-top-left-radius:12px}.doc th:last-child{border-top-right-radius:12px}
.doc .callout{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:var(--accent-soft);margin:0 0 1.2em}
.doc .callout img{width:40px;height:40px;flex:none}
.doc .callout p:last-child{margin:0}
.doc .lang-alt{display:inline-flex;align-items:center;gap:8px;font-weight:800;margin-bottom:1em}
.doc-article + .doc-article{margin-top:24px}
.js .doc-article + .doc-article{margin-top:0}
.doc .sum{display:grid;gap:10px;margin:0 0 1.4em}
.doc .sum div{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:var(--surface2)}
.doc .sum img{width:36px;height:36px;flex:none}
.doc .sum b{display:block}
@media (min-width:760px){.doc .sum{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.doc-layout{grid-template-columns:270px 1fr}.toc{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}}
@media (max-width:600px){.doc-hero{padding-top:110px}.doc-hero .art{width:76px}}

/* forms */
.form{display:grid;gap:14px;margin-top:10px}
.field label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;font-weight:600;color:var(--text);background:var(--surface2);border:2px solid transparent;border-radius:16px;padding:14px 16px;min-height:52px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.field .hint{font-size:13.5px;color:var(--hint);margin-top:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:22px;height:22px;accent-color:var(--primary);flex:none;margin-top:2px}
.form-msg{font-weight:700;font-size:15px;color:var(--muted)}
.form-msg.err{color:#D93D6E}
.copy-mail{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-mail code{font-family:inherit;font-weight:800;background:var(--accent-soft);padding:6px 12px;border-radius:10px;word-break:break-all}
.copy-mail button{border:0;cursor:pointer;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;background:var(--surface2);box-shadow:var(--clay-sm)}

/* support */
.sup-cards{display:grid;gap:16px;margin-bottom:24px}
.sup-cards .tile{padding:22px}
.sup-cards h3{font-size:20px;margin:10px 0 6px}
.sup-cards p{color:var(--muted);margin:0;font-size:15.5px}
@media (min-width:760px){.sup-cards{grid-template-columns:repeat(3,1fr)}}
.oem{display:grid;gap:10px;margin:0 0 1.2em}
.oem details{border-radius:18px;background:var(--surface2);padding:0 16px}
.oem summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between}
.oem summary::-webkit-details-marker{display:none}
.oem summary::after{content:"+";color:var(--primary);font-size:20px;line-height:1;transition:transform .3s}
.oem details[open] summary::after{transform:rotate(45deg)}
.oem details > div{padding-bottom:14px}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gut) 60px}
.nf .big{font-size:clamp(110px,26vw,220px);font-weight:800;line-height:.9;letter-spacing:-.05em;display:flex;align-items:center;justify-content:center;gap:.05em}
.nf .big img{width:.85em;height:.85em;animation:floaty 5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .strip-track{animation:none}
  .js .rv,.js .rv-pop{opacity:1;transform:none}
}
@media print{.hdr,.ftr,.toc,.skip{display:none!important}.doc{box-shadow:none;padding:0}body{background:#fff;color:#000}}

/* WHO chart */
.whochart{margin:18px 0 0;padding:14px 14px 10px;border-radius:20px;background:rgba(255,255,255,.75);box-shadow:var(--clay-sm)}
@media (prefers-color-scheme:dark){.whochart{background:rgba(255,255,255,.05)}}
.whochart svg{width:100%;height:auto;overflow:visible}
.whochart .g line{stroke:var(--line);stroke-width:1.5}
.whochart .band{fill:#B9A6FF;fill-opacity:.28}
.whochart .med{fill:none;stroke:#8B83A3;stroke-width:3;stroke-dasharray:7 7}
.whochart .baby{fill:none;stroke:#22A06B;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .whochart .baby{stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease) .2s}
.js .whochart.in .baby{stroke-dashoffset:0}
.whochart .dots circle{fill:#22A06B;stroke:#fff;stroke-width:3}
.whochart .dots .last{fill:#fff;stroke:#22A06B;stroke-width:5}
.js .whochart .dots circle{opacity:0;transition:opacity .4s;transition-delay:2s}
.js .whochart.in .dots circle{opacity:1}
.whochart text{font:800 15px Nunito,sans-serif;fill:var(--hint)}
.whochart figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;font-weight:800;color:var(--muted);margin-top:4px}
.whochart figcaption>span{display:inline-flex;align-items:center;gap:6px}
.whochart figcaption i{width:16px;height:8px;border-radius:4px;background:#22A06B}
.whochart figcaption .k2{background:#B9A6FF;opacity:.6}
.whochart figcaption .k3{height:0;border-top:3px dashed #8B83A3;background:none;border-radius:0}
.js .rec.new{opacity:0;max-height:0;margin:0;padding-block:0;overflow:hidden}
.store .s-soon{display:none}.store.is-soon .s-soon{display:inline}.store.is-soon .s-on{display:none}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--accent-soft);padding:2px 7px;border-radius:7px;word-break:break-word}
.doc-article.doc + .doc-article.doc{margin-top:24px}
.sup-cards .tile .ico{width:52px;height:52px}
.sup-cards a{font-weight:800}
.mph .rec .tx{overflow:hidden;text-overflow:ellipsis}
.celestial img{will-change:transform}
html.js .nojs-note{display:none!important}
.doc .sum{font-size:15px;line-height:1.5}