/* =============================================================================
   v2.css — новый первый экран главной: мокап кабинета, лента курсов,
   экспресс-расчёт, метрики, «Как мы защищаем платёж», мокап приложения.
   -----------------------------------------------------------------------------
   Подключается ТОЛЬКО на главной, после styles.css и additions.css.
   Все токены берутся из styles.css (navy/gold) — новых цветов не вводим.
   Анимации — исключительно transform/opacity (композитинг на GPU),
   никаких библиотек: вес файла ~10 КБ, JS-зависимостей нет.
   ========================================================================== */

/* ------------------------------ 1. HERO ---------------------------------- */
.hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}
@media (max-width: 960px) { .hero-v2 { grid-template-columns: 1fr; } }

/* Первый экран больше не растягивается на полтора экрана текстурой:
   высоту задаёт содержимое, а не фон. */
/* Первый экран — колонка: контент по центру, лента курсов прижата к нижней
   кромке экрана. Раньше лента была отдельной секцией и уходила под сгиб. */
.page-hero--v2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.2rem, .8rem + 1.6vw, 2.2rem) 0;
  overflow: hidden;
}
.page-hero--v2 > .container { width: 100%; padding-bottom: 1rem; }
.page-hero--v2 .rates {
  margin-top: auto;
  width: 100%;
  border-bottom: 0;
}
/* Колонка шире прежней: после увеличения заголовка строка «Выгодная комиссия
   от 0,3% —» перестала помещаться и ломалась пополам, а весь экран уезжал на
   четыре строки, выталкивая кнопки за сгиб (Тати 2026-09-18). */
.page-hero--v2 .page-hero__inner { max-width: min(54rem, 58vw); }
@media (max-width: 1100px) { .page-hero--v2 .page-hero__inner { max-width: 100%; } }
/* Заголовок на главной чуть меньше базового --fs-hero: в первый экран теперь
   встаёт ещё и экспресс-расчёт, и кнопка «Оставить заявку» должна оставаться
   видимой без прокрутки на ноутбучном экране 1440×900. */
/* Крупнее прежнего (Тати 2026-09-18): на первом экране остались только заголовок и
   калькулятор, и заголовок должен читаться как главное обещание. */
.page-hero--v2 h1 { font-size: clamp(2.36rem, 1.44rem + 2.65vw, 3.9rem); margin-bottom: 1.1rem; line-height: 1.12; }
/* Первый экран дышит: заголовок, карточка расчёта и кнопки разведены. Пока над
   заголовком стояли надзаголовок и абзац, воздуха хватало; без них всё слиплось. */
/* Ширина по тексту, а не по колонке: пустой правый край заголовка иначе тянется
   под графику и пересекается с бейджем — визуально ничего не задевает, но стоит
   заголовку стать длиннее, и он налезет на бейдж (Тати 2026-09-18). */
.page-hero--v2 .page-hero__inner > h1 { margin-bottom: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); width: fit-content; max-width: 100%; }
/* Карточка расчёта отодвинута от заголовка, а кнопки — от карточки: отступ снизу
   примерно с высоту самой кнопки «Оставить заявку» (Тати 2026-09-18). */
.page-hero--v2 .express { margin-top: 0; margin-bottom: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); max-width: 70%; }
@media (max-width: 1100px) { .page-hero--v2 .express { max-width: 100%; } }
.page-hero--v2 .page-hero__actions { margin-top: 0; }
.page-hero--v2 .page-hero__lead { font-size: clamp(.92rem, .88rem + .2vw, 1.02rem); max-width: 40rem; }
.page-hero--v2 .hero-facts { margin-top: 1.1rem; }

/* Мягкое свечение за мокапом. Анимируется только opacity+scale раз в 9 с —
   один композиторский слой, нагрузки на CPU нет. */
.hero-v2__glow {
  position: absolute;
  inset: auto -10% -20% auto;
  width: min(60vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 62%);
  pointer-events: none;
  animation: glowPulse 9s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* --------------------- 2. Мокап личного кабинета -------------------------- */
.app-mock {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #102A54 0%, #0B1E3F 62%, #081832 100%);
  border: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 30px 70px rgba(4, 12, 28, .45);
  padding: clamp(.9rem, .6rem + 1vw, 1.35rem);
  color: var(--text-light);
  overflow: hidden;
}
.app-mock__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.app-mock__dots { display: flex; gap: .3rem; }
.app-mock__dots i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.22); }
.app-mock__title { font-size: .8rem; letter-spacing: .04em; color: var(--text-muted-light); }
.app-mock__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.app-mock__live::before {
  content: "";
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--gold-500);
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.app-mock__sum {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: 1rem 0 .2rem;
}
.app-mock__sum b { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.02em; }
.app-mock__sum span { font-size: .82rem; color: var(--text-muted-light); }

