/* ============================================================
   X20 STRATEGY — landing
   Палитра: холодный светлый фон + графит, акцент бирюза→циан,
   CTA — контрастный малиновый
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* фон / поверхности */
  --bg:       #FFFFFF;
  --bg-soft:  #EFF4F5;   /* ледяной светло-серый с зеленоватой нотой */
  --bg-soft2: #E4EDEE;
  --surface:  #FFFFFF;

  /* чернила */
  --ink:      #111C1C;
  --ink-2:    #46595A;
  --ink-3:    #77898A;
  --ink-4:    #A6B4B5;

  /* акценты — бирюза */
  --teal:     #0D9488;
  --teal-d:   #0F766E;
  --teal-l:   #14B8A6;
  --cyan:     #06B6D4;

  /* CTA — малиновый, намеренно контрастирует с гаммой */
  --cta:      #E11D48;
  --cta-d:    #BE123C;

  /* биржевые */
  --emerald:  #059669;
  --emerald-l:#10B981;
  --rose:     #E11D48;

  /* производные */
  --grad-accent: linear-gradient(120deg, #06B6D4 0%, #0D9488 52%, #0F766E 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(6,182,212,.12) 0%, rgba(13,148,136,.12) 100%);
  --line:   rgba(17, 28, 28, .10);
  --line-2: rgba(17, 28, 28, .06);

  --glass-bg: rgba(255, 255, 255, .70);
  --glass-br: rgba(255, 255, 255, .88);
  --shadow-sm: 0 2px 8px -2px rgba(17, 28, 28, .08);
  --shadow-md: 0 12px 32px -12px rgba(17, 28, 28, .16);
  --shadow-lg: 0 28px 64px -24px rgba(17, 28, 28, .22);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* ЕДИНАЯ ширина контента для всех блоков ниже шапки.
     Никаких индивидуальных max-width у абзацев, врезок и схем — всё по этой мере. */
  --container: 1180px;
  --col: 920px;
  --pad: 24px;

  --font-head: 'Manrope', 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. База ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  position: relative;   /* система координат для фонового слоя .bg */
  margin: 0;
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 26%, #FFFFFF 58%, var(--bg-soft) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}

/* Единая колонка контента: одна ширина на все блоки ниже шапки.
   Шапка — единственное исключение, у неё своя широкая сетка (.hero .container). */
.container {
  width: 100%;
  max-width: calc(var(--col) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 2;
}

/* ---------- 3. Фон: два независимых слоя ----------
   .bg--hero  — только под шапкой: плотнее, свои SVG (кольца + лучи), своя карта пятен.
   .bg--page  — под всем остальным: спокойнее, свои SVG (волны + сетка),
                пятна вынесены к левому/правому краям, за пределы колонки текста.
   Оба слоя лежат под контентом и ничем не обрезаются. */
.bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* .bg--hero живёт внутри .hero и рисует графику только там.
   .bg--page лежит под всей страницей, но его собственная графика (волны, точки,
   пятна) стартует ниже шапки — за это отвечает отступ .bg__layer. */
.bg__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--start, 0);
  bottom: 0;
}

/* --- SVG-графика шапки: кольца + расходящиеся лучи --- */
.bg__rings {
  position: absolute;
  top: -140px;
  right: -140px;
  width: 540px;
  height: 540px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' fill='none' stroke='%230d9488' stroke-opacity='0.24' stroke-width='1.4'%3E%3Ccircle cx='250' cy='250' r='90'/%3E%3Ccircle cx='250' cy='250' r='150'/%3E%3Ccircle cx='250' cy='250' r='210'/%3E%3Ccircle cx='250' cy='250' r='248'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* плотная точечная сетка — только в шапке */
.bg__dots {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.3' cy='1.3' r='1.3' fill='%23111c1c' fill-opacity='0.16'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 78%);
}
/* диагональная штриховка — полосой по всему низу шапки.
   Две половины зеркальны: слева линии идут «/», справа «\» (второй слой перевёрнут
   по горизонтали через scaleX(-1)). Обе гуще у краёв и растворяются к центру,
   чтобы не лезть под кнопку и текст. */
.bg__hatch {
  position: absolute;
  left: 0;
  right: 50%;
  bottom: -40px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%230d9488' stroke-opacity='0.18' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%),
    linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%),
    linear-gradient(180deg, transparent 0%, #000 55%);
  -webkit-mask-composite: source-in;   /* WebKit: пересечение двух масок */
          mask-composite: intersect;   /* стандарт: то же самое */
}
/* зеркальная половина справа */
.bg__hatch--r {
  left: 50%;
  right: 0;
  transform: scaleX(-1);
}

/* --- SVG-графика остального сайта: мягкие волны по краям ---
   Тайл 240×80 с ОДНОЙ волной: полный период укладывается ровно в ширину тайла,
   а начало и конец кривой лежат на одной высоте (y=40) с одинаковым наклоном.
   Поэтому плитки стыкуются бесшовно и по горизонтали, и по вертикали —
   в прошлой версии тайл 260×260 с тремя волнами давал излом на каждом стыке. */
.bg__waves {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80' fill='none' stroke='%23816ef7' stroke-opacity='0.15' stroke-width='1.2'%3E%3Cpath d='M0 40 C 30 8, 90 8, 120 40 C 150 72, 210 72, 240 40'/%3E%3C/svg%3E");
  background-size: 240px 80px;
  /* видно только у левого и правого краёв — центр, где текст, остаётся чистым */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
  opacity: .8;
}
/* редкие точки на остальной странице — тише, чем в шапке */
.bg__specks {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23816ef7' fill-opacity='0.18'/%3E%3Ccircle cx='30' cy='34' r='1.1' fill='%2306b6d4' fill-opacity='0.16'/%3E%3C/svg%3E");
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
}

/* Контейнер пятен ограничен по ширине и центрирован: он лишь немного шире колонки
   контента. Проценты в --off считаются от НЕГО, а не от всего окна, поэтому на
   сверхшироком мониторе пятна остаются у краёв текста и обрамляют его,
   а не разъезжаются к рамкам экрана, оставляя центр пустым. */
.bg__blobs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(var(--container) + 420px);
}

/* мягкие цветные пятна.
   Позиция задаётся в разметке: --edge (l|r) прижимает к краю, --y — высота, --s — размер.
   Пятна намеренно вынесены за колонку контента, чтобы не подсвечивать текст снизу. */
/* Ареолы намеренно широкие (градиент тянется до 85%), а насыщенность низкая —
   пятно читается как мягкое свечение, а не как цветное «облако». */
.blob {
  position: absolute;
  top: var(--y);
  width: var(--s, 520px);
  height: var(--s, 520px);
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  will-change: transform;
}
.blob--l { left:  var(--off, -8%); }
.blob--r { right: var(--off, -8%); }

.blob--teal   { background: radial-gradient(circle, rgba(13,148,136,.42),  rgba(13,148,136,0)  85%); }
.blob--cyan   { background: radial-gradient(circle, rgba(6,182,212,.38),   rgba(6,182,212,0)   85%); }
.blob--mint   { background: radial-gradient(circle, rgba(20,184,166,.34),  rgba(20,184,166,0)  85%); }
.blob--indigo { background: radial-gradient(circle, rgba(129,110,247,.30), rgba(129,110,247,0) 85%); }
.blob--rose   { background: radial-gradient(circle, rgba(244,63,94,.24),   rgba(244,63,94,0)   85%); }

@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, -30px, 0) scale(1.08); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-30px, 22px, 0) scale(1.06); }
}
.blob--a { animation: float-a 18s ease-in-out infinite; }
.blob--b { animation: float-b 22s ease-in-out infinite; }

/* ---------- 4. Стекло ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-br);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-lg);
}

/* ---------- 5. Кнопки — малиновая «пилюля» ---------- */
.btn {
  --btn-py: 15px;
  --btn-px: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease,
              background .24s ease, color .24s ease, border-color .24s ease;
}
/* размер иконки задаём здесь: в flex-контейнере SVG без width раздувается */
.btn svg { flex: none; width: 20px; height: 20px; transition: transform .22s cubic-bezier(.2,.8,.2,1); }

