/* =====================================================================
   Especialista em Shopee — итоговая страница (RU, телефон), раунд 2 (29.09)
   assets/site.css — токены и ОБЩИЕ компоненты (исполнитель A) + блоки 1–6.
   Исполнитель B использует эти классы и не переопределяет их
   (свои стили — в assets/site-b.css с префиксом id секции).
   ===================================================================== */

/* ---------- Токены ---------- */
:root {
  --sky-0: #F3F9FC; --sky-1: #EAF5FA; --sky-2: #DCEEF5; --sky-3: #C9E6F0;
  --powder: #78B3CE; --ivory: #FBF8EF; --ink: #1F2A33;
  --muted: #4E5A63;        /* вторичный текст — не светлее этого */
  --c-text2: #4E5A63;
  --azure: #1AA7E1;        /* только текст ≥ 32 px */
  --azure-sm: #0B7DB0;     /* голубой для текста < 32 px */
  --cta: #F96E2A; --cta-2: #E2581B; --orange-sm: #C24A12;
  --peach: #FFE9DA; --peach-2: #FFF3EA; --wa: #25D366;
  --gold: #F2A93B; --gold-2: #FFE3A0; --sunset: #FFD9B0;
  --live: #E5383B;         /* раунд 6: только метка LIVE на плитке «Эфиры» */
  --serif: "Prata", Georgia, serif;
  --sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: 16px; --fs-2: 15px; --fs-cap: 13px;
  --r-lg: 24px; --r-md: 18px;
  /* Раунд 4 «Простота»: ОДНА мягкая тень и ОДНА тонкая рамка на всю страницу (A и B пользуются ими же) */
  --shadow: 0 12px 32px -12px rgba(31, 42, 51, .18);     /* карточки, плитки, баннеры */
  --shadow-sm: 0 6px 16px -8px rgba(31, 42, 51, .16);    /* чипы, кружки, мелкие кнопки */
  --line: rgba(31, 42, 51, .08);                          /* единственная рамка: 1 px */
  --glass-bg: rgba(255, 255, 255, .96);     /* текстовые карточки — сплошной белый */
  --glass-soft: rgba(255, 255, 255, .86);   /* стекло — только чипы поверх фото */
  --glass-line: var(--line);
  --glass-shadow: var(--shadow);
  --card-shadow: var(--shadow);
  --bar-h: 80px;           /* место под закреплённую панель внизу страницы */
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.is-locked { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--sky-1); color: var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: var(--fs-body); line-height: 1.5;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--azure-sm); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nw { white-space: nowrap; }

/* Мобильная колонка; на широком экране — та же колонка 480 px по центру */
.page {
  position: relative; max-width: 480px; margin: 0 auto;
  background: var(--sky-0);
  overflow-x: hidden; overflow-x: clip;
}
@media (min-width: 520px) {
  .page { box-shadow: 0 0 0 1px rgba(120, 179, 206, .22), 0 40px 90px -40px rgba(26, 110, 160, .4); }
}

/* ---------- Секция ---------- */
.blk { position: relative; padding: 56px 20px 32px; }
.blk__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(29px, 8.6vw, 34px); line-height: 1.1; letter-spacing: -.005em;
  color: var(--ink); text-align: center; margin: 0 0 14px;
  text-wrap: balance;
}
.blk__lead {
  max-width: 34em; margin: 0 auto 24px;
  font-size: 16px; line-height: 1.5; color: var(--muted); text-align: center;
  text-wrap: pretty;
}
.eyebrow {
  font-size: 12px; font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  text-wrap: balance;
}

/* ---------- Настроения секций (фоны) ----------
   Небо: .bg-hero (первый экран), .bg-section (обычный), .bg-warm (тёплое небо).
   Новые: .bg-paper (бумага ivory → белый), .bg-dawn (рассвет: персик сверху → небо внизу),
   .bg-golden («золотой час»: тёплое небо + заливка #FFE9DA → #FFD9B0, лучи).
   Верхний край любой секции плавно перетекает из цвета предыдущей: задай на секции
   --from: <цвет низа предыдущей секции> (по умолчанию — небо --sky-1). */
