/* Новая главная (Figma стр. 05 «Новая главная — акция „сайт за 0 ₽“»).
   Десктоп 7442:1738 (1920), планшет 7657:1079 (744), мобилка 7657:1082 (360).
   Брейкпоинты: десктоп ≥ 1100, планшет 600–1099, мобилка < 600.
   Композиции с картинками — в px макета через --u (1 px макета внутри контейнера). */

/* ---------- общие для страницы ---------- */
/* скругления: большие блоки мягче, мелкие плашки как были */
:root { --r-block: clamp(30px, 3vw, 44px); --r-card: clamp(24px, 2.3vw, 32px); --r-inner: 20px; }
.landing { --section-gap: 160px; }
.landing > section + section,
.landing > section + .motto-line,
.landing > .motto-line + section { margin-top: var(--section-gap); }

.l-h2 { font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.l-lead { font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -0.03em; color: var(--grey); text-wrap: pretty; }
.sec-head { display: grid; justify-items: center; gap: 24px; text-align: center; margin-bottom: 56px; }
.sec-head .l-lead { max-width: 770px; }

.chip { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--purple-8); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.chip--white { background: #fff; }

/* зачёркнутая цена — наклонная линия, как в макете */
.strike { position: relative; display: inline-block; text-decoration: none; color: var(--grey); white-space: nowrap; }
.strike::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-7deg); }

.show-md { display: none; }

/* ================= ПЕРВЫЙ ЭКРАН ================= */
.top { position: relative; overflow: hidden; background: var(--hero-bg); padding: 24px 0 92px; isolation: isolate; }
.top__blob { position: absolute; z-index: -1; width: 1336px; height: 1008px; filter: blur(30px); opacity: 0.43; transform: rotate(49.16deg); pointer-events: none; }
.top__blob img { width: 100%; height: 100%; object-fit: cover; }
.top__blob--l { left: calc(50% - 1396px); top: 194px; }
.top__blob--r { left: calc(50% + 188px); top: -413px; }

/* --- плашка акции со счётчиком --- */
.promo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 22px;
  min-height: 112px; padding: 0 14px 0 164px; border-radius: var(--r-card); background: #fff;
  box-shadow: 0 12px 16px rgba(130, 74, 242, 0.1);
}
.promo__gift { position: absolute; left: 21px; top: -19px; width: 128px; height: 131px; object-fit: contain; transform: rotate(-6deg); }
.promo__text { display: grid; gap: 6px; line-height: 1.2; min-width: 0; }
.promo__t { font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.promo__s { font-weight: 500; font-size: 16px; letter-spacing: -0.03em; color: var(--grey-soft); }
.promo__btn { min-height: 56px; padding: 0 26px; gap: 10px; border-radius: 16px; font-size: 18px; line-height: 1.2; }
.promo__btn .btn__dot { width: 10px; height: 10px; }

.timer { display: flex; align-items: center; gap: 6px; }
.timer__label { margin-right: 4px; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: -0.03em; color: var(--grey-soft); }
.timer__cell {
  width: 66px; height: 66px; display: grid; place-content: center; justify-items: center; gap: 2px; white-space: nowrap;
  background: #fff; border: 1px solid var(--purple-18); border-radius: var(--r-inner); box-shadow: 0 4px 10px -2px rgba(130, 74, 242, 0.1);
}
.timer__cell b { font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.03em; color: var(--purple); font-variant-numeric: tabular-nums; }
.timer__cell small { font-weight: 600; font-size: 12px; line-height: 1.1; letter-spacing: -0.02em; color: var(--grey-soft); }
.timer > i { font-style: normal; font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--purple); }

/* --- сетка карточек --- */
.top__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 27px; }
.top__pair { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 11px; }
.offer { grid-column: 2; grid-row: 1; }