.btn--primary {
  color: #fff;
  background: var(--cta);
  border-color: var(--cta);
  box-shadow:
    0 14px 30px rgba(225,29,72,.34),
    0 6px 14px rgba(225,29,72,.24);
  animation: ctaGlow 2.6s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 14px 30px rgba(225,29,72,.34), 0 6px 14px rgba(225,29,72,.24); }
  50%      { box-shadow: 0 18px 40px rgba(225,29,72,.48), 0 8px 18px rgba(225,29,72,.30); }
}
.btn--primary:hover {
  background: #fff;
  color: #000;
  border-color: var(--cta);
  transform: translateY(-3px);
  box-shadow:
    0 20px 42px rgba(225,29,72,.40),
    0 8px 18px rgba(225,29,72,.28);
  animation: none;
}
.btn--primary:hover svg { transform: translateX(4px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  color: var(--ink);
  background: rgba(255,255,255,.7);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: #fff; border-color: var(--ink-4); transform: translateY(-1px); }

.btn--lg { --btn-py: 19px; --btn-px: 44px; font-size: 20px; }
.btn--sm { --btn-py: 11px; --btn-px: 22px; font-size: 15px; }

/* ---------- 6. Чип / бейдж ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cta);
  box-shadow: 0 0 0 0 rgba(225,29,72,.55);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(225,29,72,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(225,29,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
}

/* ---------- 7. Появление при скролле ----------
   Убрано намеренно: при перезагрузке на середине страницы контент оставался
   невидимым, пока до него не доходила очередь наблюдателя. Класс .reveal
   в разметке оставлен, но ничего не скрывает. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   БЛОК 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 0 40px;
  /* глубокий сине-графитовый фон — нейтральный, чтобы бирюза и белый текст
     читались контрастно и премиально (не «зелёное на зелёном») */
  background: radial-gradient(125% 130% at 30% 12%, #17222E 0%, #101823 52%, #0A0F16 100%);
  color: #e6ebf0;
}
/* верхний тёмный фейд — гасит светлую бирюзовую засветку у самой кромки шапки,
   чтобы верх не выглядел «недополосой» */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  background: linear-gradient(180deg, #0A0F16 0%, rgba(10,15,22,.55) 42%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}
/* нижняя бирюзовая нить-шов — отбивает тёмную шапку от светлого блока ниже
   (сверху шапка стыкуется с шапкой-хедером, там нить не нужна) */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .8;
  z-index: 2;
}

.hero .container { max-width: 1280px; }

/* ---- тёмный фон шапки: штриховка, свечение, разбросанные свечи/крипто ---- */
.hero__hatch {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 58%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.12' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  /* маска плавная с ОБЕИХ сторон: у левого края штриховка мягко нарастает,
     к правой кромке (right:58%) так же мягко гаснет — вертикальных «бортов»
     ни слева, ни на стыке не видно */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, rgba(0,0,0,.4) 62%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, rgba(0,0,0,.4) 62%, transparent 100%);
}
.hero__hatch--r {
  left: 58%;
  right: 0;
  transform: scaleX(-1);
  opacity: .55;
}
.hero__glow {
  position: absolute;
  inset: -25% -10%;
  background:
    radial-gradient(560px 380px at 14% 18%, rgba(13,148,136,.24), transparent 70%),
    radial-gradient(600px 400px at 88% 74%, rgba(6,182,212,.16), transparent 72%);
}
/* Разбросанные японские свечи и крипто-знаки (₿ Ξ ₮) — «крипто-трейдинг» в фоне
   шапки, в духе визуала-стакана справа. Приглушённые, по краям (центр гасит маска),
   чтобы не спорить с текстом. */
.hero__decor {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='640'%3E%3Cg%3E%3Cline x1='74.5' y1='80' x2='74.5' y2='134' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='70' y='90' width='9' height='34' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='100.5' y1='58' x2='100.5' y2='132' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='96' y='70' width='9' height='50' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='144.5' y1='291' x2='144.5' y2='335' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='140' y='300' width='9' height='26' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='804.5' y1='109' x2='804.5' y2='171' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='800' y='120' width='9' height='40' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='832.5' y1='140' x2='832.5' y2='190' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='828' y='150' width='9' height='30' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='764.5' y1='418' x2='764.5' y2='488' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='760' y='430' width='9' height='46' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='124.5' y1='471' x2='124.5' y2='519' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='120' y='480' width='9' height='30' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='304.5' y1='552' x2='304.5' y2='592' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='300' y='560' width='9' height='24' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='844.5' y1='510' x2='844.5' y2='566' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='840' y='520' width='9' height='36' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='44.5' y1='231' x2='44.5' y2='277' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='40' y='240' width='9' height='28' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3Cline x1='624.5' y1='550' x2='624.5' y2='602' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='620' y='560' width='9' height='32' rx='2' fill='%235eead4' fill-opacity='0.85'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Ccircle cx='230' cy='140' r='13'/%3E%3Cpath d='M227 134 v12 M230 131 v3 M230 146 v3 M226 134 h6 a3 3 0 0 1 0 6 h-6 M226 140 h7 a3 3 0 0 1 0 6 h-7'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M171 371 h18 M180 371 v18'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Ccircle cx='720' cy='300' r='13'/%3E%3Cpath d='M717 294 v12 M720 291 v3 M720 306 v3 M716 294 h6 a3 3 0 0 1 0 6 h-6 M716 300 h7 a3 3 0 0 1 0 6 h-7'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M551 451 h18 M560 451 v18'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Ccircle cx='500' cy='600' r='13'/%3E%3Cpath d='M497 594 v12 M500 591 v3 M500 606 v3 M496 594 h6 a3 3 0 0 1 0 6 h-6 M496 600 h7 a3 3 0 0 1 0 6 h-7'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M351 241 h18 M360 241 v18'/%3E%3C/g%3E%3Ccircle cx='210' cy='110' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3Ccircle cx='770' cy='340' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3Ccircle cx='300' cy='470' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3Ccircle cx='500' cy='40' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3Ccircle cx='830' cy='470' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3Ccircle cx='90' cy='180' r='3.5' fill='%235eead4' fill-opacity='0.8'/%3E%3C/svg%3E");
  background-size: 900px 640px;
  background-repeat: repeat;
  opacity: .32;
  /* лёгкий провал по центру-слева (под заголовком), чтобы декор не спорил с текстом,
     но жил по всей остальной площади шапки */
  -webkit-mask-image: radial-gradient(46% 52% at 30% 40%, rgba(0,0,0,.15) 0%, #000 62%);
          mask-image: radial-gradient(46% 52% at 30% 40%, rgba(0,0,0,.15) 0%, #000 62%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  gap: 48px;
  align-items: center;
  padding-top: 18px;
  position: relative;   /* поверх фоновых слоёв шапки */
  z-index: 1;
}

/* ---- тёмная тема текста шапки (только внутри .hero) ---- */
/* мягкая тёмная подложка под текстом: гасит декор за буквами, держит контраст */
.hero__copy {
  position: relative;
  z-index: 0;
}
.hero__copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* левый край уводим далеко за пределы экрана (-50vw), чтобы вертикальной
     кромки затемнения у левого борта шапки не было видно */
  inset: -6% -8% -6% -50vw;
  background: radial-gradient(78% 82% at 34% 46%,
    rgba(10,15,22,.82) 0%,
    rgba(10,15,22,.6) 42%,
    rgba(10,15,22,.28) 66%,
    transparent 82%);
  pointer-events: none;
}
.hero__copy .chip {
  background: rgba(94,234,212,.08);
  border-color: rgba(94,234,212,.28);
  color: #bff0e8;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.6);
}
.hero__title-rest { color: #aeb9c6; }          /* нейтрально-серый подзаголовок */
.hero__list li { color: #9aa6b4; }             /* нейтрально-серое описание */
.hero__list b { color: #ffffff; }              /* белый акцент */
.hero__list .is-accent { color: #9aa6b4; }
.hero__list .is-accent .li__i {
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(6,182,212,.6);
}

.hero__title { margin: 0; }

/* крупная ударная строка */
.hero__title-lead {
  display: block;
  font-size: clamp(44px, 5.3vw, 72px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #f4fbfa;   /* светлый на тёмном фоне шапки */
}

/* продолжение — легче и мельче, чтобы заголовок не давил */
.hero__title-rest {
  display: block;
  margin-top: .38em;
  font-size: clamp(22px, 2.25vw, 31px);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.015em;
  color: #aeb9c6;   /* нейтрально-серый подзаголовок */
}

/* акцент: «делать «иксы»» — перелив по глубокой бирюзе, без движения */
.hero__title .hl {
  background: linear-gradient(100deg,
    #2dd4bf 0%,
    #14b8a6 22%,
    #22d3ee 42%,
    #38bdf8 52%,
    #2dd4bf 68%,
    #14b8a6 84%,
    #5eead4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* подчёркивание — только под словом «иксы», чтобы не свисало под «Д» */
.hero__title .hl__u {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
  text-decoration-color: rgba(45,212,191,.5);
}

/* --- преимущества: одна колонка по ходу текста, без плиток --- */
.hero__list {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 16px;
  line-height: 1.5;
  color: #9aa6b4;   /* нейтрально-серый — контраст с белым <b> даёт иерархию */
}
.hero__list b {
  color: #ffffff;   /* жирный акцент — белый */
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.015em;
}

.li__i {
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(45,212,191,.3), rgba(13,148,136,.22));
  border: 1px solid rgba(94,234,212,.55);
  color: #bff6ee;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.li__i svg { width: 20px; height: 20px; }

/* последний пункт — смысловой акцент */
.hero__list .is-accent .li__i {
  background: linear-gradient(135deg, var(--cyan), var(--teal-d));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(13,148,136,.75);
}
.hero__list .is-accent { color: #9aa6b4; }

/* Панель-подложка: матовое стекло вокруг кнопки и условий входа. Отбивает
   акцентную зону шапки от текста и группирует призыв к действию. */
/* панель: кнопка слева, условия входа — столбиком справа от неё; компактная,
   по содержимому, без лишней размашистости */
.hero__panel {
  margin-top: 30px;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(94,234,212,.06);
  border: 1px solid rgba(94,234,212,.18);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow:
    0 20px 50px -26px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.hero__cta {
  display: flex;
  align-items: center;
  flex: none;
}

/* условия входа — вертикальным столбиком справа от кнопки, с разделителем */
.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 1px solid rgba(94,234,212,.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.3;
  color: #9fb9b7;
}
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts svg { width: 16px; height: 16px; flex: none; color: #5eead4; }
.hero__facts b { color: #e6f4f2; font-weight: 700; }

/* ============================================================
   HERO — визуал (стакан + свечи)
   ============================================================ */
.hero__visual { position: relative; }

.viz {
  position: relative;
  padding: 22px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.viz:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg) translateY(-4px); }

.viz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.viz__pair {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);   /* тёмный на светлой карточке */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.viz__pair em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
}
.viz__bot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-d);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(13,148,136,.09);
  border: 1px solid rgba(13,148,136,.2);
}
.viz__bot svg { width: 13px; height: 13px; }

/* график: свечи между стенками */
.viz__chart {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(239,244,245,.75), rgba(255,255,255,.35));
  border: 1px solid var(--line-2);
}

/* стакан заявок */
.ob { margin-top: 16px; }
.ob__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  padding: 5px 9px;
  border-radius: 7px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
}
.ob__row span { position: relative; z-index: 2; }
.ob__row::before {          /* глубина */
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: var(--d, 30%);
  border-radius: 7px;
  z-index: 1;
}
.ob__row--ask::before { background: rgba(225,29,72,.10); }
.ob__row--bid::before { background: rgba(5,150,105,.12); }
.ob__row--ask span:first-child { color: var(--rose); }
.ob__row--bid span:first-child { color: var(--emerald); }

.ob__row--wall { font-weight: 800; }
.ob__row--wall em {
  position: relative;
  z-index: 3;
  margin-left: auto;
  font-family: var(--font-head);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  opacity: .92;
  white-space: nowrap;
}
.ob__row--wall.ob__row--ask::before { background: rgba(225,29,72,.2); }
.ob__row--wall.ob__row--bid::before { background: rgba(5,150,105,.22); }

.ob__mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px;
  margin: 5px 0;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}
.ob__mid small {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* плавающие пилюли */
.viz__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.viz__pill svg { width: 15px; height: 15px; }
.viz__pill--profit {
  top: -18px; right: -14px;
  color: #fff;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-l));
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 16px 34px -14px rgba(5,150,105,.6);
  animation: float-a 6s ease-in-out infinite;
}
.viz__pill--x {
  bottom: -16px; left: -18px;
  color: var(--ink);
  animation: float-b 7.5s ease-in-out infinite;
}
.viz__pill--x b {
  background: var(--grad-accent);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

/* ============================================================
   БЛОК 2 — РЕЗУЛЬТАТ И АВТОР
   ============================================================ */
.result {
  position: relative;
  padding: 48px 0 56px;
  background: transparent;   /* фон рисует общий слой .bg */
}

/* колонка текста — по общей колонке, выравнивание как во всех блоках ниже шапки */
.col p {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
  margin: 0 0 1.05em;
}

.eyebrow {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin: 0 0 14px;
}

.result__title {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  margin: 0 0 24px;
}
.result__emoji {
  font-size: .84em;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 6px 12px rgba(225,29,72,.28));
}
.result__title .hl,
.author__name .hl {
  background: linear-gradient(100deg, #0B4F4A 0%, #0F766E 30%, #0891B2 55%, #0D9488 80%, #0B4F4A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* панель-витрина (по образцу .report из landing-red): матовое стекло + цветные пятна */
.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 34px auto 0;
  padding: 26px;
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 14px 40px rgba(17,28,28,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .25s ease, transform .25s ease;
}
.showcase::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(260px 260px at 10% 6%,   rgba(6,182,212,.18),  transparent 70%),
    radial-gradient(280px 280px at 94% 16%,  rgba(13,148,136,.16), transparent 70%),
    radial-gradient(240px 240px at 64% 104%, rgba(225,29,72,.09),  transparent 70%);
}
.showcase:hover {
  box-shadow: 0 26px 56px rgba(17,28,28,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-3px);
}

/* строка результата: ×11,5 · $24 → $283 */
.score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 24px;
}
.score__mult {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  padding: .26em .48em .3em;
  border-radius: 980px;
  background: linear-gradient(135deg, var(--cyan), var(--teal-d));
  box-shadow: 0 20px 40px -18px rgba(13,148,136,.8);
}
.score b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -.03em;
  line-height: 1;
}
.score__from { color: var(--ink); opacity: .45; font-weight: 700; font-size: clamp(24px, 2.9vw, 38px); }
.score__to { color: var(--ink); }
.score__arrow { width: clamp(26px, 2.6vw, 34px); height: auto; flex: none; color: var(--cta); }

/* дисклеймер */
.disclaimer {
  font-size: 14px !important;
  line-height: 1.62 !important;
  font-style: italic;
  color: var(--ink-3) !important;
  margin: 0 0 1.7em !important;
}

/* видео — рамка как .report__img в landing-red */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0F1E1E;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* автор */
.author {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: end;
  margin: 60px 0 0;
}
.author__text p { font-size: 17.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 1.05em; }
.author__name {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.author__emoji {
  font-size: .82em;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 6px 12px rgba(13,148,136,.28));
}
.author__role {
  font-family: var(--font-head);
  font-size: 19px !important;
  font-weight: 700;
  color: var(--ink-3) !important;
  margin: 0 0 28px !important;
}

.author__photo {
  position: relative;
  z-index: 2;                /* фото поверх тёмной панели-подводки */
  margin-bottom: -165px;     /* фигура садится задницей прямо на верхнюю кромку панели */
}
.author__photo img {
  width: 132%;               /* фигура крупнее, растёт вправо в пустое поле — текст слева не трогаем */
  max-width: none;
  height: auto;
  transform-origin: right bottom;
  filter: drop-shadow(0 26px 40px rgba(17,28,28,.28));
}

/* переход к следующему блоку — тёмная панель, на которую «садится» автор:
   верхний край панели заходит под фигуру (по «сиденью»), нога свисает по фасаду */
.handoff {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;          /* панель почти на своём месте — вверх лезет фото, не панель */
  padding: 40px 300px 40px 48px;  /* текст пошире, но не заходит под свисающую ногу/бедро */
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 18% 0%, #17222E 0%, #101823 52%, #0A0F16 100%);
  color: #dfe7ef;
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.02em;
  text-wrap: balance;
  box-shadow: 0 30px 60px -30px rgba(10,15,22,.55);
  overflow: hidden;
}
/* нижняя бирюзовая нить-шов — как на других тёмных блоках */
.handoff::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}

/* ============================================================
   БЛОК 3 — ПОДВОДКА
   Длинная текстовая часть: всё в одну колонку по ходу чтения,
   ритм задают заголовки, SVG-сцены и врезки — плиток нет.
   ============================================================ */
.lead {
  position: relative;
  padding: 16px 0 72px;
  background: transparent;
}

/* заголовок части */
.lead__title {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  margin: 0 0 24px;
  text-wrap: balance;   /* если строка всё же ломается — делим её поровну, а не «хвостом» */
}
.lead__title--gap { margin-top: 64px; }   /* воздух между смысловыми частями */
.lead__emoji {
  font-size: .86em;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 6px 12px rgba(13,148,136,.24));
}
.lead__title .hl {
  background: linear-gradient(100deg, #0B4F4A 0%, #0F766E 30%, #0891B2 55%, #0D9488 80%, #0B4F4A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* текст блока — по общей колонке, без собственной ширины */
.prose p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
  margin: 0 0 1.15em;
}
.prose p:last-child { margin-bottom: 0; }

/* Схема сбоку от текста: две колонки, а не «полоса» во всю ширину.
   Обтекание через float не годится — подписи внутри SVG заданы в абсолютных
   единицах, и текст, огибающий схему снизу, ломал бы её ритм. Здесь grid:
   слева абзацы, справа схема, обе колонки живут своей жизнью. */
/* Текст прижат к верху, а не отцентрован: схема выше колонки текста,
   и центрирование раздувало бы пустоту сверху и снизу от абзацев. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  margin: 6px 0 10px;
}
/* когда текста мало, схеме широкая колонка не нужна: отдаём место словам,
   а колонки центрируем по вертикали — иначе низкая схема висит в пустоте */
.split--wide {
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
}

/* схему опускаем на строку текста — так она встаёт вровень с первым абзацем */
.split__fig { margin-top: -18px; }
/* графика слева, текст справа */
.split--flip .split__fig { order: -1; }

.split__text > p:last-child { margin-bottom: 0; }

/* float-раскладка «Против кого Вы»: картинка стола в отдельном float-контейнере,
   текст обтекает её — под коротким текстом не остаётся пустоты рядом со схемой */
.split-flow { margin: 6px 0 10px; }
.split-flow::after { content: ''; display: block; clear: both; }   /* сброс float в конце */
.split__floater {
  float: right;
  width: 44%;
  margin: -6px 0 12px 40px;    /* отбивка слева от текста */
}
.split__floater .split__fig { margin: 0; }
.split-flow > p:last-child { margin-bottom: 0; }

.scene { margin: 0; padding: 0; }
.scene__svg { display: block; width: 100%; height: auto; }
/* график цены: единственная схема во всю колонку — сжимать её нельзя */
.scene--full { width: 100%; margin: 18px 0 22px; }
/* Раньше сцены выходили на 60px за колонку «чтобы дышали». Пока вокруг был один
   текст, это не читалось; рядом с карточками таблицы и тёмной карточкой с жёстким
   краем выступ выглядел как сбитая вёрстка. Единая ширина важнее — сцены в колонке. */
.scene--out { width: 100%; max-width: 100%; }

/* Фото в колонке рядом с текстом — целиком, без обрезки и без увеличения:
   ровно по ширине своей колонки. Правый край снимка сам растворяется в белом
   и уходит в фон — это его приём, ничего поверх не накладываем. */
.photo { margin: 0; padding: 0; }
.photo__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.scene__cap {
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ink-3);
  text-align: center;
}


/* врезка-ответ: короткая реплика с иконкой */
.answer {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.8);
  border-left: 3px solid var(--teal);
  box-shadow: var(--shadow-md);
}
.answer__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--cyan), var(--teal-d));
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(13,148,136,.8);
}
.answer__icon svg { width: 26px; height: 26px; }
.answer p {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.32;
  color: var(--ink);
}

