/* babki.one first screen: "Franklin". Design grid is 428 x 926 (iPhone 12 Pro Max);
   every size is expressed in --u so the screen scales proportionally on any phone. */
:root {
  --bg: #0A0D14;
  --text: #FFFFFF;
  --head: #E6E9EF;
  --muted: #AEB4C0;
  --dim: #7E8592;
  --accent: #FF104A;
  --screen-width: min(100vw, 480px);
  --u: calc(var(--screen-width) / 428); /* one mobile canvas on every device */
  --screen-gutter: calc(24 * var(--u));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --g1: 50.3; --g2: 65; --g3: 63.5; /* box gaps tuned so the visible gaps are equal */
  --btn-h: 58px; /* buttons keep a fixed height; everything else scales */
  --gb: 102; /* space under the buttons that holds the privacy link */
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--text);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
body { font-family: 'Sofia Sans Condensed', Arial, sans-serif; }
::selection { background: var(--accent); color: #fff; }
h1, p { margin: 0; }
button { font: inherit; }

.screen {
  position: relative;
  width: var(--screen-width);
  height: 100svh; /* exactly one screen, never scrolls */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: max(calc(28 * var(--u)), env(safe-area-inset-top)) var(--screen-gutter) 0;
  isolation: isolate;
}

/* Photo and shade are anchored to the bottom, like the text, so the eyes keep
   their place above the headline on short and tall screens alike. */
.photo-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-200 * var(--u));
  height: calc(960 * var(--u));
  z-index: -2;
}
.photo {
  position: absolute;
  inset: 0;
  background: url(/images/franklin.jpg) center top / cover no-repeat;
  opacity: .2;
  transform: translateX(calc(-15 * var(--u))) scale(1.1);
  transform-origin: 55% 25%;
}
.shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, #000000 0%, rgba(10,13,20,.31) 18%, rgba(10,13,20,.25) 38%, rgba(10,13,20,.384) 67%, rgba(10,13,20,.694) 84%, #000000 100%);
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 600;
  font-size: calc(17 * var(--u));
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex: 0 0 auto; }
.brand svg.grannies { width: calc(196 * var(--u)); height: calc(58 * var(--u)); overflow: visible; }
.bead { transform-box: fill-box; transform-origin: center; }

.hero {
  /* the hero block sits exactly midway between the logo and the bottom edge */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding-bottom: calc(81 * var(--u)); /* +45: content lifted after the logo was removed; optical: the kicker's line box adds 6pt above the caps */
}
.copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--g2) * var(--u) - 20px);
  min-height: 0;
}
.copy > div { translate: 0 calc(-1 * var(--hero-title-shift, 0px)); }
.headline {
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 500;
  font-size: calc(40 * var(--u));
  line-height: 1.05;
  margin-bottom: calc(var(--g1) * var(--u));
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--head);
  white-space: nowrap;
}
.headline__line { display: block; overflow: hidden; }
.headline__line > span { display: block; }
.money {
  position: relative;
  margin: 0 0 0 calc(-3 * var(--u));
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 900;
  font-size: calc(176 * var(--u));
  line-height: .84;
  color: var(--accent);
  white-space: nowrap;
  isolation: isolate;
}
.money__char { display: inline-block; transform-origin: 50% 100%; }

@media (max-width: 380px) { :root { --btn-h: 52px; } }

.brand .granny { display: block; width: 100%; height: calc(48 * var(--u)); }