.bg-hero, .bg-section, .bg-warm, .bg-paper, .bg-dawn, .bg-golden { isolation: isolate; }
.bg-hero, .bg-section { background: linear-gradient(180deg, var(--from, var(--sky-0)) 0, var(--sky-0) 64px, var(--sky-1) 100%); }
.bg-warm { background: linear-gradient(180deg, var(--from, var(--sky-0)) 0%, var(--sky-1) 40%, var(--peach-2) 78%, var(--peach) 100%); }
.bg-paper { background: linear-gradient(180deg, var(--from, var(--sky-1)) 0, var(--ivory) 120px, #FFFDF8 55%, #FFFFFF 100%); }
.bg-dawn {
  background:
    radial-gradient(90% 38% at 88% 6%, rgba(255, 210, 178, .55), transparent 70%),
    linear-gradient(180deg, var(--from, var(--sky-1)) 0, var(--peach-2) 130px, #FFF7F0 48%, var(--sky-1) 100%);
}
.bg-golden {
  background:
    radial-gradient(70% 34% at 50% 20%, rgba(255, 244, 214, .95), transparent 72%),
    linear-gradient(180deg, var(--from, var(--sky-1)) 0, #FFF1E2 110px, var(--peach) 55%, var(--sunset) 100%);
}
.bg-hero::before, .bg-section::before, .bg-warm::before, .bg-golden::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  aspect-ratio: 780 / 1379; max-height: 100%;
  background: url("bg/sky-section.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 58%, transparent 100%);
}
.bg-hero::before {
  background-image: url("bg/sky-hero.webp");
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
}
.bg-warm::before { background-image: url("bg/sky-warm.webp"); }
.bg-golden::before { background-image: url("bg/sky-warm.webp"); opacity: .6; }
/* «Бумага»: лёгкое волокно и тёплый блик, без картинки */
.bg-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 22% at 12% 12%, rgba(255, 233, 218, .55), transparent 70%),
    radial-gradient(50% 18% at 92% 60%, rgba(220, 238, 245, .6), transparent 70%);
}

/* ---------- Карточки (раунд 4: одна система) ----------
   .card — белая сплошная карточка: радиус 24, рамка 1 px var(--line), тень var(--shadow). Без свечений и цветных обводок.
   .card--warm — тот же размер, очень светлая персиковая заливка (#FFF3EA) — «единственный акцент блока».
   .glass — то же, что .card (белый .96, без размытия: на текстовых карточках блюр не нужен);
   .glass--soft — настоящее стекло (blur) — ТОЛЬКО для мелких чипов поверх фото.
   .glass--peach — синоним .card--warm (старые разметки). */
.card, .glass {
  position: relative; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.glass { z-index: 0; background: var(--glass-bg); }
.card--warm, .glass--peach { background: var(--peach-2); }
.glass--soft {
  background: var(--glass-soft);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* ---------- Список с галочками .list-check (A и B) ----------
   <ul class="list-check"><li>текст</li>…</ul> — сетка «24 px иконка | текст», 15/1.4, ровные промежутки,
   галочка на уровне ПЕРВОЙ строки пункта. Недоступный пункт: <li class="is-no"> — серый, значок «—».
   Можно своей иконкой: <li><svg class="i">…</svg><span>текст</span></li> — svg встанет в колонку 24 px. */
.list-check { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.list-check > li {
  position: relative; min-height: 1.4em; padding: 0 0 0 34px;   /* колонка иконки 24 px + зазор 10 px */
  font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); text-align: left; text-wrap: pretty;
}
.list-check > li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1.4em;   /* = одна строка → по центру первой строки */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* своя иконка вместо галочки: <li><svg class="i">…</svg> текст</li> */
.list-check > li > svg:first-child { position: absolute; left: 2px; top: 0; width: 20px; height: 1.4em; }
.list-check > li:has(> svg:first-child)::before { display: none; }
.list-check > li.is-no { color: var(--muted); }
.list-check > li.is-no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5A63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
/* вариант с разделителями 1 px между пунктами (тарифы, регалии) */
.list-check--lines { gap: 0; }
.list-check--lines > li { padding-top: 10px; padding-bottom: 10px; }
.list-check--lines > li::before, .list-check--lines > li > svg:first-child { top: 10px; }
.list-check--lines > li + li { border-top: 1px solid var(--line); }
/* без значков: просто строки с разделителями (регалии блока 3) */
.list-check--plain > li { padding-left: 0; }
.list-check--plain > li::before { display: none; }

/* ---------- Кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #F98A45 0%, #F96E2A 52%, #E2581B 100%);
  color: #fff; font: 700 18px/1.15 var(--sans); letter-spacing: .005em;
  text-align: center; text-decoration: none;
  box-shadow: 0 14px 26px -12px rgba(226, 88, 27, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--wa {
  background: #fff; color: #128C4B; border: 1.5px solid var(--wa);
  box-shadow: var(--shadow-sm);
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--wa svg { color: var(--wa); }
.cta { max-width: 390px; margin: 28px auto 0; text-align: center; }
.cta__note {
  max-width: 21em; margin: 10px auto 0; font-size: 14px; line-height: 1.4; font-weight: 500;
  color: var(--muted); text-align: center; text-wrap: balance;
}

/* ---------- Плашки и цифры ---------- */
/* .chip — спокойная белая пилюля: рамка 1 px var(--line), маленькая мягкая тень, иконка цветом текста (ink).
   Стекло (.glass--soft) — только если чип лежит поверх фото. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink);
}
.chip svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.num {
  font-family: var(--serif); font-weight: 400; color: var(--azure);
  line-height: 1.08; letter-spacing: -.005em; font-variant-numeric: lining-nums;
}

/* ---------- 3D-объекты ---------- */
.obj { display: block; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(40, 110, 150, .22)); }
.obj--xl { width: 170px; height: 170px; }
.obj--lg { width: 120px; height: 120px; }
.obj--md { width: 76px; height: 76px; }
.obj--sm { width: 44px; height: 44px; filter: drop-shadow(0 6px 8px rgba(40, 110, 150, .22)); }
.obj--xs { width: 28px; height: 28px; filter: drop-shadow(0 3px 4px rgba(40, 110, 150, .25)); }

/* ---------- Карусель (scroll-snap) ---------- */
.carousel {
  display: flex; gap: 12px;
  margin: 0 -20px; padding: 6px 20px 30px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel::after { content: ""; flex: 0 0 8px; }   /* Safari теряет правый padding у ленты */
.carousel__card { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* Точки-индексы: видимая точка 11 px, тап-зона 40×40 */
.carousel__dots { display: flex; justify-content: center; gap: 0; margin-top: -14px; }
.carousel__dots button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.carousel__dots button::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(31, 42, 51, .3); background: #fff;
  transition: background .2s, border-color .2s, width .2s;
}
.carousel__dots button[aria-current="true"]::before { width: 22px; border-radius: 6px; background: var(--ink); border-color: var(--ink); }
:where([data-carousel-counter]) { font-family: var(--serif); color: var(--ink); }

/* ---------- Аккордеон <details class="acc"> ---------- */
.acc {
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.acc + .acc { margin-top: 10px; }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 14px 14px 18px;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--ink);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::marker { content: ""; }
.acc > summary::after, .more > summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 1px var(--line);
}
.acc[open] > summary::after, .more[open] > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.acc > :not(summary) { padding-inline: 18px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.acc > :last-child:not(summary) { padding-bottom: 16px; }

/* ---------- Вкладки [data-tabs]: сегмент-контрол ---------- */
:where([data-tabs] [role="tablist"], .tabs) {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(31, 42, 51, .05);
  border: 1px solid var(--line);
}
:where([data-tab-btn]) {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--muted); font: 700 14px/1.2 var(--sans);
  -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s;
}
:where([data-tab-btn][aria-selected="true"], [data-tab-btn].is-active) {
  background: #fff; color: var(--ink); box-shadow: var(--shadow-sm);
}
[data-tab-panel]:not(.is-active) { display: none; }

/* ---------- Таймер [data-countdown] ---------- */
:where([data-countdown]) { display: flex; justify-content: center; gap: 8px; }
.cd__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 68px; padding: 10px 6px 8px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cd__tile [data-cd] { font-family: var(--serif); font-size: 30px; line-height: 1.08; color: var(--ink); }
.cd__tile [data-cd] ~ * { margin-top: 2px; font-size: 14px; line-height: 1.2; color: var(--muted); }

/* ---------- Закреплённая панель: парящая пилюля без подложки ----------
   .is-compact (ставит site.js): в кадре кнопка блока (.cta .btn, [data-cta]) ≥ 40 %,
   открыт баннер cookies или окно видео, либо на экране тарифы → остаётся только круглая WhatsApp. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  max-width: 480px; margin: 0 auto;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.sticky-cta > * { pointer-events: auto; }
.sticky-cta .btn {
  flex: 1 1 auto; width: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 18px 34px -12px rgba(226, 88, 27, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear 0s;
}
.sticky-cta__wa {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; margin-left: auto; border-radius: 50%;
  background: var(--wa); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 14px 26px -10px rgba(18, 140, 75, .75);
}
.sticky-cta__wa svg { width: 30px; height: 30px; }
.sticky-cta.is-compact .btn {
  transform: translateY(calc(100% + 30px)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.sticky-cta__wa { transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s; }
.sticky-cta.is-top .sticky-cta__wa { opacity: 0; visibility: hidden; transform: scale(.8); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
@media (prefers-reduced-motion: reduce) { .sticky-cta .btn, .sticky-cta.is-compact .btn, .sticky-cta__wa, .sticky-cta.is-top .sticky-cta__wa { transition: none; } }

/* ---------- Окно видео ---------- */
.vmodal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(15, 32, 45, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vmodal__box {
  position: relative; display: grid; place-items: center;
  width: min(100%, 440px); aspect-ratio: 16 / 9; max-height: calc(100vh - 40px);
  padding: 32px 26px; border-radius: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #2B3F4E, #14222C);
  color: #fff; text-align: center;
  font-family: var(--serif); font-size: 21px; line-height: 1.3;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.vmodal__x {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
}

/* Окно с видео: чёрное поле, плеер на всю ширину окна (16:9), нативные controls; крестик — над окном, не на плеере */
.vmodal__box--video { display: block; padding: 0; overflow: visible; background: transparent; box-shadow: none; width: min(100%, 760px); }
.vmodal__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.vmodal__box--video .vmodal__x { top: -54px; right: 0; z-index: 2; background: rgba(255, 255, 255, .22); }

/* ---------- Cookies: компактный нижний лист (≤ 130 px) ---------- */
.cookie {
  position: fixed; left: 12px; right: 12px; z-index: 50;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 456px; margin: 0 auto; padding: 10px 10px 10px 14px;
  border-radius: 24px; background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid #fff; box-shadow: 0 24px 60px -18px rgba(20, 60, 90, .5), 0 0 0 1px rgba(120, 179, 206, .2);
  font-size: 13.5px; line-height: 1.35; color: var(--ink);
}
.cookie p { font-size: 13.5px; line-height: 1.3; text-wrap: pretty; }
.cookie__set { display: grid; gap: 6px; margin-top: 10px; font-size: 14px; }
.cookie__set label { display: flex; align-items: center; gap: 8px; }
.cookie__set input { width: 18px; height: 18px; accent-color: var(--azure-sm); }
.cookie__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cookie__btns button {
  height: 44px; padding: 0 6px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sky-3); background: #fff; color: var(--ink);
  font: 700 14px/1.1 var(--sans); -webkit-tap-highlight-color: transparent;
}
.cookie__btns [data-ck="accept"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* =====================================================================
   БЛОКИ 1–6 (исполнитель A)
   ===================================================================== */

/* ---------- Блок 1 — первый экран (раунд 5, Лиза: «амплитуда», Эрика вылезает из рамки) ----------
   Небо — в скруглённой панели (радиус 32, 14 px от краёв экрана, высота --ph). Вырезка HD выходит макушкой на --pop
   над верхним краем панели (на светлом фоне страницы), низ обрезан краем панели (clip-path со скруглением 32).
   Ось лица в холсте 1050×1400 — 57,9 % ширины → ровно 50 % панели. Макушка — на 11,3 % высоты холста.
   Высота панели зависит от высоты экрана: на 390×844 кнопка первого экрана не должна уйти под закреплённую панель. */
#b1 { display: flow-root; padding: 0; text-align: center; background: linear-gradient(180deg, #F3F9FC 0, #fff 72%); }   /* flow-root: отступ сцены не схлопывается с секцией */
#b1::before { display: none; }
.hero__stage {
  --ph: clamp(280px, calc(var(--vh100) - 506px), 460px);          /* высота панели с небом (на 390×844 — 338) */
  --ih: clamp(600px, calc(var(--ph) * 2.05), 820px);         /* высота холста вырезки: лицо ≈ 100–120 px */
  --pop: 36px;                                                /* макушка над краем панели */
  position: relative; height: var(--ph); margin: calc(var(--pop) + 4px) 14px 0;
}
.hero__photo {
  position: absolute; inset: 0; overflow: hidden; border-radius: 32px; isolation: isolate;
  background: #CFE4F2; box-shadow: var(--shadow);
}
.hero__sky {                  /* шёлковые ленты неба медленно «дышат» */
  position: absolute; inset: -16px;
  background: url("bg/sky-hero.webp") center 58% / cover no-repeat;
  animation: hero-breathe 9s ease-in-out infinite;
}
.hero__glow {                 /* лёгкий тёплый блик слева */
  position: absolute; left: -28%; top: 6%; width: 86%; height: 74%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 216, 176, .95), rgba(255, 216, 176, 0));
  opacity: .55; animation: hero-glow 6s ease-in-out infinite;
}
@keyframes hero-breathe { 0%, 100% { transform: translate3d(-8px, 0, 0); } 50% { transform: translate3d(8px, -5px, 0); } }
@keyframes hero-glow { 0%, 100% { opacity: .55; } 50% { opacity: .8; } }
.hero__cut {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-clip-path: inset(calc(-1 * var(--pop) - 40px) 0 0 0 round 0 0 32px 32px);
          clip-path: inset(calc(-1 * var(--pop) - 40px) 0 0 0 round 0 0 32px 32px);
}
.hero__cut img {
  position: absolute; display: block; max-width: none; width: auto; height: var(--ih);
  left: calc(50% - var(--ih) * .75 * .579);
  top: calc(-1 * (var(--ih) * .113 + var(--pop)));
}
.hero__floor {                /* мягкая контактная тень под нижним краем */
  position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -16px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 42, 51, .2), rgba(31, 42, 51, 0));
}
.hero__sheet { position: relative; z-index: 1; padding: 16px 20px 36px; }
/* (а) eyebrow — пилюля со звездой; сидит на нижнем крае панели (половина — на небе), экономит высоту первого экрана */
.hero__eyebrow {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px; width: max-content; max-width: min(calc(100% - 12px), 290px);
  min-height: 30px; margin: -36px auto 0; padding: 5px 14px 5px 10px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: var(--ink); text-align: center; text-wrap: balance;
}
.hero__eyebrow svg { width: 16px; height: 16px; color: var(--gold); }
/* (б) оффер */
.hero__title {
  margin-top: 12px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(29px, 8.7vw, 34px); line-height: 1.08; letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
.hero__az { color: var(--azure); }
/* (в) продолжение — отдельная светлая плашка с тонкими линиями сверху и снизу */
.hero__title-sub {
  position: relative; display: block; margin: 15px 0 0; padding: 8px 14px 9px;
  border-radius: 14px; background: #EAF5FA;
  font-size: 19px; line-height: 1.25; letter-spacing: 0; color: var(--ink); text-wrap: balance;
}
.hero__title-sub::before, .hero__title-sub::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 1px; background: rgba(31, 42, 51, .14);
}
.hero__title-sub::before { top: -8px; }
.hero__title-sub::after { bottom: -8px; }
/* (г) подоффер: суммы в светлых пилюлях (исключение из правил простоты по просьбе Лизы) */
.hero__sub { max-width: 24em; margin: 15px auto 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.hero__sub b { display: inline-block; padding: 0 6px; border-radius: 8px; background: #E6F3FA; font-weight: 700; line-height: 1.4; white-space: nowrap; }
#b1 .cta { margin-top: 14px; }
/* (е) три пункта под кнопкой в один ряд: иконка сверху, текст 13 px */
.hero__trust { display: flex; justify-content: center; align-items: stretch; gap: 6px; max-width: 360px; margin: 12px auto 0; }
.hero__trust > li:not(.hero__dot) {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: center; text-wrap: balance;
}
.hero__trust > li:nth-child(3) { flex-grow: 1.45; }   /* «Доступ сразу после оплаты» — самый длинный */
.hero__trust svg { width: 20px; height: 20px; color: var(--azure-sm); }
.hero__dot { flex: none; width: 1px; margin: 4px 0; overflow: hidden; background: var(--line); color: transparent; font-size: 0; }
/* 4 плитки: 2×2, 64 px, 3D 40 px слева */
.hero__chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 24px; }
.hero__tile {
  display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 64px; padding: 10px 10px 10px 9px;
  border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: left; text-wrap: balance;
}
.hero__tile img { flex: none; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(40, 110, 150, .22)); }
@media (max-width: 389px) { .hero__tile { gap: 7px; padding: 8px 8px 8px 7px; } .hero__tile img { width: 36px; height: 36px; } }
@media (max-width: 359px) { .hero__chips { grid-template-columns: minmax(0, 1fr); } }
/* Видео: реальный кадр ролика; play — белый круг 64 px строго по центру, пульс-кольцо и рука «нажми» ниже play */
.video-card {
  position: relative; display: block; width: 100%; margin: 20px 0 0; padding: 0;
  aspect-ratio: 1100 / 619; border: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--sky-1); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow); outline: none;
}
.video-card:focus { outline: none; }
.video-card:focus-visible { outline: 2px solid rgba(31, 42, 51, .35); outline-offset: 3px; }
.video-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-card__play, .video-card__ring {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
}
.video-card__play { display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 8px 20px -8px rgba(31, 42, 51, .35); }
.video-card__ring { background: rgba(255, 255, 255, .95); opacity: 0; animation: vc-ring 2.2s ease-out infinite; }
@keyframes vc-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
/* у треугольника #i-play центр тяжести уже в центре viewBox (x ≈ 12,1 из 24) — без сдвигов */
.video-card__play svg { width: 26px; height: 26px; }
.video-card__hint { position: absolute; left: 50%; top: calc(50% + 38px); transform: translateX(-50%); }
/* раунд 6 (Лиза): подпись «Нажми, чтобы посмотреть» сливалась с постером → тёмная плашка ink, белый текст и рука, тень */
.hint.hint--dark { background: rgba(31, 42, 51, .92); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55); }
/* раунд 6: три крошечные искры рядом с Эрикой мерцают по очереди (только opacity/transform; 3.6 s, шаг 1.2 s).
   Стоят на небе у головы — не на лице и не на теле; вне кадра первого экрана не видны. */