.app-mock__rows { display: grid; gap: .5rem; margin-top: .9rem; }
.app-mock__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
/* Поочерёдная подсветка строк — имитация живой очереди поручений.
   Цикл 9 с, три строки со сдвигом по 3 с. */
.is-js .app-mock__row { animation: rowFocus 9s linear infinite; }
.is-js .app-mock__row:nth-child(2) { animation-delay: -6s; }
.is-js .app-mock__row:nth-child(3) { animation-delay: -3s; }
@keyframes rowFocus {
  0%, 22%   { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.42); }
  30%, 100% { background: rgba(255,255,255,.05); border-color: transparent; }
}
.app-mock__flag {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(212, 175, 55, .16);
  color: var(--gold-400);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.app-mock__where { display: block; font-size: .9rem; }
.app-mock__meta { display: block; font-size: .74rem; color: var(--text-muted-light); }
.app-mock__amount { font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-mock__status {
  display: block;
  font-size: .7rem;
  text-align: right;
  color: var(--gold-400);
}
.app-mock__status--done { color: #7FD6A0; }

/* Лента этапов внизу мокапа: бегунок проходит четыре шага за 9 с. */
.app-mock__track { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.09); }
.app-mock__steps { display: flex; justify-content: space-between; gap: .4rem; font-size: .68rem; color: var(--text-muted-light); }
.app-mock__line { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: .5rem; overflow: hidden; }
.app-mock__line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  border-radius: 3px;
  background: var(--gold-fill);
  transform: translateX(-100%);
}
.is-js .app-mock__line::after { animation: trackRun 9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes trackRun {
  0%   { transform: translateX(-100%); }
  18%  { transform: translateX(0); }
  38%  { transform: translateX(90%); }
  58%  { transform: translateX(180%); }
  78%, 100% { transform: translateX(260%); }
}
.app-mock__caption {
  margin: .6rem 0 0;
  font-size: .68rem;
  color: var(--text-muted-light);
  text-align: right;
}

/* ------------------------- 3. Лента курсов ------------------------------- */
.rates {
  background: var(--navy-900);
  border-block: 1px solid rgba(212, 175, 55, .2);
  overflow: hidden;
  padding: .7rem 0;
}
.rates__inner { display: flex; align-items: center; gap: 1.2rem; }
.rates__label {
  flex: none;
  padding-left: var(--gutter);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.rates__viewport { overflow: hidden; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.rates__track { display: flex; gap: 2rem; width: max-content; }
.is-js .rates__track { animation: ratesRun 46s linear infinite; }
.rates:hover .rates__track, .rates:focus-within .rates__track { animation-play-state: paused; }
@keyframes ratesRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rate { display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap; font-size: .86rem; color: var(--text-light); }
.rate__code { color: var(--text-muted-light); letter-spacing: .06em; }
.rate__val { font-variant-numeric: tabular-nums; }
.rate__delta { font-size: .74rem; }
.rate__delta--up { color: #7FD6A0; }
.rate__delta--down { color: #E9A6A6; }
.rates__note { flex: none; padding-right: var(--gutter); font-size: .68rem; color: var(--text-muted-light); }
@media (max-width: 760px) { .rates__label, .rates__note { display: none; } }

/* --------------------- 4. Экспресс-расчёт в первом экране ---------------- */
.express {
  margin-top: 1.1rem;
  padding: .85rem 1rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(212, 175, 55, .26);
}
.express__title { margin: 0 0 .7rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.express__row { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr; gap: .6rem; }
@media (max-width: 620px) { .express__row { grid-template-columns: 1fr 1fr; } }
.express__field { display: grid; gap: .25rem; }
.express__field label { font-size: .72rem; color: var(--text-muted-light); }
.express__field input,
.express__field select {
  width: 100%;
  padding: .55rem .6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 22, 48, .6);
  color: var(--text-light);
  font: inherit;
  font-size: .9rem;
}
.express__field input:focus-visible,
.express__field select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.express__out {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed rgba(255, 255, 255, .16);
  font-size: .86rem;
}
.express__out b { color: var(--gold-400); font-variant-numeric: tabular-nums; }
.express__note { margin: .55rem 0 0; font-size: .7rem; color: var(--text-muted-light); }
/* Звёздочка у итога — просто знак сноски: она больше ничего не раскрывает,
   текст сноски стоит под таблицей и виден сразу. */
.express__star {
  padding-left: .25rem;
  color: var(--gold-400); font-size: 1.05em; line-height: 1;
  vertical-align: super;
}
/* Юридическая оговорка под расчётом: тише сноски, но читаемая. */
.express__legal { margin: .3rem 0 0; font-size: .66rem; line-height: 1.4; color: var(--text-muted-light); opacity: .85; }
/* Какими валютами платим в выбранное направление. В отличие от общей сноски
   не прячется на низких экранах: это не оговорка, а условие расчёта. */
.express__ccynote { margin: .45rem 0 0; font-size: .72rem; color: var(--text-muted-light); }

/* --------------------------- 5. Полоса метрик ---------------------------- */
.metrics-band { background: var(--light-2); }
.metrics-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
}
@media (max-width: 860px) { .metrics-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric__val {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.metric__lab { margin: .5rem 0 0; font-size: .9rem; color: var(--text-muted-dark); }

/* ------------------- 6. Как мы защищаем ваш платёж ----------------------- */
.safeguards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); }
@media (max-width: 900px) { .safeguards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .safeguards { grid-template-columns: 1fr; } }
.safeguard {
  position: relative;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.safeguard:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, .45); }
.safeguard__num {
  display: block;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--gold-500);
  margin-bottom: .55rem;
}
.safeguard h3 { margin: 0 0 .4rem; font-size: var(--fs-h3); color: var(--white); }
.safeguard p { margin: 0; font-size: .92rem; color: var(--text-muted-light); }

/* ----------------------- 7. Мокап приложения ----------------------------- */
.cabinet-v2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .cabinet-v2 { grid-template-columns: 1fr; } }
.phone {
  width: 268px;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 34px;
  padding: .7rem .6rem;
  background: linear-gradient(165deg, #16305C, #0A1B38);
  border: 1px solid rgba(212, 175, 55, .3);
  box-shadow: 0 26px 60px rgba(4, 12, 28, .42);
  color: var(--text-light);
}
.phone__notch { width: 44%; height: 5px; border-radius: 4px; background: rgba(255,255,255,.2); margin: .1rem auto .8rem; }
.phone__label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.phone__sum { font-size: 1.45rem; margin: .25rem 0 .1rem; font-variant-numeric: tabular-nums; }
.phone__sub { font-size: .72rem; color: var(--text-muted-light); }
.phone__list { display: grid; gap: .45rem; margin-top: .9rem; }
.phone__item { display: grid; grid-template-columns: 1fr auto; gap: .3rem; padding: .55rem .6rem; border-radius: 11px; background: rgba(255,255,255,.06); font-size: .78rem; }
.phone__item span { color: var(--text-muted-light); font-size: .68rem; display: block; }
.phone__item b { font-variant-numeric: tabular-nums; font-weight: 600; }
.phone__cta { margin-top: .8rem; text-align: center; padding: .6rem; border-radius: 11px; background: var(--gold-fill); color: #23180A; font-size: .82rem; font-weight: 600; }

/* --------------------------- 8. Доступность ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .is-js .rates__track,
  .is-js .app-mock__row,
  .is-js .app-mock__line::after,
  .hero-v2__glow,
  .app-mock__live::before { animation: none !important; }
  .safeguard { transition: none; }
}

/* ------------- 9. Таблица расчёта в экспресс-калькуляторе ---------------- */
.express__calc { margin: .85rem 0 0; display: grid; gap: .3rem; }
.express__calc > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.express__calc dt { color: var(--text-muted-light); margin: 0; }
.express__calc dd { margin: 0; text-align: right; }
.express__calc dd b { color: var(--text-light); font-variant-numeric: tabular-nums; font-weight: 600; }
.express__calc dt span { color: var(--gold-400); }
/* Подпись под курсом «ориентировочно, на ЧЧ:ММ МСК» — как подпись о валютах направления. */
.express__calc dd .express__ratetime { display: block; margin-top: .1rem; font-size: .72rem; color: var(--text-muted-light); }
.express__calc dd .express__ratetime[hidden] { display: none; }
.express__total { margin-top: .35rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.16); }
.express__total dt { color: var(--text-light); font-weight: 600; }
.express__total dd b { color: var(--gold-400); font-size: 1.05rem; }

/* --------------- 10. Реальный скриншот личного кабинета ------------------ */
.cabinet-shot { margin: 0; justify-self: center; max-width: 320px; }
.cabinet-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(11, 30, 63, .14);
  box-shadow: 0 24px 56px rgba(7, 22, 48, .22);
}
.cabinet-shot figcaption { margin-top: .9rem; text-align: center; }
/* Под скриншотом — действие, а не подпись: посетитель уже видит, как выглядит
   кабинет, и следующий логичный шаг — завести свой. Ссылка ведёт прямо на
   форму регистрации в app.lokomotivneva.ru. */
.cabinet-shot__cta { display: inline-flex; }

/* --------- 11. Невысокие экраны: ужимаем первый экран целиком -------------
   На ноутбуке 13" под шапкой и промо-полосой остаётся ~700 px. Кнопки и лента
   курсов должны оставаться видны, поэтому уменьшаем шрифты и внутренние
   отступы, а не прячем содержимое. */
@media (max-height: 1000px) {
  .page-hero--v2 h1 { font-size: clamp(2.19rem, 1.32rem + 2.4vw, 3.45rem); margin-bottom: .75rem; }
  .page-hero--v2 .page-hero__lead { font-size: .95rem; line-height: 1.4; max-width: 34rem; }
  .express { margin-top: .85rem; padding: 1.1rem 1.25rem 1.2rem; }
  .express__title { margin-bottom: .5rem; }
  .express__calc { margin-top: .6rem; gap: .18rem; }
  .express__calc > div { font-size: .8rem; }
  .express__field input, .express__field select { padding: .45rem .55rem; font-size: .85rem; }
  .page-hero--v2 .page-hero__inner > h1 { margin-bottom: 2.2rem; }
  .page-hero--v2 .express { margin-bottom: 2.4rem; }
  .page-hero--v2 .page-hero__actions { margin-top: 0; }
  .page-hero--v2 .page-hero__actions .btn { padding-block: .7rem; }
  .page-hero--v2 .page-hero__note { margin-top: .5rem; }
  .rates { padding: .5rem 0; }
}
@media (max-height: 820px) {
  .page-hero--v2 .page-hero__inner > h1 { margin-bottom: 1.6rem; }
  .page-hero--v2 .express { margin-bottom: 1.8rem; }
  .page-hero--v2 .page-hero__actions { margin-top: 0; }
  .express { padding: .85rem 1rem .9rem; }
  .page-hero--v2 .page-hero__lead { display: none; }
  /* Сноску НЕ прячем даже на низких экранах: она предупреждает, что комиссия
     банка в «Итого» не входит. Без неё человек примет сумму за окончательную и
     узнает правду только при оформлении. Место под неё освободилось после того,
     как с первого экрана ушли надзаголовок и абзац (Тати 2026-09-18). */
  .express__note { font-size: .66rem; margin-top: .45rem; }
  .express__legal { font-size: .62rem; margin-top: .25rem; }
}


/* ----------------- 13. Живая печать в первом экране ----------------------
   Видео заменило статичную эмблему. Оно не «карточка поверх фона», а сам фон
   правой половины экрана: края растворяются маской, поэтому стык с текстурой
   hero не читается. Текстовый блок держит z-index: 2 и остаётся сверху.    */
.hero-seal {
  position: absolute;
  /* Отступ справа, чтобы печать не касалась края экрана. */
  inset: 0 clamp(1rem, 3vw, 3rem) 0 auto;
  width: min(50%, 780px);
  margin: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-seal__video,
.hero-seal__img {
  width: 100%;
  height: 100%;
  /* Ролик с монетами и картой — вертикальный, блок под него шире и ниже. При
     contain кадр вписывался целиком и висел маленьким пятном справа; cover даёт
     плотную картинку во всю высоту, а срезанные края всё равно съедает маска
     (новое видео, Тати 2026-09-18). */
  object-fit: cover;
  object-position: center;
  /* Ярче прежней печати: ролик тёмный, текст от него слева, и приглушать его до
     половины незачем — иначе монеты и маршрут не читаются. */
  opacity: .82;
  /* Кадр растворяется со ВСЕХ четырёх сторон: иначе на правой границе видна
     полоса — фон ролика чуть светлее фона страницы (Тати, 17.09.2026).
     Слева гасим сильнее: там под кадром идёт текст. */
  /* Растушёвка шире прежней: cover подводит кадр вплотную к краям блока, и при
     узкой маске справа и снизу видна ровная линия обреза. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.28) 10%, #000 38%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.28) 10%, #000 38%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Safari рисует поверх остановленного ролика собственную кнопку
   воспроизведения. Видео здесь — фон, а не плеер: управлять им незачем,
   поэтому все системные контролы скрываем. Если автозапуск заблокирован,
   на месте ролика просто остаётся стоп-кадр (Тати, 17.09.2026). */
.hero-seal__video::-webkit-media-controls,
.hero-seal__video::-webkit-media-controls-enclosure,
.hero-seal__video::-webkit-media-controls-panel,
.hero-seal__video::-webkit-media-controls-overlay-play-button,
.hero-seal__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

/* Ниже 1001px печать и раньше не показывалась: узкий экран занимает текст. */
/* Вторая половина заголовка — тише первой: она уточняет предложение, а не спорит
   с ним за внимание (Тати 2026-09-18). Отдельной строкой, мельче и золотом. */
.hero-h1__soft {
  display: block;
  margin-top: .35em;
  font-size: .62em;
  line-height: 1.15;
}
/* Цвет вынесен отдельным правилом с той же «весомостью», что и общее
   .page-hero h1 .text-gold { color: inherit } в additions.css, — иначе заголовок
   остаётся белым: то правило специфичнее одиночного класса. */
.page-hero--v2 h1 .hero-h1__soft { color: var(--gold-400); }
/* «Выводим ваши платежи из тупика» — в одну строку (Тати 2026-09-29). Шрифт
   ужимается по ширине экрана, чтобы строка влезала в колонку; золотая строка
   считается от размера h1, а не отсюда, поэтому её не задевает.
   На телефоне перенос разрешён — одной строкой там вышел бы мелкий текст. */
.hero-h1__main { display: block; white-space: nowrap; font-size: min(1em, 3.3vw); }
@media (max-width: 700px) { .hero-h1__main { white-space: normal; font-size: 1em; } }
/* Звёздочка после «0,3%» в заголовке и её сноска сразу под ним.
   У сноски калькулятора — «**», чтобы две оговорки не путались. */
.hero-h1__star { font-size: .45em; line-height: 0; vertical-align: super; margin-left: .05em; }
/* Подзаголовок и акцент первого экрана (Вариант 1 «Прямой экспресс», 2026-09-29).
   Не .page-hero__lead: тот прячется на низких экранах, а эти строки — часть оффера. */
.page-hero--v2 h1 + .hero-sub { margin: -.6rem 0 .55rem; font-size: clamp(1rem, .94rem + .3vw, 1.18rem); line-height: 1.4; color: var(--text-light); max-width: 38rem; }
.hero-accent { margin: 0 0 .35rem; font-size: clamp(.92rem, .88rem + .2vw, 1.02rem); line-height: 1.4; color: var(--text-light); }
.hero-accent b { color: var(--gold-400); font-weight: 700; }
.hero-accent .hero-h1__star { font-size: .7em; }
.page-hero--v2 .hero-accent + .hero-footnote { margin: 0 0 1.1rem; font-size: .75rem; line-height: 1.4; color: var(--text-muted-light); }

/* Локомотив: голова поезда правее центра кадра — сдвигаем обрез, чтобы при cover
   не срезались фары; картинка светлее ролика, приглушать почти не нужно. */
/* Картинка с табло (Тати 2026-09-29): на ней текст «Комиссия / Срок» у правого
   края — общая маска видео растворяла бы его. Показываем кадр целиком (contain),
   гасим только левый край (под ним текст) и верх/низ, правый край не трогаем. */
.hero-seal__img {
  display: block;
  object-fit: contain;
  object-position: right center;
  opacity: 1;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 12%, #000 34%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 12%, #000 34%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

@media (max-width: 1000px) { .hero-seal { display: none; } }
/* Картинка с табло шире ролика по смыслу: между 1001 и 1199px она заезжает
   под калькулятор — там её не показываем. */
@media (max-width: 1199px) { .hero-seal:has(.hero-seal__img) { display: none; } }
/* Картинка крупнее на 30% (Тати 2026-09-29): растим от правого края, чтобы
   табло не уезжало за экран; пустое небо сверху и туман слева уходят под
   обрез/маску. overflow у блока снимаем — обрезает сам первый экран. */
.hero-seal:has(.hero-seal__img) { overflow: visible; }
.hero-seal__img { transform: scale(1.3); transform-origin: 100% 55%; }


/* ---------------- 14. Второй экран: боль + билеты-направления ----------------
   Каждое направление оформлено как билет на «прямой экспресс» (Тати 2026-09-29):
   корешок с номером и штрихкодом, основная часть с маршрутом, пунктир отрыва
   с полукруглыми вырезами и золотой хвост с названием компании. */
.pain__text {
  max-width: 44rem;
  margin: 1.1rem auto 0;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  line-height: 1.6;
  color: var(--text-muted-dark);
}
.tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) 3.2rem;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 14px 34px -20px rgba(11, 30, 63, .4), 0 1px 2px rgba(11, 30, 63, .06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ticket:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(11, 30, 63, .5), 0 1px 2px rgba(11, 30, 63, .06); }
.ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: 1.1rem 0;
  border-right: 1px solid var(--light-2);
}
.ticket__no {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.ticket__no small {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-block-end: .45rem;
}
.ticket__bar {
  flex: 1;
  max-height: 5.5rem;
  min-height: 3rem;
  width: 1.7rem;
  background: repeating-linear-gradient(to bottom,
    var(--navy-800) 0 2px, transparent 2px 4px,
    var(--navy-800) 4px 5px, transparent 5px 7px,
    var(--navy-800) 7px 10px, transparent 10px 12px);
  opacity: .8;
}
.ticket__body { padding: 1.3rem 1.6rem 1.35rem; border-right: 2px dashed var(--light-2); }
.ticket__label {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.ticket__route {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
  font-weight: 800;
  color: var(--text-dark);
}
.ticket__route .icon { width: .8em; height: .8em; color: var(--gold-600); flex: none; }
.ticket__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: .3rem 1.8rem;
  margin: 0 0 1.05rem;
}
.ticket__meta dt {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.ticket__meta dd { margin: .15rem 0 0; font-size: 1.02rem; font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.ticket__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--gold-700);
  text-decoration: none;
}
.ticket__link .icon { width: 1rem; height: 1rem; transition: transform .2s; }
.ticket__link:hover .icon { transform: translateX(3px); }
.ticket__tail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
}
/* Вырезы на линии отрыва: круги цвета фона секции, половина уходит за край билета. */
.ticket__tail::before,
.ticket__tail::after {
  content: "";
  position: absolute;
  left: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--light);
}
.ticket__tail::before { top: -10px; }
.ticket__tail::after { bottom: -10px; }
.ticket__tail span {
  writing-mode: vertical-rl;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.tickets__note { margin: 1.6rem 0 0; text-align: center; font-size: .92rem; color: var(--text-muted-dark); }
.tickets__note a { color: var(--gold-700); font-weight: 700; }

@media (max-width: 860px) {
  .tickets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ticket { grid-template-columns: 3.2rem minmax(0, 1fr) 2.4rem; }
  .ticket__no { font-size: 1.35rem; }
  .ticket__bar { width: 1.3rem; }
  .ticket__body { padding: 1.1rem 1.1rem 1.15rem; }
  .ticket__meta { gap: .3rem 1.1rem; }
  .ticket__meta dd { font-size: .92rem; }
}


/* ---------- 16. Первый экран без калькулятора (Тати 2026-09-29) ------------
   Калькулятор ушёл — текст держит экран сам: подзаголовок и строка с комиссией
   крупнее, между блоками больше воздуха, кнопки отделены от сноски. */
.page-hero--v2 h1 + .hero-sub { margin-top: -.2rem; margin-bottom: .8rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); max-width: 40rem; }
.page-hero--v2 .hero-accent { font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); margin-bottom: .5rem; }
.page-hero--v2 .hero-accent + .hero-footnote { margin-bottom: 0; font-size: .8rem; }
.page-hero--v2 .page-hero__actions { margin-top: clamp(2rem, 1.4rem + 1.8vw, 3.2rem); }
/* Без калькулятора колонка с текстом стала низкой: текст прилипал к верху, а
   картинка (она позиционируется по .hero-2col) сжималась. Растягиваем колонку
   на всю высоту первого экрана — текст центрируется сеткой, картинка крупная. */
.page-hero--v2 > .container { flex: 1; display: flex; }
.page-hero--v2 .hero-2col { flex: 1; }
/* Текст теперь по центру высоты — ровно на уровне табло. При +30% табло
   заходило под заголовок на 1280–1440px; 1.15 держит табло правее текста,
   а под текстом остаётся только растушёванный хвост поезда. */
.hero-seal__img { transform: scale(1.15); transform-origin: 100% 50%; }


/* ------------- 17. Четвёртый экран: «Дайте гудок к отправке» --------------
   Калькулятор в отдельной секции: слева заголовок и текст, справа карточка
   расчёта. Направление — ряд кнопок-«станций» вместо выпадающего списка. */
.calc-v2 {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.calc-v2__intro .section__title { margin: 0 0 1rem; }
.calc-v2__lead { margin: 0 0 1.8rem; max-width: 32rem; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; color: var(--text-muted-light); }
.calc-v2__intro .cta-row { margin: 0; }
.express--section { margin: 0; padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.express--section .express__title { margin-bottom: .6rem; }
.express__routes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.express__route {
  padding: .75rem .4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(7, 22, 48, .45);
  color: var(--text-light);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.express__route:hover { border-color: var(--gold-400); }
.express__route:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.express__route[aria-pressed="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.express__row--two { grid-template-columns: 1.5fr 1fr; }
/* Сумма и валюта — одной высоты и по одной линии (Тати 2026-10-07): поле ввода и
   выпадающий список браузер рисует разной высоты, поэтому задаём её явно. */
.express__row { align-items: end; }
.express__field input,
.express__field select { box-sizing: border-box; height: 3rem; line-height: 1.2; margin: 0; }

@media (max-width: 960px) {
  .calc-v2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .express__routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .express__route { letter-spacing: .04em; font-size: .74rem; }
  .express__row--two { grid-template-columns: 1fr 1fr; }
}


/* ------ 18. Первый экран: картинка к краю, крупный текст с переносами ------
   (Тати 2026-09-29). Картинка прижата к правому краю окна — выходит за
   внутренний отступ контейнера; правую растушёвку снимаем, край = край экрана.
   Заголовок крупнее и по строкам: «Выводим ваши платежи / из тупика»,
   «Прямой экспресс до Китая, / Турции, ОАЭ и ЕС» (переносы — <br class="hero-br">). */
.page-hero--v2 .hero-seal:has(.hero-seal__img) { right: calc(-1 * var(--gutter)); }
.hero-seal__img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 12%, #000 34%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 12%, #000 34%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.page-hero--v2 h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.8rem); line-height: 1.06; }
.hero-h1__main { white-space: normal; font-size: 1em; }
.page-hero--v2 h1 .hero-h1__soft { font-size: .6em; margin-top: .45em; line-height: 1.15; }
.page-hero--v2 h1 + .hero-sub { font-size: clamp(1.2rem, 1rem + .8vw, 1.75rem); }
.page-hero--v2 .hero-accent { font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); }
.page-hero--v2 .hero-accent + .hero-footnote { font-size: .85rem; }
@media (max-width: 700px) { .hero-br { display: none; } }


/* -------- 19. Чистка повторов на главной (Тати 2026-09-29) ------------------
   «Маршрут платежа»: номер этапа подписан «Станция N» вместо «01».
   «Безопасность сделки», пункт III — ссылки на документы (бывший блок
   «Документы открыты»). */
.steps--stations .step::before {
  content: "Станция " counter(step);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.safeguard__links { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.safeguard__links a {
  font-size: .92rem;
  font-weight: 600;
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.safeguard__links a:hover { color: var(--gold-300); }
/* Билеты на 360px: «CNY · USD» и «1–3 дня» рвались на строки. Значения —
   без переноса, корешок и хвост уже, промежутки меньше. */
.ticket__meta dt, .ticket__meta dd { white-space: nowrap; }
@media (max-width: 420px) {
  .ticket { grid-template-columns: 2.6rem minmax(0, 1fr) 1.9rem; }
  .ticket__no { font-size: 1.15rem; }
  .ticket__bar { width: 1.1rem; }
  .ticket__body { padding: 1rem .9rem 1.05rem; }
  .ticket__route { font-size: 1.25rem; }
  .ticket__meta { gap: .3rem .85rem; }
  .ticket__meta dt { font-size: .58rem; letter-spacing: .1em; }
  .ticket__meta dd { font-size: .86rem; }
  .ticket__tail span { font-size: .6rem; letter-spacing: .24em; }
}
/* «Ваш импорт снова сошёл с рельсов?» — одной строкой (Тати 2026-09-29):
   шапку секции не ограничиваем 780px, на телефоне перенос разрешён. */
#directions .section__head { max-width: none; }
@media (min-width: 761px) { #pain-title { white-space: nowrap; } }
/* Текст боли — два предложения, каждое своей строкой без переноса (Тати 2026-09-29).
   На узких экранах — обычный перенос. */
@media (min-width: 900px) {
  #directions .pain__text { max-width: none; }
  .pain__line { display: block; white-space: nowrap; }
}
/* «Пять станций» на светлом фоне (Тати 2026-09-29): светлое золото подписей
   «Станция N» на белом не читалось — берём тёмное. */
.section--light .steps--stations .step::before { color: var(--gold-700); }

/* ---------- 20. «Пять станций» — схема линии, как на карте (Тати 2026-09-29) ----------
   Вместо карточек: тёмная линия через все станции, на ней золотые кружки
   с номером, под кружком — название и текст по центру. На телефоне линия
   вертикальная, текст слева от неё. */
.steps--stations {
  --st: 3rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  counter-reset: step;
}
.steps--stations .step {
  position: relative;
  padding: 0 .9rem;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}
.steps--stations .step:hover { transform: none; box-shadow: none; }
/* отрезок линии: от центра своей станции до центра следующей */
.steps--stations .step::after {
  content: "";
  position: absolute;
  top: calc(var(--st) / 2 - 2px);
  left: 50%;
  width: 100%;
  height: 4px;
  background: var(--navy-800);
  z-index: 0;
}
.steps--stations .step:last-child::after { display: none; }
.section--light .steps--stations .step::before,
.steps--stations .step::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: var(--st);
  height: var(--st);
  margin: 0 0 1.1rem;
  border-radius: 50%;
  background: #FBF3DC;
  border: 4px solid var(--gold-500);
  color: var(--navy-800);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
.steps--stations .step h3 { margin: 0 0 .45rem; font-size: 1.12rem; color: var(--text-dark); }
.steps--stations .step p { margin: 0 auto; max-width: 15rem; font-size: .95rem; line-height: 1.55; color: var(--text-muted-dark); }

@media (max-width: 860px) {
  .steps--stations { grid-template-columns: 1fr; }
  .steps--stations .step { padding: 0 0 1.8rem calc(var(--st) + 1rem); text-align: left; min-height: calc(var(--st) + .8rem); }
  .steps--stations .step:last-child { padding-bottom: 0; }
  .section--light .steps--stations .step::before,
  .steps--stations .step::before { position: absolute; left: 0; top: 0; margin: 0; }
  .steps--stations .step::after { top: calc(var(--st) / 2); left: calc(var(--st) / 2 - 2px); width: 4px; height: 100%; }
  .steps--stations .step h3 { margin-top: .6rem; }
  .steps--stations .step p { margin: 0; max-width: none; }
}

/* ---------------- 21. «Наша бригада» (Тати 2026-09-29) ---------------------
   Три факта о команде — табличками на тёмном фоне: подпись золотом, значение крупно. */
#team .section__sub { max-width: 46rem; margin-inline: auto; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; }
#team .section__head { max-width: 60rem; }
.crew {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, .5rem + 1vw, 1.4rem);
}
.crew__item {
  padding: 1.4rem 1.3rem 1.3rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(212, 175, 55, .28);
  text-align: center;
}
.crew__item dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.crew__item dd { margin: .55rem 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 800; color: var(--white); }
.crew__item span { display: block; margin-top: .3rem; font-size: .85rem; color: var(--text-muted-light); }
@media (max-width: 860px) { .crew { grid-template-columns: 1fr; } }