/* --- карточка цены: 665 × 677 --- */
.offer {
  --w: 665; position: relative; aspect-ratio: 665 / 677; border-radius: var(--r-block); overflow: hidden; background: #fff;
  container-type: inline-size; isolation: isolate;
}
.offer, .launch, .steps2, .transfer2, .lead2, .addon { --u: calc(100cqw / var(--w)); }
.offer > * { position: absolute; }
.offer__glow { left: calc(-73 * var(--u)); top: calc(-21 * var(--u)); width: calc(809 * var(--u)); height: calc(719 * var(--u)); max-width: none; transform: rotate(-5.77deg); z-index: -1; pointer-events: none; }
.offer__text { left: calc(49 * var(--u)); top: calc(52 * var(--u)); width: calc(616 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.offer__h { display: grid; font-weight: 800; color: var(--ink); line-height: 1.12; }
.offer__h b { font-size: calc(56 * var(--u)); letter-spacing: -0.03em; }
.offer__h > span:not(.sr-only) { font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: -0.03em; }
.offer__price { display: flex; align-items: baseline; gap: calc(6 * var(--u)); line-height: 1; white-space: nowrap; }
.offer__price b { font-weight: 800; font-size: calc(64 * var(--u)); letter-spacing: -0.018em; color: var(--purple); }
.offer__price span { font-weight: 700; font-size: calc(24 * var(--u)); color: var(--grey-soft); }
.offer__dev { display: grid; gap: calc(2 * var(--u)); margin-top: calc(9 * var(--u)); width: calc(380 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: -0.03em; }
.offer__dev > span:first-child { font-weight: 600; line-height: 1.15; color: var(--grey-soft); }
.offer__deal { display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; line-height: 1.37; }
.offer__deal s { font-weight: 600; color: var(--grey-soft); }
.offer__deal s::after { height: 3px; transform: rotate(-7.8deg); }
.offer__deal b { font-weight: 700; color: var(--purple); letter-spacing: 0; }
.offer__btn {
  left: calc(52 * var(--u)); top: calc(493 * var(--u)); min-height: 0; z-index: 2;
  padding: calc(24 * var(--u)) calc(32 * var(--u)); gap: calc(12 * var(--u)); border-radius: var(--r-inner); font-size: calc(24 * var(--u));
}
.offer__btn .btn__dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.mascot { left: calc(345.4 * var(--u)); top: calc(184.6 * var(--u)); width: calc(345.4 * var(--u)); height: calc(440 * var(--u)); pointer-events: none; }
.mascot__body { width: 100%; height: 100%; object-fit: cover; }
.mascot__eye { position: absolute; width: 7.01%; height: 10.8%; }
.mascot__eye img { width: 100%; height: 100%; }
.mascot__eye--l { left: 34.26%; top: 24.09%; }
.mascot__eye--r { left: 58.07%; top: 27.62%; }

/* --- девиз --- */
.motto {
  border-radius: var(--r-block); display: grid; place-items: center; padding: 24px;
  background: linear-gradient(220.5deg, #fecfbd 13.2%, #b080e3 54.3%, #6322ff 128.7%);
}
.motto p { max-width: min(527px, 100%); text-align: center; color: #fff; font-weight: 800; font-size: clamp(32px, 2.5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }

/* --- быстрый запуск: сцена 666 × 333 --- */
.launch {
  --w: 666; --k: 1; position: relative; border-radius: var(--r-block); overflow: hidden; isolation: isolate;
  container-type: inline-size; min-height: 0;
  background: linear-gradient(188deg, #b080e3 12%, #6322ff 125%);
}
.launch { container-type: size; }
.launch__stage { position: absolute; left: 50%; top: 0; width: calc(666 * var(--u)); height: calc(333 * var(--u)); translate: -50% 0; }
.launch__stage > * { position: absolute; }
.launch img { width: 100%; height: 100%; }
.launch__moon { left: calc(19 * var(--u)); top: 0; width: calc(116 * var(--u)); height: calc(116 * var(--u)); display: grid; place-items: center; }
.launch__moon img { width: 86%; height: 86%; object-fit: cover; transform: rotate(10.28deg); }
.launch__copy {
  position: absolute; left: 50%; top: calc(38 * var(--u)); width: calc(424 * var(--u)); translate: -50% 0;
  display: grid; justify-items: center; gap: calc(12 * var(--u)); text-align: center; color: #fff;
}
.launch__t { font-weight: 800; font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.launch__s { width: calc(351 * var(--u)); font-weight: 500; font-size: calc(20 * var(--u)); line-height: 1.15; letter-spacing: -0.03em; }
.launch__rocket { left: calc(437 * var(--u)); top: calc(-30 * var(--u)); width: calc(236.5 * var(--u)); height: calc(236.5 * var(--u)); display: grid; place-items: center; z-index: 1; }
.launch__rocket > span { position: relative; width: 83.7%; height: 83.7%; overflow: hidden; transform: rotate(12.65deg); }
.launch__rocket img { position: absolute; left: 2.55%; top: -11.81%; width: 94.99%; height: 126.65%; max-width: none; }
.launch__cloud { z-index: 2; width: calc(416 * var(--u)); height: calc(312 * var(--u)); }
.launch__cloud img { object-fit: cover; }
.launch__cloud--1 { left: calc(-253 * var(--u)); top: calc(60 * var(--u)); }
.launch__cloud--2 { left: calc(-115 * var(--u)); top: calc(128 * var(--u)); width: calc(370 * var(--u)); height: calc(277 * var(--u)); }
.launch__cloud--3 { left: calc(458 * var(--u)); top: calc(54 * var(--u)); }
.launch__cloud--3 img { transform: scaleX(-1); }
.launch__cloud--4 { left: calc(353 * var(--u)); top: calc(139 * var(--u)); }
.launch__spark { z-index: 3; }
.launch__spark--1 { left: calc(102 * var(--u)); top: calc(116 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
.launch__spark--2 { left: calc(10 * var(--u)); top: calc(20 * var(--u)); width: calc(37 * var(--u)); height: calc(37 * var(--u)); }
.launch__spark--3 { left: calc(353 * var(--u)); top: calc(261 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
.launch__next, .launch__back {
  display: grid; position: absolute; z-index: 12; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.65); place-items: center;
  transition: transform 200ms var(--ease-out), opacity 350ms ease, background-color 200ms ease;
}
.launch__next { right: 14px; }
.launch__back { left: 14px; }
.launch__back img { transform: rotate(180deg); }
.launch__next img, .launch__back img { width: 7px; height: 12px; }
.launch__next:active, .launch__back:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .launch__next:hover, .launch__back:hover { background: rgba(255, 255, 255, 0.85); }
  .launch__next:hover { transform: translateX(2px); }
  .launch__back:hover { transform: translateX(-2px); }
}
.launch.is-slide-2 .launch__next { opacity: 0; pointer-events: none; }
/* первый слайд под вторым не крутится */
.launch.is-slide-2 > .launch__copy, .launch.is-slide-2 > .launch__stage { visibility: hidden; transition: visibility 0s linear 400ms; }
.launch.is-slide-2 .launch__stage .fx, .launch.is-slide-2 .launch__copy .fx { animation-play-state: paused; }
.launch:not(.is-slide-2) .hero-banner-slide-2 * { animation-play-state: paused; }

/* ================= СЛОГАН ================= */
.motto-line { padding: 100px 0; text-align: center; }
.motto-line p { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 72px; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.motto-line p { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; min-height: 2.4em; align-content: center; }
.motto-line__typed { display: inline-flex; align-items: baseline; min-height: 1.2em; }
.motto-line__grad { background: linear-gradient(192.4deg, #6322ff 2.8%, #b080e3 59.2%, #fecfbd 96.9%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: pre; }
.motto-line__cursor { color: var(--purple); font-weight: 400; animation: caret 0.75s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.no-js .motto-line__grad::after, .screenshot-mode .motto-line__grad:empty::after { content: 'мы ведём ваш сайт'; }
.landing > .motto-line { margin-block: 0; }
.landing > .motto-line + section { margin-top: 60px; }

/* ================= СЧИТАЕМ ВЫГОДУ ================= */
.benefit { width: min(100% - var(--gutter) * 2, 1240px); }
.benefit__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bcard { display: flex; flex-direction: column; gap: 28px; padding: 32px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--purple-8); }
.bcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bcard__head h3 { font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.bcard__list { display: grid; gap: 12px; }
.bcard__list li { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--purple-8); }
.bcard__list img { width: 72px; height: 72px; flex: none; }
.bcard__list div { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: 16px; line-height: 1; letter-spacing: -0.03em; }
.bcard__list div b { font-weight: 700; color: var(--ink); }
.bcard__list div > span:not([data-count]) { font-weight: 500; color: var(--grey); line-height: 1.2; }
.bcard__list p { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; font-size: 16px; line-height: 1.2; letter-spacing: -0.03em; }
.bcard__list p b { font-weight: 700; color: var(--ink); }
.bcard__list p > span { font-weight: 500; color: var(--grey); }
.bcard__total { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 102px; padding: 24px; border-radius: var(--r-inner); background: var(--purple-8); color: var(--ink); white-space: nowrap; }
.bcard__total p { font-weight: 500; font-size: 24px; letter-spacing: -0.03em; }
.bcard__total strong { font-weight: 800; font-size: 32px; letter-spacing: -0.03em; }

.bcard--promo { gap: 16px; border: 0; overflow: hidden; background: linear-gradient(-70.8deg, #ffebe0 0%, #fbe5ff 50%, #f1ebff 75%); }
.bcard--promo .chip { background: rgba(250, 248, 255, 0.67); }
.bcard--promo .bcard__head { position: relative; }
.bcard__gift { position: absolute; left: 50%; top: 100%; width: 188px; height: 192px; translate: -50% -42px; transform: rotate(3.9deg); object-fit: contain; pointer-events: none; }
.bcard__rows { display: grid; gap: 8px; margin-top: 120px; }
.bcard__rows li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 12px; background: #fff; font-size: 18px; letter-spacing: -0.03em; color: var(--ink); line-height: 1.37; }
.bcard__rows b { flex: 1; font-weight: 700; }
.bcard__rows li > span { font-weight: 800; white-space: nowrap; }
.bcard__rows s { font-weight: 500; }
.bcard__rows em { font-style: normal; color: var(--purple); margin-left: 4px; }
.bcard__sum { margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 24px; border-radius: var(--r-inner); background: #fff; color: var(--ink); }
.bcard__sum > p { font-weight: 500; font-size: 24px; letter-spacing: -0.03em; white-space: nowrap; }
.bcard__sum > div { display: grid; justify-items: end; gap: 10px; }
.bcard__now { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.bcard__now s { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.bcard__now strong { font-weight: 800; font-size: 32px; letter-spacing: -0.03em; color: var(--purple); }
.bcard__sum small { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.03em; color: var(--grey); }

.saving-bar { margin-top: 24px; display: flex; align-items: center; gap: 20px; padding: 24px 32px; border-radius: var(--r-card); background: var(--purple-8); }
.saving-bar__ic { width: 107px; height: 109px; flex: none; object-fit: contain; transform: scaleY(-1) rotate(-173.15deg); }
.saving-bar__l { display: grid; gap: 10px; line-height: 1; }
.saving-bar b { font-weight: 800; font-size: 32px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.saving-bar__l > span, .saving-bar__r > span, .saving-bar small { font-weight: 500; font-size: 18px; letter-spacing: -0.03em; color: var(--grey-soft); line-height: 1.2; }
.saving-bar__sep { width: 1px; height: 64px; margin: 0 auto; background: #e3d9ff; flex: none; }
.saving-bar__r { width: 575px; display: grid; gap: 10px; }

/* ================= КАЛЬКУЛЯТОР ================= */
.calc2 { width: min(100% - var(--gutter) * 2, 1240px); }
.calc2 .sec-head { margin-bottom: 48px; gap: 20px; }
.calc2 .l-lead { max-width: none; }
.calc2__body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
.calc2__set { display: grid; gap: 16px; min-width: 0; }

.cbox { min-width: 0; margin: 0; display: grid; gap: 20px; padding: 28px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--purple-8); box-shadow: 0 8px 24px -8px rgba(99, 33, 255, 0.08); }
.cbox__h { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1.25; }
.cbox__h + * { clear: both; }
.cbox__h i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-8); color: var(--purple); font-style: normal; font-weight: 800; font-size: 16px; }
.cbox__h span { font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.cbox__h small { font-weight: 500; font-size: 16px; color: var(--grey); letter-spacing: -0.03em; }

.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opt {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-inner); cursor: pointer;
  background: var(--surface); border: 1px solid #e1e3eb; color: var(--grey);
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.opt input, .check input, .pay input { position: absolute; opacity: 0; pointer-events: none; }
.opt:active { transform: scale(0.985); }
.opt:has(input:checked) { background: var(--purple-8); border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); color: var(--grey-soft); }
.opt:has(input:focus-visible) { outline: 3px solid rgba(130, 73, 242, 0.55); outline-offset: 3px; }
.opt__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt__top b { font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink); }
.opt strong { font-weight: 800; font-size: 24px; line-height: 1.25; letter-spacing: -0.03em; color: var(--purple); white-space: nowrap; }
.opt strong small { font-weight: 500; font-size: 16px; color: inherit; color: var(--grey); }
.opt:has(input:checked) strong small { color: var(--grey-soft); }
.opt__d { font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: -0.03em; }
.opt__free { display: grid; gap: 2px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #e1e3eb; }
.opt__free small { font-weight: 500; font-size: 13px; }
.opt__free b { font-weight: 700; font-size: 14px; color: var(--purple); }
.opts--3 > .opt:first-child:not(:has(.opt__free)) { }
.opts--plan .opt { min-height: 137px; }
.opts:not(.opts--plan) .opt { min-height: 218px; }

.radio { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid var(--grey-light); transition: border-width 200ms var(--ease-out), border-color 200ms ease; }
.opt:has(input:checked) .radio { border: 6px solid var(--purple); }

.check { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 16px; border-radius: var(--r-inner); background: var(--surface); border: 1px solid transparent; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; }
.check:has(input:checked) { background: var(--purple-8); border-color: var(--purple-18); }
.check:has(input:focus-visible) { outline: 3px solid rgba(130, 73, 242, 0.55); outline-offset: 3px; }
.check > img, .check__hit > img { width: 64px; height: 64px; flex: none; }
.box { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.box::before { content: ''; width: 20px; height: 20px; border-radius: 6px; background: #fff; border: 1.5px solid var(--grey-light); box-sizing: border-box; transition: border-radius 200ms var(--ease-out); }
.check:has(input:checked) .box::before { border: 0; border-radius: 50%; background: url('assets/img/n/tick-square.svg') center / 20px no-repeat; }
.check__txt { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; line-height: 1.25; letter-spacing: -0.03em; }
.check__txt > b { font-weight: 700; font-size: 18px; color: var(--ink); }
.check__txt > span { font-weight: 500; font-size: 16px; color: var(--grey); }
.check:has(input:checked) .check__txt > span { color: var(--grey-soft); }
.check em { font-style: normal; font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; white-space: nowrap; color: var(--ink); }
.check:has(input:checked) em { color: var(--purple); }
.check em.is-free s { color: var(--grey); font-weight: 500; margin-right: 6px; }
.check--sub em { color: var(--purple); }
.check .ctag { margin-top: 2px; padding: 4px 10px; border-radius: 8px; background: var(--purple-8); font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--purple); }
.check:has(input:checked) .ctag { background: #fff; }
.addl { display: grid; gap: 12px; }
.check--copy { cursor: default; }
.check__hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; cursor: pointer; }
.qty { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid #e1e3eb; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.qty button { width: 20px; height: 24px; font-size: 18px; color: var(--purple); border-radius: 6px; transition: transform 120ms var(--ease-out); }
.qty button:active { transform: scale(0.85); }
.qty button:disabled { color: var(--grey-light); cursor: default; }
.qty output { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

.pay { position: relative; display: inline-grid; grid-auto-flow: column; justify-self: start; padding: 6px; border-radius: 999px; background: var(--purple-8); }
.pay__thumb { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 999px; background: var(--purple); transition: transform 340ms var(--spring), width 340ms var(--spring); }
.pay label { position: relative; z-index: 1; cursor: pointer; }
.pay label > span { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; transition: color 200ms ease; }
.pay label:has(input:focus-visible) > span { outline: 3px solid rgba(130, 73, 242, 0.55); outline-offset: 2px; }
.pay i { font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--purple-18); color: var(--purple); font-weight: 800; font-size: 14px; }
.pay label:has(input:checked) > span { color: #fff; }
.pay label:has(input:checked) i { background: #fff; }
.no-js .pay label:has(input:checked) > span, .pay:not(.is-ready) label:has(input:checked) > span { background: var(--purple); }

.cbox.is-off { opacity: 0.5; }
.cbox.is-off .opts--plan, .cbox.is-off .pay { pointer-events: none; }

/* --- итог --- */
.quote {
  position: sticky; top: 104px; display: grid; gap: 16px; padding: 32px; border-radius: var(--r-card);
  background: linear-gradient(152.2deg, #ffebe0 8.1%, #fae5ff 48.8%, #f1ebff 69.1%);
  box-shadow: 0 8px 24px -8px rgba(99, 33, 255, 0.08);
}
.quote__head { display: flex; align-items: center; justify-content: space-between; }
.quote__head h3 { font-weight: 800; font-size: 24px; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink); }
.quote__rows { padding: 8px 20px; border-radius: var(--r-inner); background: #fff; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--purple-8); line-height: 1.25; letter-spacing: -0.03em; }
.quote__rows li:last-child .qrow { border-bottom: 0; }
.quote__rows .qrow > div { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.quote__rows b { font-weight: 700; font-size: 16px; color: var(--ink); }
.quote__rows small { font-weight: 500; font-size: 14px; color: var(--grey); }
.quote__rows strong { font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; }
.quote__rows strong s { font-weight: 500; font-size: 16px; margin-right: 6px; }
.quote__rows .pill-tag { margin-top: 6px; padding: 4px 11px; border-radius: 999px; background: var(--purple); color: #fff; font-weight: 700; font-size: 14px; }
.is-purple { color: var(--purple) !important; }
.quote__total { display: grid; gap: 6px; padding: 20px; border-radius: var(--r-inner); background: #fff; }
.quote__total > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 1.25; letter-spacing: -0.03em; }
.quote__total p { font-weight: 500; font-size: 24px; color: var(--ink); }
.quote__total > div + div p { font-size: 16px; color: var(--grey); }
.quote__total strong { font-weight: 800; font-size: 32px; color: var(--purple); white-space: nowrap; }
.quote__total s { font-weight: 700; font-size: 16px; }
.quote__save { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-inner); background: var(--purple-8); line-height: 1.25; letter-spacing: -0.03em; }
.quote__save img { width: 52px; height: 53px; object-fit: contain; }
.quote__save p { font-weight: 500; font-size: 16px; color: var(--grey-soft); }
.quote__save b { font-weight: 800; font-size: 24px; color: var(--ink); }
.quote__btn { width: 100%; min-height: 0; padding: 22px; border-radius: 16px; font-size: 18px; line-height: 1.25; }
.quote__btn .btn__dot { width: 12px; height: 12px; }
.quote__note { font-weight: 500; font-size: 14px; line-height: 1.25; letter-spacing: -0.03em; color: var(--grey-soft); }
.quote [hidden] { display: none !important; }

/* ================= ТАРИФЫ ================= */
.plans--new { padding: 48px; }
.plans--new .l-h2 { margin-bottom: 48px; }
.plans--new .plan { border-radius: var(--r-block); gap: 16px; min-height: 700px; align-content: space-between; }
.plans--new .plan__cta { border-radius: 16px; }
.plans--new .plan__promo { color: var(--grey-soft); }
.plan__gift { padding: 16px 31px; border-radius: var(--r-inner); background: rgba(130, 73, 242, 0.1); color: var(--grey-soft); font-size: 18px; line-height: 1.3; letter-spacing: -0.03em; text-align: center; text-wrap: balance; }
.plans--new .device { margin-right: 18px; }
.plans--new .seg { display: flex; justify-content: space-between; padding: 6px 6px; }
.plans--new .seg button { padding: 0 32px; flex: none; }

/* ================= ШАГИ ================= */
.steps2 { --w: 1344; position: relative; isolation: isolate; container-type: inline-size; display: grid; justify-items: center; gap: 64px; padding: 48px 24px 72px; border-radius: var(--r-block); background: var(--purple-8); overflow: hidden; }
.steps2 .l-h2 { text-align: center; }
.steps2 .l-h2 span { display: block; color: var(--purple); }
.steps2__list { position: relative; width: min(892px, 100%); display: grid; justify-items: center; gap: 6px; }
.step2 { position: relative; width: 100%; display: flex; gap: 36px; align-items: flex-start; padding: 32px; border-radius: var(--r-card); transition: box-shadow 600ms var(--reveal-ease, ease), color 600ms ease; background: #fff; color: var(--grey); }
.step2.is-active { box-shadow: inset 0 0 0 1.5px var(--purple), 0 18px 40px -24px rgba(130, 73, 242, 0.45); }
.step2__t, .step2__t span { transition: color 600ms ease; }
.step2__tag { transition: background-color 600ms ease, color 600ms ease; }
.step2:not(.is-active) .step2__tag { background: var(--surface); color: var(--grey); }
/* робот выглядывает из-за карточки — он под ней, а не поверх */
.peek { z-index: -1; }
.step2__t { flex: none; width: 383px; display: flex; gap: 24px; font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; }
.step2__t span { line-height: 1; }
.step2.is-active .step2__t { color: var(--ink); }
.step2.is-active .step2__t span { color: var(--purple); }
.step2__d { flex: 1; display: grid; gap: 14px; justify-items: start; font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; }
.step2__tag { padding: 10px 16px; border-radius: 8px; background: var(--purple-8); color: var(--purple); font-weight: 700; font-size: 14px; line-height: 1.37; letter-spacing: 0; }
.steps2__arrow { width: 24px; height: 24px; display: grid; place-items: center; }
.steps2__arrow img { width: 12px; height: 10px; }

/* робот выглядывает из-за первой карточки (десктоп): маска 484 × 380 — полоса сверху + всё справа от карточки */
.peek { position: absolute; left: calc(100% - 258px); top: -90px; width: 484px; height: 380px; pointer-events: none; }
.peek__mask { position: absolute; inset: 0; -webkit-mask: url('assets/img/n/peek-mask.svg') 0 0 / 100% 100% no-repeat; mask: url('assets/img/n/peek-mask.svg') 0 0 / 100% 100% no-repeat; }
.peek__robot { position: absolute; left: 208.6px; top: 47.4px; width: 204.8px; height: 204.8px; }
.peek__robot img { width: 100%; height: 100%; }
.peek__eye { position: absolute; width: 7.47px; height: 13.16px; display: grid; place-items: center; }
.peek__eye > i { display: block; width: 4.8px; height: 12.4px; border-radius: 2.4px; background: #552cb8; }
.peek__eye--l { left: 60.89px; top: 60.48px; }
.peek__eye--r { left: 77.65px; top: 64.35px; }
.peek__eye { transform: rotate(13deg); }

/* робот сидит на первой карточке (планшет и мобилка) */
.sit { display: none; position: absolute; right: 24px; bottom: calc(100% - 37px); width: 122px; height: 183px; pointer-events: none; }
.sit img { width: 100%; height: 100%; }
.sit__eye { position: absolute; width: 5.8%; height: 7.7%; display: grid; place-items: center; transform: rotate(7deg); }
.sit__eye > i { display: block; width: 77%; height: 96%; border-radius: 2.75px; background: #552cb8; }
.sit__eye--l { left: 42.4%; top: 16.96%; }
.sit__eye--r { left: 56.8%; top: 18.15%; }

/* ================= ВИДЕО, КЕЙСЫ (стили из home.css) ================= */
.shorts .l-h2 { margin-bottom: 48px; }
.shorts__row { align-items: center; }
.cases .l-h2 { color: var(--ink); margin-bottom: 48px; }
.cases .case__t { color: var(--ink); }
.cases .case__m { color: var(--grey-soft); }
.cases__more .btn { padding: 23px 46px; border-radius: 16px; }

/* ================= УЖЕ ЕСТЬ САЙТ ================= */
.transfer2 {
  --w: 1344; position: relative; isolation: isolate; container-type: inline-size; aspect-ratio: 1344 / 750; overflow: hidden;
  border-radius: var(--r-block); background: linear-gradient(219.5deg, #793df2 19.1%, #331a66 118.9%);
}
.transfer2::before {
  content: ''; position: absolute; z-index: -1; left: calc(398 * var(--u)); top: calc(65 * var(--u)); width: calc(1155 * var(--u)); height: calc(906 * var(--u));
  border-radius: 50%; mix-blend-mode: plus-lighter; opacity: 0.31; filter: blur(60px);
  background: radial-gradient(closest-side, rgba(172, 131, 255, 1) 13%, rgba(214, 193, 255, 0.5) 51%, rgba(255, 255, 255, 0) 88%);
}
.transfer2::after {
  content: ''; position: absolute; z-index: -1; left: calc(638 * var(--u)); top: calc(149 * var(--u)); width: calc(676 * var(--u)); height: calc(646 * var(--u));
  border-radius: 50%; background: rgba(189, 156, 255, 0.57); opacity: 0.31; filter: blur(60px); mix-blend-mode: plus-lighter;
}
.transfer2__blur { position: absolute; z-index: -1; left: calc(1768 * var(--u)); top: calc(-131 * var(--u)); width: calc(414 * var(--u)); height: calc(414 * var(--u)); filter: blur(10px); transform: rotate(-165deg) scaleY(-1); }
.transfer2__text { position: absolute; left: calc(82 * var(--u)); top: calc(82 * var(--u)); width: calc(884 * var(--u)); display: grid; gap: calc(36 * var(--u)); }
.transfer2 h2 {
  font-weight: 800; font-size: calc(96 * var(--u)); line-height: 0.9; letter-spacing: -0.03em;
  background: linear-gradient(78.8deg, #fff 15%, rgba(200, 186, 233, 0.54) 170%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.transfer2__text p { font-weight: 600; font-size: calc(48 * var(--u)); line-height: 1.2; letter-spacing: -0.03em; color: #fff; opacity: 0.8; }
.transfer2__btn { position: absolute; left: calc(82 * var(--u)); top: calc(576 * var(--u)); min-height: 0; padding: calc(32 * var(--u)) calc(44 * var(--u)); gap: calc(16 * var(--u)); border-radius: 16px; font-size: calc(28 * var(--u)); }
.transfer2__btn .btn__dot { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ценник: слои в координатах блока 624 × 416 (от 620,284 в макете) */
.tag { position: absolute; left: calc(620 * var(--u)); top: calc(284 * var(--u)); width: calc(624 * var(--u)); height: calc(416 * var(--u)); }
.tag__l { position: absolute; display: block; }
.tag__l img { width: 100%; height: 100%; }
.tag__star-s { left: 0; top: 15.05%; width: 17.38%; height: 25.83%; }
.tag__old { left: 13.9%; top: 0; width: 61.32%; height: 51.35%; display: grid; place-items: center; }
.tag__old img { width: 98.3%; height: 94.15%; transform: rotate(-1.92deg); }
.tag__strike { left: 19.67%; top: 15.95%; width: 49.53%; height: 26.07%; }
.tag__new { left: 3.16%; top: 34.68%; width: 93.21%; height: 65.41%; overflow: hidden; }
.tag__new img { position: absolute; left: -13.32%; top: -17.04%; width: 126.71%; height: 117.3%; max-width: none; }
.tag__star-b { left: 72.24%; top: 13.15%; width: 27.73%; height: 43.37%; }

/* ================= МОЖНО ДОБАВИТЬ ================= */
.addons2 .l-h2 { text-align: center; margin-bottom: 48px; }
.addons2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 612px)); justify-content: center; gap: 24px; }
.addon { --w: 612; position: relative; container-type: inline-size; aspect-ratio: 612 / 380; perspective: 1600px; cursor: pointer; border-radius: var(--r-card); --face: var(--surface); }
.addon--lilac { --face: var(--purple-8); }
.addon:focus-visible { outline: 3px solid rgba(130, 73, 242, 0.45); outline-offset: 4px; }
.addon__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.addon__front, .addon__back { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-card); background: var(--face); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.addon__back { transform: rotateY(180deg); }
.addon.is-flipped .addon__in { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .addon:hover .addon__in { transform: rotateY(180deg); } }
.addon:active .addon__in { scale: 0.99; }
.addon__clip { height: 100%; display: flex; flex-direction: column; padding: calc(43.6 * var(--u)); }
.addon__t { font-weight: 800; font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.addon__back ul { display: grid; gap: calc(14 * var(--u)); margin-top: calc(34 * var(--u)); }
.addon__back li { display: flex; gap: 12px; align-items: center; font-weight: 500; font-size: calc(20 * var(--u)); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); }
.addon__back li::before { content: ''; flex: none; width: 22px; height: 22px; background: url('assets/img/n/tick-square.svg') center / 20px no-repeat; }
.addon__price { margin-top: auto; align-self: flex-end; font-weight: 700; font-size: calc(46 * var(--u)); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); text-align: right; }
.addon__price small { font-size: 0.5em; font-weight: 600; color: var(--grey-soft); }
@media (prefers-reduced-motion: reduce) { .addon__in { transition: none; } }
.addon h3 { position: absolute; left: calc(43.6 * var(--u)); top: calc(43.6 * var(--u)); width: calc(350 * var(--u)); font-weight: 800; font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.addon__ic { position: absolute; left: calc(324 * var(--u)); top: calc(100 * var(--u)); width: calc(264 * var(--u)); height: calc(264 * var(--u)); }
.ai { position: absolute; max-width: none; object-fit: cover; }
/* позиции слоёв внутри иконки 264 × 264, в % */
.ai--brand-base { left: 9.18%; top: 13.18%; width: 81.05%; height: 74.9%; }
.ai--dab1 { left: 19.92%; top: 24.02%; width: 29.79%; height: 24.12%; }
.ai--dab2 { left: 50.59%; top: 19.92%; width: 28.81%; height: 24.61%; }
.ai--dab3 { left: 18.65%; top: 50.2%; width: 28.03%; height: 25.39%; }
.ai--dab4 { left: 49.22%; top: 65.82%; width: 19.63%; height: 13.77%; }
.ai--seo-base { left: 13.48%; top: 13.77%; width: 77.73%; height: 74.9%; }
.ai--seo-arrow { left: 26.37%; top: 33.3%; width: 39.16%; height: 27.93%; }
.ai--legal-base { left: 14.26%; top: 14.26%; width: 65.63%; height: 70.8%; }
.ai--legal-shield { left: 45.02%; top: 41.02%; width: 45.12%; height: 47.17%; }
.ai--copy-base { left: 11.52%; top: 11.82%; width: 75.1%; height: 78.42%; }
.ai--copy-pencil { left: 43.65%; top: 27.25%; width: 49.41%; height: 58.89%; }

/* ================= FAQ ================= */
.faq .l-h2 { text-align: center; margin-bottom: 48px; }
.faq .qa { border-radius: var(--r-inner); }
.faq .qa summary { min-height: 88px; padding: 20px 32px; font-size: 24px; font-weight: 700; }

/* ================= ФОРМА ================= */
.lead2 {
  --w: 1344; position: relative; container-type: inline-size; min-height: 680px; overflow: hidden; border-radius: var(--r-block);
  display: grid; grid-template-columns: minmax(0, 1fr) 553px; align-items: start; column-gap: 40px; padding: 48px;
  background: linear-gradient(-58.4deg, #ffebe0 0%, #fbe5ff 50%, #f1ebff 75%);
}
.lead2 .l-h2 { grid-column: 1; grid-row: 1; max-width: 618px; }
.lead2__art { position: absolute; left: 0; top: 230px; width: 486px; height: 486px; pointer-events: none; }
.lead2__l { position: absolute; display: block; }
.lead2__l img { width: 100%; height: 100%; object-fit: contain; }
.lead2__browser { left: 56.82%; top: 13.99%; width: 50.13%; height: 43.03%; display: grid; place-items: center; }
.lead2__browser img { width: 95.76%; height: 94.09%; transform: rotate(3.11deg); }
.lead2__mascot { left: 9.05%; top: 16.46%; width: 58.36%; height: 67.9%; }
.lead2__mascot img { object-fit: cover; }
.lead2__eye { width: 2.06%; height: 5.14%; left: 31.73%; top: 28.26%; border-radius: 5px; background: #552cb8; }
.lead2__eye--r { left: 38.32%; }
.lead2__star-b { left: 95.88%; top: 4.94%; width: 9.47%; height: 9.88%; }
.lead2__star-s { left: 48.97%; top: 8.23%; width: 5.76%; height: 5.76%; }
.lead2__ripple { left: 93.46%; top: 48.45%; width: 6.17%; height: 6.17%; border-radius: 50%; border: 2px solid #9e80fa; background: rgba(255, 255, 255, 0.35); }
.lead2__cursor { left: 94.86%; top: 51.23%; width: 13.17%; height: 14.2%; }
.lead2__card { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 24px; justify-items: center; }
.lead2 .form-box { width: 100%; padding: 32px; border-radius: var(--r-inner); box-shadow: none; }
.lead2 .form-box h3 { width: 473px; max-width: 100%; margin: 0 auto 32px; font-size: 28px; line-height: 1; }
.lead2 .field { margin-top: 6px; padding: 14px 20px 16px; border-radius: 8px; }
.lead2 .field span { font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: -0.03em; color: var(--grey); margin-bottom: 14px; }
.lead2 .field textarea { field-sizing: content; min-height: 46px; }
.lead2 .field input, .lead2 .field textarea { font-weight: 600; font-size: 18px; line-height: 23px; letter-spacing: -0.03em; }
.lead2 .field input::placeholder, .lead2 .field textarea::placeholder { color: var(--grey); }
.lead2 .consent { width: 489px; max-width: 100%; font-weight: 600; font-size: 14px; line-height: 18px; color: rgba(0, 0, 0, 0.4); letter-spacing: -0.03em; }
.lead2 .btn--purple { width: 489px; max-width: 100%; min-height: 0; padding: 23px 33px; gap: 24px; border-radius: 16px; font-size: 18px; }
.lead2 .btn--purple .btn__dot { width: 12px; height: 12px; }

/* ===================================================================== */
/* ============================ ДЕСКТОП, узкий ========================== */
@media (max-width: 1440px) {
  .landing { --section-gap: 140px; }
  .l-h2 { font-size: clamp(48px, 4.45vw, 64px); }
  .motto-line p { font-size: clamp(52px, 5vw, 72px); }
  .promo { padding-left: 150px; column-gap: 16px; }
  .promo__t { font-size: 22px; }
  .promo__s { font-size: 15px; }
  .calc2__body { grid-template-columns: minmax(0, 1fr) 400px; }
  .lead2 { grid-template-columns: minmax(0, 1fr) 480px; }
  .peek { display: none; }
}
@media (min-width: 1100px) and (max-width: 1280px) {
  .timer__label { display: none; }
  .opt { padding: 16px; }
  .opt__top b { font-size: 16px; }
  .opt strong { font-size: 20px; }
}

/* ============================== ПЛАНШЕТ =============================== */
@media (max-width: 1099px) {
  :root { --gutter: 12px; }
  .header .container { width: min(100% - 48px, var(--container)); }
  .landing { --section-gap: 96px; }
  .hide-md { display: none !important; }
  .show-md { display: initial; }
  .l-h2 { font-size: 48px; }
  .l-lead { font-size: 18px; line-height: 1.3; }
  .sec-head { margin-bottom: 40px; gap: 24px; }

  .top { padding: 8px 0 0; background: transparent; overflow: visible; }
  .top__blob { display: none; }
  .top::before { content: ''; position: absolute; inset: -80px 0 auto; height: 520px; z-index: -1; background: radial-gradient(60% 70% at 30% 0%, #efe7ff 0%, rgba(255, 255, 255, 0) 70%); }

  .promo { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'gift text text' 'timer timer btn'; row-gap: 16px; column-gap: 16px; padding: 20px 24px; }
  .promo__gift { position: static; grid-area: gift; width: 99px; height: 99px; transform: rotate(-6deg); }
  .promo__text { grid-area: text; gap: 8px; }
  .promo__s { font-size: 15px; line-height: 1.35; }
  .timer { grid-area: timer; }
  .timer__label { margin-right: 10px; font-size: 15px; line-height: 1.35; }
  .timer__cell small { font-size: 12px; }
  .promo__btn { grid-area: btn; min-height: 54px; padding: 0 24px; }

  .top__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .offer, .top__pair { grid-column: 1; grid-row: auto; }
  .top__pair { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .offer { --w: 720; aspect-ratio: 720 / 500; }
  .offer__glow { left: calc(9 * var(--u)); top: calc(-109 * var(--u)); width: calc(728 * var(--u)); height: calc(650 * var(--u)); }
  .offer__text { left: calc(40 * var(--u)); top: calc(44 * var(--u)); width: calc(380 * var(--u)); }
  .offer__btn { left: calc(40 * var(--u)); top: calc(388 * var(--u)); }
  .mascot { left: calc(385 * var(--u)); top: calc(76 * var(--u)); width: calc(311 * var(--u)); height: calc(396 * var(--u)); }

  .motto { aspect-ratio: 354 / 300; padding: 24px; }
  .motto p { font-size: 32px; line-height: 1.05; }
  .launch { --w: 666; aspect-ratio: 354 / 300; }
  .launch { --u: calc(100cqh / 333); }
  .launch__copy { top: 36px; width: calc(100% - 40px); gap: 10px; }
  .launch__t { font-size: 24px; line-height: 1.15; white-space: normal; max-width: 220px; }
  .launch__s { width: auto; max-width: 250px; font-size: 15px; line-height: 1.35; }

  .motto-line { padding: 0; }
  .motto-line p { font-size: 52px; }
  .motto-line p { flex-direction: column; align-items: center; }
  .landing > .top + .motto-line { margin-top: 96px; }
  .landing > .motto-line + section { margin-top: 96px; }

  .benefit, .calc2 { width: min(100% - var(--gutter) * 2, 720px); }
  .benefit__cards { grid-template-columns: 1fr; gap: 16px; }
  .bcard { padding: 32px 30px; gap: 24px; }
  .bcard__list li > img { width: 40px; height: 40px; }
  .bcard__list div b { font-size: 15px; }
  .bcard__list p { font-size: 15px; }
  .bcard__total { min-height: 0; padding: 28px 24px; }
  .bcard__total p { font-size: 18px; }
  .bcard__gift { width: 60px; height: 60px; position: static; translate: none; margin-left: auto; }
  .bcard--promo .bcard__head { justify-content: flex-start; gap: 12px; }
  .bcard__rows { margin-top: 0; }
  .bcard__rows li { font-size: 17px; }
  .bcard__sum { padding: 26px 24px; }
  .bcard__sum > p { font-size: 18px; }
  .saving-bar { justify-content: center; padding: 20px 32px; gap: 16px; }
  .saving-bar__ic { width: 56px; height: 58px; }
  .saving-bar__r { width: auto; gap: 2px; }
  .saving-bar__r small { font-size: 15px; }
  .saving-bar__r b { font-size: 32px; color: var(--purple); }

  .calc2 .sec-head { margin-bottom: 32px; }
  .calc2__body { grid-template-columns: 1fr; gap: 16px; }
  .quote { position: static; }

  .plans--new { padding: 32px 24px; }
  .plans--new .l-h2 { text-align: center; margin-bottom: 32px; }
  .plans--new .device { display: none; }
  .plans--new .plan { width: 100%; min-height: 0; }

  .steps2 { padding: 40px 24px; gap: 164px; }
  .steps2__list { width: 100%; }
  .step2 { flex-direction: column; gap: 16px; padding: 32px; }
  .step2__t { width: auto; line-height: 1.15; }
  .step2__d { line-height: 1.3; }
  .step2__tag { font-size: 15px; }
  .sit { display: block; }

  .shorts .l-h2, .cases .l-h2 { text-align: center; margin-bottom: 32px; }
  .shorts__row { gap: 12px; }
  .short, .short--big { width: 260px; height: 522px; }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; align-items: start; }
  .case { gap: 12px; }
  .case__t { font-size: 17px; }
  .case__m { font-size: 15px; margin-top: 6px; }
  .cases__more { margin-top: 32px; }

  .transfer2 { --w: 720; aspect-ratio: 720 / 660; }
  .transfer2::before { left: calc(36 * var(--u)); top: calc(109 * var(--u)); width: calc(693 * var(--u)); height: calc(543 * var(--u)); }
  .transfer2::after { left: calc(-7 * var(--u)); top: calc(156 * var(--u)); width: calc(406 * var(--u)); height: calc(387 * var(--u)); }
  .transfer2__blur { display: none; }
  .transfer2__text { left: calc(40 * var(--u)); top: calc(40 * var(--u)); width: calc(640 * var(--u)); gap: 20px; text-align: center; }
  .transfer2 h2 { font-size: 48px; line-height: 1; }
  .transfer2__text p { font-size: 18px; line-height: 1.3; }
  .tag { left: calc(126 * var(--u)); top: calc(250 * var(--u)); width: calc(468 * var(--u)); height: calc(312 * var(--u)); }
  .transfer2__btn { left: 50%; translate: -50% 0; top: calc(547 * var(--u)); padding: 25.6px 35.2px; gap: 12.8px; font-size: 24px; }
  .transfer2__btn .btn__dot { width: 12px; height: 12px; }

  .addons2 .l-h2 { margin-bottom: 32px; }
  .addons2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .addon { --w: 354; aspect-ratio: 354 / 150; }
  .addon h3 { left: 24px; top: 24px; width: 60%; font-size: 18px; line-height: 1.2; }
  .addon__clip { padding: 18px 20px; }
  .addon__t { font-size: 15px; }
  .addon__back ul { gap: 4px; margin-top: 8px; }
  .addon__back li { font-size: 13px; gap: 8px; }
  .addon__back li::before { width: 16px; height: 16px; background-size: 15px; }
  .addon__price { font-size: 20px; }
  .addon__ic { left: auto; right: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(134 * var(--u)); }

  .faq .l-h2 { margin-bottom: 32px; }
  .faq__list { width: 100%; }
  .faq .qa summary { min-height: 92px; padding: 24px 32px; font-size: 24px; }

  .lead2 { --w: 720; display: block; min-height: 0; padding: 40px; }
  .lead2 .l-h2 { text-align: center; max-width: none; }
  .lead2__art { position: relative; left: auto; top: auto; width: 413px; height: 413px; margin: -24px auto 16px; }
  .lead2__card { gap: 24px; }
  .lead2 .form-box { padding: 32px; }
  .lead2 .form-box h3 { width: auto; font-size: 28px; }
  .lead2 .consent { width: auto; font-size: 15px; line-height: 20px; font-weight: 500; }
  .lead2 .btn--purple { width: 100%; }
}

/* ============================== МОБИЛКА =============================== */
@media (max-width: 599px) {
  :root { --gutter: 8px; }
  .header .container { width: min(100% - 48px, var(--container)); }
  .landing { --section-gap: 64px; }
  .hide-sm { display: none !important; }
  .l-h2 { font-size: 32px; line-height: 1.05; }
  .l-lead { font-size: 15px; line-height: 1.35; }
  .sec-head { margin-bottom: 28px; gap: 24px; }

  .promo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'gift text' 'gift timer'; column-gap: 12px; row-gap: 10px; padding: 12px 14px; }
  .promo__gift { width: 76px; height: 78px; align-self: center; }
  .promo__t { font-weight: 700; font-size: 15px; line-height: 1.35; }
  .promo__s, .promo__btn, .timer__label { display: none; }
  .timer { gap: 4px; }
  .timer__cell { width: auto; min-width: 46px; height: 46px; padding: 0 4px; border-radius: 12px; gap: 0; }
  .timer__cell b { font-size: 18px; line-height: 1.2; }
  .timer__cell small { font-weight: 500; font-size: 10px; line-height: 1.2; }
  .timer > i { font-size: 18px; }

  .top__grid { gap: 8px; margin-top: 8px; }
  .top__pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .offer { --w: 344; aspect-ratio: auto; height: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 20px 20px; }
  .offer > * { position: relative; flex: none; }
  .offer__glow { position: absolute; left: 22px; top: 177px; width: 301px; height: 228px; transform: none; }
  .offer__text { left: auto; top: auto; width: 100%; justify-items: center; text-align: center; gap: 12px; }
  .offer__h b { font-size: 40px; }
  .offer__h > span:not(.sr-only) { font-size: 20px; }
  .offer__price { justify-content: center; }
  .offer__price b { font-size: 48px; }
  .offer__price span { font-size: 18px; }
  .offer__dev { width: auto; justify-items: center; font-size: 18px; margin-top: 4px; }
  .offer__deal s::after { height: 2px; }
  .mascot { left: auto; top: auto; width: 154px; height: 196px; margin-top: 8px; }
  .offer__btn { left: auto; top: auto; width: 100%; height: 60px; padding: 0 32px; font-size: 20px; margin-top: -1px; }
  .offer__btn .btn__dot { width: 14px; height: 14px; }

  .motto { aspect-ratio: 344 / 200; }
  .launch { aspect-ratio: 344 / 260; }
  .launch__copy { top: 31px; gap: 9px; }

  .motto-line p { font-size: 32px; }
  .landing > .top + .motto-line, .landing > .motto-line + section { margin-top: 64px; }

  .bcard { padding: 20px 16px; gap: 16px; border-radius: var(--r-card); }
  .bcard__head h3 { font-size: 24px; }
  .bcard__list li { gap: 12px; padding-bottom: 12px; }
  .bcard__list li > img { width: 32px; height: 32px; }
  .bcard__list p span { font-size: 12px; }
  .bcard__total { padding: 20px 16px; }
  .bcard__total p { font-size: 15px; }
  .bcard__total strong { font-size: 24px; }
  .bcard--promo { gap: 12px; }
  .bcard__gift { width: 44px; height: 44px; }
  .bcard__rows li { padding: 10px 14px; font-size: 15px; }
  .bcard__sum { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 16px; }
  .bcard__sum > p { font-size: 15px; }
  .bcard__sum > div { justify-items: start; }
  .bcard__now s { font-size: 24px; }
  .bcard__now strong { font-size: 32px; }
  .saving-bar { padding: 20px 16px; }
  .saving-bar__ic { width: 64px; height: 66px; }

  .cbox { padding: 20px 16px; gap: 16px; }
  .cbox__h { gap: 6px 12px; }
  .cbox__h span { font-size: 18px; flex: 1; }
  .cbox__h small { flex-basis: 100%; font-size: 15px; }
  .opts { grid-template-columns: 1fr; }
  .opts:not(.opts--plan) .opt, .opts--plan .opt { min-height: 0; }
  .check { flex-wrap: wrap; gap: 12px; padding: 14px 12px; }
  .check > img, .check__hit > img { width: 36px; height: 36px; }
  .check__txt > b { font-size: 15px; }
  .check__txt > span { font-size: 12px; }
  .check em { font-size: 15px; }
  .check--sub { align-items: flex-start; }
  .check--sub .check__txt > b { font-size: 18px; }
  .check--sub .check__txt > span { font-size: 15px; }
  .check--sub em { flex-basis: 100%; padding-left: 34px; margin-top: -4px; }
  .check--copy .qty { margin-left: 70px; order: 3; }
  .check--copy em { margin-left: auto; }
  .pay { display: grid; grid-auto-flow: row; width: 100%; border-radius: var(--r-inner); }
  .pay__thumb { border-radius: 12px; }
  .pay label > span { justify-content: center; height: 48px; border-radius: 12px; }
  .quote { padding: 20px 16px; }
  .quote__rows { padding: 8px 20px; }
  .quote__total strong { font-size: 32px; }

  .plans--new { padding: 24px 12px; }
  .plans--new .plan { padding: 16px 12px; border-radius: var(--r-card); }
  .plans--new .seg button { font-size: 15px; height: 40px; padding: 0 10px; }
  .plans--new .plan__list { padding: 12px 8px 12px 24px; gap: 14px; }
  .plans--new .plan__list li { font-size: 15px; gap: 16px; }
  .plans--new .plan__cta { font-size: 15px; padding: 24px; }
  .plans--new .plan__promo { font-size: 15px; }
  .plan__gift { padding: 12px 20px; font-size: 13px; }

  .steps2 { padding: 32px 12px; gap: 132px; }
  .step2 { padding: 16px; gap: 8px; align-items: center; text-align: center; }
  .step2:first-of-type { padding-top: 44px; }
  .step2__t { font-size: 18px; line-height: 1.2; justify-content: center; }
  .step2__d { justify-items: center; font-size: 15px; line-height: 1.35; }
  .step2__tag { width: 100%; text-align: center; }
  .sit { right: auto; left: calc(50% + 48px); width: 98px; height: 147px; bottom: calc(100% - 34px); }

  .shorts .l-h2, .cases .l-h2 { margin-bottom: 20px; }
  .shorts__row { gap: 10px; }
  .short, .short--big { width: 230px; height: 462px; padding: 19px; }
  .cases__grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .cases__grid::-webkit-scrollbar { display: none; }
  .case { flex: 0 0 270px; scroll-snap-align: start; gap: 9px; }
  .shorts__row, .cases__grid { scroll-padding-inline: var(--gutter); }
  .case__t { font-size: 15px; line-height: 1.25; }
  .case__m { font-size: 12px; }
  .cases__more { margin-top: 20px; }

  .transfer2 { --w: 344; aspect-ratio: 344 / 560; }
  .transfer2::before { left: calc(-29 * var(--u)); top: calc(148 * var(--u)); width: calc(520 * var(--u)); height: calc(407 * var(--u)); }
  .transfer2::after { left: calc(-146 * var(--u)); top: calc(183 * var(--u)); width: calc(304 * var(--u)); height: calc(290 * var(--u)); }
  .transfer2__text { left: calc(20 * var(--u)); top: calc(28 * var(--u)); width: calc(304 * var(--u)); gap: 14px; }
  .transfer2 h2 { font-size: 48px; }
  .tag { left: calc(16 * var(--u)); top: calc(230 * var(--u)); width: calc(312 * var(--u)); height: calc(208 * var(--u)); }
  .transfer2__btn { left: calc(20 * var(--u)); translate: none; top: calc(480 * var(--u)); width: calc(304 * var(--u)); height: 60px; padding: 0 44px; gap: 16px; font-size: 18px; }

  .addons2 .l-h2 { margin-bottom: 20px; }
  .addons2__grid { grid-template-columns: 1fr; gap: 8px; }
  .addon { --w: 344; aspect-ratio: auto; perspective: none; border-radius: var(--r-inner); background: var(--face); overflow: hidden; }
  .addon__in { position: static; transform: none !important; display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 600ms cubic-bezier(0.22, 1, 0.36, 1); }
  .addon.is-flipped .addon__in { grid-template-rows: auto 1fr; }
  .addon__front { position: relative; height: 96px; border-radius: 0; }
  .addon__back { position: static; transform: none; min-height: 0; border-radius: 0; backface-visibility: visible; }
  .addon__clip { height: auto; padding: 0 20px 18px; }
  .addon__t { display: none; }
  .addon__back ul { margin-top: 0; }
  .addon__price { align-self: flex-start; margin-top: 10px; }
  .addon h3 { left: 20px; top: 50%; translate: 0 -50%; font-size: 18px; }
  .addon__ic { right: calc(16 * var(--u)); top: 50%; translate: 0 -50%; width: 96px; height: 96px; }

  .faq .l-h2 { margin-bottom: 20px; }
  .faq .qa summary { min-height: 64px; padding: 20px 16px; font-size: 15px; line-height: 1.35; }
  .faq .qa__a { padding: 0 16px 20px; font-size: 15px; }

  .lead2 { padding: 28px 12px 24px; }
  .lead2 .l-h2 { padding: 0 8px; }
  .lead2__art { width: 301px; height: 301px; margin: 4px auto 8px; }
  .lead2 .form-box { padding: 20px 16px; }
  .lead2 .form-box h3 { font-size: 24px; margin-bottom: 24px; }
  .lead2 .field input, .lead2 .field textarea { font-size: 18px; }

  .footer { padding: 40px 0 32px; border-radius: 24px 24px 0 0; }
  .footer .container { width: min(100% - 48px, var(--container)); }
  .footer__col ul, .footer__contacts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .footer__col a { font-size: 15px; font-weight: 700; }
}

/* скриншоты для сверки с макетом — состояние покоя, как в Figma */
.screenshot-mode .fx { animation: none !important; }
.screenshot-mode .quote { position: static; }

/* ================= ПОЯВЛЕНИЕ БЛОКОВ =================
   Медленный ease-out: блок поднимается на 40px и проявляется за 1.4 с.
   Первый экран — по очереди: шапка → плашка акции → карточки. */
:root { --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.js-reveal { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1.2s var(--reveal-ease), transform 1.4s var(--reveal-ease); transition-delay: var(--d, 0s); }
.js-reveal.is-in { opacity: 1; transform: none; }

@keyframes intro-down { from { opacity: 0; transform: translate3d(0, -16px, 0); } }
@keyframes intro-up { from { opacity: 0; transform: translate3d(0, 36px, 0) scale(0.985); } }
.has-intro .header { animation: intro-down 1s var(--reveal-ease) 0.05s both; }
.has-intro .promo { animation: intro-up 1.3s var(--reveal-ease) 0.35s both; }
.has-intro .offer { animation: intro-up 1.4s var(--reveal-ease) 0.6s both; }
.has-intro .motto { animation: intro-up 1.4s var(--reveal-ease) 0.8s both; }
.has-intro .launch { animation: intro-up 1.4s var(--reveal-ease) 1s both; }
@media (max-width: 1099px) {
  .has-intro .offer { animation-delay: 0.6s; }
  .has-intro .motto { animation-delay: 0.85s; }
  .has-intro .launch { animation-delay: 1.05s; }
}

.screenshot-mode .js-reveal { opacity: 1; transform: none; transition: none; }
.screenshot-mode .header, .screenshot-mode .promo, .screenshot-mode .offer, .screenshot-mode .motto, .screenshot-mode .launch { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { transform: none; transition: opacity 0.4s ease; }
  .has-intro .header, .has-intro .promo, .has-intro .offer, .has-intro .motto, .has-intro .launch { animation: none; }
}

/* строки расчёта: появляются и схлопываются по высоте */
.quote__rows li { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 520ms var(--reveal-ease), opacity 360ms ease; }
.quote__rows li > .qclip { min-height: 0; overflow: hidden; }
.quote__rows li.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
.num-v { font-variant-numeric: tabular-nums; }
[data-count] { font-variant-numeric: tabular-nums; }

/* тарифы на десктопе целиком помещаются в экран под шапкой (в макете 1001 px — это для 1080+) */
@media (min-width: 1100px) {
  .plans--new { padding: clamp(24px, 3.6vh, 48px) 48px; }
  .plans--new .l-h2 { font-size: clamp(40px, 5.4vh, 64px); margin-bottom: clamp(16px, 3.4vh, 48px); }
  .plans--new .plans__body { align-items: center; }
  .plans--new .plan { min-height: min(700px, calc(100vh - 330px)); gap: clamp(8px, 1.3vh, 16px); padding: clamp(16px, 2.4vh, 28px) 28px clamp(18px, 3vh, 37px); }
  .plans--new .seg button { height: clamp(48px, 6.4vh, 72px); font-size: clamp(20px, 2.5vh, 26px); }
  .plans--new .plan__list { gap: clamp(8px, 1.4vh, 16px); padding: clamp(8px, 1.6vh, 20px) 24px; }
  .plans--new .plan__list li { font-size: clamp(16px, 1.9vh, 20px); }
  .plans--new .plan__cta { padding: clamp(14px, 2.2vh, 24px) 30px; }
  .plans--new .plan__promo { font-size: clamp(16px, 2vh, 22px); }
  .plans--new .plan__gift { padding: clamp(10px, 1.5vh, 16px) 31px; font-size: clamp(15px, 1.7vh, 18px); }
  .plans--new .device { width: min(388px, calc((100vh - 250px) * 0.4893)); }
}

/* ================= РИЛСЫ ================= */
.short > img { z-index: -2; }
.short__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%;
  display: grid; place-items: center; color: var(--purple);
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(30, 16, 60, 0.45); filter: none;
  transition: transform 260ms var(--ease-out), background-color 200ms ease;
}
.short__play svg { width: 26px; height: 26px; }
/* большой рилс играет сам без звука: видео под затемнением, кнопка звука вместо play */
.short.is-auto video { z-index: -2; }
.short.is-auto .short__play { display: none; }
.short__sound {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(20, 12, 40, 0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.short__sound svg { width: 22px; height: 22px; }
.short__sound .on, .short__sound[aria-pressed="true"] .off { display: none; }
.short__sound[aria-pressed="true"] .on { display: block; }
.short__sound:active { transform: scale(0.92); }
.short__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .short__sound:hover { background: rgba(20, 12, 40, 0.6); } }
.short__play:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .short:hover .short__play { transform: scale(1.08); background: #fff; } }
.short video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: inherit; }
.short.is-playing .short__play, .short.is-playing .short__time, .short.is-playing > div { opacity: 0; pointer-events: none; }
.short__time, .short > div { transition: opacity 300ms ease; }
.short[data-video=""] .short__play { cursor: default; }
/* рилсы выходят по очереди — шаг побольше, чем у остальных блоков */
.shorts__row > .short.js-reveal { transition-duration: 1.2s, 1.5s; }

/* Слайдеры на планшете и телефоне: только горизонтальная прокрутка. Без overflow-y браузер считает его auto,
   и карточки, выплывающие снизу при появлении, давали внутри ряда вертикальный скролл. */
@media (max-width: 1099px) {
  .shorts__row { overflow-y: hidden; overscroll-behavior-x: contain; }
  /* главный рилс (играет сам) — первым, а не в конце ленты */
  .short--big { order: -1; }
}
@media (max-width: 599px) {
  .cases__grid { overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* карточки кейсов из админки: обложка 4:3 целиком на карточке */
.case--db .shot { left: 0; top: 0; width: 100%; height: 100%; }
.case--db .shot--contain img { object-fit: contain; }

/* ---------- GEO-оптимизация: широкая карточка в «Можно добавить» ---------- */
.addon--wide { grid-column: 1 / -1; --w: 1248; aspect-ratio: 1248 / 380; }
.addon--wide .addon__ic { left: calc(860 * var(--u)); top: calc(30 * var(--u)); width: calc(340 * var(--u)); height: calc(340 * var(--u)); }
.addon--wide h3 { width: calc(600 * var(--u)); }
.addon__sub { position: absolute; left: calc(43.6 * var(--u)); top: calc(100 * var(--u)); width: calc(520 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.3; letter-spacing: -0.02em; color: var(--grey); }
@media (max-width: 1099px) {
  .addon--wide { --w: 720; aspect-ratio: 720 / 150; }
  .addon--wide .addon__ic { left: auto; right: calc(8 * var(--u)); top: calc(-6 * var(--u)); width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
  .addon__sub { left: 24px; top: auto; bottom: 24px; width: 60%; font-size: 14px; }
}
@media (max-width: 599px) {
  .addon--wide { --w: 344; aspect-ratio: auto; }
  .addon--wide .addon__ic { right: 16px; top: 50%; translate: 0 -50%; width: 104px; height: 104px; }
  .addon__sub { display: none; }
}

/* иконка разобрана на слои: подложка, большая звезда, две искры + блик и огонёк антенны */
.geo-float { position: absolute; inset: 0; animation: geo-float 6s cubic-bezier(.45, 0, .55, 1) infinite; }
.geo-l { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
/* звезда раз в цикл «подпрыгивает» и поворачивается на 8°, как будто вспыхнула */
.geo-star { transform-origin: 78.6% 25.7%; animation: geo-star 6s cubic-bezier(.23, 1, .32, 1) infinite; }
.geo-spark { animation: geo-twinkle 3s ease-in-out infinite; }
.geo-spark--1 { transform-origin: 88.1% 15.9%; animation-delay: .6s; }
.geo-spark--2 { transform-origin: 93.1% 22.3%; animation-delay: 1.8s; }
/* огонёк антенны робота — «думает» */
.geo-glow {
  position: absolute; left: calc(30.5% - 7%); top: calc(26.7% - 7%); width: 14%; height: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 196, 236, .7) 35%, rgba(255, 196, 236, 0) 70%);
  mix-blend-mode: screen; opacity: 0; animation: geo-glow 3s ease-in-out infinite;
}
/* световой блик проходит по карточке — только внутри её силуэта */
.geo-sheen {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url(assets/img/n/geo-base.webp) center / contain no-repeat; mask: url(assets/img/n/geo-base.webp) center / contain no-repeat;
}
.geo-sheen::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%) skewX(-12deg); animation: geo-sheen 6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes geo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3.5%) rotate(-1.5deg); } }
@keyframes geo-star {
  0%, 18% { transform: scale(1) rotate(0); }
  24% { transform: scale(.88) rotate(-6deg); }
  34% { transform: scale(1.1) rotate(8deg); }
  48%, 100% { transform: scale(1) rotate(0); }
}
@keyframes geo-twinkle { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes geo-glow { 0%, 100% { opacity: 0; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes geo-sheen { 0%, 55% { transform: translateX(-120%) skewX(-12deg); } 85%, 100% { transform: translateX(320%) skewX(-12deg); } }
.is-idle .geo-ic *, .is-idle .geo-ic *::before { animation-play-state: paused; }
.screenshot-mode .geo-ic *, .screenshot-mode .geo-ic *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .geo-ic *, .geo-ic *::before { animation: none !important; } }

/* ---------- калькулятор на телефоне: шаги открываются по очереди (landing.js ставит data-step) ---------- */
@media (max-width: 599px) {
  .calc2[data-step="1"] .calc2__set > .cbox:nth-of-type(n + 2),
  .calc2[data-step="2"] .calc2__set > .cbox:nth-of-type(n + 3),
  .calc2[data-step="3"] .calc2__set > .cbox:nth-of-type(n + 4),
  .calc2:is([data-step="1"], [data-step="2"], [data-step="3"]) .quote { display: none; }
  /* подсказка «что дальше»: заметная плашка со стрелкой, которая подпрыгивает */
  .calc2:is([data-step="1"], [data-step="2"], [data-step="3"]) .calc2__next {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px auto 0; padding: 14px 20px;
    border-radius: 16px; background: var(--purple-8); color: var(--purple); font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center;
    box-shadow: inset 0 0 0 1px var(--purple-18, #e0d1ff);
  }
  .calc2__next svg { flex: none; width: 22px; height: 22px; animation: calc-next-arrow 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
  .calc2__next.is-bump { animation: calc-next-in 520ms var(--ease-out) both; }
  /* текущий шаг слегка «дышит» рамкой, пока в нём ничего не выбрано */
  .calc2__set > .cbox { position: relative; }
  .calc2__set > .cbox::after { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--r-card) + 4px); box-shadow: 0 0 0 3px rgba(130, 73, 242, 0.28); opacity: 0; pointer-events: none; }
  .calc2[data-step="1"] .cbox:nth-of-type(1):not(:has(input[name="type"]:checked))::after,
  .calc2[data-step="2"] .cbox:nth-of-type(2):not(:has(input[name="plan"]:checked))::after { animation: calc-step-pulse 2.2s ease-in-out infinite; }
  .calc2 .is-revealing { animation: calc-step-in 640ms var(--ease-out) both; }
}
@keyframes calc-step-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .calc2 .is-revealing { animation: calc-step-fade 300ms ease both; } }
@keyframes calc-step-fade { from { opacity: 0; } }

.calc2__next { display: none; }
@keyframes calc-next-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@keyframes calc-next-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes calc-step-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .calc2__next svg, .calc2 .cbox::after { animation: none !important; } }