.hero__sparks {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0z'/%3E%3C/svg%3E");
}
.hero__spark {
  position: absolute; display: block; width: 18px; height: 18px;
  background: linear-gradient(135deg, #fff 0%, var(--gold-2) 45%, var(--gold) 100%);
  -webkit-mask: var(--spark) center / contain no-repeat; mask: var(--spark) center / contain no-repeat;
  opacity: .35; transform: scale(.5);
  animation: hero-spark 3.6s ease-in-out infinite;
}
.hero__spark--1 { left: calc(50% - 128px); top: 34px; }
.hero__spark--2 { left: calc(50% + 100px); top: 10px; width: 14px; height: 14px; animation-delay: 1.2s; }
.hero__spark--3 { left: calc(50% + 120px); top: 96px; width: 12px; height: 12px; animation-delay: 2.4s; }
@keyframes hero-spark {
  0%, 100% { opacity: .35; transform: scale(.5) rotate(0deg); }
  14% { opacity: 1; transform: scale(1.1) rotate(25deg); }
  30% { opacity: .35; transform: scale(.5) rotate(45deg); }
}

/* ---------- Блок 2 — для кого: 7 ситуаций, два варианта (A — диорамы, B — фото: ?b2=faces) ----------
   Раунд 4: все карточки 284 px и одной высоты (лента растягивает), зона картинки 190 px ВНУТРИ карточки
   (белая подложка, отступ 16 px, contain, без поворотов и mix-blend-mode). Тон карточек — два светлых в чередовании. */
/* раунд 5: по умолчанию — фото (вариант B); диорамы — только ?b2=a */
html[data-b2="a"] .b2v--b, html:not([data-b2="a"]) .b2v--a { display: none; }
#b2 { --from: #fff; padding-bottom: 96px; }   /* пауза: кнопки блоков 2 и 3 не попадают в один кадр */
@media (min-height: 1000px) { #b2 { padding-bottom: 120px; } }   /* 768×1024: запас, чтобы cta-b2 и cta-b3 не сходились в одном кадре */
#b2 .hint-row { margin: -2px 0 0; }
#b2 .arrows { --arrows-top: 101px; }   /* середина фото карточки */
.b2__track { gap: 12px; padding-top: 16px; padding-bottom: 26px; }
.b2__track .carousel__card { flex: 0 0 284px; }
.sit {
  position: relative; display: flex; flex-direction: column; padding: 12px 12px 20px;
  border-radius: var(--r-lg); background: var(--peach-2); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sit:nth-child(even) { background: var(--sky-1); }
.sit__dio { display: block; flex: none; width: 100%; height: 190px; padding: 16px; border-radius: 18px; background: #fff; object-fit: contain; }
.sit__ph { position: relative; flex: none; height: 190px; overflow: hidden; border-radius: 18px; background: var(--sky-2); }
.sit__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sit__n { margin: 14px 8px 0; font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--azure-sm); }
.sit__t { margin: 6px 8px 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.sit--b .sit__t { margin-top: 14px; }
.sit__p { margin: 8px 8px 0; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* вариант B: номер — единственная стеклянная деталь, поверх фото слева сверху */
.sit__badge {
  position: absolute; left: 10px; top: 10px; padding: 7px 12px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 400 16px/1 var(--serif); color: var(--ink);
}
/* круглые индексы: миниатюры диорам / фото, текущий — тонкое кольцо ink (без увеличения) */
.goto { display: flex; justify-content: space-between; max-width: 350px; margin: 0 auto; }
.goto__b {
  flex: none; width: 44px; height: 44px; padding: 3px; overflow: hidden; border: 0;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s;
}
.goto__b img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.goto--ph .goto__b { padding: 0; }
.goto--ph .goto__b img { object-fit: cover; }
.goto__b[aria-current="true"] { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 359px) { .goto__b { width: 40px; height: 40px; } }

/* ---------- Блок 3 — Эрика (раунд 5, Лиза): две арки в ряд «тогда / сейчас» + регалии с галочками ---------- */
#b3 { padding-top: 50px; padding-bottom: 32px; }
.b3__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; max-width: 400px; margin: 10px auto 0; }
.b3__col { min-width: 0; margin: 0; text-align: center; }
.b3__arch {
  height: 272px; overflow: hidden; border: 4px solid #fff; border-radius: 999px 999px 18px 18px;
  background: var(--sky-2); box-shadow: var(--shadow);
}
.b3__arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b3__arch--then img { filter: saturate(.7); object-position: 50% 24%; }
.b3__arch--now img { object-position: 50% 22%; }
/* раунд 6 (Лиза): обе подписи — ОДИН стиль (Raleway 600, 15.5 px, ink), колонки равные, начинаются на одной линии */
.b3__cap { margin: 12px 2px 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.b3__cap b { font-weight: 700; }
/* регалии отделены от подписей: 30 px воздуха и белая плашка со скруглением */
.b3__list { max-width: 400px; margin: 30px auto 0; padding: 18px 18px 18px 16px; }
.b3__list > li { font-size: 15px; }
.b3__list b { color: var(--ink); }
#b3 .cta { margin-top: 26px; }
@media (max-width: 359px) {
  .b3__pair { gap: 10px; }
  .b3__arch { height: 244px; }
  .b3__cap { font-size: 15px; }
}

/* ---------- Блок 4 — что за обучение: продавцы → вакансии → профессия ---------- */
#b4 { padding-bottom: 16px; }
#b4 .blk__lead { margin-bottom: 0; }
.b4__flow { display: flex; flex-direction: column; align-items: stretch; }
.b4__dash { display: block; width: 2px; height: 28px; margin: 10px auto; background: repeating-linear-gradient(180deg, var(--powder) 0 5px, transparent 5px 10px); }
.b4__sellers { padding: 20px 18px; text-align: center; }
.b4__top { display: flex; flex-direction: column; align-items: center; }
.b4__big { font-size: clamp(44px, 13vw, 56px); color: var(--azure); white-space: nowrap; }
.b4__shops { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.b4__shops .obj { width: 60px; height: 60px; }
.b4__s1 { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
/* раунд 5 (Лиза): пруфы — крупная цифра Prata над НАСТОЯЩИМ скриншотом в белой рамке (всё — aria-hidden декор) */
.b4__proofs { display: grid; gap: 20px; margin-top: 2px; }
.b4__proof { min-width: 0; margin: 0; text-align: center; }
.b4__pn { font-size: clamp(38px, 11vw, 46px); color: var(--azure); white-space: nowrap; }
.b4__shot { margin-top: 8px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.b4__shot img { display: block; width: 100%; height: auto; border-radius: 11px; }
.b4__cap { margin-top: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.b4__s2 { margin: 18px 2px 0; font-size: 16px; line-height: 1.5; color: var(--ink); text-align: center; text-wrap: pretty; }
/* итог — единственный акцент блока: персиковая заливка + 3D деньги (покачиваются) */
.b4__pay { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 12px; padding: 18px 14px 18px 20px; }
.b4__pay p { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ink); text-wrap: pretty; }
.b4__money { display: block; }
.b4__money img { display: block; width: 118px; height: 82px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(160, 95, 20, .25)); }
@media (max-width: 379px) {
  .b4__pay { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .b4__money { order: -1; }
}

/* ---------- 5 способов заработка: пять одинаковых карточек одного тона ---------- */
#b4w { padding-top: 52px; }
#b4w .arrows { --arrows-top: 128px; }   /* середина экрана-примера */
.b4w__rail .carousel { padding-top: 14px; }
.way { display: flex; flex-direction: column; padding: 12px 12px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.way__top { position: relative; height: 248px; border-radius: 18px; background: var(--peach-2); }
/* раунд 5 (Лиза): настоящий экран телефона из презентации — целиком, 220 px; покачивается только у активной карточки */
.way .way__phone {
  position: absolute; left: 0; right: 0; top: 14px; display: block; width: 109px; height: 220px; margin: 0 auto;
  object-fit: contain; filter: drop-shadow(0 14px 16px rgba(160, 90, 40, .24));
}
.way:not(.is-cur) .way__phone.bob { animation: none; }
.way .way__obj { position: absolute; left: 16px; top: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; }   /* целиком внутри плашки, любой пропорции */
.way__n { position: absolute; left: 14px; top: 12px; font: 400 20px/1 var(--serif); color: var(--muted); }
.way__body { padding: 14px 8px 0; }
.way__t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }
.way__p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.b4w__one { margin-top: 14px; text-align: center; }
.b4w__h { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); }
.b4w__path { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 280px; margin: 16px auto 14px; }
.b4w__path::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; background: rgba(31, 42, 51, .14); }
.b4w__path i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid rgba(31, 42, 51, .2); }
.b4w__path i:first-child { background: var(--cta); border-color: var(--cta); }
.b4w__p { max-width: 24em; margin: 0 auto; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- Блок 5 — гарантия: щит и печать «7 дней» (единственный акцент) ---------- */
#b5 { padding-bottom: 40px; }
/* высокие экраны (768×1024): блок не ниже окна — кнопки блоков 4w и 5 не встают в один кадр */
#b5 { min-height: calc(100vh + 170px); min-height: calc(100svh + 170px); display: flex; flex-direction: column; justify-content: center; }
/* щит слева, печать справа-внизу ЗА пределами картинки щита — значок-лупа щита открыт */
.b5__stage { position: relative; width: 300px; max-width: 100%; height: 236px; margin: 4px auto 0; }
.b5__shield {
  position: absolute; left: 6px; top: 0; display: block; width: 190px; height: 230px; object-fit: contain;   /* щит с флагом Бразилии */
  filter: drop-shadow(0 16px 20px rgba(160, 110, 50, .22));
}
.b5__seal {
  position: absolute; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9B8 0%, #F6BE5E 62%, #EAA33C 100%);
  box-shadow: 0 10px 22px -10px rgba(160, 95, 20, .5);
}
.b5__seal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); }
.b5__seal-n { font: 400 40px/.95 var(--serif); color: var(--ink); }
.b5__seal-d { margin-top: 2px; font: 400 14px/1 var(--serif); color: var(--ink); }
/* раунд 5 (Лиза): гарантия — отдельная золотистая полоса, «вернём 100% денег» жирно 20 px */
.b5__g {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px;
  max-width: 400px; margin: 16px auto 18px; padding: 16px 18px 16px 14px; border-radius: var(--r-lg);
  background: #FFF3D6; box-shadow: var(--shadow-sm); text-align: left;
}
.b5__gi { width: 34px; height: 34px; color: #A8671A; stroke-width: 1.6; }
.b5__g p { font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.b5__g strong { font-weight: 700; }
.b5__big { font-size: 20px; font-weight: 700; line-height: 1.3; }
.b5__flag { display: grid; place-items: center; width: 56px; height: 56px; }
.b5__flag svg { display: block; width: 32px; height: 22px; border-radius: 4px; box-shadow: 0 4px 10px -4px rgba(31, 42, 51, .35); }
.b5__panel { padding: 4px 18px; }
.b5__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; }
.b5__row + .b5__row { border-top: 1px solid var(--line); }
.b5__row .obj { width: 56px; height: 56px; }
.b5__row p { font-size: 15px; line-height: 1.45; color: var(--ink); }
.b5__pay { display: flex; flex-direction: column; align-items: center; margin-top: 20px; text-align: center; }
.b5__pl { font-size: 15px; font-weight: 700; color: var(--ink); }
.b5__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.b5__chips .chip { gap: 6px; padding: 6px 12px; }
#b5 .cta { margin-top: 22px; }

/* ---------- Блок 6 — что ты получаешь ---------- */
#b6 { --from: var(--sunset); }
/* три макета из презентации (раунд 8, Лёша: «платформу слабо видно, много пустого места»):
   слайд 90 % ленты (следующий выглядывает), макет почти во всю ширину карточки — поле 6 + 2 = 8 px,
   высота зоны макета по пропорциям самой картинки (width/height у <img>), макет ЦЕЛИКОМ, без обрезки.
   Слайды выровнены по верху и своей высоты: под текстом только нижний отступ карточки (18 px);
   точки и «1 / 3» стоят под самой высокой карточкой и не прыгают. */
.b6__track { align-items: flex-start; gap: 12px; padding-top: 4px; padding-bottom: 26px; }
.b6__track .carousel__card { flex-basis: 90%; }
.feat { display: flex; flex-direction: column; padding: 6px 6px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.feat__media { display: block; padding: 2px; border-radius: calc(var(--r-lg) - 6px); background: var(--sky-0); }
.feat__media img { display: block; width: 100%; height: auto; }
.feat__txt { padding: 12px 10px 0; }
.feat__t { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.feat__p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.b6__nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -14px; }
.b6__nav .carousel__dots { margin-top: 0; }
.b6__count { font: 700 14px/1 var(--sans); color: var(--ink); }
/* раунд 10 (Лёша 01.10): пять бывших плиток — слайды той же ленты. Подложка фиксированной высоты (220 / 240 / 260),
   поле 6 + 2 = 8 px, картинка крупно на всю подложку; квадратиков 84×84 больше нет */
.feat__media--art { height: 220px; padding: 2px; }
.feat__art {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; align-self: stretch; justify-self: stretch;
  border-radius: calc(var(--r-lg) - 8px); background: var(--sky-0);
}
.feat__art img { position: absolute; min-height: 0; object-fit: fill; display: block; max-width: none; }
/* селекторы с .feat__media — сильнее общего правила планшета «.feat__media img { 100 % × 100 %, contain }» */
/* ИИ: нарисованное окно чата — запрос, ответ, искры, строка ввода с кнопкой отправки */
.feat__chat { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* образцы: экран из презентации крупно, обрезан снизу краем подложки */
.feat__art--ex { background: var(--peach-2); }
.feat__media .feat__art--ex img { left: 50%; top: 12px; width: 62%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(160, 90, 40, .2)); }
/* поддержка: круглое фото Эрики + значок чата; --D — диаметр круга */
.feat__art--ava { --D: 184px; background: var(--sky-1); }
.feat__face {
  position: absolute; left: calc(50% - var(--D) / 2); top: calc(50% - var(--D) / 2); width: var(--D); height: var(--D);
  overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #F1F9FC, #BFE0EE); box-shadow: 0 0 0 3px #fff, var(--shadow-sm);
}
.feat__media .feat__face img { height: calc(var(--D) * 4.467); width: auto; left: calc(var(--D) * -1.4397); top: calc(var(--D) * -.433); }
.feat__bubble {
  position: absolute; left: calc(50% + var(--D) * .24); top: calc(50% + var(--D) * .2); display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); color: var(--azure-sm);
}
.feat__bubble svg { width: 28px; height: 28px; }
/* сертификат: лист под углом 3°, покачивается (rotate — отдельным свойством, .bob двигает transform) */
.feat__art--cert { display: grid; place-items: center; background: var(--peach-2); }
.feat__cert { display: block; height: 86%; width: auto; aspect-ratio: 68 / 90; rotate: -3deg; filter: drop-shadow(0 10px 12px rgba(31, 42, 51, .16)); }
/* бонусные уроки: кадр урока (Эрика на видео, из pres/lessons.webp) на всю подложку + кнопка play */
.feat__art--les { background: #3B3050; }
.feat__media .feat__art--les img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.feat__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
}
.feat__play svg { width: 24px; height: 24px; }
.feat__txt > .more { margin-top: 4px; }
.feat__txt > .more > .feat__p { margin-top: 2px; }
/* 8 точек + «N / 8» помещаются в 280 px (ширина 320): тап-зона точки 28×40 */
#b6 .carousel__dots button { width: 28px; }
.more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }
.more > summary::after { width: 28px; height: 28px; }
/* баннер «iPhone трём лучшим» — единственный акцент блока: тёплая заливка, телефон целиком внутри */
.b6__ip {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 16px;
  margin-top: 12px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--peach-2); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.b6__ip-art { display: grid; place-items: center; }
.b6__ip-phone { display: block; width: 56px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(160, 80, 30, .2)); }
.b6__ip-t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
.b6__ip-p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }

/* ---------- Блок 6 — раунд 5 (Лиза): сертификат, лицо Эрики у поддержки, три iPhone ---------- */
/* стрелки — по середине самого низкого макета (lessons 1100×549), считается от ширины ленты:
   лента = min(100vw, 480) − 40, картинка = лента × .9 − 18 (рамка 2 + поля 16), центр зоны = 13 + h/2, кнопка 44 → −22 */
#b6 .arrows { --arrows-top: calc(((min(100vw, 480px) - 40px) * .9 - 18px) * .2495 - 9px); }
.b6__ip { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 14px 20px 20px; text-align: center; }
.b6__ip-phones { display: block; width: 200px; max-width: 100%; height: 168px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(160, 80, 30, .22)); }   /* любые пропорции: целиком, без растяжения */
@media (min-width: 470px) { .b6__ip { grid-template-columns: 172px minmax(0, 1fr); justify-items: start; text-align: left; gap: 16px; } }

/* =====================================================================
   РАУНД 5 (правки Лизы) — ОБЩИЕ КОМПОНЕНТЫ «живости». Делает A, B пользуется по имени.
   Жизнь даёт движение и подсказки, а не новые плашки: всё одноцветное, без свечений и рамок 2 px.
   Все анимации выключаются при prefers-reduced-motion: reduce (правило в конце раздела).

   .hint          <span class="hint" aria-hidden="true">листай</span>
                  белая пилюля 32 px, текст 13.5 px, справа стрелка 16 px (SVG-маска), стрелка покачивается ±5 px, 2.4 s.
   .hint--tap     <span class="hint hint--tap" aria-hidden="true">Нажми на модуль, чтобы увидеть уроки</span>
                  слева рука-палец 16 px с мягким пульсом 1 → 1.12; стрелки справа нет.
                  .hint.is-seen — статичная (site.js ставит, когда карусель в том же [data-carousel] уже листали).
   .arrows        обёртка карусели: <div class="arrows"><div class="carousel">…</div></div> внутри [data-carousel].
                  site.js сам добавит кнопки ‹ › (44 px, [data-carousel-prev]/[data-carousel-next]) и спрячет их на краях.
                  Высота кнопок по умолчанию — середина ленты; поправить: style="--arrows-top: 120px".
   .reveal        плавное появление при первом попадании в кадр (opacity 0 → 1, translateY 14 → 0, 500 ms, один раз).
                  Без JS и при reduce — видно сразу. Пачка элементов, вошедших вместе, появляется по очереди (шаг 90 мс);
                  своя задержка — style="--rd:.2s". НЕ вешай .reveal и .bob на один элемент (оба двигают transform) — оберни.
   .bob           покачивание 3D: translateY 0 → −6 px → 0, 4.2 s, задержка style="--d:.6s".
   .wa-pop        пузырь у круглой WhatsApp-кнопки панели (разметка в parts/tail.html, логика в site.js).
   ===================================================================== */
.hint {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  height: 32px; padding: 0 12px 0 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font: 600 13.5px/1 var(--sans); color: var(--ink); white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.hint::after, .hint--tap::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--hint-i) center / 16px 16px no-repeat; mask: var(--hint-i) center / 16px 16px no-repeat;
}
.hint {
  --hint-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.hint::after { animation: hint-nudge 2.4s ease-in-out infinite; }
.hint--tap {
  padding: 0 14px 0 10px;
  --hint-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-4 0'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-4 0v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-4 0v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
}
.hint--tap::after { content: none; animation: none; }
.hint--tap::before { transform-origin: 50% 70%; animation: hint-pulse 1.6s ease-in-out infinite; }
.hint.is-seen::after, .hint.is-seen::before { animation: none; }
@keyframes hint-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(5px); } }
@keyframes hint-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* строка «заголовок … подсказка справа» над каруселью */
.hint-row { display: flex; justify-content: flex-end; margin: 0 0 8px; }