/* ---------- Header scene: one granny counts cash, the other books it on the abacus ---------- */
.grannies .gr-body { fill: #141927; stroke: #fff; stroke-width: 1.2; }
.grannies .gr-face { fill: #0A0D14; stroke: #fff; stroke-width: 1.2; }
.grannies .gr-scarf { fill: var(--accent); }
.grannies .gr-scarf-b { fill: #AEB4C0; }
.grannies .gr-glass { fill: none; stroke: #fff; stroke-width: .9; }
.grannies .gr-line { fill: none; stroke: #fff; stroke-width: .9; stroke-linecap: round; }
.grannies .gr-stack rect { fill: #2EAF62; stroke: #fff; stroke-width: .8; }
.grannies .gr-stack path { stroke: rgba(255,255,255,.7); stroke-width: .6; }
.grannies .gr-bill rect { fill: #2EAF62; stroke: #fff; stroke-width: .7; }
.grannies .gr-frame { fill: #0A0D14; stroke: #fff; stroke-width: 1.2; }
.grannies .gr-rods { stroke: rgba(255,255,255,.55); stroke-width: .8; }
.grannies .gr-bead { fill: #fff; }
.grannies .gr-bead-on, .grannies .gr-bead-go { fill: var(--accent); }
.grannies .gr-hand { fill: #fff; }
.grannies .gr-plus { fill: var(--accent); font: 700 9px 'Sofia Sans Extra Condensed', Arial, sans-serif; opacity: 0; }
.grannies .gr-bill { opacity: 0; }
.grannies .gr-head-a, .grannies .gr-head-b, .grannies .gr-stack, .grannies .gr-bead-go, .grannies .gr-plus { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .grannies .gr-head-a { animation: gr-nod 1.6s ease-in-out infinite; }
  .grannies .gr-head-b { animation: gr-nod 1.6s ease-in-out .8s infinite; }
  .grannies .gr-stack { animation: gr-flick 1.6s ease-in-out infinite; }
  .grannies .gr-bill-1 { animation: gr-fly 1.6s cubic-bezier(.45,0,.3,1) infinite; }
  .grannies .gr-bill-2 { animation: gr-fly 1.6s cubic-bezier(.45,0,.3,1) .8s infinite; }
  .grannies .gr-bead-go { animation: gr-bead .8s cubic-bezier(.2,1.4,.4,1) .35s infinite; }
  .grannies .gr-hand { animation: gr-hand .8s ease-in-out .3s infinite; }
  .grannies .gr-plus { animation: gr-plus .8s ease-out .45s infinite; }
}
@keyframes gr-nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(0); } }
@keyframes gr-flick { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg) translateY(-1px); } 30% { transform: rotate(0); } }
@keyframes gr-fly {
  0% { opacity: 0; transform: translate(40px, 34px) rotate(-14deg) scale(.7); }
  8% { opacity: 1; }
  30% { transform: translate(82px, 10px) rotate(22deg) scale(1); }
  48% { opacity: 1; transform: translate(132px, 30px) rotate(0) scale(.9); }
  54%, 100% { opacity: 0; transform: translate(136px, 34px) rotate(0) scale(.6); }
}
@keyframes gr-bead { 0%, 20% { transform: none; } 45%, 100% { transform: translateX(15px); } }
@keyframes gr-hand { 0%, 100% { transform: none; } 40% { transform: translate(-16px, -2px); } 60% { transform: translate(-16px, -2px); } }
@keyframes gr-plus { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- БАБКИ! glitch: designed "signal interruptions" ----------
   Four short, authored moves (slice, chroma, flash, pop). glitch.js plays one
   or two of them together every few seconds, never the same move twice in a row.
   Two overlay copies of the word (white, deep red) exist only during a move. */
.money::before,
.money::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.money::before { color: #FFFFFF; }
.money::after { color: #6B0A22; }

.money.g-slice { animation: g-jolt .34s steps(1, end) both; }
.money.g-slice::before { animation: g-slice-a .34s steps(1, end) both; }
.money.g-slice::after { animation: g-slice-b .34s steps(1, end) both; }
.money.g-chroma { animation: g-chroma .26s steps(1, end) both; }
.money.g-flash { animation: g-flash .2s steps(1, end) both; }
.money__char.g-pop { animation: g-pop .42s cubic-bezier(.2, 1.5, .35, 1) both; }

@keyframes g-jolt {
  0% { transform: translateX(calc(-3 * var(--u))); }
  30% { transform: translateX(calc(4 * var(--u))); }
  60% { transform: translateX(calc(-2 * var(--u))); }
  85%, 100% { transform: none; }
}
@keyframes g-slice-a {
  0% { opacity: 1; clip-path: inset(8% 0 70% 0); transform: translateX(calc(-14 * var(--u))); }
  24% { opacity: 1; clip-path: inset(46% 0 36% 0); transform: translateX(calc(10 * var(--u))); }
  48% { opacity: 1; clip-path: inset(70% 0 12% 0); transform: translateX(calc(-8 * var(--u))); }
  72% { opacity: 1; clip-path: inset(24% 0 58% 0); transform: translateX(calc(16 * var(--u))); }
  90%, 100% { opacity: 0; }
}
@keyframes g-slice-b {
  0% { opacity: 1; clip-path: inset(58% 0 26% 0); transform: translateX(calc(9 * var(--u))); }
  24% { opacity: 1; clip-path: inset(14% 0 74% 0); transform: translateX(calc(-12 * var(--u))); }
  48% { opacity: 1; clip-path: inset(36% 0 48% 0); transform: translateX(calc(14 * var(--u))); }
  72% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes g-chroma {
  0% { text-shadow: calc(-6 * var(--u)) calc(-1 * var(--u)) 0 rgba(255,255,255,.9), calc(6 * var(--u)) calc(1 * var(--u)) 0 rgba(154,160,172,.85); }
  40% { text-shadow: none; }
  55% { text-shadow: calc(-3 * var(--u)) 0 0 rgba(255,255,255,.75), calc(4 * var(--u)) 0 0 rgba(154,160,172,.7); }
  85%, 100% { text-shadow: none; }
}
@keyframes g-flash {
  0% { color: #FFFFFF; }
  45% { color: var(--accent); }
  60% { color: #FFFFFF; }
  100% { color: var(--accent); }
}
@keyframes g-pop {
  0% { transform: none; }
  28% { transform: scale(.92, 1.32); }
  58% { transform: scale(1.05, .95); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .money, .money::before, .money::after, .money__char { animation: none !important; }
}

.lead {
  translate: 0 var(--hero-content-shift, 0px);
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.22;
  color: var(--muted);
}
.lead b { color: var(--text); font-weight: 600; }

.actions {
  position: static;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--g3) * var(--u));
}
.btn-yes {
  position: relative;
  overflow: hidden;
  height: var(--btn-h);
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--bg);
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: calc(22 * var(--u));
  letter-spacing: .14em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(64 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgba(0,0,0,.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.screen .btn-yes { font-family: 'Handjet', monospace; overflow: visible; }
/* Counting granny stands on the button top edge, 30px from its right edge. */
.screen .btn-yes .btn-yes__label { white-space: pre; }
.btn-yes .btn-yes__coin.s2__count { position: absolute; right: 30px; left: auto; top: auto; bottom: 100%; transform: scaleX(-1); width: 26.01px !important; height: 35.19px !important; margin: 0 !important; background-image: url(/images/g-count.webp?v=10) !important; background-size: 1000% 100% !important; background-repeat: no-repeat !important; animation: s2-count 4.8s steps(1,end) infinite !important; }
.btn-yes__go {
  position: absolute;
  right: 6px;
  top: 6px;
  width: calc(var(--btn-h) - 12px);
  height: calc(var(--btn-h) - 12px);
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.btn-yes__go svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-yes:focus-visible, .btn-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-no {
  margin-top: 6px;
  height: var(--btn-h);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 500;
  font-size: calc(20 * var(--u));
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn-no:hover { color: #fff; } }
.privacy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8 * var(--u));
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}
.privacy a { color: var(--dim); text-decoration: none; text-underline-offset: 3px; }
.privacy a:hover, .privacy a:focus-visible { color: #fff; text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dollar burst on "ВЕРНО" */
.burst {
  position: fixed;
  z-index: 12000;
  pointer-events: none;
  font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
}

/* Next screen overlay (structure from app.css) recoloured for this design. */
.babki-app { background: rgba(10, 13, 20, .84) !important; }
html.babki-app-open, html.babki-app-open body { background: var(--bg) !important; }
html.babki-app-open body > .screen { opacity: .22; filter: blur(14px); pointer-events: none; }

.beaters { position: fixed; inset: 0; width: 100vw; height: 100svh; pointer-events: none; z-index: 5; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .15; filter: grayscale(.8); pointer-events: none; }
.brand__logo { width: auto; height: calc(46 * var(--u)); flex: 0 0 auto; }
.brand__word { font-weight: 900; font-size: calc(30 * var(--u)); letter-spacing: .02em; line-height: 1; color: #fff; }
/* Pixel type: logo word and lead (2026-11-11) */
.brand__word { font-family: 'Handjet', monospace; font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: .04em; text-transform: uppercase; }
.money { font-family: 'Handjet', monospace; }
.money { font-weight: 900; }
.brand__logo { height: calc(32 * var(--u)); }

/* Logo: word on the feet line */
.brand { align-items: flex-end; }
.brand__word { line-height: 1; margin-bottom: -.13em; }

/* Hide the beating grannies while the next screen is open */
html.babki-app-open .beaters { display: none; }

/* CRT background test: faint scanlines + vignette, behind the content */
.crt { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 55%, transparent 55%, rgba(0,0,0,.7) 100%); }

/* Logo: spinning pixel coin with «Б» + word in the headline face */
.brand { align-items: center; }
.brand__coin { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: 0 0 auto; animation: coin-spin 6s steps(1, end) infinite; }
.brand__word { font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif; font-weight: 700; font-size: calc(26 * var(--u)); letter-spacing: .06em; margin-bottom: 0; }
@keyframes coin-spin {
  0%, 84% { transform: scaleX(1); }
  86% { transform: scaleX(.6); } 88% { transform: scaleX(.2); } 90% { transform: scaleX(-.6); }
  92% { transform: scaleX(-1); } 94% { transform: scaleX(-.6); } 96% { transform: scaleX(.2); } 98% { transform: scaleX(.6); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .brand__coin { animation: none; } }
/* Logo hidden for now (2026-11-11): header keeps its space */
.brand { visibility: hidden; }

/* Perspective floor: true ground-plane projection of square tiles (js/floor.js) */
.floor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  /* top edge of the floor: soft (≈2–3% blur), 70% transparent at the horizon → fully visible 20px lower */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hz, 50%) - .5px), rgba(0,0,0,.3) var(--hz, 50%), rgba(0,0,0,.5) calc(var(--hz, 50%) + 8px), #000 calc(var(--hz, 50%) + 28px));
          mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hz, 50%) - .5px), rgba(0,0,0,.3) var(--hz, 50%), rgba(0,0,0,.5) calc(var(--hz, 50%) + 8px), #000 calc(var(--hz, 50%) + 28px));
}

/* Game «Лови бабки» (inside the web app) */
.babki-game { position: fixed; inset: 0; z-index: 60; background: linear-gradient(rgba(10,13,20,.5), rgba(10,13,20,.5)), url(/images/courtyard-blur.webp?v=1) center bottom / cover no-repeat, var(--bg, #0A0D14); touch-action: none; user-select: none; -webkit-user-select: none; }
.babki-game[hidden] { display: none; }
.babki-game__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.babki-game__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(24 * var(--u)); gap: calc(26 * var(--u)); background: rgba(10,13,20,.86); }
.babki-game__panel[hidden] { display: none; }
.babki-game__title { margin: 0; font-family: 'Sofia Sans Extra Condensed', Arial, sans-serif; font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1.02; text-transform: uppercase; color: #fff; }
.babki-game__rules { margin: 0; font-family: 'Sofia Sans Condensed', Arial, sans-serif; font-size: calc(18 * var(--u)); line-height: 1.3; color: var(--muted, #AEB4C0); }
.babki-game__btn { width: 100%; }
.babki-game__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* Second screen (web app): who I am + services */
.babki-app__close { font: 400 30px/1 Arial, sans-serif !important; }
.babki-app__screen.s2 { margin: 56px 0 0; font-family: 'Sofia Sans Condensed', Arial, sans-serif; color: #fff; }
.s2__head { display: flex; justify-content: space-between; gap: 10px; }
.s2__title { margin: 0; font: 500 42px/1.05 'Sofia Sans Extra Condensed', Arial, sans-serif !important; letter-spacing: .01em; text-transform: uppercase; color: #E6E9EF; }
.s2__title span { color: #FF104A; }
.s2__sp { display: block; flex: none; background-repeat: no-repeat; }
.s2__count { width: 59px; height: 72px; align-self: flex-end; margin-bottom: 9px; background-image: url(/images/g-count.webp?v=10); background-size: 800% 100%; animation: s2-count 2.4s steps(1,end) infinite; }
.s2__lead { margin: 16px 0 0; font-size: 18px; line-height: 1.3; color: #AEB4C0; }
.s2__label { display: block; margin: calc(20 * var(--u)) 0 6px; font: 700 18px/1.2 'Sofia Sans Extra Condensed', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #FF104A; }
.s2__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.s2__list li { display: flex; align-items: center; gap: 16px; padding: calc(8 * var(--u)) 0; border-bottom: 1px solid rgba(255,255,255,.1); font: 500 var(--s2-service-font, calc(20 * var(--u)))/1.1 'Sofia Sans Extra Condensed', Arial, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #E6E9EF; }
.s2__ico { width: 94px; flex: none; display: flex; justify-content: center; }
.s2__magnet { width: 108px; height: 48px; background-image: url(/images/g-magnet.webp?v=10); background-size: 300% 100%; animation: s2-magnet 1.2s steps(1,end) infinite; }
.s2__rocket { width: 67px; height: 48px; background-image: url(/images/g-rocket.webp?v=10); background-size: 300% 100%; animation: s2-rocket .45s steps(1,end) infinite; }
.s2__ps { margin: calc(20 * var(--u)) 0 0; font-size: 16px; line-height: 1.4; color: #AEB4C0; }
.s2__ps .s2__label { display: inline; margin: 0 6px 0 0; }
.s2__cta { position: relative; width: 100%; height: 58px; margin-top: 32px; border: 0; border-radius: 999px; background: #fff; color: #0A0D14; font: 700 22px/1 'Handjet', monospace; letter-spacing: .14em; display: flex; align-items: center; justify-content: center; padding: 0 72px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.s2__angry { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 50px; height: 46px; background-image: url(/images/g-angry-fast.webp?v=1); background-size: 1200% 100%; animation: s2-angry 6s steps(1,end) infinite; }
@media (max-width: 370px) { .s2__title { font-size: 36px !important; } .s2__ico { width: 80px; } }
@media (prefers-reduced-motion: reduce) { .s2__sp { animation: none; } }

/* Screen 2: back arrow only (system back gesture also closes); content starts higher */
.babki-app__close { display: none !important; }
.babki-app__screen.s2 { margin-top: 40px; }

/* Screen 2 sprites v2 (new unified grannies) */
.s2__count { width: 62px !important; height: 72px !important; background-image: url(/images/g-count.webp?v=10) !important; background-size: 900% 100% !important; animation: s2-count 3.2s steps(1,end) infinite !important; }
.s2__magnet { width: 84px !important; height: 48px !important; background-image: url(/images/g-magnet.webp?v=10) !important; background-size: 400% 100% !important; animation: s2-magnet 1.4s steps(1,end) infinite !important; }
.s2__rocket { position: relative; width: 81px !important; height: 48px !important; background-image: url(/images/g-rocket.webp?v=10) !important; background-size: 300% 100% !important; animation: s2-rocket .45s steps(1,end) infinite !important; }
.s2__ico { position: relative; }
.s2__smoke { position: absolute; left: 6px; top: 26px; width: 34px; height: 28px; background: url(/images/smoke.webp?v=10) -25px 0 / auto no-repeat; opacity: 0; pointer-events: none; animation: s2-smoke 1.8s linear infinite; }
.s2__smoke:nth-child(2) { animation-delay: .45s; } .s2__smoke:nth-child(3) { animation-delay: .9s; } .s2__smoke:nth-child(4) { animation-delay: 1.35s; }
@keyframes s2-smoke { 0% { opacity: .9; transform: translateX(0) scale(.5); } 100% { opacity: 0; transform: translateX(-160px) translateY(-6px) scale(2.2); } }
.s2__cta { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 !important; }
.s2__cta .s2__angry, .s2__cta .s2__blink { position: static !important; justify-self: center; }

.s2__angry { width: 61px !important; height: 46px !important; background-image: url(/images/g-angry-fast.webp?v=1) !important; background-size: 1200% 100% !important; animation: s2-angry 6s steps(1,end) infinite !important; }
.s2__blink { width: 27px; height: 46px; background-image: url(/images/g-blink.webp?v=10); background-size: 300% 100%; animation: s2-blink 4s steps(1,end) infinite; }
.s2__rocket-wrap { overflow: visible; }
@keyframes s2-rocket{0.000%{background-position:0.0000% 0}33.333%{background-position:50.0000% 0}66.667%{background-position:100.0000% 0}}

/* v3: new counting granny, magnet + flying leads, urging granny not clipped, livelier blinker, no back chevron */
.babki-app__back { display: none !important; }
.s2__count { width: 47.12px !important; background-image: url(/images/g-count.webp?v=10) !important; background-size: 800% 100% !important; animation: s2-count 3.4s steps(1,end) infinite !important; }
.s2__magnet { width: 49.25px !important; background-image: url(/images/g-magnet.webp?v=10) !important; background-size: 200% 100% !important; animation: s2-magnet 1.2s steps(1,end) infinite !important; }
.s2__angry { width: 64.42px !important; background-image: url(/images/g-angry-fast.webp?v=1) !important; }
.s2__list li { position: relative; }
.s2__leads { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.s2__lp { position: absolute; left: 0; top: 0; background-image: url(/images/leads.png?v=1); background-repeat: no-repeat; image-rendering: pixelated; opacity: 0; will-change: transform, opacity; }
.s2__cta .s2__blink { animation: s2-blink 5.2s steps(1,end) infinite !important; transform: none !important; }
@keyframes s2-breathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1px) scaleY(1.03); } }
@keyframes s2-angry { 0% { background-position: 0.0000% 0; } 20% { background-position: 9.0909% 0; } 26% { background-position: 18.1818% 0; } 34% { background-position: 27.2727% 0; } 40% { background-position: 36.3636% 0; } 44% { background-position: 45.4545% 0; } 50% { background-position: 54.5455% 0; } 54% { background-position: 63.6364% 0; } 60% { background-position: 72.7273% 0; } 68% { background-position: 81.8182% 0; } 70% { background-position: 72.7273% 0; } 76% { background-position: 90.9091% 0; } 90% { background-position: 100.0000% 0; } 100% { background-position: 0.0000% 0; } }

/* v4: counting / magnet / idle grannies redrawn */
.s2__count { width: 53px !important; background-image: url(/images/g-count.webp?v=10) !important; background-size: 1000% 100% !important; animation: s2-count 4.8s steps(1,end) infinite !important; }
.s2__magnet { width: 53.99px !important; background-image: url(/images/g-magnet.webp?v=11) !important; background-size: 600% 100% !important; animation: s2-magnet 2.4s steps(1,end) infinite !important; }
.s2__cta .s2__blink { width: 38.5px !important; background-image: url(/images/g-blink.webp?v=10) !important; background-size: 600% 100% !important; animation: s2-blink 6s steps(1,end) infinite !important; }
@keyframes s2-count{0.000%{background-position:0.0000% 0}3.846%{background-position:0.0000% 0}7.692%{background-position:0.0000% 0}11.538%{background-position:11.1111% 0}15.385%{background-position:11.1111% 0}19.231%{background-position:11.1111% 0}23.077%{background-position:22.2222% 0}26.923%{background-position:33.3333% 0}30.769%{background-position:44.4444% 0}34.615%{background-position:55.5556% 0}38.462%{background-position:66.6667% 0}42.308%{background-position:33.3333% 0}46.154%{background-position:44.4444% 0}50.000%{background-position:55.5556% 0}53.846%{background-position:66.6667% 0}57.692%{background-position:77.7778% 0}61.538%{background-position:77.7778% 0}65.385%{background-position:88.8889% 0}69.231%{background-position:88.8889% 0}73.077%{background-position:88.8889% 0}76.923%{background-position:88.8889% 0}80.769%{background-position:100.0000% 0}84.615%{background-position:100.0000% 0}88.462%{background-position:88.8889% 0}92.308%{background-position:88.8889% 0}96.154%{background-position:0.0000% 0}}
@keyframes s2-blink{0.000%{background-position:0.0000% 0}3.333%{background-position:0.0000% 0}6.667%{background-position:0.0000% 0}10.000%{background-position:0.0000% 0}13.333%{background-position:20.0000% 0}16.667%{background-position:0.0000% 0}20.000%{background-position:0.0000% 0}23.333%{background-position:40.0000% 0}26.667%{background-position:40.0000% 0}30.000%{background-position:40.0000% 0}33.333%{background-position:60.0000% 0}36.667%{background-position:60.0000% 0}40.000%{background-position:60.0000% 0}43.333%{background-position:40.0000% 0}46.667%{background-position:40.0000% 0}50.000%{background-position:0.0000% 0}53.333%{background-position:0.0000% 0}56.667%{background-position:80.0000% 0}60.000%{background-position:80.0000% 0}63.333%{background-position:80.0000% 0}66.667%{background-position:0.0000% 0}70.000%{background-position:0.0000% 0}73.333%{background-position:20.0000% 0}76.667%{background-position:0.0000% 0}80.000%{background-position:20.0000% 0}83.333%{background-position:0.0000% 0}86.667%{background-position:100.0000% 0}90.000%{background-position:100.0000% 0}93.333%{background-position:100.0000% 0}96.667%{background-position:100.0000% 0}}

/* v5: equal granny heights (48px), magnet arcs in code, granny moved out of the CTA */
.s2__count { width: 35.3px !important; height: 48px !important; margin-right: 6px; }
.s2__magnet { width: 59.1px !important; height: 52px !important; }
.s2__ctarow { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.s2__ctarow .s2__cta { margin-top: 0 !important; flex: 1; display: flex !important; justify-content: center; padding: 0 16px !important; }
.s2__ctarow .s2__angry { position: static !important; }
@media (max-width: 370px) { .s2__ctarow .s2__cta { font-size: 19px; letter-spacing: .1em; } }


/* v6: pixel arcs only (held longer), centred grannies, cane pokes into the CTA and the CTA flinches */
.s2__head { position: relative; }
.s2__head .s2__count { position: absolute; top: 50%; left: var(--cx, auto); right: auto; margin: 0 !important; transform: translate(-50%, -50%); }
.s2__ctarow { position: relative; }
.s2__ctarow .s2__ico { z-index: 2; }
.s2__ctarow .s2__angry { width: 72.8px !important; height: 52px !important; animation: s2-angry 6s steps(1,end) infinite, s2-step 6s ease-in-out infinite !important; }
.s2__ctarow .s2__cta { animation: s2-poke 3.6s linear infinite; }
@keyframes s2-poke { 0%,47%,55%,62%,70%,100% { transform: none; background: #fff; } 49%,64% { transform: translateX(3px) scale(.985); background: #FFE3EA; } 51%,66% { transform: translateX(-1px); background: #fff; } }
@media (prefers-reduced-motion: reduce) { .s2__ctarow .s2__cta { animation: none; } }
@keyframes s2-magnet{0.000%{background-position:0.0000% 0}5.556%{background-position:0.0000% 0}11.111%{background-position:0.0000% 0}16.667%{background-position:20.0000% 0}22.222%{background-position:20.0000% 0}27.778%{background-position:20.0000% 0}33.333%{background-position:40.0000% 0}38.889%{background-position:40.0000% 0}44.444%{background-position:40.0000% 0}50.000%{background-position:60.0000% 0}55.556%{background-position:60.0000% 0}61.111%{background-position:60.0000% 0}66.667%{background-position:80.0000% 0}72.222%{background-position:80.0000% 0}77.778%{background-position:80.0000% 0}83.333%{background-position:100.0000% 0}88.889%{background-position:100.0000% 0}94.444%{background-position:100.0000% 0}}

/* v7: pixel magnet arcs in 3 sizes, following the magnet; counting granny on the text baseline; spinning coin on the start CTA */
.s2__arcs { position: absolute; width: 0; height: 0; pointer-events: none; animation: s2-arcpos 2.4s steps(1,end) infinite; }
.s2__arcs i { position: absolute; top: 0; width: 25px; height: 20px; margin-top: -10px; background: url(/images/arc.png?v=2) 0 0 / 100% 100% no-repeat; opacity: 0; animation: s2-arcwave 1.2s linear infinite; }
.s2__arcs i:nth-child(1) { left: 2px; transform: scale(.5); animation-delay: .8s; }
.s2__arcs i:nth-child(2) { left: 9px; transform: scale(.75); animation-delay: .4s; }
.s2__arcs i:nth-child(3) { left: 18px; transform: scale(1); animation-delay: 0s; }
@keyframes s2-arcwave { 0% { opacity: 0; } 20%, 55% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes s2-arcpos{0.000%{left:calc(50% + 21.7px);top:26.6px}5.556%{left:calc(50% + 21.7px);top:26.6px}11.111%{left:calc(50% + 21.7px);top:26.6px}16.667%{left:calc(50% + 26.3px);top:24.1px}22.222%{left:calc(50% + 26.3px);top:24.1px}27.778%{left:calc(50% + 26.3px);top:24.1px}33.333%{left:calc(50% + 21.5px);top:9.7px}38.889%{left:calc(50% + 21.5px);top:9.7px}44.444%{left:calc(50% + 21.5px);top:9.7px}50.000%{left:calc(50% + 20.0px);top:28.1px}55.556%{left:calc(50% + 20.0px);top:28.1px}61.111%{left:calc(50% + 20.0px);top:28.1px}66.667%{left:calc(50% + 19.3px);top:31.9px}72.222%{left:calc(50% + 19.3px);top:31.9px}77.778%{left:calc(50% + 19.3px);top:31.9px}83.333%{left:calc(50% + 20.6px);top:27.9px}88.889%{left:calc(50% + 20.6px);top:27.9px}94.444%{left:calc(50% + 20.6px);top:27.9px}}
.s2__head .s2__count { top: auto !important; bottom: 9px; transform: translateX(-50%) !important; }

/* v8: screen-2 title matches the first-screen headline (font, size, leading, left edge, top); quick fade from black */
.babki-app__inner { width: calc(100% - 2 * var(--screen-gutter)) !important; }
.s2__title { font-size: calc(40 * var(--u)) !important; line-height: 1.05 !important; letter-spacing: .01em !important; }
.babki-app__screen.s2 { margin-top: var(--s2top, 40px) !important; }
.babki-app { background: #000 !important; }

.babki-app__screen { animation: none !important; }
@keyframes babki-fade { from { opacity: 0; } to { opacity: 1; } }

/* CTA row on the same line as the first-screen CTA; services retain all three dividers. */

.s2__ctarow { margin-top: var(--s2cta, 32px) !important; }

/* Mirrored service layout: grannies in the left column, labels and CTA on the right. */
.s2__list li .s2__ico, .s2__ctarow .s2__ico { order: 0; width: var(--icow, 94px) !important; }
.s2__list li { gap: 12px !important; }
.s2__list li > span:not(.s2__ico) { flex: 1; }
.s2__list li:first-child .s2__ico, .s2__ctarow .s2__ico { transform: none; }
.s2__head .s2__count { bottom: var(--cb, 9px) !important; }
.s2__ctarow { gap: 12px !important; }

.s2__arcs i { width: 10px !important; height: 22px !important; margin-top: -11px !important; background-size: 100% 100% !important; image-rendering: pixelated; }

/* v11: «бабки» on its own line; counting and rocket grannies face left; services tighter to fit the fixed CTA */
.s2__head .s2__count { transform: translateX(-50%) scaleX(-1) !important; }
.s2__list li:nth-child(2) .s2__ico { transform: none; }

/* v12: instant screen switch; P.S. label on its own line */
.s2__ps .s2__label { display: block !important; margin: 0 0 4px !important; }
.s2__list li:nth-child(2) .s2__ico .s2__rocket { margin-left: -50px; }

@keyframes s2-step { 0%,20% { transform: translateX(0); } 34%,76% { transform: translateX(var(--poke, 38px)); } 90%,100% { transform: translateX(0); } }
.babki-app__surface { overflow-x: hidden !important; }
.s2__count { width: 42.4px !important; height: 57.6px !important; }
.s2__ctarow .s2__cta { margin-left: -30px; position: relative; z-index: 1; }
.s2__cta-label, .s2__cta-previous { white-space: nowrap; pointer-events: none; }
.s2__cta-previous { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* magnet granny 15px to the right (column is mirrored); arcs follow */
.s2__list li:first-child .s2__magnet { margin-left: -30px; translate: 5px 0; }
.s2__list li:first-child .s2__arcs { margin-left: -15px; translate: 5px 0; }

/* Service grannies now face right toward their labels. */
.s2__list li:nth-child(2) .s2__ico .s2__rocket { margin-left: 0 !important; translate: -15px 0; }
.s2__privacy { position: fixed !important; left: 0; right: 0; z-index: 3; }
html:not(.babki-app-open) .s2__privacy { display: none; }

/* screen 2 body text: same leading/scale as the first-screen lead */
.s2__lead { font-size: calc(18 * var(--u)) !important; line-height: 1.22 !important; }
.s2__ps { font-size: calc(16 * var(--u)) !important; line-height: 1.22 !important; }
/* body text 17 everywhere (start lead, screen-2 lead and P.S.) */
.lead, .s2__lead, .s2__ps { font-size: calc(17 * var(--u)) !important; line-height: 1.22 !important; }

/* Counting granny remains hidden in the screen-2 heading. */
.s2__head .s2__count { display: none !important; }

/* 2026-11-12: rocket granny → granny typing on a laptop (process, Enter with pixel impact) */
.s2__rocket { width: 55.5px !important; height: 52px !important; background-image: url(/images/g-laptop.webp?v=7) !important; background-size: 1400% 100% !important; animation: s2-laptop 5.44s steps(1,end) infinite !important; }
@keyframes s2-laptop{0.000%{background-position:0.0000% 0}2.941%{background-position:7.6923% 0}5.882%{background-position:15.3846% 0}8.824%{background-position:7.6923% 0}11.765%{background-position:0.0000% 0}14.706%{background-position:7.6923% 0}17.647%{background-position:15.3846% 0}20.588%{background-position:23.0769% 0}23.529%{background-position:23.0769% 0}26.471%{background-position:30.7692% 0}29.412%{background-position:30.7692% 0}32.353%{background-position:30.7692% 0}35.294%{background-position:38.4615% 0}38.235%{background-position:38.4615% 0}41.176%{background-position:46.1538% 0}44.118%{background-position:46.1538% 0}47.059%{background-position:38.4615% 0}50.000%{background-position:53.8462% 0}52.941%{background-position:61.5385% 0}55.882%{background-position:69.2308% 0}58.824%{background-position:61.5385% 0}61.765%{background-position:53.8462% 0}64.706%{background-position:61.5385% 0}67.647%{background-position:69.2308% 0}70.588%{background-position:61.5385% 0}73.529%{background-position:76.9231% 0}76.471%{background-position:76.9231% 0}79.412%{background-position:84.6154% 0}82.353%{background-position:84.6154% 0}85.294%{background-position:92.3077% 0}88.235%{background-position:92.3077% 0}91.176%{background-position:100.0000% 0}94.118%{background-position:100.0000% 0}97.059%{background-position:100.0000% 0}}

/* Lead flow after «Обсудить проект» */
.babki-app__screen.lf { margin: 0; min-height: calc(100svh - 64px); box-sizing: border-box; padding: 96px 0 32px; display: flex; flex-direction: column; justify-content: center; font-family: 'Sofia Sans Condensed', Arial, sans-serif; color: #fff; }
.babki-app__screen.lf[hidden], .lf__step[hidden], .lf__walk[hidden], .lf__cc[hidden] { display: none; }
.babki-app.is-lead .s2__privacy { display: none; }
.lf__step { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.lf__title { margin: 0; font: 600 28px/1.12 'Sofia Sans Condensed', Arial, sans-serif; color: #fff; text-transform: none !important; letter-spacing: 0 !important; }
.lf__text { margin: 0; font-size: 17px; line-height: 1.35; color: #AEB4C0; }
.lf__ok { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 17px; color: #E6E9EF; }
.lf__ok svg { width: 18px; height: 18px; fill: none; stroke: #FF104A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lf__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border: 0; border-radius: 999px; background: #fff; color: #0A0D14; font: 700 20px/1 'Handjet', monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.lf__btn:focus-visible, .lf__seg button:focus-visible { outline: 2px solid #FF104A; outline-offset: 3px; }
.lf__seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
.lf__seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 999px; background: transparent; color: #AEB4C0; font: 700 18px/1 'Handjet', monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.lf__seg button svg { width: 20px; height: 20px; }
.lf__seg button[aria-pressed="true"] { background: #fff; color: #0A0D14; }
.lf__in { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.05); color: #fff; font: 400 17px/1.2 'Sofia Sans Condensed', Arial, sans-serif; text-align: left; outline: none; -webkit-appearance: none; appearance: none; box-shadow: none; }
.lf__in:focus { border-color: #FF104A; }
.lf__in::placeholder { color: #6F7685; }
.lf__ta { height: auto; min-height: 120px; padding: 14px 16px; resize: none; }
.lf__row { display: flex; gap: 8px; }
.lf__cc { display: none; position: relative; flex: none; align-items: center; height: 52px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.05); font-size: 17px; }
.lf__cc select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }
.is-phone .lf__cc { display: flex; }
.lf__field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lf__field > span { font-size: 14px; color: #AEB4C0; }
.lf__check { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.35; color: #AEB4C0; cursor: pointer; }
.lf__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; }
.lf__box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lf__check input:checked + .lf__box { background: #FF104A; border-color: #FF104A; }
.lf__check input:checked + .lf__box svg { opacity: 1; }
.lf__check input:focus-visible + .lf__box { outline: 2px solid #FF104A; outline-offset: 2px; }
.lf__check a { color: #fff; }
.lf__err { margin: -4px 0 0; font-size: 15px; color: #FF6B86; }
.lf__err:empty { display: none; }
.lf__opts { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.lf__opts label { display: block; cursor: pointer; }
.lf__opts input { position: absolute; opacity: 0; pointer-events: none; }
.lf__opts span { display: block; padding: 13px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; font-size: 16px; line-height: 1.2; color: #E6E9EF; }
.lf__opts input:checked + span { background: #fff; color: #0A0D14; border-color: #fff; }
.lf__opts input:focus-visible + span { outline: 2px solid #FF104A; outline-offset: 2px; }
.lf__rules { list-style: none; margin: 0; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lf__rules li { display: grid; grid-template-columns: 40px 52px 1fr; align-items: center; gap: 10px; font-size: 16px; line-height: 1.25; color: #E6E9EF; }
.lf__ico { display: grid; place-items: center; width: 40px; height: 40px; }
.lf__rules b { font: 700 20px/1 'Handjet', monospace; }
.lf__rules .is-plus { color: #FFD044; } .lf__rules .is-minus { color: #FF104A; } .lf__rules .is-ice { color: #8FD3FF; }
/* walking grannies = progress */
.lf__walk { --p: 0; position: absolute; top: 56px; left: calc(24 * var(--u)); right: calc(24 * var(--u)); height: 72px; pointer-events: none; }
.lf__track { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.lf__track i { display: block; height: 100%; width: calc(var(--p) * 100%); background: #FF104A; transition: width .6s ease; }
.lf__gr { position: absolute; bottom: 4px; left: calc(var(--p) * (100% - 141px)); display: flex; align-items: flex-end; transition: left .6s ease; }
.lf__wa, .lf__wb { display: block; height: 64px; background-repeat: no-repeat; background-size: 1200% 100%; animation: lf-walk .9s steps(1, end) infinite; }
.lf__wa { width: 73px; background-image: url(/images/g-walk-a.webp?v=2); }
.lf__wb { width: 66px; margin-left: 2px; background-image: url(/images/g-walk-b.webp?v=2); animation-delay: -.45s; }
.lf__count { position: absolute; right: 0; top: 0; font: 600 15px/1 'Handjet', monospace; letter-spacing: .1em; color: #6F7685; }
@keyframes lf-walk { 0% { background-position: 0 0; } 16.66% { background-position: 20% 0; } 33.33% { background-position: 40% 0; } 50% { background-position: 60% 0; } 66.66% { background-position: 80% 0; } 83.33% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .lf__wa, .lf__wb { animation: none; } }
.babki-game__again { align-self: center; padding: 8px 12px; border: 0; background: none; color: #fff; font: 400 17px 'Sofia Sans Condensed', Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.babki-game__again[hidden] { display: none; }

/* lead v5: one control system — 54px height, pill radius; sliding messenger switch; phone with country inside one field */
.lf__btn, .lf__in, .lf__seg { height: 54px !important; border-radius: 27px !important; box-sizing: border-box; }
.lf__in { padding: 0 20px; }
.lf__ta { height: auto !important; min-height: 140px; border-radius: 22px !important; padding: 16px 20px; }
.lf__opts span { border-radius: 22px; padding: 14px 20px; }
.lf__seg { position: relative; padding: 4px; gap: 0; }
.lf__seg button { position: relative; z-index: 1; height: 46px; background: transparent !important; transition: color .3s ease; }
.lf__seg button[aria-pressed="true"] { color: #0A0D14; }
.lf__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 23px; background: #fff; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.lf__seg.is-wa .lf__thumb { transform: translateX(100%); }
.lf__row { display: flex; align-items: center; gap: 0; padding: 0 !important; overflow: hidden; }
.lf__row.is-focus { border-color: #FF104A; }
.lf__row input { flex: 1; min-width: 0; height: 100%; padding: 0 20px; border: 0; background: transparent; color: #fff; font: 400 17px/1.2 'Sofia Sans Condensed', Arial, sans-serif; outline: none; -webkit-appearance: none; appearance: none; }
.lf__row input::placeholder { color: #6F7685; }
.lf__cc { display: flex !important; position: relative; flex: none; align-items: center; gap: 6px; height: 100%; padding: 0 10px 0 18px; border: 0 !important;  border-radius: 0 !important; background: transparent !important; font-size: 17px; color: #fff; }
.lf__cc[hidden] { display: none !important; }
.lf__cc + input { padding-left: 12px; }
.lf__cc svg { width: 14px; height: 14px; fill: none; stroke: #AEB4C0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf__cc select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }

/* lead v6 motion: staggered step entrance, springy fields, press feedback, loading→success button */
@keyframes lf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lf__step.is-enter > * { animation: lf-in .45s cubic-bezier(.2,.8,.2,1) both; }
.lf__step.is-enter > *:nth-child(2) { animation-delay: .05s; } .lf__step.is-enter > *:nth-child(3) { animation-delay: .1s; }
.lf__step.is-enter > *:nth-child(4) { animation-delay: .15s; } .lf__step.is-enter > *:nth-child(5) { animation-delay: .2s; }
.lf__step.is-enter > *:nth-child(n+6) { animation-delay: .25s; }
.lf__in, .lf__row { transition: border-color .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.lf__in:focus, .lf__row.is-focus { transform: scale(1.015); }
.lf__btn, .lf__opts span, .lf__seg button { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, border-color .2s ease; }
.lf__btn:active, .lf__opts label:active span { transform: scale(.97); }
.lf__opts input:checked + span { animation: lf-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes lf-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.lf__btn { position: relative; overflow: hidden; }
.lf__btn.is-busy { color: transparent; pointer-events: none; }
.lf__btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #0A0D14; box-shadow: -16px 0 #0A0D14, 16px 0 #0A0D14; animation: lf-dots .9s ease-in-out infinite; }
@keyframes lf-dots { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.lf__btn.is-done { background: #FF104A; color: transparent; pointer-events: none; }
.lf__btn.is-done::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 20px; margin: -13px 0 0 -5px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); animation: lf-check .35s .05s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes lf-check { to { transform: rotate(45deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lf__step.is-enter > *, .lf__opts input:checked + span { animation: none; } .lf__in:focus, .lf__row.is-focus { transform: none; } }

/* one page: first screen + services scroll together; the overlay is only for the lead flow */
html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
html.babki-app-open, html.babki-app-open body { overflow: hidden; }
.beaters { position: absolute; top: 0; left: 0; }
.s2-page { width: var(--screen-width, min(100vw, 480px)); margin: 0 auto; padding: 24px 0 0; color: #fff; }
.s2-page .babki-app__inner { margin: 0 auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.s2-page .babki-app__screen.s2 { margin-top: 0 !important; }
.s2-page .s2__ctarow { margin-top: 32px !important; }
.s2-page .s2__privacy { position: static !important; display: block !important; margin: 24px 0 0 !important; padding: 0; text-align: center; }

/* one fixed CTA for the whole page: full width while scrolling; at the page end it narrows
   and the cane granny walks in from the left edge, then pokes it (as on the old screen 2) */
.btn-yes--ghost { visibility: hidden; pointer-events: none; }
.screen > .actions { display: none; }
.screen { height: auto !important; min-height: 0 !important; padding-bottom: 36px !important; }
.s2-page { padding-top: 0 !important; }
.cta-fixed { position: fixed !important; z-index: 20; left: 0; right: 0; bottom: calc(46px + env(safe-area-inset-bottom)); width: calc(var(--screen-width, min(100vw, 480px)) - 2 * var(--screen-gutter, 24px)); margin: 0 auto !important; display: flex; align-items: center; will-change: transform; transform: translateZ(0); }
.cta-fixed .s2__ico { flex: none; width: 0 !important; overflow: visible; translate: -180px 0; transition: width .65s cubic-bezier(.45,0,.2,1), translate 0s .65s; }
.cta-fixed .s2__cta { flex: 1; margin-left: 0 !important; border-radius: 16px; }
.cta-fixed.is-end .s2__ico { width: var(--icow, 94px) !important; translate: 0 0; transition: width .65s cubic-bezier(.45,0,.2,1), translate .7s .5s cubic-bezier(.25,.8,.3,1); }
.cta-fixed.is-end .s2__cta { margin-left: -30px !important; transition: margin-left .65s cubic-bezier(.45,0,.2,1); }
.cta-fixed .s2__cta { transition: margin-left .65s cubic-bezier(.45,0,.2,1); }
.cta-fixed:not(.is-end) .s2__cta { animation: none !important; }
html.babki-app-open .cta-fixed { display: none; }
/* smooth native scrolling: only the document scrolls */
html { overflow-x: clip !important; overflow-y: auto !important; height: auto !important; }
body { overflow: visible !important; height: auto !important; }
/* reference radii: 16px controls, 12px inner pill of the switch */
.lf__btn, .lf__in, .lf__seg, .lf__row { border-radius: 16px !important; }
.lf__thumb, .lf__seg button { border-radius: 12px !important; }
.lf__opts span, .lf__ta { border-radius: 16px !important; }
.lf__seg.is-moving .lf__thumb { animation: lf-squash .35s ease; }
@keyframes lf-squash { 35% { scale: 1.12 .9; } 100% { scale: 1 1; } }
.screen .hero { flex: none !important; justify-content: flex-start !important; padding-bottom: 0 !important; padding-top: calc(40 * var(--u)); }
.hero > .actions { display: none !important; }
.s2-page .babki-app__inner { padding-top: 0 !important; }

/* one page v2 (variant E from the canvas, 2026-11-13) */
.screen .hero { margin-top: -70px; }
:root { --g1: 30.3; }
.money { margin-left: calc(-5.2 * var(--u)); }
.s2-page .s2 > .s2__label:first-child { margin-top: 8px !important; }
.s2__label { color: #fff !important; }
.s2__list li .s2__ico, .s2__ctarow .s2__ico { width: 80px !important; justify-content: flex-start !important; transform: none !important; }
.s2__list li { gap: 12px !important; }
.s2__list li:first-child .s2__magnet { margin-left: 0 !important; translate: 0 0 !important; background-image: url(/images/g-magnet2.png?v=1) !important; }
.s2__list li:first-child .s2__arcs { margin-left: -10.5px !important; translate: 0 0 !important; }
.s2__arcs i { background-image: url(/images/arc2.png?v=1) !important; }
.s2__arcs i:nth-child(1) { left: 3px; transform: scale(.75); animation-delay: .4s; }
.s2__arcs i:nth-child(2) { left: 9px; transform: scale(1); animation-delay: 0s; }
@keyframes s2-arcwave { 0% { opacity: 0; } 20%, 55% { opacity: .7; } 85%, 100% { opacity: 0; } }
.s2__typer { width: 67px; height: 52px; background: url(/images/g-typer-fast.webp?v=1) 0 0 / 800% 100% no-repeat; animation: s2-typer 2.25s steps(1, end) infinite; }
@keyframes s2-typer{0.000%{background-position:0.0000% 0}6.667%{background-position:14.2857% 0}13.333%{background-position:28.5714% 0}20.000%{background-position:42.8571% 0}26.667%{background-position:0.0000% 0}33.333%{background-position:14.2857% 0}40.000%{background-position:28.5714% 0}46.667%{background-position:42.8571% 0}53.333%{background-position:57.1429% 0}60.000%{background-position:71.4286% 0}66.667%{background-position:85.7143% 0}73.333%{background-position:85.7143% 0}80.000%{background-position:100.0000% 0}86.667%{background-position:100.0000% 0}93.333%{background-position:100.0000% 0}}
.s2-page .s2__ctarow { margin-top: 32px !important; gap: 12px !important; }
.s2__ctarow .s2__cta { margin-left: 0 !important; height: 54px; border-radius: 16px !important; background: #FF104A; color: #fff !important; animation: none !important; }
.s2__ctarow .s2__angry { --poke: 45.3px; }
@media (prefers-reduced-motion: reduce) { .s2__typer { animation: none; } .s2__ctarow .s2__angry { animation: none !important; transform: none; } }
/* services: only the middle divider; CTA on the left, cane granny mirrored on the right */
.s2__list { border-top: 0 !important; }
.s2__list li:last-child { border-bottom: 0 !important; }
.s2__ctarow .s2__cta { order: 1; }
.s2__ctarow .s2__ico { order: 2; scale: -1 1; }
/* ---------- lead v7 (canvas «Экран мессенджеров» … «Бонус · старт игры», 2026-11-13) ---------- */
.babki-app__screen.lf { justify-content: flex-start !important; padding: 134px 0 120px !important; }
.lf__step { gap: 16px !important; text-align: left !important; }
.lf__title { margin: 0 0 16px !important; font: 500 24px/1.2 'Sofia Sans Condensed', Arial, sans-serif !important; color: #E6E9EF !important; letter-spacing: .005em !important; text-align: left; }
.lf__in, .lf__row, .lf__seg { border: 0 !important; background: rgba(255,255,255,.06) !important; transition: background-color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1) !important; }
.lf__in:focus, .lf__row.is-focus, .lf__row:focus-within { background: rgba(255,255,255,.13) !important; border: 0 !important; transform: none !important; }
.lf__row input { background: transparent !important; }
.lf__in::placeholder, .lf__row input::placeholder { color: #6F7685 !important; }
.lf__ta { height: 124px !important; min-height: 0 !important; }
.lf__cc { border-right: 0 !important; padding: 0 12px 0 20px !important; color: #E6E9EF !important; }
.lf__cc::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 24px; transform: translateY(-50%); background: rgba(255,255,255,.12); pointer-events: none; }
.lf__cc [data-cc-flag] { display: none !important; }
.lf__btn { background: #FF104A !important; color: #fff !important; }
.lf__btn.is-busy::after { background: #fff !important; box-shadow: -16px 0 #fff, 16px 0 #fff !important; }
.lf__check { font-size: 13px !important; line-height: 1.45 !important; color: #7E8592 !important; }
.lf__check a { color: #AEB4C0 !important; }
.lf__box { width: 15px !important; height: 15px !important; border-radius: 4px !important; margin-top: 2px !important; }
.lf__box svg { width: 10px !important; height: 10px !important; }
.lf__opts { gap: 12px !important; }
.lf__opts span { border: 0 !important; border-radius: 16px !important; background: rgba(255,255,255,.06); padding: 16px 20px !important; font-size: 17px !important; line-height: 1.25 !important; transition: background-color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important; }
@media (hover: hover) { .lf__opts label:hover span { background: rgba(255,255,255,.1); } }
.lf__opts input:checked + span { background: #fff !important; color: #0A0D14 !important; }
.lf__ico-in { position: relative; display: block; }
.lf__ico-in svg { position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; fill: none; stroke: #7E8592; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; z-index: 1; }
.lf__ico-in .lf__in { padding-left: 50px !important; }
/* progress: 4 segments, the cabbage granny walks in place at the current one, the counting granny waits at the end */
.lf__prog { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 48px)); height: 46px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.lf__prog[hidden] { display: none; }
.lf__segs { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; display: flex; gap: 6px; }
.lf__segs i { flex: 1; border-radius: 1px; background: rgba(255,255,255,.14); transition: background-color .4s ease; }
.lf__segs i.is-on { background: #FF104A; }
.lf__walker { position: absolute; bottom: 3px; left: calc((100% - 18px) / 4 * var(--n, 1) + 6px * (var(--n, 1) - 1) - 35px); width: 35.4px; height: 40px; background: url(/images/walk-b.png?v=1) 0 0 / 600% 100% no-repeat; animation: lf-walk .9s steps(1, end) infinite; transition: left .6s cubic-bezier(.45,0,.2,1); }
.lf__prog[data-step="1"] { --n: 1; } .lf__prog[data-step="2"] { --n: 2; } .lf__prog[data-step="3"] { --n: 3; }
.lf__prog[data-step="4"] .lf__walker { left: calc(100% - 31.6px - 41px); }
.lf__counter { position: absolute; right: 0; bottom: 3px; width: 31.6px; height: 43px; transform: scaleX(-1); background: url(/images/g-count.webp?v=10) 0 0 / 1000% 100% no-repeat; animation: s2-count 4.8s steps(1, end) infinite; }
.lf__bub { position: absolute; right: -18px; bottom: 48px; width: 236px; height: 64px; background: url(/images/bubble.png?v=1) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; transform-origin: 203px 100%; animation: lf-bub .5s cubic-bezier(.34,1.56,.64,1) 1s both; }
.lf__bub span { display: flex; align-items: center; justify-content: center; height: 53px; padding: 0 12px; font: 600 16px/1 'Handjet', monospace; letter-spacing: .03em; color: #0A0D14; white-space: nowrap; }
@keyframes lf-bub { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lf__walker, .lf__counter, .lf__bub { animation: none; } }
/* game start over the attract demo */
.babki-game__attract { background: radial-gradient(ellipse 80% 42% at 50% 46%, rgba(10,13,20,.88), rgba(10,13,20,.45) 70%, rgba(10,13,20,.35)) !important; align-items: center; text-align: center; gap: 0 !important; }
.babki-game__logo { margin: 0 0 14px; font: 900 64px/.9 'Handjet', monospace; letter-spacing: .01em; color: #FF104A; }
.babki-game__attract .babki-game__rules { margin: 0 0 28px; max-width: 340px; font-size: 17px; line-height: 1.35; color: #E6E9EF; }
.babki-game__go { width: 100%; max-width: calc(var(--screen-width) - 2 * var(--screen-gutter)); }
.babki-game__note { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: #AEB4C0; }
/* main page: the button jolts when the cane granny hits it (light red flash) */
.s2__ctarow .s2__cta { animation: cta-hit 6s linear infinite !important; }
@keyframes cta-hit { 0%,39%,43%,49%,53%,100% { transform: none; background-color: #FF104A; } 40%,50% { transform: translateX(-3px) scale(.985); background-color: #FF5C82; } 42%,52% { transform: translateX(1px); background-color: #FF104A; } }
@media (prefers-reduced-motion: reduce) { .s2__ctarow .s2__cta { animation: none !important; } }
/* progress sits at the end of the lead screen (inside the small viewport), so the Safari toolbar never covers it */
.babki-app__screen.lf { padding-bottom: 28px !important; min-height: calc(100svh - 64px) !important; }
.lf__prog { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; order: 99; margin-top: auto !important; flex: none; }
.lf__prog::before { content: ''; display: block; height: 72px; }
/* no transitions between lead screens and no entrance effect on the first one (2026-11-13) */
.babki-app__screen, .babki-app__screen.lf { animation: none !important; }
.lf__step.is-enter > *, .lf__step > * { animation: none !important; }
/* grannies stick to the bottom of the visible screen also when Safari hides its toolbars */
.babki-app__screen.lf { min-height: calc(100svh - 68px) !important; min-height: calc(100dvh - 68px) !important; }
.babki-app__screen.lf { padding-bottom: 0 !important; }
/* lead screen = exactly the visible screen: the overlay follows the dynamic viewport, the screen fills it, no scroll */
.babki-app__surface { height: 100svh; height: 100dvh !important; }
.babki-app.is-lead .babki-app__inner { padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
.babki-app__screen.lf { min-height: 0 !important; flex: 1 1 auto; padding-bottom: 0 !important; }
.lf__prog::before { height: 24px !important; }
@media (max-height: 700px) { .babki-app__screen.lf { padding-top: 88px !important; } }
/* iOS: lock the page behind the overlay (no scroll → Safari bars stay put → no jumps); overlay = the fixed box, not viewport units */
.babki-app { top: 0 !important; bottom: 0 !important; height: auto !important; }
.babki-app__surface { height: 100% !important; overscroll-behavior: none; }
html.babki-app-open body { position: fixed; left: 0; right: 0; top: var(--lock-top, 0); width: 100%; }
.babki-app__screen.lf { padding-top: 54px !important; } @media (max-height: 700px) { .babki-app__screen.lf { padding-top: 54px !important; } }
.lf__btn, .lf__btn:active { transform: none !important; transition: none !important; }
/* browser autofill: keep our dark field instead of the pale yellow fill */
.lf input:-webkit-autofill, .lf input:-webkit-autofill:hover, .lf input:-webkit-autofill:focus, .lf textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff !important; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #101012 inset !important; box-shadow: 0 0 0 1000px #101012 inset !important;
  transition: background-color 99999s ease-out 0s;
}
.lf input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #212123 inset !important; box-shadow: 0 0 0 1000px #212123 inset !important; }
/* solid field colours (same look as 6%/13% white on black) so the autofill fill matches exactly — no light rim at the corners */
.lf__in, .lf__row, .lf__seg { background: #0F0F0F !important; }
.lf__in:focus, .lf__row.is-focus, .lf__row:focus-within { background: #212121 !important; }
.lf input:-webkit-autofill, .lf input:-webkit-autofill:hover, .lf textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0F0F0F inset !important; box-shadow: 0 0 0 1000px #0F0F0F inset !important; }
.lf input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #212121 inset !important; box-shadow: 0 0 0 1000px #212121 inset !important; }
.lf input { background-clip: padding-box; }
/* autofill without any painted fill: the browser colour never fades in, so nothing peeks out at the rounded corners */
.lf input:-webkit-autofill, .lf input:-webkit-autofill:hover, .lf input:-webkit-autofill:focus, .lf textarea:-webkit-autofill {
  -webkit-box-shadow: none !important; box-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
/* the rounded box is a clipping wrapper; the input inside is square and transparent → Safari autofill can't paint past the corners */
.lf__wrap, .lf__ico-in { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #0F0F0F; transition: background-color .25s ease; }
.lf__wrap:focus-within, .lf__ico-in:focus-within { background: #212121; }
.lf__wrap .lf__in, .lf__ico-in .lf__in, .lf__row input { background: transparent !important; border-radius: 0 !important; }
.lf__wrap input:-webkit-autofill, .lf__ico-in input:-webkit-autofill, .lf__row input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0F0F0F inset !important; box-shadow: 0 0 0 1000px #0F0F0F inset !important; }
.lf__wrap input:-webkit-autofill:focus, .lf__ico-in input:-webkit-autofill:focus, .lf__row input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #212121 inset !important; box-shadow: 0 0 0 1000px #212121 inset !important; }
/* messenger switch: the selected pill = the active field colour, white label; the other label muted */
.lf__thumb { background: #212121 !important; }
.lf__seg button { color: #7E8592 !important; }
.lf__seg button[aria-pressed="true"] { color: #fff !important; }
/* country code folds smoothly instead of popping in/out when the messenger changes */
.lf__cc { max-width: 140px; overflow: hidden; white-space: nowrap; transition: max-width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, border-color .2s ease !important; }
.lf__cc.is-off { max-width: 0; padding-left: 0 !important; padding-right: 0 !important; opacity: 0; border-right-color: transparent !important; }
.lf__row input { transition: padding .3s cubic-bezier(.4,0,.2,1); }
.lf__cc.is-off + input { padding-left: 20px !important; }
/* game result over the stopped game (same look as the start screen) */
.babki-game__label { margin: 0 0 6px; font-size: 17px; line-height: 1.35; color: #E6E9EF; }
.babki-game__sum { margin: 0 0 30px; font: 500 128px/.9 'Sofia Sans Extra Condensed', Arial, sans-serif; letter-spacing: -.01em; color: #FF104A; }
.babki-game__retry { width: 100%; max-width: calc(var(--screen-width) - 2 * var(--screen-gutter)); margin-top: 16px; background: #212121 !important; }
.babki-game__retry[hidden], .babki-game__note[hidden] { display: none !important; }
/* game open: the page canvas (under the Safari bars and the status bar) takes the game's edge colours — no black strips */
html.babki-app-open.game-open, html.babki-app-open.game-open body { background: linear-gradient(#0B0F19, #10131D) !important; }
/* Safari extends only a solid background colour under its bars (gradients are ignored) */
html.babki-app-open.game-open, html.babki-app-open.game-open body { background: #0E111B !important; }
html.babki-app-open.game-open .babki-app { background: #0E111B !important; }
/* Safari 26 tints its bar areas from the background-color of the full-screen fixed layer: give the game layer the game's colour */
.babki-game { background-color: #0E111B !important; }
/* Safari bars: the fixed game layer must be a plain solid colour (like /thanks); the yard picture moves to an inner layer */
.babki-game { background: #0E111B !important; isolation: isolate; }
.babki-game::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(10,13,20,.5), rgba(10,13,20,.5)), url(/images/courtyard-blur.webp?v=1) center bottom / cover no-repeat, #0E111B; }