/* ключевая мысль — крупной строкой во всю колонку */
.pull {
  clear: both;
  margin: 40px 0;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.5vw, 31px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
/* Бирюзовый перелив + подсветка снизу.
   Кегль намеренно ниже чёрных заголовков: за счёт цвета этот текст и так тянет
   взгляд, и на равном размере он забивал заголовки блоков. */
.pull--cta {
  position: relative;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.4;
  padding-bottom: 22px;
  background: linear-gradient(100deg, #0B4F4A 0%, #0F766E 26%, #0891B2 52%, #0D9488 76%, #0B4F4A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pull--cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-accent);
}

/* ============================================================
   БЛОК 4 — ПРЕЗЕНТАЦИЯ
   ============================================================ */
.present {
  position: relative;
  padding: 46px 0 24px;
}

/* ---- тёмная полоса-«разрыв»: ломает светлую простыню страницы ----
   Панель уходит во всю ширину окна, контент внутри держится общей колонки. */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 58px;
  padding: 62px 0 58px;
  background: radial-gradient(120% 100% at 50% 0%, #16302E 0%, #0E1F1F 46%, #0A1616 100%);
  color: #fff;
}
/* Фон панели: те же мотивы, что в шапке (кольца, точечная сетка, диагональная
   штриховка) — но линии светлые по тёмному. Общий язык оформления, а не новый. */
.stage__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* точечная сетка — тот же шаг 26px, что в шапке.
   Маска симметричная: сетка плотная у верхнего и нижнего краёв панели и тает
   к её середине — так она не спорит со штриховкой и не шумит под текстом. */
.stage__dots {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.3' cy='1.3' r='1.3' fill='%235eead4' fill-opacity='0.20'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%, transparent 58%, #000 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 42%, transparent 58%, #000 100%);
}
/* Диагональная штриховка — как в шапке, но во всех четырёх углах панели.
   Базовый элемент рисует левый НИЖНИЙ угол: линии «/», гуще у края и растворяются
   к центру (маска по X) и ко дну (маска по Y). Остальные три угла — его зеркала:
   scaleX(-1) отражает вправо, scaleY(-1) — наверх. Тайл тот же, 16×16. */
.stage__hatch {
  position: absolute;
  left: 0;
  right: 58%;
  bottom: 0;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.13' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform-origin: center;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 90%),
    linear-gradient(180deg, transparent 0%, #000 70%);
          mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 90%),
    linear-gradient(180deg, transparent 0%, #000 70%);
  -webkit-mask-composite: source-in;   /* WebKit: пересечение двух масок */
          mask-composite: intersect;   /* стандарт: то же самое */
}
.stage__hatch--bl { }                                   /* левый низ  — базовый */
.stage__hatch--br { left: 58%; right: 0; transform: scaleX(-1); }
.stage__hatch--tl { bottom: auto; top: 0; transform: scaleY(-1); }
.stage__hatch--tr { bottom: auto; top: 0; left: 58%; right: 0; transform: scale(-1, -1); }
/* мягкое цветное свечение поверх линий — оно же прижимает графику к краям */
.stage__glow {
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(520px 340px at 18% 12%,  rgba(6,182,212,.20),  transparent 70%),
    radial-gradient(560px 360px at 86% 26%,  rgba(13,148,136,.18), transparent 70%),
    radial-gradient(520px 340px at 62% 104%, rgba(225,29,72,.14),  transparent 70%),
    /* гасим линии за текстом: центр колонки остаётся чистым */
    radial-gradient(760px 420px at 50% 50%, rgba(10,22,22,.72), transparent 72%);
  pointer-events: none;
}
/* бирюзовые нити по краям полосы — фиксируют границу «разрыва» */
.stage::before,
.stage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}
.stage::before { top: 0; }
.stage::after  { bottom: 0; }

/* на тёмном инверсия кнопки остаётся белой — она здесь контрастнее всего */
.stage .btn--primary:hover { background: #fff; color: #000; }

/* шапка блока: имя системы + подзаголовок */
.present__head {
  text-align: center;
  margin-bottom: 34px;
}
.present__title {
  font-size: clamp(44px, 6.4vw, 82px);
  /* с background-clip: text выносные элементы (g, y) режутся при line-height ~1 */
  line-height: 1.16;
  letter-spacing: -.04em;
  /* фон градиента обрезается по боксу строки, и хвост «g» вылезает за него —
     даём фону запас снизу и тут же вычитаем его из внешнего отступа */
  padding-bottom: .12em;
  margin: 0 0 .04em;
  /* на тёмном берём светлые ноты градиента — тёмные в фоне тонут */
  background: linear-gradient(100deg, #5EEAD4 0%, #2DD4BF 28%, #67E8F9 54%, #34D399 78%, #5EEAD4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.present__sub {
  font-family: var(--font-head);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* тезисы стрелками — одна колонка, маркер снаружи текста */
.arrows {
  margin: 0 0 34px;
}
.arrows__i {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.arrows__i:last-child { border-bottom: 0; }
.arrows__m {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: #FB7185;   /* малиновый на тёмном — светлее CTA, иначе гаснет */
}
.arrows__i p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.66;
  color: rgba(255,255,255,.78);
}
.arrows__i b { color: #fff; }

/* видео этого блока — во всю колонку; заглушка, пока нет ссылки */
.video--wide {
  margin: 0 0 30px;
  border-color: rgba(255,255,255,.12);
  background: #08120F;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
}
.video__soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.62);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  background:
    radial-gradient(420px 220px at 50% 50%, rgba(13,148,136,.32), transparent 70%);
}
.video__soon svg { width: 54px; height: 54px; opacity: .8; }

.present__cta {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* характеристики: строки «параметр — значение» */
.spec__title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 16px;
}
/* Строки-карточки: стеклянная подложка + градиентная обводка (маской),
   слева — иконка в скруглённом квадрате. Всё в одну колонку, не плитками. */
.spec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 46px;
}
.spec__row {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 12px 30px -18px rgba(15,42,42,.30),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* градиентная обводка в 1px: заливка минус её же контент-бокс */
.spec__row::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(13,148,136,.55), rgba(6,182,212,.40) 55%, rgba(13,148,136,.16));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.spec__row:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 42px -18px rgba(15,42,42,.36),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.spec__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,148,136,.14), rgba(6,182,212,.16));
  border: 1px solid rgba(255,255,255,.7);
  color: var(--teal-d);
}
.spec__ico svg { width: 27px; height: 27px; }
/* подпись и значение — одним кеглем: разница только в весе и цвете */
.spec__body dt {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 3px;
}
.spec__body dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* три строки про доходность — акцент малиновым: обводка, иконка, цифры */
.spec__row--hot::before {
  background: linear-gradient(135deg, rgba(225,29,72,.55), rgba(244,63,94,.38) 55%, rgba(225,29,72,.14));
}
.spec__row--hot .spec__ico {
  background: linear-gradient(135deg, rgba(225,29,72,.14), rgba(244,63,94,.16));
  color: var(--cta);
}
.spec__row--hot dd { color: var(--ink); font-size: 18px; }
.spec__row--hot dd b { color: var(--cta); }
/* ссылка на подтверждение — бирюзовая, чтобы не спорить с малиновыми цифрами */
.spec__link {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-left: 10px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--teal-d);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(13,148,136,.35);
  transition: color .2s ease, border-color .2s ease;
}
.spec__link span { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.spec__link:hover { color: var(--cta); border-color: rgba(225,29,72,.45); }
.spec__link:hover span { transform: translateX(3px); }
.spec__note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-3);
}

.present__lead {
  font-family: var(--font-head);
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 6px;
}

/* заголовок стратегии: иконка из первого потока слева от названия */
.strat__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0 18px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
}
.strat__ico {
  flex: none;
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(225,29,72,.22));
}

/* правила «Пинг-понга» — маркеры-точки, не карточки */
.rules {
  margin: 0 0 18px;
  padding-left: 2px;
}
.rules li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.rules__d {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 0 4px rgba(13,148,136,.12);
}

/* ============================================================
   РАМКА — переиспользуемый компонент
   Тонкий тёмный кант со скруглением: обособляет вывод от остального текста.
   Приём взят из первого потока; кладётся на любой блок как модификатор.
   ============================================================ */
.frame {
  border: 1.5px solid rgba(15,42,42,.72);
  border-radius: 20px;
  padding: 30px 34px;
}

/* ============================================================
   ТЁМНАЯ КАРТОЧКА С ФОТО АВТОРА
   Итог смыслового куска: слева фото по контуру, справа текст.
   Фон — те же мотивы, что у тёмной панели презентации и CTA-отбивки.
   Фото выходит за верхний край карточки — из-за этого overflow не режем,
   а фон и штриховку прячем в отдельном слое со своим скруглением.
   ============================================================ */
.say {
  position: relative;
  display: grid;
  /* левая колонка — пустое место под фото: сам снимок вынут из потока (absolute),
     иначе сетка растянулась бы по его высоте и выступ наверх пропал бы */
  grid-template-columns: 366px 1fr;
  gap: 24px;
  align-items: center;
  /* верхний отступ большой: над карточкой должна поместиться голова автора */
  margin: 116px 0 44px;
  /* паддинги скромные: чем ниже карточка, тем сильнее снимок выходит за её верх */
  padding: 34px 48px 34px 0;
  border-radius: 28px;
  background: radial-gradient(120% 150% at 12% 40%, #16302E 0%, #0E1F1F 55%, #0A1616 100%);
  box-shadow: 0 40px 80px -40px rgba(10,22,22,.55);
}
.say__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
/* штриховка тем же тайлом 16×16, что и во всех тёмных блоках */
.say__hatch {
  position: absolute;
  top: 0; bottom: 0; left: 46%; right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.13' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 50%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 50%, transparent 92%);
}
.say__glow {
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(420px 300px at 20% 30%, rgba(13,148,136,.20), transparent 70%),
    radial-gradient(460px 300px at 82% 76%, rgba(6,182,212,.16),  transparent 70%);
}

/* Фото: по контуру, без рамки. Вынуто из потока и посажено на нижний край карточки —
   так голова и руки свободно выходят за её верхнюю границу, как в первом потоке.
   Обрезать нельзя: у карточки нет overflow: hidden, он живёт только в .say__bg. */
/* Снимок садится НИЗОМ на нижний край карточки (исходник обрезан по пояс — висеть
   в воздухе ему нельзя), а вверх выходит за её границу: голова и руки снаружи.
   Чтобы выступ не «съедался», когда карточка вырастает под длинный текст,
   у .say есть min-height — она не короче снимка минус этот выступ. */
.say__photo {
  position: absolute;
  left: -26px;        /* чуть выходит и за левый край — снимок «перед» карточкой */
  bottom: 0;
  z-index: 2;
  width: 404px;
  margin: 0;
  pointer-events: none;
}
.say__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* тень падает вниз-вправо, на саму карточку — снимок читается как «перед» ней */
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.45));
}

/* фото и фон вынуты из потока, поэтому текст сажаем во вторую колонку явно —
   иначе он занял бы первую, ту, что оставлена под снимок */