/* ---------- .arrows: круглые кнопки ‹ › по краям карусели ---------- */
.arrows { position: relative; }
.arrows__btn {
  position: absolute; z-index: 3; top: var(--arrows-top, calc(50% - 34px));
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent; transition: opacity .2s ease, visibility 0s linear 0s;
}
.arrows__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.arrows__btn--prev, [data-carousel-prev].arrows__btn { left: -12px; }
.arrows__btn--next, [data-carousel-next].arrows__btn { right: -12px; }
.arrows__btn.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.arrows__btn:active { transform: scale(.96); }

/* ---------- .reveal: появление один раз (класс js-rv ставит скрипт в <head>) ---------- */
.js-rv .reveal { transition: opacity .5s ease, transform .5s ease; transition-delay: var(--rd, 0s); }
.js-rv .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 14px, 0); }

/* ---------- .bob: покачивание 3D ---------- */
.bob { animation: bob 4.2s ease-in-out var(--d, 0s) infinite both; }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }

/* ---------- .wa-pop: пузырь над круглой WhatsApp-кнопкой панели ---------- */
.wa-pop {
  position: absolute; right: 12px; bottom: calc(100% + 4px);
  display: flex; align-items: center; gap: 0;
  width: max-content; max-width: min(272px, calc(100vw - 24px));
  padding: 4px 2px 4px 16px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.wa-pop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s; }
