/* Миллиардик — анимация «Как начать: 3 шага» (v1, 20.10.2026, «Бренд и продвижение»).
   Подключается после site.css. Без библиотек и внешних файлов. Работает и без JS: тогда видны итоговые кадры шагов.
   Без движения (prefers-reduced-motion) — тоже итоговые кадры. Переменные лендинга берутся, если есть; иначе — свои. */
.hs{--hs-paper:var(--paper,#EEF1FA);--hs-card:var(--card,#fff);--hs-ink:var(--ink,#171C4F);--hs-ink2:var(--ink-2,#5A6190);
  --hs-acc:var(--acc,#2F45E6);--hs-acc-soft:var(--acc-soft,#E3E7FF);--hs-coin:var(--coin,#FFC23C);--hs-line:var(--line,#DDE1F2);--hs-ok:#0A8A7E;
  --hs-d:5.2s;font-family:"Golos Text",system-ui,-apple-system,sans-serif;color:var(--hs-ink)}
.hs *{box-sizing:border-box}
.hs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,36px);align-items:start;margin:0;padding:0;list-style:none}
.hs-step{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;cursor:pointer;transition:opacity .35s}
.hs.hs-on .hs-step:not(.on){opacity:.55}
.hs-step figcaption{text-align:center;max-width:300px}
.hs-step h3{margin:6px 0 4px;font:700 clamp(16px,1.6vw,19px)/1.25 Unbounded,"Golos Text",system-ui,sans-serif}
.hs-step p{margin:0;color:var(--hs-ink2);font-size:15px;line-height:1.45}
.hs-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hs-card);color:var(--hs-ink);font:700 14px Unbounded,system-ui,sans-serif;box-shadow:0 0 0 1px var(--hs-line);transition:.3s}
.hs-step.on .hs-num{background:var(--hs-coin);color:#3A2600;box-shadow:none}

/* телефон */
.hs-phone{width:min(240px,100%);aspect-ratio:9/18.5;border-radius:34px;background:#171C4F;padding:8px;box-shadow:0 18px 40px rgba(23,28,79,.18)}
.hs-scr{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:var(--hs-paper);container-type:inline-size;font-size:5cqw;line-height:1.25}
.hs-scr>*{position:absolute}
/* общие куски */
.hs-tap{width:14cqw;height:14cqw;margin:-7cqw 0 0 -7cqw;border-radius:50%;background:rgba(47,69,230,.28);opacity:0;transform:scale(.3);pointer-events:none;z-index:9}
.hs-btn{background:var(--hs-acc);color:#fff;border-radius:4cqw;text-align:center;font-weight:600;font-size:5cqw;padding:3.6cqw 0}
.hs-bill{left:6cqw;right:6cqw;border-radius:5cqw;background:linear-gradient(135deg,#2F45E6,#4B5DFF);color:#fff;padding:4.5cqw 5cqw;box-shadow:0 2cqw 5cqw rgba(47,69,230,.3)}
.hs-bill .l1{font-weight:700;font-size:3.4cqw;letter-spacing:.04em}
.hs-bill .l2{font-size:3.4cqw;opacity:.85;margin-top:1.5cqw}
.hs-bill .sum{font:700 10cqw/1.1 Unbounded,system-ui,sans-serif;margin:1cqw 0 3cqw}
.hs-bill .own{font-size:3.2cqw;opacity:.85}
.hs-bill .own b{display:block;font-size:4.4cqw;opacity:1}
.hs-bill .coin{position:absolute;right:4.5cqw;bottom:4.5cqw;width:11cqw;height:11cqw}
.hs-coin{display:block;width:100%;height:100%}
.hs-ico{border-radius:22%;background:linear-gradient(135deg,#2F45E6,#5468FF);display:grid;place-items:center}
.hs-ico .hs-coin{width:60%;height:60%}

/* ===== 1. Откройте app.milliardik.ru ===== */
.s1-bar{top:5cqw;left:5cqw;right:5cqw;height:11cqw;border-radius:6cqw;background:var(--hs-card);box-shadow:0 0 0 1px var(--hs-line);display:flex;align-items:center;padding:0 4cqw;gap:2cqw;font-size:4.6cqw;z-index:2}
.s1-bar .lock{width:3cqw;height:3.6cqw;border-radius:.8cqw;background:var(--hs-ink2);opacity:.5;flex:none}
.s1-url{position:relative;flex:1;height:6cqw;font-weight:500;white-space:nowrap}
.s1-url b{position:absolute;left:0;top:0;font-weight:500}
.s1-url .u1{animation:s1u1 var(--hs-d) both}
.s1-url .u2{animation:s1u2 var(--hs-d) both}
.s1-land{top:20cqw;left:0;right:0;bottom:0;padding:4cqw 6cqw;animation:s1blank var(--hs-d) both}
.s1-land .logo{font:700 4.6cqw/1 Unbounded,system-ui,sans-serif;margin-bottom:9cqw}
.s1-land h5{margin:0 0 3.5cqw;font:700 7.4cqw/1.15 Unbounded,system-ui,sans-serif}
.s1-land p{margin:0 0 7cqw;color:var(--hs-ink2);font-size:4.2cqw;line-height:1.35}
.s1-land .hs-btn{animation:s1press var(--hs-d) both}
.s1-land small{display:block;text-align:center;margin-top:3cqw;color:var(--hs-ink2);font-size:3.4cqw}
.s1-page{top:20cqw;left:0;right:0;bottom:0;animation:s1page var(--hs-d) both}
.s1-page .hs-bill{position:absolute;top:24cqw}
.s1-page h4{position:absolute;left:6cqw;right:6cqw;top:92cqw;margin:0;font:700 6.4cqw/1.2 Unbounded,system-ui,sans-serif}
.s1-page p{position:absolute;left:6cqw;right:6cqw;top:103cqw;margin:0;color:var(--hs-ink2);font-size:4.4cqw;line-height:1.35}
.s1-page .hs-btn{position:absolute;left:6cqw;right:6cqw;bottom:7cqw}
.s1-page .dots{position:absolute;left:6cqw;top:85cqw;display:flex;gap:1.4cqw}
.s1-page .dots i{width:2.2cqw;height:2.2cqw;border-radius:2cqw;background:var(--hs-line)}
.s1-page .dots i:first-child{width:6cqw;background:var(--hs-acc)}
.s1 .hs-tap{left:50%;top:91cqw;animation:hstap1 var(--hs-d) both}
@keyframes s1u1{0%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes s1u2{0%,46%{opacity:0}50%,100%{opacity:1}}
@keyframes s1press{0%,36%{transform:none;filter:none}40%{transform:scale(.95);filter:brightness(.9)}46%,100%{transform:none;filter:none}}
@keyframes s1caret{0%,40%{opacity:1}42%,100%{opacity:0}}
@keyframes s1blank{0%,46%{opacity:1}52%,100%{opacity:0}}
@keyframes s1page{0%,48%{opacity:0;transform:translateY(4cqw)}58%,100%{opacity:1;transform:none}}
@keyframes hstap1{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.4)}}

/* ===== 2. На экран «Домой» ===== */
.s2-os{top:4cqw;left:50%;transform:translateX(-50%);z-index:8;font-size:3.6cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--hs-ink);color:#fff;border-radius:6cqw;padding:1.2cqw 3.6cqw}
.s2-app{inset:0;animation:s2app var(--hs-d) both}
.s2-app .hs-bill{position:absolute;top:30cqw}
.s2-app .hs-btn{position:absolute;left:6cqw;right:6cqw;bottom:24cqw;opacity:.9}
.s2-safari{left:6cqw;right:8cqw;bottom:7cqw;height:11cqw;display:flex;gap:2cqw;align-items:center}   /* v0.5.28: Safari в iOS 26 — адрес внизу, «•••» справа */
.s2-safari .u{flex:1;height:100%;border-radius:6cqw;background:var(--hs-card);box-shadow:0 1cqw 4cqw rgba(23,28,79,.16);display:flex;align-items:center;gap:1.6cqw;padding:0 4cqw;font-size:3.6cqw;color:var(--hs-ink2)}
.s2-safari .lk{width:2.4cqw;height:2.8cqw;border-radius:.6cqw;background:var(--hs-ink2);opacity:.6}
.s2-safari .dots{flex:none;width:11cqw;height:11cqw;border-radius:50%;background:var(--hs-acc);color:#fff;display:grid;place-items:center;font:700 3.4cqw/1 system-ui;font-style:normal;letter-spacing:-.04em;box-shadow:0 1cqw 4cqw rgba(47,69,230,.35)}
.s2-sheet{left:0;right:0;bottom:0;background:var(--hs-card);border-radius:6cqw 6cqw 0 0;box-shadow:0 -2cqw 8cqw rgba(23,28,79,.18);padding:4cqw 5cqw 7cqw;transform:translateY(105%);z-index:5;animation:s2sheet var(--hs-d) both}
.s2-sheet .grab{width:12cqw;height:1.2cqw;border-radius:1cqw;background:var(--hs-line);margin:0 auto 4cqw}
.s2-sheet .r{display:flex;justify-content:space-between;align-items:center;padding:3.2cqw 3.5cqw;border-radius:3cqw;font-size:4.6cqw;color:var(--hs-ink2)}
.s2-sheet .r.hl{color:var(--hs-ink);font-weight:600;animation:s2hl var(--hs-d) both}
.s2-sheet .r b{width:5.4cqw;height:5.4cqw;border-radius:1.2cqw;border:.6cqw solid currentColor;display:grid;place-items:center;font:700 4cqw/1 system-ui}
.s2-banner{left:4cqw;right:4cqw;bottom:5cqw;background:var(--hs-card);border-radius:5cqw;box-shadow:0 2cqw 8cqw rgba(23,28,79,.22);padding:4cqw;display:flex;gap:3cqw;align-items:center;transform:translateY(140%);z-index:5;animation:s2banner var(--hs-d) both}
.s2-banner .hs-ico{width:12cqw;height:12cqw;flex:none}
.s2-banner .t{flex:1;font-size:4cqw;line-height:1.25}
.s2-banner .t b{display:block;font-size:4.4cqw}
.s2-banner .go{background:var(--hs-acc);color:#fff;border-radius:3cqw;padding:2.4cqw 3.2cqw;font-weight:600;font-size:4cqw}
.s2-home{inset:0;background:linear-gradient(160deg,#C9D2FF 0%,#EEF1FA 55%,#FFE7B0 100%);opacity:0;z-index:6;padding:16cqw 7cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7cqw 5cqw;align-content:start;animation:s2home var(--hs-d) both}
.s2-home>i{aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(23,28,79,.06)}
.s2-home .me{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;font-size:3.2cqw;font-weight:600;color:var(--hs-ink);animation:s2pop var(--hs-d) both}
.s2-home .me .hs-ico{width:100%;aspect-ratio:1;box-shadow:0 1.5cqw 4cqw rgba(47,69,230,.35)}
.hs-step[data-os="ios"] .s2-banner,.hs-step[data-os="android"] .s2-sheet,.hs-step[data-os="android"] .s2-safari{display:none}
.s2 .hs-tap.t1{left:88%;bottom:6.5cqw;animation:hstap2a var(--hs-d) both}
.s2 .hs-tap.t2{left:50%;bottom:9cqw;animation:hstap2b var(--hs-d) both}
.hs-step[data-os="android"] .s2 .hs-tap.t1{display:none}
.hs-step[data-os="android"] .s2 .hs-tap.t2{left:83%;bottom:16cqw}
@keyframes s2app{0%,56%{opacity:1}62%,100%{opacity:0}}
@keyframes hstap2a{0%,12%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1)}21%,100%{opacity:0;transform:scale(1.4)}}
@keyframes s2sheet{0%,20%{transform:translateY(105%)}30%,58%{transform:none}64%,100%{transform:translateY(105%)}}
@keyframes s2banner{0%,14%{transform:translateY(140%)}24%,56%{transform:none}62%,100%{transform:translateY(140%)}}
@keyframes s2hl{0%,36%{background:transparent}40%,58%{background:var(--hs-acc-soft)}}
@keyframes hstap2b{0%,42%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}51%,100%{opacity:0;transform:scale(1.4)}}
@keyframes s2home{0%,58%{opacity:0}64%,100%{opacity:1}}
@keyframes s2pop{0%,66%{opacity:0;transform:scale(.2)}74%{opacity:1;transform:scale(1.15)}80%,100%{opacity:1;transform:none}}

/* ===== 3. Создайте банк и пригласите ребёнка ===== */
.s3-form{inset:0;padding:9cqw 6cqw;animation:s3form var(--hs-d) both}
.s3-form h4{margin:0 0 1.5cqw;font:700 7cqw/1.2 Unbounded,system-ui,sans-serif}
.s3-form .sub{color:var(--hs-ink2);font-size:4.2cqw;margin-bottom:6cqw}
.s3-form .lab{font-size:4cqw;color:var(--hs-ink2);font-weight:600;margin:0 0 2cqw}
.s3-in{background:var(--hs-card);border-radius:3.5cqw;box-shadow:0 0 0 1px var(--hs-line);padding:3.4cqw 4cqw;font-size:5cqw;font-weight:600;display:flex;align-items:center;gap:1cqw;margin-bottom:5cqw}
.s3-in span{clip-path:inset(0 100% 0 0);animation:s3type var(--hs-d) steps(4) both}
.s3-in i{width:.5cqw;height:5.5cqw;background:var(--hs-acc);animation:s1caret var(--hs-d) both}
.s3-ages{display:flex;gap:2cqw;margin-bottom:6cqw}
.s3-ages b{flex:1;text-align:center;background:var(--hs-card);border-radius:3cqw;box-shadow:0 0 0 1px var(--hs-line);padding:2.6cqw 0;font-size:4.4cqw}
.s3-ages b.sel{animation:s3sel var(--hs-d) both}
.s3-form .hs-btn{position:absolute;left:6cqw;right:6cqw;bottom:8cqw}
.s3-done{inset:0;padding:9cqw 0;opacity:0;animation:s3done var(--hs-d) both}
.s3-done h4{margin:0 6cqw 5cqw;font:700 7cqw/1.2 Unbounded,system-ui,sans-serif}
.s3-done .hs-bill{position:relative;left:auto;right:auto;margin:0 6cqw}
.s3-toast{left:6cqw;right:6cqw;bottom:8cqw;background:var(--hs-card);border-radius:4cqw;box-shadow:0 2cqw 7cqw rgba(23,28,79,.18);padding:3.8cqw 4cqw;display:flex;gap:3cqw;align-items:center;font-size:4.2cqw;line-height:1.3;opacity:0;transform:translateY(6cqw);animation:s3toast var(--hs-d) both;z-index:4}
.s3-toast .ok{width:8cqw;height:8cqw;flex:none;border-radius:50%;background:var(--hs-ok);color:#fff;display:grid;place-items:center;font:700 4.6cqw/1 system-ui}
.s3 .hs-tap{left:50%;bottom:14cqw;animation:hstap3 var(--hs-d) both}
@keyframes s3type{0%,8%{clip-path:inset(0 100% 0 0)}24%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s3sel{0%,30%{background:var(--hs-card);color:inherit}34%,100%{background:var(--hs-acc);color:#fff;box-shadow:none}}
@keyframes hstap3{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.4)}}
@keyframes s3form{0%,46%{opacity:1}52%,100%{opacity:0}}
@keyframes s3done{0%,50%{opacity:0;transform:translateY(4cqw)}58%,100%{opacity:1;transform:none}}
@keyframes s3toast{0%,66%{opacity:0;transform:translateY(6cqw)}72%,100%{opacity:1;transform:none}}

/* не активный шаг — стоит на итоговом кадре */
.hs-step:not(.play) .hs-scr *{animation-delay:calc(var(--hs-d) * -.995)!important;animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.hs-step .hs-scr *{animation-delay:calc(var(--hs-d) * -.995)!important;animation-play-state:paused!important}}

/* телефон: один шаг на экране, переключатель 1-2-3 */
.hs-tabs{display:none}
@media (max-width:720px){
  .hs-row{grid-template-columns:1fr}
  .hs.hs-on .hs-step:not(.on){display:none}
  .hs.hs-on .hs-step:not(.on){opacity:1}
  .hs.hs-on .hs-tabs{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .hs-tabs button{border:0;border-radius:99px;padding:7px 14px;background:var(--hs-card);color:var(--hs-ink);font:600 14px "Golos Text",system-ui,sans-serif;box-shadow:0 0 0 1px var(--hs-line)}
  .hs-tabs button.on{background:var(--hs-coin);color:#3A2600;box-shadow:none}
}