.say__body {
  grid-column: 2;
  position: relative;
  z-index: 1;
}
.say__lead {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(226,244,242,.80);
}
.say__lead b { color: #fff; font-weight: 800; }
/* вынос внутри карточки: тот же смысл, что у .pull--cta на светлом,
   но градиент светлый — тёмные ноты в тёмном фоне тонут */
.say__pull {
  position: relative;
  margin: 0;
  padding-bottom: 20px;
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.028em;
  background: linear-gradient(100deg, #5EEAD4 0%, #2DD4BF 30%, #67E8F9 58%, #34D399 82%, #5EEAD4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.say__pull::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-accent);
}

/* ============================================================
   БЛОК 5 — ЧТО НУЖНО ДЕЛАТЬ
   Рабочий день в четыре шага. Здесь единственное во всём лендинге
   отступление от «одной колонки»: шаги короткие и равнозначные, и в один
   столбец между ними зияли пустоты в полэкрана. Пары 2×2 читаются подряд.
   ============================================================ */
.day {
  position: relative;
  padding: 46px 0 64px;
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 44px;
  margin: 26px 0 40px;
  padding: 0;
}
/* внутри шага: картинка слева, текст справа — так пара занимает меньше высоты,
   чем «картинка сверху, текст под ней», и колонки выравниваются по верху */
.steps__i {
  position: relative;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 20px;
  align-items: start;
}

/* Круг с иллюстрацией: сама картинка яркая и цветная, поэтому подложка нарочито
   спокойная — светлый круг с мягкой тенью, без градиентной обводки: она бы спорила
   с рисунком. Номер шага висит малиновым бейджем на краю круга. */
.steps__n {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff, #F1F7F7 68%, #E4F0F0 100%);
  box-shadow: 0 16px 34px -20px rgba(15,42,42,.45), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.steps__i:hover .steps__n { transform: translateY(-3px) scale(1.03); }
.steps__n img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(15,42,42,.16));
}
/* номер шага — малиновый бейдж, как в первом потоке, но встроенный в наш стиль */
.steps__n em {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, #F43F5E, #E11D48);
  border: 2.5px solid #fff;
  box-shadow: 0 10px 22px -8px rgba(225,29,72,.65);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.02em;
  color: #fff;
}
/* текст шага — тем же кеглем, что и весь текст блока: шаг не «карточка», а абзац */
.steps__t {
  margin: 0;
  padding-top: 6px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ============================================================
   БЛОК 6 — НАГЛЯДНАЯ ДЕМОНСТРАЦИЯ
   Тёмная полоса во всю ширину окна с двумя роликами. Тёмный фон здесь не для
   красоты: плеер сам по себе тёмное светящееся окно, и на светлой странице два
   таких окна читались бы как провалы. На тёмном они, наоборот, встают в свой фон.
   Мотивы фона — те же, что у панели презентации и CTA-отбивки: штриховка + свечения.
   ============================================================ */
.demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin: 40px calc(50% - 50vw) 44px;
  padding: 58px 0 64px;
  background: radial-gradient(120% 130% at 50% 20%, #16302E 0%, #0E1F1F 55%, #0A1616 100%);
}
/* бирюзовые нити по краям — как у всех тёмных полос */
.demo::before,
.demo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}
.demo::before { top: 0; }
.demo::after  { bottom: 0; }

.demo__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* штриховка тем же тайлом 16×16: слева «/», справа зеркально «\» */
.demo__hatch {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.13' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 92%);
}
.demo__hatch--r {
  left: 62%;
  right: 0;
  transform: scaleX(-1);
}
.demo__glow {
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(520px 340px at 16% 22%, rgba(13,148,136,.20), transparent 70%),
    radial-gradient(560px 360px at 86% 82%, rgba(6,182,212,.16),  transparent 70%);
}

/* заголовок — того же кегля, что и у остальных блоков, но по центру:
   под ним не текст, а два ролика, и «шапка над роликами» просится симметричной */
.demo__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 34px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
/* глаз — иконка из первого потока, но нарисованная линией в нашем стиле:
   светлый круг на тёмном, чтобы держать взгляд на заголовке */
.demo__eye {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #5EEAD4;
  background: rgba(94,234,212,.10);
  border: 1.5px solid rgba(94,234,212,.34);
  box-shadow: 0 0 0 6px rgba(94,234,212,.05), inset 0 1px 0 rgba(255,255,255,.12);
}
.demo__eye svg { width: 28px; height: 28px; }
/* градиент подсветки на тёмном берём светлый — тёмная бирюза здесь бы утонула */
.demo__title .hl {
  background: linear-gradient(100deg, #5EEAD4 0%, #2DD4BF 32%, #67E8F9 60%, #34D399 84%, #5EEAD4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.demo__item { margin: 0 0 34px; }
.demo__item:last-child { margin-bottom: 0; }

/* Подпись — не строчка текста, а капсула-«бейдж» над плеером: в первом потоке
   результат подавали именно так — яркой пилюлей с обводкой и свечением. Мелкая
   строка рядом с крупным заголовком блока терялась, а ведь ради этой цифры ролик
   и открывают. Капсула по центру, на одной оси с заголовком. */
.demo__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  margin: 0 auto 20px;
  /* слева поле уже: там сидит плашка с цифрой, и ей нужен свой воздух, а не общий */
  padding: 8px 30px 8px 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(94,234,212,.30);
  background: rgba(13,148,136,.10);
  box-shadow: 0 0 26px -6px rgba(45,212,191,.30), inset 0 1px 0 rgba(255,255,255,.08);
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #E2F4F2;
}
/* Цифра — белым по плотной бирюзе, а не бирюзовым по бирюзовому фону: раньше
   она сливалась с капсулой. Заливка даёт максимальный контраст, при этом
   остаётся в холодной гамме — красный на лендинге про прибыль читался бы
   как убыток, поэтому он только на CTA-кнопках. */
.demo__num {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #14B8A6 0%, #0D9488 55%, #0891B2 100%);
  box-shadow: 0 8px 22px -8px rgba(20,184,166,.70), inset 0 1px 0 rgba(255,255,255,.22);
  font-size: 1.16em;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
}

/* ============================================================
   БЛОК 7 — ПОЧЕМУ ЭТО РАБОТАЕТ
   Светлый блок в общей колонке. Два перечисления подряд, поэтому у них
   намеренно разные маркеры: ромб — «почему работает», иконка в круге —
   «почему несложно». Одинаковые буллеты слепили бы два списка в один.
   ============================================================ */
.why {
  position: relative;
  padding: 12px 0 72px;
}

/* Список причин. Ромб взят из первого потока — там он и был маркером списка.
   Рисуем его квадратом с поворотом и скруглением, а не картинкой: так он
   тянется вместе с текстом и красится нашей бирюзой. */
.rhomb { list-style: none; margin: 4px 0 0; padding: 0; }
.rhomb__i {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
.rhomb__i:last-child { margin-bottom: 0; }
/* маркер сажаем на первую строку абзаца: чуть ниже её верха, по оптической середине */
.rhomb__m {
  width: 18px;
  height: 18px;
  margin: 6px 0 0 8px;
  border-radius: 5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #14B8A6 0%, #0D9488 55%, #0891B2 100%);
  box-shadow: 0 6px 16px -6px rgba(20,184,166,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.rhomb__t {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* «Почему несложно» — тёмная карточка с автором. Каркас берём у .say (фото слева
   выходит за край, текст справа), меняем только пропорции: здесь снимок в полный
   рост и текста больше, поэтому карточка выше и колонка под фото шире. */
.easy {
  align-items: center;
  /* сверху воздух: над карточкой должна поместиться голова автора */
  margin: 96px 0 8px;
  /* Паддинги поджаты сознательно: карточка не должна перерасти снимок (≈536px),
     иначе его верх не выйдет за её кромку и весь приём пропадёт. */
  padding: 26px 44px 26px 0;
  /* левая колонка под снимок — он вынут из потока и сетку собой не растянет */
  grid-template-columns: 450px 1fr;
}
/* Снимок стоит НА нижнем крае карточки (исходник обрезан по пояс — висеть в воздухе
   ему нельзя) и одновременно выходит за её верх: голова снаружи, как в первом потоке.
   Чтобы выступ был всегда, карточке задан min-height — она не выше снимка минус
   этот выступ, иначе фото просто не достанет до её верхней кромки. */
/* Снимок стоит НИЗОМ на нижней кромке карточки и выходит за её верх: голова и пальцы
   снаружи — тот же приём, что в первом потоке. Ширина фиксированная (по высоте он
   раздувался и наезжал на текст), а чтобы выступ существовал, карточка не должна быть
   выше снимка: её высота ограничена сверху — отсюда поджатые паддинги и кегль списка. */
/* Выступ делаем детерминированным: снимок растянут от точки ВЫШЕ верхней кромки
   до самого дна карточки. Задай ему фиксированную ширину — и стоит карточке
   подрасти под текст, как макушка снова оказывается внутри.
   Подгоняем по ВЫСОТЕ (width: auto), ничего не обрезая: cover срубал левую руку,
   а она должна выходить за край карточки целиком. Низ (обрезанный по пояс)
   прячется под нижней кромкой. */
.easy__photo {
  left: -70px;
  top: -60px;
  bottom: 0;
  width: auto;
}
.easy__photo img {
  width: auto;
  height: 100%;
  max-width: none;
}
/* росчерки-«одобрение» у верхнего правого угла: рифмуются с поднятыми пальцами */
.easy__strokes {
  position: absolute;
  top: -46px;
  right: 26px;
  z-index: 2;
  width: 120px;
  height: 90px;
  opacity: .9;
  filter: drop-shadow(0 6px 14px rgba(45,212,191,.35));
  pointer-events: none;
}
.easy__body { padding-left: 18px; }

/* заголовок внутри карточки: на тёмном берём светлый градиент — тёмная бирюза утонет */
.easy__title {
  margin: 0 0 22px;
  font-size: clamp(26px, 2.7vw, 34px);
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}
.easy__title .hl {
  background: linear-gradient(100deg, #5EEAD4 0%, #2DD4BF 32%, #67E8F9 60%, #34D399 84%, #5EEAD4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* три «легко» — лентой: иконка в круге слева, тезис справа */
.easy__list { list-style: none; margin: 0; padding: 0; }
.easy__i {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.easy__i:last-child { margin-bottom: 0; }
.easy__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #5EEAD4;
  background: rgba(94,234,212,.10);
  border: 1.5px solid rgba(94,234,212,.30);
  box-shadow: 0 0 0 6px rgba(94,234,212,.04), inset 0 1px 0 rgba(255,255,255,.12);
}
.easy__ic svg { width: 25px; height: 25px; }
.easy__t {
  /* выравниваем первую строку по центру круга */
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(226,244,242,.80);
}
.easy__t b { color: #fff; font-weight: 800; }

/* оговорка про время: рамка уже есть, ей нужен только воздух сверху.
   Колонки перевешиваем в пользу текста: абзацы здесь длинные, а схема
   компактная — в дефолтных пропорциях текст ужимался в узкий столбик. */
.why__but { margin-top: 44px; }
.why__but.split--wide { grid-template-columns: 1.75fr 1fr; gap: 30px; align-items: center; }

/* ============================================================
   БЛОК 8 — ЧТО МОЖЕТ ПОЙТИ НЕ ТАК
   Подача взята из первого потока: крупная рисованная иконка в круге слева,
   название ловушки — отдельной жирной строкой, «Решение:» подсвечено маркером.
   Мелкий значок и утопленный в абзац заголовок делали блок безжизненным —
   здесь у каждого пункта есть своё «лицо».
   ============================================================ */
.risk { position: relative; padding: 8px 0 72px; }

.risk__list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.risk__i {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 34px;
  align-items: start;
  margin-bottom: 42px;
}
.risk__i:last-child { margin-bottom: 0; }

/* Круг с рисунком — тот же, что в первом потоке, но перекрашенный в бирюзу:
   исходники красные, а красный на этом лендинге означает убыток и закреплён
   за CTA-кнопками. Картинки одноцветные, поэтому достаточно фильтра. */
.risk__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: linear-gradient(160deg, #F4FCFB, #E9F7F5);
  border: 2px solid rgba(13,148,136,.30);
  box-shadow: 0 16px 34px -20px rgba(13,148,136,.55), inset 0 1px 0 #fff;
}
.risk__ic img {
  display: block;
  width: 76px;
  height: 76px;
}

.risk__body { padding-top: 10px; }

/* название ловушки — отдельной строкой, как в первом потоке: в абзаце оно тонуло */
.risk__h {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}
.risk__t {
  margin: 0 0 12px;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* Решение — продолжение абзаца, но со словом-указателем, подсвеченным маркером
   (приём из первого потока). Отдельная подложка здесь оказалась лишней:
   она превращала живой разбор в череду одинаковых плашек. */
.risk__fix {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.risk__fix-k {
  position: relative;
  z-index: 0;
  padding: 2px 8px;
  margin-right: 2px;
  border-radius: 6px;
  font-weight: 800;
  color: #06403C;
  /* «маркер»: заливка не по всей высоте строки, а лентой — как от фломастера */
  background: linear-gradient(180deg, transparent 12%, rgba(94,234,212,.75) 12%, rgba(45,212,191,.75) 88%, transparent 88%);
}

/* ============================================================
   БЛОК 9 — ЧТО НУЖНО, ЧТОБЫ НАЧАТЬ
   Композиция первого потока: рупор слева наполовину за краем, текст справа.
   Светлая карточка, а не тёмная: следом идёт «Об авторе», два тёмных пятна
   подряд утяжелили бы страницу, да и рупор нарисован под светлый фон.
   ============================================================ */
.need { padding: 4px 0 76px; }

.need__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  padding: 44px 44px 44px 0;
  border-radius: 28px;
  background:
    radial-gradient(520px 300px at 12% 50%, rgba(94,234,212,.20), transparent 68%),
    linear-gradient(150deg, #F3FBFA 0%, #E8F5F3 100%);
  border: 1.5px solid rgba(13,148,136,.20);
  box-shadow: 0 30px 60px -40px rgba(6,64,60,.42);
}
/* Рупор «кричит» из-за левого края карточки — как в первом потоке.
   Сетка резервирует под него колонку, поэтому текст под картинку не заезжает. */
.need__mega {
  position: absolute;
  left: -120px;
  top: 50%;
  z-index: 1;
  width: 400px;
  height: auto;
  transform: translateY(-50%) rotate(-6deg);
  filter: drop-shadow(0 24px 40px rgba(6,64,60,.28));
  pointer-events: none;
}
/* рисованный зигзаг у правого верхнего угла — «звуковая волна» от рупора */
.need__zig {
  position: absolute;
  right: 26px;
  bottom: -22px;
  z-index: 2;
  width: 150px;
  height: auto;
  opacity: .9;
  pointer-events: none;
}

.need__in { grid-column: 2; }
.need__title { margin-bottom: 22px; }
.need__list .rhomb__t b { color: var(--ink); font-weight: 800; }

/* ============================================================
   БЛОК 10 — ОБ АВТОРЕ
   Компактная визитка: портрет слева, факты справа. Ничего лишнего —
   блок стоит между двумя длинными и должен читаться за пять секунд.
   ============================================================ */
.auth { padding: 34px 0 78px; }

.auth__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 46px;
  align-items: center;
}

/* Портрет вертикальный (2:3), поэтому колонку под него держим узкой.
   Лёгкий наклон и бирюзовая «подложка» — чтобы фото не выглядело вставкой из стока. */
.auth__ph {
  position: relative;
  margin: 0;
  border-radius: 24px;
}
.auth__ph::before {
  content: '';
  position: absolute;
  inset: 16px -14px -14px 16px;
  border-radius: 24px;
  background: var(--grad-accent);
  opacity: .22;
  z-index: 0;
}
.auth__ph img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 34px 64px -34px rgba(6,64,60,.55);
}

.auth__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Имя в «штампе» — тот же приём, что на референсе, только в бирюзе,
   а не в синеве: красный и синий у нас заняты под другое. */
.auth__name {
  display: inline-block;
  margin: 0 0 28px;
  padding: 8px 22px;
  border: 2px solid rgba(13,148,136,.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(13,148,136,.10));
}
.auth__name span {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  background-image: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.auth__list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 18px;
}
.auth__i {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
}
.auth__i p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.auth__i b { color: var(--ink); font-weight: 800; }

.auth__ck {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13,148,136,.14);
  color: var(--teal-d);
}
.auth__ck svg { width: 18px; height: 18px; }

/* ссылка на телеграм-канал автора, где он выкладывает результаты.
   Подчёркивание «маркером»: ссылка видна, но не спорит с CTA-кнопками. */
.auth__u {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -.42em 0 rgba(94,234,212,.55);
  transition: box-shadow .2s ease, color .2s ease;
}
.auth__u:hover,
.auth__u:focus-visible {
  color: var(--teal-d);
  box-shadow: inset 0 -.42em 0 rgba(94,234,212,.9);
}

/* Карточка «Моя подробная история» — подпись, стрелка-завиток и кнопка.
   На референсе подпись рукописная, но локального рукописного шрифта нет,
   а внешние подключения запрещены — пишем обычным шрифтом. */
.auth__more {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 20px;
  padding: 22px 26px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid rgba(13,148,136,.18);
  box-shadow: 0 22px 46px -30px rgba(6,64,60,.42);
}
.auth__hand {
  grid-column: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.auth__arr {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 48px;
  height: auto;
  color: var(--teal-l);
}
.auth__btn {
  grid-column: 1;
  justify-self: center;
  padding: 13px 46px;
  font-size: 17px;
}

/* ── Галерея отзывов ───────────────────────────────────────── */
.revs { margin-top: 64px; text-align: center; }

.revs__ic {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto 16px;   /* глобальное img/svg display:block гасит text-align */
  color: var(--teal-l);
}
.revs__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 30px;
}

.revs__box { position: relative; }

/* карточка-«лист», на котором лежит скриншот */
.revs__stage {
  position: relative;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid rgba(13,148,136,.16);
  box-shadow: 0 30px 60px -38px rgba(6,64,60,.45);
}
/* Высота слайдов разная (350…1125 px). Держим в потоке только активный —
   иначе карточка была бы ростом с самый высокий скриншот и под короткими
   отзывами зияло бы белое поле. */
.revs__s {
  position: absolute;
  inset: 26px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.revs__s.is-on {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
}
.revs__s img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Стрелки вынесены за края карточки, как в оригинале. */
.revs__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 12px 26px -10px rgba(13,148,136,.7);
  transition: background .2s ease, transform .2s ease;
}
.revs__nav:hover { background: var(--teal-d); transform: translateY(-50%) scale(1.07); }
.revs__nav svg { width: 22px; height: 22px; }
.revs__nav--prev { left: -26px; }
.revs__nav--next { right: -26px; }

.revs__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.revs__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(13,148,136,.28);
  transition: background .2s ease, transform .2s ease;
}
.revs__dot:hover { background: rgba(13,148,136,.55); }
.revs__dot.is-on { background: var(--teal); transform: scale(1.35); }

/* ============================================================
   БЛОК 11 — ЧТО ВАС ЖДЁТ ВНУТРИ
   Три части подряд в колонку. Иконки — те же, что в первом потоке.
   ============================================================ */
.ins { padding: 22px 0 78px; }

.ins__h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 46px;
}

/* Часть — «лист» с обводкой, как в первом потоке: слева текст, справа крупная
   ч/б фигура автора, которая выходит за верхнюю кромку карточки. Номер и иконка
   стоят в одну строку над заголовком — это «шапка» части. */
.part {
  position: relative;
  margin-bottom: 76px;
  padding: 44px;
  border-radius: 30px;
  background: linear-gradient(160deg, #F4F8F9 0%, #EAF2F3 100%);
  border: 1.5px solid rgba(13,148,136,.22);
  box-shadow: 0 34px 66px -44px rgba(6,64,60,.4);
}
.part:last-child { margin-bottom: 0; }

/* Карточка с фигурой: та вылезает за кромки наружу, поэтому у карточки свой
   верхний зазор и запас в потоке — иначе фигура наедет на соседа.
   Никакого overflow: фигура ДОЛЖНА свободно выступать за рамку, как в первом
   потоке. Она непрозрачна (фон PNG прозрачный) и ложится поверх рамки, закрывая
   её собой в местах пересечения. */
.part--fig { margin-top: 118px; padding-top: 34px; }
.part--fig:first-of-type { margin-top: 40px; }

.part__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
/* В зеркальной части текст справа — шапка уходит к нему: слева она осталась бы
   висеть над фигурой, оторванная от своего заголовка. */
.part--mirror .part__head {
  justify-content: flex-end;
  flex-direction: row-reverse;
  margin-left: 50%;
}
/* …но если шапка помечена --normal, ведём её как обычную (номер→иконка→заголовок
   слева), несмотря на зеркальную раскладку колонок ниже. Единый вид с частью 2. */
.part--mirror .part__head--normal {
  justify-content: flex-start;
  flex-direction: row;
  margin-left: 0;
}
.part__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--grad-accent);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 16px 30px -14px rgba(13,148,136,.75);
}
.part__ic {
  width: 62px;
  height: auto;
  flex: 0 0 auto;
}

/* Две колонки: текст и фигура. Фигура прижата к низу — она «стоит» на кромке. */
.part__cols {
  display: grid;
  grid-template-columns: 1fr 46%;
  gap: 20px;
  align-items: end;
}
.part--mirror .part__cols { grid-template-columns: 50% 1fr; }

/* Текст прижат к верху карточки — фигура рядом с ним «стоит» на низу,
   и висящий по центру текст рядом с ней выглядел бы провалом. */
.part__side { align-self: start; padding-bottom: 6px; }
.part__t {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.part__side p {
  margin: 0 0 16px;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.part__side p:last-child { margin-bottom: 0; }
.part__side b { color: var(--ink); font-weight: 800; }

/* Заголовок первой части стоит в самой шапке — справа от номера и иконки,
   заполняя пустоту рядом с ними, а не висит отдельной строкой ниже. */
.part__head--wide { align-items: center; }
/* Зеркальная часть: шапка с заголовком идёт на всю ширину (снимаем сдвиг
   вправо), заголовок ложится слева — «в ряд» с номером и иконкой справа. */
.part--mirror .part__head--wide { margin-left: 0; }
.part__t--inhead {
  margin: 0;
  max-width: none;
  text-wrap: pretty;
}

/* Абзац с иконкой-акцентом (ракета «старта») — иконка слева от текста. */
.part__hot {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
}
.part__hot-ic { width: 76px; height: auto; }

/* Фигура автора выступает за кромку карточки наружу — как в первом потоке:
   человек не «вклеен в рамку», а вылезает из неё. Фон PNG прозрачный, поэтому
   фигура ложится поверх рамки и закрывает её собой, а сама торчит наружу.
   z-index поднимает её над рамкой своей же карточки. */
.part__fig {
  position: relative;
  z-index: 3;
  margin: -140px -66px -44px 0;   /* вверх и вправо — наружу за кромку */
  align-self: end;
}
/* Кадр с котом: выступает влево и вверх за кромку. */
.part--mirror .part__fig {
  margin: -120px 0 -44px -66px;
}

/* В первой части фигура остаётся В ГРАНИЦАХ карточки (не вылезает за кромку):
   под колонками ещё лежит список уроков, а справа нет запаса под вынос.
   Только слегка приподнята, чтобы стоять на нижней линии текстовой колонки. */
.part__fig--in { margin: -60px 0 0 0; }
.part__ph {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(6,64,60,.22));
}
/* Каракуля-акцент рядом с фигурой — как в первом потоке */
.part__scrib {
  position: absolute;
  bottom: 26%;
  width: 74px;
  height: auto;
}
.part__fig--r .part__scrib { left: -12px; }
/* Фигура первой части в границах — каракуля тоже внутри, не за кромкой */
.part__fig--in .part__scrib { left: 2px; }
/* у зеркальной части каракуля уходит наверх, к плечу: справа она попадала бы на текст */
.part__fig--l .part__scrib { right: 4px; bottom: auto; top: 12%; }

.part__out {
  color: var(--ink-2);
}

/* Блок part--watch: вместо грид-колонок — ОБТЕКАНИЕ. Фигура float:right,
   текст обтекает её слева и продолжается под ней (без пустоты внизу).
   .part__flow обнимает float через overflow (BFC), чтобы карточка не «схлопнулась». */
.part--watch .part__flow { overflow: hidden; }
.part--watch .part__fig {
  float: right;
  width: 40%;
  max-width: 340px;
  margin: 0 0 6px 28px;   /* сброс грид-выносов; слева и снизу — воздух под текст */
  align-self: auto;
}
/* скрайб-каракуля позиционируется от фигуры — оставляем как есть, но при float
   привязка bottom работает от высоты фигуры, что нам и нужно */
.part--watch .part__fig .part__ph { filter: drop-shadow(0 14px 26px rgba(6,64,60,.2)); }
/* Подзаголовок «Смотрите, как это будет:» — по центру над видео,
   в стиле заголовков блока, но помельче. Видео идёт под колонками. */
.part__vh {
  clear: both;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  margin: 26px 0 18px;
}
/* Плеер по центру, ограничен по ширине — на всю ширину блока смотрелся бы
   громоздко. .video уже задаёт 16:9 и рамку. */
.part__video {
  max-width: 720px;
  margin: 0 auto;
}

/* Уроки лежат во вложенной белой карточке — как в первом потоке.
   Название урока — в «пилюле» с обводкой, чтобы список читался с прокрутки. */
.lessons {
  list-style: none;
  margin: 30px 0 26px;
  padding: 34px 34px 30px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid rgba(13,148,136,.16);
  box-shadow: 0 24px 50px -36px rgba(6,64,60,.4);
  display: grid;
  gap: 26px;
}
.lessons__i { position: relative; }
.lessons__t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
.lessons__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.lessons__i p {
  margin: 0;
  font-size: 17px;
  line-height: 1.58;
  color: var(--ink-2);
}
/* Строка про PDF-чек-лист — на светлой подложке, с рисованным скрайбом. */
.pdf {
  position: relative;
  margin: 0 !important;
  padding: 20px 26px 20px 92px;
  border-radius: 18px;
  background: #fff;
  border: 1.5px solid rgba(13,148,136,.2);
  font-size: 17px !important;
  line-height: 1.58;
  color: var(--ink-2);
}
.pdf__scrib {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 44px;
  height: auto;
  transform: translateY(-50%);
}
.pdf b { color: var(--ink); font-weight: 800; }

/* Вторая галерея — та же механика, только подзаголовок вместо звёзд. */
.revs--2 { margin-top: 64px; }
.revs__title--ask { margin-bottom: 8px; }
.revs__sub {
  margin: 0 0 26px;
  font-size: 17.5px;
  color: var(--ink-2);
}
/* Скриншоты отзывов об уроках почти одной высоты — «прыжка» карточки не будет. */
.revs__stage--flat { padding: 20px; }
.revs__stage--flat .revs__s { inset: 20px; }

/* Интервью участника. */
/* видео-отзыв вынесен в собственную секцию между галереей отзывов и блоком
   «Что Вас ждёт»: свои вертикальные отступы, чтобы был воздух с обеих сторон */
.talk-sec { padding: 10px 0 4px; }
.talk { margin: 46px 0 60px; }
.talk__cap {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--ink);
  margin-bottom: 24px;
}
.talk__num {
  background-image: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   БЛОК 12 — ЗАКАЗ
   Тёмная полоса во всю ширину — единственное место на странице, где стоит форма,
   и её нужно выделить из светлого потока. Мотивы фона те же, что у демонстрации
   и CTA-отбивок: штриховка 16×16 плюс два свечения.
   ============================================================ */
.order {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin: 34px calc(50% - 50vw) 0;
  padding: 56px 0 64px;
  background: radial-gradient(120% 130% at 50% 18%, #16302E 0%, #0E1F1F 55%, #0A1616 100%);
}
/* бирюзовые нити по краям — как у всех тёмных полос */
.order::before,
.order::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}
.order::before { top: 0; }
.order::after  { bottom: 0; }

.order__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.order__hatch {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.13' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 92%);
}
.order__hatch--r {
  left: 62%;
  right: 0;
  transform: scaleX(-1);
}
.order__glow {
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(520px 340px at 18% 24%, rgba(13,148,136,.22), transparent 70%),
    radial-gradient(560px 360px at 84% 78%, rgba(6,182,212,.16),  transparent 70%);
}
/* Статичное конфетти + спиральки — «праздник» в духе эмодзи-хлопушки 🎉 из заголовка.
   Полупрозрачное, цвета из палитры блока (тил/циан) + тёплые искры (золото/розовое).
   Маской гасим центр, чтобы декор жил по краям и не спорил с формой. */
.order__confetti {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='600'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Crect x='60' y='70' width='16' height='6' rx='3' fill='%235eead4' transform='rotate(28 68 73)'/%3E%3Crect x='150' y='150' width='14' height='5' rx='2.5' fill='%2306b6d4' transform='rotate(-40 157 152)'/%3E%3Crect x='250' y='60' width='18' height='6' rx='3' fill='%235eead4' transform='rotate(15 259 63)'/%3E%3Crect x='700' y='90' width='16' height='6' rx='3' fill='%235eead4' transform='rotate(-22 708 93)'/%3E%3Crect x='790' y='180' width='14' height='5' rx='2.5' fill='%23f472b6' transform='rotate(48 797 182)'/%3E%3Crect x='620' y='40' width='15' height='5' rx='2.5' fill='%2306b6d4' transform='rotate(-12 627 42)'/%3E%3Crect x='40' y='300' width='16' height='6' rx='3' fill='%235eead4' transform='rotate(35 48 303)'/%3E%3Crect x='810' y='420' width='16' height='6' rx='3' fill='%235eead4' transform='rotate(-30 818 423)'/%3E%3Crect x='120' y='470' width='14' height='5' rx='2.5' fill='%23f472b6' transform='rotate(20 127 472)'/%3E%3Crect x='740' y='540' width='16' height='6' rx='3' fill='%2306b6d4' transform='rotate(-45 748 543)'/%3E%3Crect x='330' y='530' width='15' height='5' rx='2.5' fill='%235eead4' transform='rotate(40 337 532)'/%3E%3Crect x='560' y='560' width='14' height='5' rx='2.5' fill='%235eead4' transform='rotate(-18 567 562)'/%3E%3Ccircle cx='210' cy='110' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='680' cy='150' r='5' fill='%235eead4'/%3E%3Ccircle cx='90' cy='200' r='4.5' fill='%23f472b6'/%3E%3Ccircle cx='770' cy='320' r='4' fill='%235eead4'/%3E%3Ccircle cx='300' cy='480' r='5' fill='%2306b6d4'/%3E%3Ccircle cx='500' cy='40' r='4' fill='%235eead4'/%3E%3Ccircle cx='450' cy='540' r='4.5' fill='%235eead4'/%3E%3Ccircle cx='830' cy='500' r='4' fill='%23f472b6'/%3E%3Cpath d='M110 380 q10 -12 20 0 q10 12 20 0' stroke='%235eead4' stroke-width='2.2'/%3E%3Cpath d='M640 470 q9 -11 18 0 q9 11 18 0' stroke='%2306b6d4' stroke-width='2.2'/%3E%3Cpath d='M360 130 q8 -10 16 0 q8 10 16 0' stroke='%235eead4' stroke-width='2.2'/%3E%3Cpath d='M720 250 a10 10 0 1 1 -14 8 a7 7 0 1 0 9 -6' stroke='%23f472b6' stroke-width='2.2'/%3E%3Cpath d='M180 250 a10 10 0 1 1 -14 8 a7 7 0 1 0 9 -6' stroke='%235eead4' stroke-width='2.2'/%3E%3Cpath d='M540 460 a10 10 0 1 1 -14 8 a7 7 0 1 0 9 -6' stroke='%2306b6d4' stroke-width='2.2'/%3E%3Cg stroke='%235eead4' stroke-width='2.4'%3E%3Cpath d='M410 300 l0 12 M404 306 l12 0'/%3E%3C/g%3E%3Cg stroke='%235eead4' stroke-width='2.4'%3E%3Cpath d='M600 200 l0 12 M594 206 l12 0'/%3E%3C/g%3E%3Cg stroke='%23f472b6' stroke-width='2.4'%3E%3Cpath d='M240 400 l0 12 M234 406 l12 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 860px 600px;
  background-repeat: repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 54%, transparent 30%, #000 78%);
          mask-image: radial-gradient(70% 60% at 50% 54%, transparent 30%, #000 78%);
}

/* Шапка блока: слева Артём с открытыми ладонями, справа заголовок и подводка.
   Портрет сидит на нижней кромке — он «стоит» на форме, а не висит рядом с ней. */
.order__top {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: end;
  gap: 30px;
  /* фигура уходит вниз ПОД форму — их обрезанный низ прячется за карточкой */
  margin-bottom: 0;
}
.order__ph {
  width: 240px;
  height: auto;
  align-self: end;
  /* фигура — ПОДЛЕЖАЩИЙ слой: её низ (обрезка по пояс) уходит за форму, а форма
     (z-index выше) ложится поверх и закрывает обрезанную кромку. Ровнять с формой
     не нужно — сколько ни опусти, срез всегда спрятан под карточкой. */
  margin-bottom: -44px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.45));
}
/* текст выровнен по ВЕРХУ колонки — уходит вверх, пустоты над заголовком нет */
.order__in {
  align-self: start;
  padding-top: 4px;
  padding-bottom: 0;
}
.order__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 62px);   /* крупно, как в референсе первого потока */
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 26px;   /* воздух после заголовка перед подзаголовком */
  text-wrap: balance;
}
/* эмодзи-хлопушка в начале — своим цветом, с мягким свечением на тёмном фоне */
.order__emoji {
  font-size: .82em;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 4px 14px rgba(94,234,212,.4));
}
/* на тёмном подсветка берётся светлая — тот же градиент, что у заголовка демонстрации */
.order__title .hl {
  background: linear-gradient(100deg, #5EEAD4 0%, #2DD4BF 32%, #67E8F9 60%, #34D399 84%, #5EEAD4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.order__sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* Карточка формы — светлая на тёмном: поля ввода читаются только так.
   z-index выше фигуры: форма ложится ПОВЕРХ и прячет её обрезанный низ. */
.order__form {
  position: relative;
  z-index: 2;
  padding: 34px;
  border-radius: 26px;
  background: #fff;
  border: 1.5px solid rgba(94,234,212,.35);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
/* ── Боевая форма (bbm) в нашем оформлении ───────────────────────────────
   Разметку менять нельзя (на классах висит валидация и отправка), поэтому
   весь вид задаём здесь, переопределяя классы формы поверх внешнего css.
   ВАЖНО: внешний bbm_form.css грузится ПОСЛЕ нашего и бьёт селекторами вида
   `.inbfrm.v2 form input[type="submit"]`. Чтобы стабильно перекрывать его —
   не полагаемся на порядок каскада, а поднимаем специфичность: префиксуем
   правила `.order__form .inbfrm` (класс формы) там, где внешний css строже. */
.order__form .inbfrm,
.order__form .inbfrm [id$="_inner"] { width: 100%; }
/* внешний css рисует рамку вокруг всей вставки (.inbfrm.v2{border:1px #c7c7c7}) —
   убираем, у нас своя белая карточка .order__form с рамкой и тенью. */
.order__form .inbfrm.v2 {
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: none;
}
/* внешний css красит саму <form> в серый (.inbfrm.v2 form, спец. 0,2,1) —
   убираем, карточка у нас белая. Добавляем .v2, чтобы наш селектор был
   строго специфичнее (0,3,1) и не зависел от порядка загрузки css. */
.order__form .inbfrm.v2 form {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.order__form .inbfrm .title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 22px;
  text-align: center;
}
/* поля идут в одну колонку с равным ритмом.
   Внешний css бьёт `.inbfrm.v2 form .input_line input` (0,2,2) — дублируем
   его структуру с .v2, чтобы наш селектор был строго специфичнее (0,3,2). */
.order__form .inbfrm.v2 .input_line { margin: 0 0 16px; }
.order__form .inbfrm.v2 form .input_line input {
  width: 100%;
  box-sizing: border-box;
  height: 58px;
  padding: 0 22px;
  border: 1.5px solid #DCE6E7;
  border-radius: 14px;
  background: #F6F9FA;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  text-align: left;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.order__form .inbfrm.v2 form .input_line input::placeholder { color: #8A9A9B; }
.order__form .inbfrm.v2 form .input_line input:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,.12);
}
/* кнопка «Продолжить» — наш фирменный CTA (красный), как все остальные.
   Внешний css красит её в жёлтое через `form input[type="submit"]` (спец. 0,2,1),
   поэтому дублируем оба селектора под префиксом .inbfrm, чтобы перебить его. */
.order__form .inbfrm .submit_line { margin: 24px 0 0; }
.order__form .inbfrm.v2 .submit_line .button,
.order__form .inbfrm.v2 form input[type="submit"] {
  display: block;
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 16px;
  background: var(--cta);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: none;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 18px 34px -14px rgba(225,29,72,.6);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.order__form .inbfrm.v2 .submit_line .button:hover,
.order__form .inbfrm.v2 form input[type="submit"]:hover {
  background: #F0325C;
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -14px rgba(225,29,72,.7);
}
.order__form .inbfrm.v2 .submit_line .button:active,
.order__form .inbfrm.v2 form input[type="submit"]:active { transform: translateY(0); }
/* согласие с офертой — мелкой строкой под кнопкой.
   Внешний css ставит label{white-space:nowrap; color:#777} и синие ссылки —
   перекрываем под префиксом .inbfrm. */
.order__form .inbfrm .privacy_agreement_block {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.order__form .inbfrm .privacy_agreement_block label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  text-align: left;
  padding-left: 0;
  text-indent: 0;
  color: var(--ink-3);
  font-family: var(--font-body);
  overflow: visible;
}
.order__form .inbfrm .privacy_agreement_block input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--teal);
}
.order__form .inbfrm .privacy_agreement_block a,
.order__form .inbfrm .privacy_agreement_block label a {
  color: var(--teal);
  text-decoration: underline;
  border-bottom: 0;
}
/* сообщения-ошибки внешнего движка формы приводим к нашему виду.
   Внешний css использует .error_label (text-align:right) и .text_error —
   перекрываем оба под префиксом. */
.order__form .inbfrm .error,
.order__form .inbfrm .form_error,
.order__form .inbfrm .error_label {
  color: var(--cta);
  font-size: 13px;
  text-align: left;
}
/* поле с ошибкой — вместо родного розового фона наша красная рамка
   (внешний .inbfrm.v2 form .input_line.text_error input — 0,3,2; берём .v2+form). */
.order__form .inbfrm.v2 form .input_line.text_error input {
  background: #fff;
  border-color: var(--cta);
}

/* ============================================================
   БЛОК 12б — «А ЭТО НЕ МЕТОД-ОДНОДНЕВКА?»
   Снятие последнего возражения. Светлый фон намеренно: разговор спокойный,
   объясняющий, и ещё одна тёмная полоса читалась бы как давление.
   ============================================================ */
.lasts { padding: 60px 0 40px; }

.lasts__h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.lasts__lead {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--ink);
}

/* Две опоры нарисованы опорами: колонны с номером наверху и текстом под ним. */
.pil {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 34px;
}
.pil__i {
  position: relative;
  padding: 44px 28px 28px;
  border-radius: 24px;
  background: linear-gradient(160deg, #F4F8F9 0%, #EAF2F3 100%);
  border: 1.5px solid rgba(13,148,136,.22);
  box-shadow: 0 30px 60px -44px rgba(6,64,60,.42);
}
/* опора «стоит» на бирюзовом основании — нижняя грань колонны */
.pil__i::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--grad-accent);
  opacity: .85;
}
.pil__n {
  position: absolute;
  top: -26px;
  left: 28px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-accent);
  border: 5px solid #F7FAFB;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(13,148,136,.75);
}
.pil__n--ic svg {
  width: 28px;
  height: 28px;
  display: block;
}
.pil__t {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.pil__t b { color: var(--ink); font-weight: 800; }

.lasts__p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.68;
  color: var(--ink-2);
}
/* Итоговая строка — вывод из всего сказанного, поэтому крупнее и по центру. */
.lasts__p--fin {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--ink);
}