.wa-pop::after {        /* хвостик к центру круглой кнопки (56 px) */
  content: ""; position: absolute; right: 21px; bottom: -7px; width: 14px; height: 14px;
  background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}
.wa-pop__link {
  display: block; min-height: 44px; padding: 10px 0 9px;   /* block, а не flex: иначе слово «WhatsApp» уезжает от фразы */
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; text-wrap: balance;
}
.wa-pop__link b { color: #128C4B; }
.wa-pop__x {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wa-pop__x svg { width: 18px; height: 18px; }

/* =====================================================================
   РАУНД 6 (вторые правки Лизы: «движения всё ещё маловато») — общие механики. Делает A, B пользуется по имени.
   .btn.is-shine  блик на главной кнопке: узкая светлая полоса пробегает слева направо раз в 6 с.
                  Класс ставит site.js ОДНОЙ кнопке за раз — той оранжевой .btn, что сейчас в кадре (IntersectionObserver,
                  ≥ 60 % кнопки видно); если в кадре нет ни одной — кнопке закреплённой панели (когда она в полном виде).
                  .btn--wa не блестит.
   .shine         любой другой элемент с тем же бликом (например, карточка лучшего тарифа у B): добавь класс shine —
                  site.js включает его по тем же правилам (один блик на экране). Элемент должен иметь border-radius;
                  position: relative ему ставится здесь с нулевой специфичностью (:where), свои правила B сильнее.
   [data-count]   счётчик (блок 4): число «набегает» с нуля до значения за 1,2 с один раз при первом появлении;
                  в HTML — итоговый текст дословно; без JS и при reduce-motion сразу итоговое.
   «выглядывание» каруселей блоков 2, 4w, 6 — только site.js (WAAPI, один раз, не при reduce и не если уже листали).
   Искры первого экрана — .hero__spark (выше, в блоке 1).
   ===================================================================== */
.btn, :where(.shine) { position: relative; isolation: isolate; }
.btn.is-shine::after, .shine.is-shine::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 56%) 90% 0 / 300% 100% no-repeat;
  animation: btn-shine 6s ease-in-out .5s infinite;
}
@keyframes btn-shine { 0% { background-position: 90% 0; } 24%, 100% { background-position: 10% 0; } }

/* ---------- reduce motion: выключаем ВСЕ анимации страницы (и у B тоже) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js-rv .reveal, .js-rv .reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .wa-pop, .arrows__btn { transition: none; }
}


/* ---------- План Б: плашка «Напиши мне в WhatsApp» под первым блоком (показывает site.js) ---------- */
.pb-wa { padding: 4px 20px 26px; background: var(--sky-1); }
.pb-wa[hidden] { display: none; }
.pb-wa__card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 18px 18px 16px; border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pb-wa__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 8px 16px -8px rgba(18, 140, 75, .6); }
.pb-wa__ic svg { width: 30px; height: 30px; }
.pb-wa__t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.pb-wa__p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.pb-wa__btn { grid-column: 1 / -1; margin-top: 12px; }

/* =====================================================================
   РАУНД 9 — АДАПТАЦИЯ: планшет 768–1023 и десктоп ≥ 1024 (исполнитель A: каркас + блоки 1–6).
   Телефон (≤ 767 px) НЕ меняется: всё ниже — только внутри @media (min-width: 768px) / (min-width: 1024px).

   КАРКАС (общий, B пользуется им же):
     .page      на ≥ 768 — во всю ширину окна, без рамки и тени; каждая .blk — на всю ширину (фон неба до краёв окна).
     --pad-x    боковое поле секции = max(var(--gut), calc((100% - 1120px) / 2)) → содержимое в контейнере до 1120 px.
                --gut: 32 px на планшете, 48 px на десктопе. .blk уже получает padding-inline: var(--pad-x);
                если у своей секции задаёшь padding шорткатом на id — допиши padding-inline: var(--pad-x).
     --wrap     1120px (ширина контейнера), --measure 36em (комфортная строка ≈ 60–72 знака).
     Типографика ≥ 1024: .blk__title Prata 44 px, .blk__lead 18 px (≤ 36em); на планшете 36 / 17 px.
     .cta       на ≥ 768 — кнопка не шире 360 px, по центру своего блока.
     Небо (.bg-hero/.bg-section/.bg-warm/.bg-golden ::before) на ≥ 768 — на всю секцию от края до края (cover), без полосы слева.
     .sticky-cta на ≥ 768 — кнопка по центру, ширина до 560 px, круглая WhatsApp справа от неё.
   ===================================================================== */
@media (min-width: 768px) {
  :root { --gut: 32px; --wrap: 1120px; --measure: 36em; --pad-x: max(var(--gut), calc((100% - var(--wrap)) / 2)); }
  .page { max-width: none; box-shadow: none; }
  .blk, .pb-wa { padding-inline: var(--pad-x); }

  /* ошибка неба: aspect-ratio + max-height сжимали картинку в полосу ~390 px у левого края → на всю секцию, cover */
  .bg-hero::before, .bg-section::before, .bg-warm::before, .bg-golden::before {
    bottom: 0; width: auto; height: auto; aspect-ratio: auto; max-height: none;
    background-position: center top; background-size: cover;
  }

  .blk__title { font-size: 36px; max-width: 22em; margin-inline: auto; }
  .blk__lead { max-width: var(--measure); font-size: 17px; }
  .cta { max-width: 360px; }

  /* закреплённая панель: кнопка по центру (до 560 px), WhatsApp — справа от неё */
  .sticky-cta { max-width: 560px; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
  .sticky-cta__wa { position: absolute; left: calc(100% + 12px); bottom: calc(16px + env(safe-area-inset-bottom)); margin-left: 0; }
  .wa-pop { right: -68px; }
}
@media (min-width: 1024px) {
  :root { --gut: 48px; }
  .blk__title { font-size: 44px; margin-bottom: 18px; }
  .blk__lead { font-size: 18px; margin-bottom: 32px; }
}

/* ---------- Раунд 9 · БЛОКИ 1–6 на планшете (768–1023) ----------
   Одна колонка по центру, как на телефоне, но просторнее: панель неба до 560 px, Эрика крупнее,
   плитки первого экрана — 4 в ряд; карусели показывают по 2 карточки; стрелки — за краем карточек. */
@media (min-width: 768px) {
  /* блок 1 */
  #b1 { padding-inline: var(--pad-x); }
  .hero__stage { --ph: 440px; --ih: 920px; --pop: 44px; max-width: 560px; margin: calc(var(--pop) + 28px) auto 0; }
  .hero__sheet { padding: 16px 0 64px; }
  .hero__title { max-width: 640px; margin-inline: auto; font-size: 44px; }
  .hero__title-sub { max-width: 540px; margin-inline: auto; font-size: 22px; }
  .hero__sub { max-width: 30em; font-size: 18px; }
  .hero__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .hero__tile { min-height: 72px; font-size: 15px; }
  .video-card { max-width: 640px; margin: 24px auto 0; }
  /* искры — у головы, пропорционально высоте холста вырезки (на телефоне: 128/100/120 px от оси при холсте 693 px) */
  .hero__spark--1 { left: calc(50% - var(--ih) * .185); top: calc(var(--ih) * .1135 - var(--pop) - 9px); width: 22px; height: 22px; }
  .hero__spark--2 { left: calc(50% + var(--ih) * .144); top: calc(var(--ih) * .076 - var(--pop) - 7px); width: 17px; height: 17px; }
  .hero__spark--3 { left: calc(50% + var(--ih) * .173); top: calc(var(--ih) * .199 - var(--pop) - 6px); width: 14px; height: 14px; }
  .pb-wa { padding-bottom: 32px; }
  .pb-wa__card { max-width: 640px; margin-inline: auto; }

  /* общие стрелки каруселей: за краем ленты, не на тексте карточки */
  .arrows__btn--prev, [data-carousel-prev].arrows__btn { left: -22px; }
  .arrows__btn--next, [data-carousel-next].arrows__btn { right: -22px; }

  /* блок 2: 2 карточки в кадре, одной высоты (лента растягивает) */
  .b2__track { gap: 20px; }
  .b2__track .carousel__card { flex: 0 0 calc((100% - 20px) / 2); }
  .sit__ph, .sit__dio { height: 220px; }
  #b2 .arrows { --arrows-top: 116px; }   /* середина фото: 16 + 12 + 110 − 22 */
  .sit__p { font-size: 16px; }

  /* блок 3: арки и регалии друг под другом, крупнее */
  .b3__pair { max-width: 560px; gap: 20px; }
  .b3__arch { height: 360px; }
  .b3__cap { font-size: 16px; }
  .b3__list { max-width: 560px; padding: 22px 26px 22px 24px; }
  .b3__list > li { font-size: 16px; }

  /* блок 4: «3 млн+» по центру, пруфы в 2 колонки одной высоты, итог — на всю ширину контейнера */
  .b4__sellers { width: 100%; max-width: 720px; margin-inline: auto; padding: 28px 32px; }
  .b4__s1 { max-width: 34em; margin-inline: auto; font-size: 17px; }
  .b4__proofs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .b4__proof { display: flex; flex-direction: column; }
  .b4__shot { flex: 1 1 auto; display: flex; align-items: center; }
  .b4__cap { font-size: 13px; }
  .b4__s2 { max-width: var(--measure); margin-inline: auto; font-size: 17px; }
  .b4__pay { grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; padding: 22px 32px 22px 36px; }
  .b4__pay p { font-size: 21px; }
  .b4__money img { width: 150px; height: 104px; }

  /* блок 4w: 2 карточки в кадре */
  .b4w__rail .carousel { gap: 20px; }
  .b4w__rail .carousel__card { flex-basis: calc((100% - 20px) / 2); }
  .b4w__h { font-size: 28px; }
  .b4w__p { max-width: 30em; font-size: 17px; }
  .way__p { font-size: 16px; }

  /* блок 5: одна колонка, плашки до 560 px */
  .b5__g { max-width: 560px; }
  .b5__g p { font-size: 17px; }
  .b5__big { white-space: nowrap; }   /* «вернём 100% денег» одной строкой — без наложения на «Гарантия 7 дней.» */
  .b5__panel { width: 100%; max-width: 560px; margin-inline: auto; }
  .b5__row p { font-size: 16px; }

  /* блок 6: макеты — 2 в кадре, зона макета одной высоты (макет целиком, contain) */
  .b6__track { align-items: stretch; gap: 20px; }
  .b6__track .carousel__card { flex-basis: calc((100% - 20px) / 2); }
  .feat__media { display: grid; place-items: center; height: 240px; padding: 8px; }
  .feat__media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }   /* min-height: 0 — иначе WebKit растит img-элемент сетки до натуральной высоты и макет платформы налезал на текст */
  .feat__p { font-size: 16px; }
  #b6 .arrows { --arrows-top: 108px; }   /* середина зоны макета: 4 + 6 + 120 − 22 */
  .feat__media--art { padding: 2px; }
  .b6__track::after { display: none; }   /* 2–3 в кадре: последний шаг «назад/вперёд» доходит до края ленты */
  .feat__art--ava { --D: 200px; }
  .b6__ip { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 880px; margin: 20px auto 0; padding: 20px 36px; justify-items: start; text-align: left; }
  .b6__ip-phones { width: 220px; height: 184px; }
  .b6__ip-t { font-size: 28px; }
  .b6__ip-p { max-width: 30em; font-size: 17px; }
}