.lasts__cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ============================================================
   CTA-ОТБИВКА — переиспользуемый компонент
   Тёмная полоса во всю ширину окна: «перегораживает» страницу между блоками.
   Фон и штриховка — те же, что у .stage, но полоса низкая и без точечной сетки.
   ============================================================ */
.cta-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin: 30px calc(50% - 50vw);
  padding: 50px 0;
  background: radial-gradient(120% 140% at 50% 50%, #16302E 0%, #0E1F1F 52%, #0A1616 100%);
}
/* бирюзовые нити по краям — как у тёмной панели презентации */
.cta-bar::before,
.cta-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}
.cta-bar::before { top: 0; }
.cta-bar::after  { bottom: 0; }

.cta-bar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* штриховка тем же тайлом 16×16, что и везде: слева «/», справа зеркально «\» */
.cta-bar__hatch {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 55%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16 L16 0' stroke='%235eead4' stroke-opacity='0.13' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 92%);
}
.cta-bar__hatch--r {
  left: 55%;
  right: 0;
  transform: scaleX(-1);
}
.cta-bar__glow {
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(420px 260px at 22% 30%, rgba(6,182,212,.16),  transparent 70%),
    radial-gradient(460px 280px at 78% 70%, rgba(225,29,72,.16),  transparent 70%);
}