/* ---------- Раунд 9 · БЛОКИ 1–6 на десктопе (≥ 1024) ---------- */
@media (min-width: 1024px) {
  /* блок 1: две колонки 50/50 — слева панель неба с Эрикой (600 px, голова над панелью, лицо по оси панели),
     справа плашка, оффер, подоффер, кнопка и три пункта (по центру колонки); ниже — 4 плитки в ряд и видео 16:9 до 720 px.
     .hero__sheet раскрыт (display: contents), его части — ячейки сетки секции. Строки 1 и 6 — пружины 1fr:
     правая колонка встаёт по вертикали в середину панели. */
  #b1 {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr auto auto; column-gap: 56px;
    padding: 96px var(--pad-x) 80px;
  }
  .hero__sheet { display: contents; }
  .hero__stage { --ph: 600px; --ih: 1260px; --pop: 52px; grid-column: 1; grid-row: 1 / 7; width: 100%; max-width: none; margin: 0; }
  .hero__eyebrow { grid-column: 2; grid-row: 2; max-width: 100%; margin: 0 auto; font-size: 15px; }
  .hero__title { grid-column: 2; grid-row: 3; max-width: none; margin: 16px 0 0; font-size: clamp(52px, 3.9vw, 58px); }
  .hero__title-sub { max-width: 30em; margin-top: 18px; font-size: 22px; }
  .hero__sub { grid-column: 2; grid-row: 4; margin: 18px auto 0; font-size: 18px; }
  #b1 .cta { grid-column: 2; grid-row: 5; width: 100%; margin: 24px auto 0; }
  .hero__chips { grid-column: 1 / -1; grid-row: 7; gap: 16px; margin-top: 64px; }
  .hero__tile { min-height: 80px; padding: 12px 16px 12px 14px; gap: 12px; font-size: 16px; }
  .hero__tile img { width: 48px; height: 48px; }
  .video-card { grid-column: 1 / -1; grid-row: 8; width: 100%; max-width: 720px; justify-self: center; margin: 24px 0 0; }
  .hero__glow { animation: none; }   /* на широком экране в кадре и видео с кольцом: движений не больше 6 */

  /* блок 2: 3 карточки в кадре */
  .b2__track { gap: 24px; }
  .b2__track .carousel__card { flex-basis: calc((100% - 48px) / 3); }

  /* блок 3: арки крупнее слева, регалии-плашка справа */
  #b3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  #b3 > .blk__title, #b3 > .cta { grid-column: 1 / -1; }
  .b3__pair { grid-column: 1; grid-row: 2; max-width: none; margin: 16px 0 0; gap: 24px; }
  .b3__arch { height: 420px; }
  .b3__list { grid-column: 2; grid-row: 2; max-width: 480px; margin: 16px 0 0; padding: 26px 30px 26px 28px; }
  .b3__list > li { font-size: 17px; }
  #b3 .cta { margin-top: 40px; }

  /* блок 4w: 3 карточки в кадре */
  .b4w__rail .carousel { gap: 24px; }
  .b4w__rail .carousel__card { flex-basis: calc((100% - 48px) / 3); }

  /* блок 5: щит слева, текст и способы оплаты справа; кнопка под обеими колонками */
  #b5 {
    min-height: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    column-gap: 64px; align-items: center; padding-bottom: 64px;
  }
  #b5 > .blk__title { grid-column: 1 / -1; grid-row: 1; }
  .b5__stage { grid-column: 1; grid-row: 2 / 5; width: 400px; height: 320px; margin: 0 auto; }
  .b5__shield { left: 10px; width: 256px; height: 310px; }
  .b5__seal { width: 120px; height: 120px; }
  .b5__seal-n { font-size: 52px; }
  .b5__seal-d { font-size: 17px; }
  .b5__g { grid-column: 2; grid-row: 2; width: 100%; max-width: 540px; margin: 8px 0 16px; }
  .b5__g p { font-size: 17px; }
  .b5__big { font-size: 22px; }
  .b5__panel { grid-column: 2; grid-row: 3; max-width: 540px; margin: 0; }
  .b5__pay { grid-column: 2; grid-row: 4; align-items: flex-start; margin-top: 22px; text-align: left; }
  .b5__chips { justify-content: flex-start; }
  #b5 > .cta { grid-column: 1 / -1; grid-row: 5; margin-top: 40px; }

  /* блок 6: 3 слайда из 8 в кадре — стрелки, точки, счётчик и «листай» нужны (раунд 10) */
  .b6__track { gap: 24px; }
  .b6__track .carousel__card { flex-basis: calc((100% - 48px) / 3); }
  .feat__media { height: 260px; }
  #b6 .arrows { --arrows-top: 118px; }   /* середина зоны макета: 4 + 6 + 130 − 22 */
  .feat__art--ava { --D: 214px; }
}

/* Высота экрана для расчётов в переменных: svh есть не везде (iOS до 15.4, старые Android), там берём vh */
:root { --vh100: 100vh; }
@supports (height: 100svh) { :root { --vh100: 100svh; } }

/* =====================================================================
   ПРАВКИ ЛЁШИ 01.10 (вечер): видео крупнее и красный акцент; плашка плана Б ровнее
   ===================================================================== */
/* Видео: срезаем поля постера (≈3 %), на телефоне карточка на всю ширину экрана; меньше пустоты до «Для кого подойдёт» */
/* 01.10 19:30 (Лёша): видео не на весь экран, а карточкой с полями слева и справа; слайд и Эрика — одним кадром без шва */
.video-card { aspect-ratio: 1160 / 613; }
.video-card img { transform: none; }
@media (max-width: 767px) {
  .video-card { width: calc(100% + 8px); max-width: none; margin-inline: -4px; border-radius: 20px; box-shadow: 0 14px 30px -14px rgba(31, 42, 51, .45), 0 0 0 1px rgba(31, 42, 51, .08); }
  #b1 { padding-bottom: 0; }
}
#b2 { padding-top: 40px; }
/* «Не проглядели»: красный круг play и красная плашка «Нажми, чтобы посмотреть» (просьба Лёши обвести красным) */
.video-card__play { box-shadow: 0 0 0 4px #E5362B, 0 10px 22px -8px rgba(31, 42, 51, .45); }
.video-card__ring { background: rgba(229, 54, 43, .55); }
.hint.hint--dark.video-card__hint { background: #D92D20; border-color: rgba(255, 255, 255, .85); color: #fff; box-shadow: 0 10px 22px -8px rgba(217, 45, 32, .65); }
/* Плашка «Напиши Эрике» (план Б): без отдельной голубой полосы со швами, на десктопе одной строкой */
.pb-wa { background: #fff; padding-top: 6px; padding-bottom: 22px; }
.pb-wa__card { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.pb-wa__ic { width: 56px; height: 56px; }
html.emc-on .pb-wa__btn { background: var(--ink); color: #fff; border: 0; box-shadow: 0 10px 22px -10px rgba(31, 42, 51, .5); }
@media (min-width: 768px) {
  .pb-wa__card { grid-template-columns: 64px minmax(0, 1fr) auto; max-width: 880px; padding: 20px 24px; column-gap: 18px; }
  .pb-wa__ic { width: 64px; height: 64px; }
  .pb-wa__btn { grid-column: auto; margin-top: 0; width: auto; min-width: 220px; }
  .pb-wa__t { font-size: 26px; }
  .pb-wa__p { font-size: 16px; }
}

/* =====================================================================
   ПРАВКИ ЛЁШИ 01.10 (раунд 11): блок 6 — робот у «Готовых команд для ИИ», утверждённый сертификат, набор подарков с
   видимым списком бонусов, три разных iPhone. Всё внутри уже существующих слайдов .feat; старые правила выше не тронуты.
   ===================================================================== */
/* ИИ: 3D-робот с «нейромозгом» (assets/l5/robot-ai.webp, прозрачный фон) на всю высоту подложки, лёгкая тень */
.feat__art--ai { background: radial-gradient(ellipse at 50% 46%, #fff 0, var(--sky-0) 58%, var(--sky-1) 100%); }
.feat__media .feat__art--ai img { left: 0; top: 6px; width: 100%; height: calc(100% - 16px); object-fit: contain; filter: drop-shadow(0 7px 9px rgba(31, 42, 51, .17)); }

/* Сертификат: дословный кадр из презентации (1100 × 972), подложка без полей и по пропорции картинки; фон = край картинки */
.feat__media.feat__media--cert { display: block; height: auto; aspect-ratio: 1100 / 972; padding: 0; overflow: hidden; background: #F5F7F6; }
.feat__media.feat__media--cert img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Бонусные уроки: набор подарков по центру подложки (большой подарок, звёзды, стопка коробок, искры) */
.feat__art--gift { background: radial-gradient(circle at 50% 56%, #fff 0, var(--peach-2) 52%, var(--peach) 100%); }
.feat__media .feat__g { position: absolute; width: auto; height: auto; min-height: 0; max-width: none; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(160, 90, 40, .22)); }
.feat__media .feat__g--main { left: 50%; top: 6%; height: 88%; transform: translateX(-50%); }
.feat__media .feat__g--stars { left: 7%; top: 8%; height: 40%; }
.feat__media .feat__g--box { right: 8%; bottom: 8%; height: 42%; }
.feat__sp { position: absolute; display: block; fill: var(--gold); }
.feat__sp--a { right: 24%; top: 12%; width: 20px; height: 20px; }
.feat__sp--b { left: 17%; bottom: 14%; width: 14px; height: 14px; fill-opacity: .8; }
.feat__sp--c { right: 6%; top: 42%; width: 11px; height: 11px; fill-opacity: .7; }
/* список бонусов виден сразу: две подгруппы с подписями; подложка слайда ниже обычной (композиция «набор подарков» шире, чем выше),
   шрифт списка 14 px на всех ширинах — чтобы слайд не вырос втрое против соседей */
.feat--les .feat__media--art { height: 140px; }
.feat--les .feat__txt { padding-top: 10px; }
.feat--les .feat__txt > .more { margin-top: 0; }
.feat--les .more > summary { min-height: 38px; }
.feat__bon { margin-right: -8px; padding: 0 0 2px; }   /* на 8 px шире текстовой колонки: «…поднимать чек» не рвётся на 358 px */
.feat__bt { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.feat__bon > .feat__bt ~ .feat__bt { margin-top: 10px; }
.feat__bl { margin: 3px 0 0; padding: 0; list-style: none; }
.feat__bl li { position: relative; padding-left: 15px; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.feat__bl li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); }
@media (min-width: 768px) { .feat--les .feat__media--art { height: 150px; } }
@media (min-width: 1024px) { .feat--les .feat__media--art { height: 160px; } }

/* =====================================================================
   Меню в правом верхнем углу (Лёша 01.10, голосовое 19:26): быстрый переход по блокам
   ===================================================================== */
.topnav { position: fixed; z-index: 45; top: calc(10px + env(safe-area-inset-top)); right: 12px; }
.topnav__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid rgba(31, 42, 51, .1); border-radius: 22px; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(31, 42, 51, .45); font: 600 15px/1 var(--sans, 'Raleway', sans-serif); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topnav__btn:focus-visible { outline: 3px solid var(--azure-sm); outline-offset: 2px; }
.topnav__bars { position: relative; display: block; width: 18px; height: 14px; }
.topnav__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .18s ease, top .22s ease; }
.topnav__bars i:nth-child(1) { top: 0; }
.topnav__bars i:nth-child(2) { top: 6px; }
.topnav__bars i:nth-child(3) { top: 12px; }
.topnav.is-open .topnav__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.topnav.is-open .topnav__bars i:nth-child(2) { opacity: 0; }
.topnav.is-open .topnav__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.topnav__lbl { display: none; }
.topnav__panel {
  position: absolute; top: 54px; right: 0; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 8px; border-radius: 20px; background: #fff; border: 1px solid rgba(31, 42, 51, .08);
  box-shadow: 0 24px 48px -18px rgba(31, 42, 51, .5);
  transform-origin: top right; animation: topnav-in .18s ease-out;
}
.topnav__panel[hidden] { display: none; }
.topnav__panel a { display: block; padding: 13px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 600 16px/1.25 var(--sans, 'Raleway', sans-serif); }
.topnav__panel a:hover, .topnav__panel a:focus-visible { background: var(--sky-0); }
.topnav__panel a[href="#tariffs"] { color: #C9531A; }
.topnav__panel a.topnav__sm { padding: 10px 14px; font-weight: 500; font-size: 14px; color: #55636E; }
.topnav__sep { display: block; height: 1px; margin: 6px 12px; background: rgba(31, 42, 51, .1); }
@keyframes topnav-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .topnav { top: 16px; right: 24px; } .topnav__lbl { display: inline; } .topnav__btn { padding: 0 18px 0 14px; } }
@media (prefers-reduced-motion: reduce) { .topnav__panel { animation: none; } .topnav__bars i { transition: none; } }

/* Лёша 01.10 (видео IMG_3423): три слайда макетов — ОДИНАКОВОГО размера, «как платформа»: общая зона 1100 × 1000, видеоурок
   (2:1) не вполовину, а крупно на всю зону (обрезка по бокам, остаются монитор, Эрика, телефон); стрелки — по середине зоны */
@media (max-width: 767px) {
  .feat__media--mock { display: grid; place-items: center; aspect-ratio: 1100 / 1000; }
  .feat__media--mock img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
  #b6 .arrows { --arrows-top: calc(((min(100vw, 480px) - 40px) * .9 - 12px) * .4545 - 12px); }
}
.feat--vi .feat__media--mock img { object-fit: cover; object-position: 100% 50%; }

/* Лёша/Никита 01.10: плашка вопросов — внутри блока тарифов, на его золотом фоне, без своей белой полосы со швами */
#tariffs .pb-wa { padding: 0; background: none; margin-top: 28px; }

/* Лёша 01.10 22:22: в меню нет «Условия» и «Политика»; после «Как оплатить» пункт «Смотреть видео» (открывает ролик) */
.topnav__panel .topnav__video {
  display: block; width: 100%; margin: 0; padding: 13px 14px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  color: var(--ink); font: 600 16px/1.25 var(--sans, 'Raleway', sans-serif); -webkit-tap-highlight-color: transparent;
}
.topnav__panel .topnav__video:hover, .topnav__panel .topnav__video:focus-visible { background: var(--sky-0); }

/* Никита 02.10: видео — отдельный блок между «Думаешь, не потянешь» и «Как оплатить»; без лишнего воздуха сверху */
#bvideo { padding-top: 6px; padding-bottom: 22px; }
#bvideo .video-card { margin-top: 0; }
/* на планшете и десктопе карточка видео — по центру блока (раньше стояла в сетке первого экрана и прижималась влево) */
@media (min-width: 768px) { #bvideo .video-card { margin-inline: auto; width: 100%; max-width: 820px; } }

/* круглая кнопка чата гаснет, пока закрыла бы кнопку оплаты (см. site.js, «не закрывает кнопки») */
#sticky-cta-wa { transition: opacity .18s ease, transform .18s ease; }
#sticky-cta-wa.is-over-cta { opacity: 0 !important; pointer-events: none !important; transform: scale(.9); }