/* Отбивка вплотную к тёмному блоку сверху: между ними нет светлого поля, свой
   верхний зазор полоса не рисует. Бирюзовая нить на стыке остаётся — она и делит
   ролики и кнопку, иначе тёмное на тёмном слиплось бы в одно пятно.
   Верхнюю нить самой отбивки гасим: на стыке уже есть нижняя нить соседа,
   две подряд читались бы как двойная линия. */
.cta-bar--tight { margin-top: 0; }
.cta-bar--tight::before { display: none; }
/* Собственный радиальный фон отбивки на стыке давал ступеньку: у соседа градиент
   в этой точке уже другой. Берём ровный тон края тёмной полосы — шов пропадает,
   а объём держат штриховка и свечения поверх. */
.cta-bar--tight { background: #0C1B1B; }
/* Тёмный блок перед такой отбивкой не отступает вниз, но нить внизу сохраняет:
   именно она и становится линией стыка. Нижний паддинг поджимаем —
   иначе под последним видео зияет пустое поле. */
.demo:has(+ .cta-bar--tight) {
  margin-bottom: 0;
  padding-bottom: 26px;
}

/* кнопка по центру полосы */
.cta-bar__in {
  position: relative;
  display: flex;
  justify-content: center;
}
/* на тёмном инверсия кнопки белая — так она контрастнее всего */
.cta-bar .btn--primary:hover { background: #fff; color: #000; }

/* ============================================================
   БЛОК «ПОДВАЛ»: FAQ (аккордеон) + футер
   ============================================================ */
.faq {
  padding: 8px 0 68px;
}
.faq__h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-align: left;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.faq__list {
  border-top: 1px solid rgba(13,148,136,.16);
}
.faq__item {
  border-bottom: 1px solid rgba(13,148,136,.16);
}
/* Нативный аккордеон details/summary — без JS, доступный с клавиатуры */
.faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  transition: color .18s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--teal); }
.faq__qt { flex: 1; }
.faq__qt strong { font-weight: 800; }
/* иконка «плюс», превращается в «минус» при раскрытии */
.faq__ic {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 8px 18px -8px rgba(13,148,136,.7);
  transition: transform .25s ease;
}
.faq__ic::before,
.faq__ic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
.faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__ic { transform: rotate(180deg); }
.faq__item[open] .faq__ic::after { opacity: 0; }
.faq__a {
  padding: 0 4px 26px;
  max-width: 800px;
}
.faq__a p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
}
.faq__a p:last-child { margin-bottom: 0; }
.faq__a strong { color: var(--ink); font-weight: 700; }
.faq__a a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(13,148,136,.4);
}
.faq__a a:hover { border-bottom-color: var(--teal); }
/* пункт-предупреждение о рисках: красный акцент — единственно допустимый здесь
   (риск = потеря; тот же приём, что в блоке «Что не так») */
.faq__item--warn .faq__qt strong { color: #DC2626; }
.faq__item--warn .faq__ic {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 8px 18px -8px rgba(220,38,38,.6);
}

/* ── Футер ── */
.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 52px 0 56px;
  background: radial-gradient(120% 130% at 50% 0%, #16302E 0%, #101F1F 55%, #0A1414 100%);
  color: #cfd8d8;
}
.foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: .75;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}

/* логотип — средний трек grid; боковые колонки равны (1fr : 1fr),
   поэтому лого стоит строго по центру подвала. Приглушённый серый. */
.foot__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.foot__logo img {
  width: 104px;
  height: auto;
  opacity: .3;
  filter: grayscale(1) brightness(1.35);
}
/* компактная группировка: строки почти вплотную, блоки — с воздухом между собой */
.foot__col { min-width: 0; font-size: 15px; color: #a7b6b6; }
.foot__block { margin-bottom: 18px; }
.foot__block:last-child { margin-bottom: 0; }
.foot__block p {
  margin: 0 0 3px;
  line-height: 1.45;
}
.foot__block p:last-child { margin-bottom: 0; }
.foot__copy { color: #90a2a2; }
.foot__legal-line {
  font-size: 13.5px;
  line-height: 1.5;
  color: #90a2a2;
}
.foot__sep { color: #5a6d6d; margin: 0 6px; text-decoration: none; }
.foot a {
  color: #7fd8ce;
  text-decoration: none;
  border-bottom: 1px solid rgba(127,216,206,.32);
  transition: color .16s ease, border-color .16s ease;
}
.foot a:hover {
  color: #5eead4;
  border-bottom-color: rgba(94,234,212,.6);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1080px) {
  .hero__grid { gap: 36px; }
  .hero__list li { font-size: 15.5px; }
}

@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .hero { padding: 34px 0 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 52px; padding-top: 12px; }
  .hero__list { margin-top: 64px; }   /* добавляем воздух под подзаголовком в узком режиме */
  .bg__rings { width: 380px; height: 380px; top: -110px; right: -120px; }
  .viz { transform: none; }
  .viz:hover { transform: translateY(-3px); }

  .result { padding: 68px 0 76px; }
  /* Узкий экран: текст идёт на ПОЛНУЮ ширину (абзацы не сужаем), а фигура
     позиционируется в правый нижний угол блока — она приходится на уровень
     последнего короткого абзаца и садится задницей на край панели.
     Плашку НЕ трогаем. */
  .author {
    display: block;
    position: relative;
    margin-top: 60px;
  }
  .author__photo {
    position: absolute;
    right: 0;
    bottom: -96px;             /* свес вниз — «седалище» на кромке панели */
    width: 232px;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
  .author__photo img { width: 100%; transform-origin: right bottom; }
  /* последний абзац держим левее фигуры, чтобы текст её не подлезал */
  .author__text p:last-child { max-width: calc(100% - 250px); }
  /* текст с обычного верха слева; справа — узкий коридор под свисающую ногу.
     Компактные паддинги убирают пустоту внутри панели. */
  .handoff {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 30px 150px 30px 26px;
  }

  /* карточка с фото: две колонки не помещаются — фото встаёт наверх, текст под него.
     Снимок остаётся вынутым из потока, поэтому сверху карточке нужен отступ под него. */
  .say {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 104px 0 34px;
    padding: 216px 26px 32px;   /* сверху — место под снимок, он вынут из потока */
    border-radius: 24px;
  }
  .say__hatch { left: 0; }
  /* На узком экране снимок стоит по центру над текстом, макушкой над карточкой.
     Низ у исходника обрезан по пояс, и здесь он приходится на тёмное поле —
     поэтому растворяем его маской, чтобы не читался как обрубок. */
  .say__photo {
    left: 50%;
    bottom: auto;
    top: -96px;
    width: 264px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 76%, transparent 98%);
  }

  .day { padding: 34px 0 48px; }
  /* в двух колонках текст шага стал бы совсем узким — распускаем в один столбец */
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps__i { grid-template-columns: 104px 1fr; gap: 22px; align-items: center; }
  .steps__n { width: 104px; height: 104px; }
  .steps__n img { width: 72px; height: 72px; }
  .steps__t { padding-top: 0; }

  /* узкая колонка: две колонки не помещаются — графика встаёт под текст */
  .lead { padding: 12px 0 60px; }
  .lead__title--gap { margin-top: 52px; }
  .split,
  .split--wide {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0 24px;
  }
  .split__fig { margin-top: 0; }
  .split--flip .split__fig { order: 0; }        /* порядок чтения: текст, потом схема */
  /* фото встаёт под текст во всю колонку, за край не выносим */
  .photo__img,
  .split--flip .photo__img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* На десктопе схемы/визуализации жили в узкой колонке грида. Когда грид
     схлопывается в одну колонку, они растягиваются во весь экран и выглядят
     непропорционально огромными. Держим им разумный потолок и центрируем —
     чтобы иллюстрация оставалась иллюстрацией, а не занимала пол-экрана. */
  /* компактные квадратные/вертикальные схемы (стол, робот, свечи в колонке) —
     ограничиваем, чтобы не занимали весь экран. .scene--full (широкая полоса-
     график) сюда НЕ входит: ей нужна вся ширина, иначе она сплющится. */
  .split__fig,
  .split__fig .scene__svg,
  .scene--out,
  .scene--out .scene__svg { max-width: 340px; margin-left: auto; margin-right: auto; }
  /* float-стол «Против кого Вы»: на узком экране убираем обтекание —
     схема встаёт по центру над текстом, абзацы идут под ней полной шириной */
  .split__floater {
    float: none;
    width: auto;
    max-width: 340px;
    margin: 0 auto 18px;
  }
  /* hero-карточка со стаканом — тоже не на всю ширину телефона */
  .viz { max-width: 440px; margin-left: auto; margin-right: auto; }

  .pull { margin: 34px 0; }

  .present { padding: 34px 0 20px; }
  .stage { padding: 48px 0 44px; margin-bottom: 46px; }
  .spec__row { padding: 18px 20px; gap: 16px; }

  .cta-bar { margin: 26px calc(50% - 50vw); padding: 42px 0; }
  /* медиазапрос идёт ниже базового правила и перебил бы его margin-top */
  .cta-bar--tight { margin-top: 0; }

  .demo { margin: 32px calc(50% - 50vw) 36px; padding: 46px 0 50px; }
  /* базовое правило выше вернуло demo нижний margin 36px и перебило десктопный
     :has() — на телефоне между демо и tight-отбивкой возникала белая щель.
     Восстанавливаем стык вплотную, как на десктопе. */
  .demo:has(+ .cta-bar--tight) { margin-bottom: 0; padding-bottom: 26px; }
  .demo__title { gap: 12px; margin-bottom: 26px; }
  .demo__eye { width: 46px; height: 46px; }
  .demo__eye svg { width: 24px; height: 24px; }
  .demo__item { margin-bottom: 28px; }

  .why { padding: 10px 0 60px; }
  /* у .why__but два класса, и он перебивал одноколоночный .split--wide
     из этого же медиазапроса — гасим его собственные колонки явно */
  .why__but.split--wide { grid-template-columns: 1fr; gap: 20px; }
  .why__but { margin-top: 36px; }

  /* карточка «несложно»: две колонки не помещаются — снимок встаёт наверх,
     текст под него. Правила .say здесь уже сработали, дотачиваем размеры. */
  /* снимок встаёт наверх по центру, текст под него: сверху карточке нужно поле
     под фото, а само оно снова висит фиксированной высотой (растяжка «верх−дно»
     здесь не годится: карточка стала высокой, снимок растянулся бы на всю) */
  .easy { margin: 76px 0 8px; padding: 250px 26px 34px; grid-template-columns: 1fr; gap: 0; }
  .easy__photo {
    left: 50%;
    top: -70px;
    bottom: auto;
    width: 320px;
    height: auto;
    transform: translateX(-50%);
    /* низ снимка обрезан по пояс и здесь приходится на тёмное поле карточки —
       растворяем, чтобы он не читался обрубком */
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
            mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  }
  /* здесь снимок задан шириной, а не растяжкой по высоте — возвращаем img обычный поток */
  .easy__photo img { width: 100%; height: auto; }
  .easy__strokes { top: -30px; right: 12px; width: 92px; height: 70px; }
  .easy__body { padding-left: 0; }
  .easy__title { margin-bottom: 24px; }
  .easy__i { grid-template-columns: 50px 1fr; gap: 16px; margin-bottom: 22px; }
  .easy__ic { width: 50px; height: 50px; }
  .easy__ic svg { width: 24px; height: 24px; }
  .easy__t { margin-top: 10px; }

  .risk { padding: 6px 0 60px; }
  .risk__i { grid-template-columns: 108px 1fr; gap: 26px; margin-bottom: 34px; }
  .risk__ic { width: 108px; height: 108px; }
  .risk__ic img { width: 62px; height: 62px; }
  .risk__body { padding-top: 4px; }

  /* рупор уже не помещается сбоку — поднимаем его над текстом, но за край
     карточки всё равно выпускаем: без этого выступа приём теряется */
  .need { padding: 4px 0 60px; }
  .need__card {
    grid-template-columns: 1fr;
    padding: 150px 26px 34px;
  }
  .need__mega {
    left: 50%;
    top: -70px;
    width: 260px;
    transform: translateX(-50%) rotate(-6deg);
  }
  .need__zig { right: 14px; bottom: -16px; width: 112px; }
  .need__in { grid-column: 1; }

  /* визитка автора: фото над текстом, но ужимаем — портрет вертикальный
     и во всю ширину экрана съел бы его целиком */
  .auth { padding: 24px 0 62px; }
  .auth__grid { grid-template-columns: 1fr; gap: 40px; }
  .auth__ph { width: min(320px, 78%); margin: 0 auto; }
  .auth__name { margin-bottom: 24px; }

  /* стрелкам больше не хватает поля по краям — сажаем их на углы карточки */
  .revs { margin-top: 52px; }
  .revs__nav { width: 46px; height: 46px; }
  .revs__nav--prev { left: -14px; }
  .revs__nav--next { right: -14px; }

  .ins { padding: 16px 0 62px; }
  .ins__h { margin-bottom: 46px; }
  .part { margin-bottom: 62px; padding: 30px 28px 32px; }
  .part--fig { margin-top: 76px; }
  .part__cols { grid-template-columns: 1fr 40%; gap: 16px; }
  .part--mirror .part__cols { grid-template-columns: 40% 1fr; gap: 16px; }
  .part--mirror .part__head { margin-left: 40%; }
  /* шапка --normal не сдвигается вправо: она слева, как в части 2 */
  .part--mirror .part__head--normal { margin-left: 0; }
  .part__fig { margin: -84px 0 -32px; }
  .part__num, .part__ic { width: 54px; height: 54px; }
  .part__num { font-size: 24px; }
  .part__ic { height: auto; }
  .part__hot { grid-template-columns: 62px 1fr; gap: 14px; }
  .part__hot-ic { width: 62px; }
  .lessons { padding: 26px 24px 24px; gap: 22px; }
  .talk { margin: 38px 0 50px; }

  /* Портрет в шапке заказа ужимаем, но с текстом рядом он ещё уживается */
  .order { padding: 48px 0 56px; }
  .order__top { grid-template-columns: 180px 1fr; gap: 22px; }
  .order__ph { width: 180px; }
  .order__form { padding: 28px 22px; }

  .lasts { padding: 52px 0 70px; }
  .pil__i { padding: 40px 22px 24px; }
}

/* Планшет/узкий десктоп: фотоблок «У меня всё иначе» ещё влезает в две колонки.
   Вместо ужатой центрированной фотографии — фото слева, соседний абзац справа:
   так средняя ширина используется, а не пустует. Только для .split--photo;
   квадратные схемы (стол, робот) остаются по центру. Ниже 600px — одна колонка. */
@media (min-width: 600px) and (max-width: 900px) {
  .split--photo {
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: center;
    margin: 24px 0 28px;
  }
  .split--photo .split__fig { order: -1; max-width: none; margin: 0; }   /* фото — левая колонка */
  .split--photo .split__fig .scene__svg,
  .split--photo .photo__img { max-width: none; width: 100%; }
  .split--photo .split__text { order: 0; }                              /* текст — правая колонка */

  /* визитка автора: на планшете НЕ схлопываем в одну колонку (иначе портрет
     во всю ширину и много пустоты) — держим две колонки, как на десктопе,
     только меньше: узкая колонка под фото, компактный gap. */
  .auth__grid {
    grid-template-columns: 240px 1fr;
    gap: 30px;
    align-items: center;
  }
  .auth__ph { width: auto; margin: 0; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }

  /* Телефон: приём «текст сбоку от фигуры» уже не помещается — фигуру
     возвращаем в поток по центру над плашкой, абзацы на полную ширину.
     Свес на панель сохраняем, чтобы автор по-прежнему «сидел» на ней. */
  .author__photo {
    position: static;
    width: auto;
    max-width: 240px;
    margin: 0 0 -84px auto;    /* по правому краю, свес на панель */
  }
  .author__text p:last-child { max-width: none; }

  .hero { padding: 24px 0 52px; }
  .hero__grid { padding-top: 6px; }
  .hero__title-lead { font-size: 40px; letter-spacing: -.03em; }
  .hero__title-rest { font-size: 22px; margin-top: .45em; }
  .hero__list { margin-top: 26px; gap: 16px; }
  .hero__list li { font-size: 15.5px; gap: 13px; }
  .li__i { width: 36px; height: 36px; border-radius: 11px; }
  .li__i svg { width: 18px; height: 18px; }

  .hero__panel {
    margin-top: 26px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
  }
  .hero__cta { display: block; }
  .hero__facts {
    padding: 16px 0 0;
    border-left: none;
    border-top: 1px solid rgba(94,234,212,.14);
    gap: 8px;
    font-size: 13.5px;
  }
  .btn--lg { --btn-py: 17px; --btn-px: 28px; font-size: 18px; width: 100%; }

  .viz { padding: 16px; border-radius: var(--r-lg); }
  .viz__bot { display: none; }          /* роль робота уже читается по графику и пилюлям */
  .viz__pill { font-size: 12.5px; padding: 9px 13px; }
  /* пилюли не выносим за карточку: на 390px они давали горизонтальный скролл */
  .viz__pill--profit { top: -15px; right: 2px; }
  .viz__pill--x { bottom: -22px; left: 2px; }
  .ob__row { font-size: 11.5px; padding: 5px 8px; }
  .ob__row--wall em { font-size: 9px; padding: 3px 6px; }

  .bg__dots { background-size: 22px 22px; }
  .blob { filter: blur(60px); width: calc(var(--s, 520px) * .62); height: calc(var(--s, 520px) * .62); opacity: .42; }

  .frame { padding: 22px 18px; border-radius: 16px; }

  .demo { padding: 38px 0 42px; }
  /* глаз рядом с заголовком на 390px отъедал бы у строки треть ширины —
     ставим его отдельной строкой над текстом */
  .demo__title { flex-direction: column; gap: 14px; margin-bottom: 22px; }
  .demo__cap { padding: 6px 20px 6px 6px; gap: 11px; margin-bottom: 16px; }
  .demo__num { padding: 7px 16px; }
  .demo__item { margin-bottom: 24px; }

  .day { padding: 26px 0 40px; }
  /* две колонки на телефоне не живут: шаги встают друг под другом */
  .steps { grid-template-columns: 1fr; gap: 24px; margin: 18px 0 30px; }
  .steps__i { grid-template-columns: 90px 1fr; gap: 16px; }
  .steps__n { width: 90px; height: 90px; }
  .steps__n img { width: 62px; height: 62px; }
  .steps__n em { width: 28px; height: 28px; font-size: 14px; border-width: 2.5px; right: 0; bottom: 2px; }
  .steps__t { padding-top: 4px; font-size: 16.5px; line-height: 1.64; }

  .lead { padding: 10px 0 54px; }
  .lead__title { margin-bottom: 20px; }
  .lead__title--gap { margin-top: 46px; }
  .prose p { font-size: 16.5px; line-height: 1.68; }

  .why { padding: 8px 0 54px; }
  /* маркеры ужимаем: на 390px они отъедали у текста слишком много слева */
  .rhomb__i { grid-template-columns: 24px 1fr; gap: 13px; margin-bottom: 18px; }
  .rhomb__m { width: 15px; height: 15px; margin: 5px 0 0 4px; border-radius: 4px; }
  .rhomb__t { font-size: 16.5px; line-height: 1.68; }
  /* фото автора вынуто вверх (top:-70), а над карточкой было всего 40px —
     макушка наезжала на последнюю строку абзаца сверху. Опускаем карточку
     ниже, чтобы фигура встала под текст, не задевая его. */
  .easy { margin: 96px 0 6px; padding: 208px 20px 30px; border-radius: 24px; }
  .easy__photo { width: 264px; }
  .easy__strokes { top: -24px; right: 6px; width: 76px; height: 58px; }
  .easy__i { grid-template-columns: 44px 1fr; gap: 14px; margin-bottom: 20px; }
  .easy__ic { width: 44px; height: 44px; }
  .easy__ic svg { width: 22px; height: 22px; }
  .easy__t { margin-top: 7px; font-size: 16px; line-height: 1.64; }
  .why__but { margin-top: 30px; }

  .risk { padding: 4px 0 54px; }
  /* круг и абзац рядом на 390px не помещаются: круг встаёт над текстом */
  .risk__i { grid-template-columns: 1fr; gap: 16px; margin-bottom: 34px; }
  .risk__ic { width: 96px; height: 96px; }
  .risk__ic img { width: 56px; height: 56px; }
  .risk__body { padding-top: 0; }
  .risk__h { margin-bottom: 10px; }
  .risk__t, .risk__fix { font-size: 16.5px; line-height: 1.68; }

  .need { padding: 2px 0 54px; }
  .need__card { padding: 118px 20px 30px; border-radius: 24px; }
  .need__mega { top: -54px; width: 200px; }
  .need__zig { right: 8px; bottom: -12px; width: 88px; }

  /* на телефоне рукопись со стрелкой в одну строку не встаёт — стрелку прячем,
     а надпись и кнопку центрируем друг под другом */
  .auth { padding: 18px 0 52px; }
  .auth__grid { gap: 32px; }
  .auth__ph { width: min(280px, 84%); }
  .auth__ph::before { inset: 12px -10px -10px 12px; }
  .auth__name { padding: 6px 16px; border-radius: 12px; margin-bottom: 22px; }
  .auth__list { gap: 15px; margin-bottom: 26px; }
  .auth__i { grid-template-columns: 30px 1fr; gap: 12px; }
  .auth__ck { width: 30px; height: 30px; }
  .auth__ck svg { width: 16px; height: 16px; }
  .auth__i p { font-size: 16.5px; }
  .auth__more { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px 20px; border-radius: 18px; }
  .auth__hand { justify-self: center; width: min(250px, 100%); }
  .auth__arr { display: none; }
  .auth__btn { grid-column: 1; width: 100%; }

  /* На телефоне скриншот отзыва мелкий: даём читать его свайпом по горизонтали
     в натуральную ширину, а стрелки опускаем под карточку, к точкам. */
  .revs { margin-top: 44px; }
  .revs__ic { width: 140px; }
  .revs__title { margin-bottom: 22px; }
  .revs__stage { padding: 14px; border-radius: 18px; }
  .revs__s { inset: 14px; }
  .revs__nav { position: static; transform: none; width: 44px; height: 44px; }
  .revs__nav:hover { transform: none; }
  .revs__box {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
  }
  .revs__stage { grid-column: 2; grid-row: 1; }
  .revs__nav--prev { grid-column: 1; grid-row: 1; }
  .revs__nav--next { grid-column: 3; grid-row: 1; }
  .revs__stage--flat { padding: 12px; }
  .revs__stage--flat .revs__s { inset: 12px; }
  .revs__sub { font-size: 16.5px; margin-bottom: 20px; }

  /* На телефоне фигура рядом с текстом не помещается: ставим её над текстом,
     по центру. Из карточки она по-прежнему выступает вверх — приём сохраняется. */
  .ins { padding: 12px 0 54px; }
  .ins__h { margin-bottom: 40px; }
  .part { margin-bottom: 52px; padding: 24px 18px 26px; border-radius: 24px; }
  .part--fig { margin-top: 0; }
  .part--fig:first-of-type { margin-top: 0; }
  .part__num, .part__ic { width: 50px; height: 50px; }
  .part__num { font-size: 22px; }
  .part__ic { height: auto; }
  .part__head { gap: 12px; margin-bottom: 14px; }
  /* на телефоне колонок нет — шапка у всех частей возвращается влево */
  .part--mirror .part__head {
    justify-content: flex-start;
    flex-direction: row;
    margin-left: 0;
  }
  .part__t { font-size: 24px; margin-bottom: 16px; }
  .part__side p, .part__out { font-size: 16.5px; }

  .part__cols,
  .part--mirror .part__cols { grid-template-columns: 1fr; gap: 0; }
  /* фигура — первой в колонке независимо от порядка в разметке; за кромку она уже
     не выходит: на узком экране ей просто некуда, а под шапкой она села бы на номер */
  .part__fig,
  .part--mirror .part__fig,
  .part__fig--in {
    grid-row: 1;
    width: min(250px, 72%);
    margin: 0 auto 10px;
  }
  /* part--watch: на телефоне обтекание отключаем — фигура над текстом по центру,
     как у остальных частей (float сжимал бы текст в узкую полосу). */
  .part--watch .part__flow { overflow: visible; }
  .part--watch .part__fig {
    float: none;
    width: min(250px, 72%);
    max-width: none;
    margin: 0 auto 10px;
  }
  .part--mirror .part__side,
  .part__side { grid-row: 2; padding-bottom: 0; }
  .part__scrib { width: 46px; }
  .part__fig--r .part__scrib { left: -6px; }
  .part__fig--l .part__scrib { right: -6px; top: 8%; }
  .part__hot { grid-template-columns: 56px 1fr; gap: 12px; }
  .part__hot-ic { width: 56px; }

  .lessons { padding: 20px 16px 18px; gap: 20px; border-radius: 18px; }
  .lessons__t { font-size: 16.5px; padding: 6px 14px 6px 6px; }
  .lessons__n { width: 25px; height: 25px; font-size: 14px; }
  .lessons__i p { font-size: 16.5px; }
  .pdf { padding: 16px 18px 18px; font-size: 16.5px !important; }
  .pdf__scrib { position: static; display: block; transform: none; width: 38px; margin-bottom: 10px; }
  .talk { margin: 32px 0 42px; }

  /* На узком экране портрет рядом с текстом уже не помещается — ставим его
     над заголовком по центру: жест по-прежнему «смотрит» вниз, на форму. */
  .order { margin-top: 26px; padding: 40px 0 48px; }
  .order__top { grid-template-columns: 1fr; gap: 0; margin-bottom: 24px; text-align: center; }
  .order__ph { width: 150px; margin: 0 auto 6px; }
  .order__in { padding-bottom: 0; }
  .order__sub { font-size: 16.5px; }
  .order__form { padding: 22px 16px; border-radius: 20px; }

  /* Две опоры на телефоне встают одна под другой */
  .lasts { padding: 44px 0 58px; }
  .pil { grid-template-columns: 1fr; gap: 34px; margin-bottom: 30px; }
  .pil__i { padding: 36px 18px 22px; border-radius: 20px; }
  .pil__n { width: 46px; height: 46px; top: -23px; left: 18px; font-size: 21px; border-width: 4px; }
  .pil__t { font-size: 16.5px; }
  .lasts__p { font-size: 16.5px; }

  /* График цены масштабируется целиком в ширину экрана: боковой скролл убран,
     чтобы правые подписи не уезжали в скрытую зону. Подписи становятся мельче,
     но график виден целиком и сразу. */
  .scene--full { overflow-x: visible; }
  .scene--full .scene__svg { min-width: 0; width: 100%; }
  .answer { gap: 14px; padding: 18px; border-radius: var(--r-md); margin: 22px 0; }
  .answer__icon { width: 44px; height: 44px; border-radius: 13px; }
  .answer__icon svg { width: 22px; height: 22px; }
  .pull { margin: 30px 0; }
  .pull--cta { padding-bottom: 20px; }
  .pull--cta::after { width: 90px; }

  .result { padding: 54px 0 62px; }
  /* «🔥 Счёт вырос в 11,5 раз!» при нижней границе clamp (32px) переносился
     на две строки — ужимаем ровно настолько, чтобы влезло в одну строку,
     но покрупнее. vw держит одну строку и на узких (360px), и на широких телефонах. */
  .result__title { font-size: clamp(24px, 7vw, 30px); }
  .col p, .author__text p { font-size: 16.5px; }
  .author__name { font-size: 34px; }
  .author__role { font-size: 17px !important; margin-bottom: 22px !important; }
  .showcase { margin-top: 30px; padding: 20px; border-radius: 20px; }
  .score { margin-bottom: 20px; gap: 8px 12px; }
  .score__mult { font-size: 34px; }
  .score b { font-size: 28px; }
  .score__from { font-size: 24px; }
  .score__arrow { width: 24px; }
  .video { border-radius: 12px; }
  /* фигура садится на панель — верхний зазор убираем, чтобы не было щели.
     Фото теперь наверху по центру, а не свисает справа — правый коридор под
     ногу больше не нужен: текст плашки идёт во всю ширину. */
  .handoff { margin-top: 0; padding: 30px 26px; }

  .present { padding: 26px 0 16px; }
  .stage { padding: 40px 0 36px; margin-bottom: 38px; }
  .present__head { margin-bottom: 26px; }
  .arrows__i { grid-template-columns: 22px 1fr; gap: 0 10px; padding: 11px 0; }
  .arrows__m { font-size: 19px; }
  .arrows__i p { font-size: 16.5px; }
  .cta-bar { margin: 22px calc(50% - 50vw); padding: 34px 0; }
  /* базовое .cta-bar выше вернуло margin-top: 22px и перебило десктопный
     .cta-bar--tight — на телефоне между демо и tight-отбивкой светилась
     полоса фона. Возвращаем стык вплотную. */
  .cta-bar--tight { margin-top: 0; }
  .demo:has(+ .cta-bar--tight) { margin-bottom: 0; padding-bottom: 26px; }

  .spec { margin-bottom: 36px; gap: 10px; }
  .spec__row { grid-template-columns: 46px 1fr; gap: 14px; padding: 16px 16px; border-radius: 16px; }
  .spec__ico { width: 46px; height: 46px; border-radius: 13px; }
  .spec__ico svg { width: 22px; height: 22px; }
  .spec__body dt { font-size: 16.5px; }
  .spec__row dd { font-size: 16px; }
  .spec__row--hot dd { font-size: 16.5px; }
  .strat__title { gap: 12px; margin: 34px 0 14px; }
  .strat__ico { width: 48px; height: 48px; }
  .rules li { font-size: 16.5px; }
  .video__soon { font-size: 14px; }
  .video__soon svg { width: 44px; height: 44px; }

  .faq { padding: 52px 0 56px; }
  .faq__h { margin-bottom: 26px; }
  .faq__q { font-size: 17px; gap: 14px; padding: 20px 2px; }
  .faq__ic { width: 27px; height: 27px; }
  .faq__a p { font-size: 16px; }
  .foot { padding: 44px 0 48px; }
  .foot__grid { grid-template-columns: 1fr; gap: 26px; }
  .foot__logo {
    order: 1;
    padding: 4px 0;
  }
  .foot__logo img { width: 92px; }
}

@media (max-width: 380px) {
  .hero__title-lead { font-size: 35px; }
  .hero__title-rest { font-size: 21px; }
  .viz__pair { font-size: 13px; }
}