/* ==========================================================================
   ViewChat — видео-интро главной страницы (первый экран перед 3D-hero)

   Изолированный слой: вся композиция живёт внутри .vc-video-hero.
   Единственное исключение — блок «Шапка поверх видео» в конце файла: он
   ограничен body.vc-hero-page, то есть действует только на главной.

   Пути к видео и постерам задаются в index.html на самой секции
   (data-video-desktop / data-video-mobile / data-video-mobile-media и
   <picture> постера). Здесь — только геометрия, кадрирование и цвет.
   ========================================================================== */

.vc-video-hero {
  /* --- Токены оформления ------------------------------------------------ */
  /* Тёмный тил + коралл — язык бренда ViewChat, не палитра референса. */
  --vcv-deep: #05161a;
  --vcv-coral: #f2565c;
  --vcv-coral-light: #ff6d73;

  /* Высота шапки этого экрана. Тем же значением JS сдвигает верхнюю границу
     наблюдателя, который переключает тему шапки. */
  --vcv-header: 92px;
  /* Свободная полоса у нижнего края: контент не прижимается к границе секции.
     Раньше тем же значением задавалась высота белого фейда — слоя больше нет,
     осталась только эта воздушная зона, поэтому токен переименован. */
  --vcv-bottom-space: clamp(90px, 13vh, 170px);
  /* Та же сетка, что у панелей 3D-hero, — колонки двух экранов совпадают. */
  --vcv-gutter: max(6vw, calc(50vw - 620px));
  /* Кадрирование под object-fit: cover. Десктоп и мобильный — раздельно.

     По вертикали десктоп прижат к НИЖНЕЙ кромке кадра, и это не вкусовое
     решение. Ролик горизонтальный 1920x1080, секция — во всю высоту экрана,
     поэтому как только пропорции окна становятся шире 16:9 (а это обычное
     окно на мониторе 1920x1080: вьюпорт там около 1920x950), cover
     масштабирует ролик ПО ШИРИНЕ и лишнюю высоту срезает. Внизу кадра
     живут вшитые в ролик цифры счётчика (исходные y 970..1027), и прежнее
     значение 46% — то есть чуть выше центра — срезало именно их: на
     1920x950 на 35 px, на 1600x800 на 25 px, на 2560x1000 на 191 px.
     Выглядело это как будто следующая секция наезжает на первый экран,
     хотя наложения нет вовсе (см. z-index ниже).

     100% = нижняя кромка ролика всегда совпадает с нижней границей секции,
     то есть счётчик виден целиком при любой ширине окна. На пропорциях
     16:9 и УЖЕ (1440x900, 1920x1080) вертикального запаса нет вообще —
     cover там масштабирует по высоте, — поэтому на этих размерах значение
     не меняет ровно ничего: кадр там и был, и остался полным по вертикали.
     Ни layout, ни текст, ни CTA object-position не двигает в принципе. */
  --vcv-object-position: 50% 100%;

  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  /* 100svh: мобильная адресная строка не «дёргает» первый экран.
     Первым идёт vh — фолбэк для браузеров без svh. */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  /* Фон до готовности постера: тёмный тил, а не чёрная вспышка. */
  background: var(--vcv-deep);
  color: #fff;
}

/* --- Слой медиа: постер и видео ----------------------------------------- */
/* Область медиа зарезервирована с первой отрисовки (inset: 0 внутри секции
   фиксированной высоты), поэтому появление видео не двигает layout. */

.vc-video-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Медиа и все декоративные слои не перехватывают клики и фокус. */
  pointer-events: none;
}

.vc-video-hero__poster,
.vc-video-hero__poster img,
.vc-video-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vcv-object-position);
}

/* Постер остаётся под видео всегда: при загрузке, при паузе, при отказе
   автоплея и в режимах без видео. Пустого места не бывает. */
.vc-video-hero__poster {
  z-index: 0;
}

/* Никаких filter / mix-blend-mode / brightness: цвет ролика отдаётся как есть.
   Единственная динамика — короткое проявление вместо постера. */
.vc-video-hero__video {
  z-index: 1;
  opacity: 0;
  background: transparent;
  /* 240ms: подмена заметна как смена «живости», а не как вспышка. Постер под
     видео — тот же кадр 0 ролика, поэтому переход визуально бесшовный. */
  transition: opacity 240ms ease-out;
}

/* Класс ставит JS после первого реально декодированного кадра (loadeddata),
   а не по таймеру — см. viewchat-video-hero.js. */
.vc-video-hero.is-video-ready .vc-video-hero__video {
  opacity: 1;
}

/* --- Затемнение и скрим -------------------------------------------------- */

/* Общий тинт — только минимальная страховка читаемости, не цветокоррекция.
   0.14 практически не сдвигает палитру: нейтральные серые, белки глаз и
   тёмно-зелёные области кадра остаются такими же, как в исходном ролике. */
.vc-video-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 22, 26, 0.14);
}

/* Направленный скрим. Ровно два градиента — оба локальные:
   1) верхняя полоса — лёгкая подложка под светлую шапку;
   2) левый клин — только за текстовым блоком, к центру уходит в прозрачность.
   Нижнего уплотнения нет: правая половина кадра (лицо) не затемняется вообще.

   Клин держит плотность до 34% ширины (там заканчиваются глифы заголовка) и
   только потом уходит в ноль. Если гасить его сразу от левого края, правая
   часть колонки текста остаётся почти без подложки: на светлых участках
   halftone-кадра белый текст там терял контраст.

   Замер на кадре 0 нового ролика, 1440x900: тинт 0.14 + клин 0.54 на полностью
   белом пикселе дают фон rgb(104,114,117) — 4.9:1 с белым. Медиана по зоне
   текста ~10:1; на самых светлых точках halftone контраст опускается до ~1.9:1
   (см. отчёт: это предел при капе 0.54, поднимать кап без запроса не стал). */
.vc-video-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      180deg,
      rgba(5, 22, 26, 0.38) 0,
      rgba(5, 22, 26, 0.16) 110px,
      rgba(5, 22, 26, 0) 230px
    ),
    linear-gradient(
      96deg,
      rgba(5, 22, 26, 0.54) 0%,
      rgba(5, 22, 26, 0.5) 22%,
      rgba(5, 22, 26, 0.44) 34%,
      rgba(5, 22, 26, 0.28) 44%,
      rgba(5, 22, 26, 0.1) 52%,
      rgba(5, 22, 26, 0) 58%
    );
}

/* --- Переход в светлый 3D-hero ------------------------------------------- */
/* Отдельного слоя перехода нет намеренно. Прежний .vc-video-hero__fade уходил
   в белый #fffdfc и давал серо-белую дымку у нижней границы кадра: она гасила
   контраст ролика и читалась как тень. Граница секций теперь чистая — тёмное
   видео просто заканчивается там, где начинается светлый 3D-hero. Свободную
   полосу под контентом держит --vcv-bottom-space, а не градиент. */

/* --- Контент -------------------------------------------------------------- */

.vc-video-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Сверху — гарантированный зазор под шапкой даже на низких экранах,
     снизу — свободная полоса плюс собственный отступ. Значения те же, что были
     при фейде: удаление слоя не сдвинуло ни заголовок, ни CTA. */
  padding:
    calc(var(--vcv-header) + 24px)
    6vw
    calc(var(--vcv-bottom-space) + clamp(24px, 4vh, 56px))
    var(--vcv-gutter);
}

/* Правая и центральная части кадра свободны — там живёт сам ролик. */
.vc-video-hero__content {
  max-width: min(620px, 52vw);
}

.vc-video-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Мелкий текст — держим чистый белый, полупрозрачный не проходит AA
     на самых светлых кадрах. */
  color: #fff;
  text-shadow: 0 1px 14px rgba(5, 22, 26, 0.6);
}

.vc-video-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vcv-coral);
  box-shadow: 0 0 0 4px rgba(242, 86, 92, 0.22);
}

/* Тень — страховка контраста на самых светлых кадрах, а не декор. */
.vc-video-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 28px rgba(5, 22, 26, 0.55);
}

/* Korean headline keeps the CamTalk-like two-line hierarchy in the translation
   itself: a normal first line, then a native <b>. Other locales remain plain
   text because the same data-i18n-html hook simply receives their strings. */
html[lang="ko"] .vc-video-hero__title {
  font-weight: 400;
  line-height: 1.1;
  /* Корейский editorial-набор остаётся чистым белым поверх видео: без
     обводки, свечения, градиента и тени. */
  text-shadow: none;
}

html[lang="ko"] .vc-video-hero__title b {
  font-weight: 750;
}

@media (min-width: 992px) {
  html[lang="ko"] .vc-video-hero__title {
    font-size: clamp(2.6rem, 5.2vw, 62px);
  }
}

/* Из-за второй строки заголовка паре CTA нужен более заметный отбив, иначе
   кнопки читаются продолжением набора. Правило перебивает и десктопный
   clamp(), и мобильные 24px, но только в корейской локали. */
html[lang="ko"] .vc-video-hero__cta {
  margin-top: 32px;
}

/* --- Store-кнопки корейской мобильной раскладки --------------------------- */
/* Разметка живёт в index.html всегда, но по умолчанию не отрисовывается вовсе:
   единственное место, где эти кнопки появляются, — правило в мобильном блоке
   ниже по файлу (html[lang="ko"] внутри max-width: 767.98px). Ни на десктопе,
   ни в других языках они не занимают ни строки макета. */

.vc-video-hero__store {
  display: none;
}

.vc-video-hero__text {
  margin: 0;
  max-width: 30em;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 18px rgba(5, 22, 26, 0.5);
}

/* --- CTA ------------------------------------------------------------------ */

.vc-video-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: clamp(26px, 3.4vh, 40px);
}

.vc-video-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Минимальная цель нажатия — 44×44 px и больше. */
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 36px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

/* Главное действие — установка приложения. */
.vc-video-hero__btn--primary {
  background: linear-gradient(180deg, var(--vcv-coral-light) 0%, var(--vcv-coral) 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(242, 86, 92, 0.32);
}

.vc-video-hero__btn--primary:hover,
.vc-video-hero__btn--primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(242, 86, 92, 0.42);
}

/* Вторичное действие заметно тише главного: контурная кнопка со стрелкой. */
.vc-video-hero__btn--ghost {
  padding: 0 24px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 500;
}

.vc-video-hero__btn--ghost:hover,
.vc-video-hero__btn--ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.vc-video-hero__arrow {
  display: inline-block;
  transition: transform 220ms ease;
}

.vc-video-hero__btn--ghost:hover .vc-video-hero__arrow {
  transform: translateX(4px);
}

/* Фокус виден поверх любого кадра ролика. */
.vc-video-hero__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- Мобильная композиция ------------------------------------------------- */

@media (max-width: 991.98px) {
  .vc-video-hero {
    --vcv-header: 80px;
    --vcv-gutter: 24px;
    --vcv-bottom-space: clamp(72px, 10vh, 120px);
    /* Портретный кадр: сюжет держим чуть выше центра. */
    --vcv-object-position: 50% 42%;
    min-height: 520px;
  }

  /* Вертикальная композиция: текст стоит внизу, поэтому локальный градиент
     работает снизу вверх, а не слева направо. Плотность — та же, что у
     десктопного клина (максимум 0.54), и к 72% высоты он уже прозрачный:
     верхние две трети портретного кадра остаются нетронутыми. */
  .vc-video-hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(5, 22, 26, 0.38) 0,
        rgba(5, 22, 26, 0.14) 100px,
        rgba(5, 22, 26, 0) 210px
      ),
      linear-gradient(
        0deg,
        rgba(5, 22, 26, 0.54) 0%,
        rgba(5, 22, 26, 0.5) 20%,
        rgba(5, 22, 26, 0.4) 32%,
        rgba(5, 22, 26, 0.22) 46%,
        rgba(5, 22, 26, 0.06) 60%,
        rgba(5, 22, 26, 0) 70%
      );
  }

  /* Нижний отступ поднимает CTA над плавающим виджетом AI-чата. */
  .vc-video-hero__inner {
    padding:
      calc(var(--vcv-header) + 16px)
      var(--vcv-gutter)
      calc(var(--vcv-bottom-space) + clamp(46px, 8vh, 76px));
  }

  .vc-video-hero__content {
    max-width: none;
  }

  .vc-video-hero__title {
    font-size: clamp(2.05rem, 8.4vw, 2.9rem);
    margin-bottom: 14px;
  }

  .vc-video-hero__text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .vc-video-hero__cta {
    margin-top: 24px;
    gap: 12px;
  }
}

/* Узкие экраны: кнопки в столбик — тап-цели остаются крупными. */
@media (max-width: 575.98px) {
  .vc-video-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .vc-video-hero__btn {
    width: 100%;
  }
}

/* --- Первый экран на телефонах: центрированный copy в нижней трети кадра ---
   Мобильный кадр портретный, и левое выравнивание десктопа читалось на нём
   как обрезанная десктопная композиция: блок висел высоко и держался за левый
   край. Здесь copy собирается в одну вертикальную колонку по центру и
   опускается в нижнюю треть: верхние ~53 % высоты остаются чистым кадром,
   заголовок начинается сразу под ними и становится единственным входом в
   композицию, а описание и пара CTA идут за ним плотной группой.

   Eyebrow на этой ширине выключен целиком: короткая строка над заголовком
   отнимала у кадра воздух и спорила с ним за первый взгляд.

   Граница — тот же 767.98px, что и у мобильного ролика
   (data-video-mobile-media в index.html). Планшет и десктоп (>= 768px) сюда
   не попадают и остаются без изменений. */

@media (max-width: 767.98px) {
  /* Eyebrow убран целиком. display: none снимает и строку, и её собственный
     нижний отступ, поэтому под ней не остаётся пустого зазора: следующий за
     ней заголовок — первый элемент колонки. Разметка и i18n-ключ на месте,
     на планшете и десктопе строка работает как раньше. */
  .vc-video-hero__eyebrow {
    display: none;
  }

  /* Секция выравнивает .__inner по своему низу, поэтому посадку всего блока
     задаёт одно значение — нижний отступ, и оно отвечает сразу за две вещи:
     на какой высоте начинается заголовок и сколько воздуха остаётся под
     кнопками.

     Значение теперь доля высоты экрана, а не фиксированные пиксели, и это
     обдуманная смена: после того как описание ушло, а пара CTA собралась в
     один ряд, высота копи-блока перестала зависеть от ширины — заголовок в
     строку (33px на 390, 35px на 412), зазор 26px и ряд кнопок 46px, итого
     ~103px на любом телефоне (заголовок 33px на 390 и 35px на 412, зазор 24px,
     ряд кнопок 46px). При таком постоянном блоке 35svh держат верх заголовка
     на 65.0 % высоты кадра при 390x844 и на 64.8 % при 412x915 — то есть
     пропорция буквально одна и та же, чего фиксированные пиксели не дают.

     max(120px, ...) — страховка снизу: ряд CTA не подходит к нижней границе
     секции ближе 120px при пороге 110px, а плавающий виджет AI-чата поднят
     от низа вьюпорта на 74px, так что кнопки с ним не встречаются. Первая
     строка с vh — фолбэк для браузеров без svh, порядок тот же, что у height
     самой секции. */
  .vc-video-hero__inner {
    display: flex;
    justify-content: center;
    padding:
      calc(var(--vcv-header) + 16px)
      var(--vcv-gutter)
      max(120px, calc(35vh - 103px));
    padding-bottom: max(120px, calc(35svh - 103px));
  }

  /* Весь copy — единый вертикальный блок по центру. Ширина колонки та же. */
  .vc-video-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  /* Заголовок — единственный текст экрана. Свой нижний отступ он не держит:
     единственный зазор ниже задаёт margin-top у .__cta, и правится он в
     одном месте. */
  .vc-video-hero__title {
    margin-bottom: 0;
  }

  /* Описание на телефоне выключено целиком. display: none снимает и сам абзац,
     и его место в колонке, поэтому пустого зазора под заголовком не остаётся:
     следующий за ним элемент — ряд CTA. Разметка и i18n-ключ не тронуты, на
     планшете и десктопе абзац работает как раньше. */
  .vc-video-hero__text {
    display: none;
  }

  /* Обе CTA — один горизонтальный ряд под заголовком. Кнопки равнозначны, и
     равными их делает не заданная ширина, а flex: 1 1 0 по общей строке:
     ряд занимает всю контентную колонку, делится ровно пополам и не зависит
     от длины подписей. flex-wrap: nowrap обязателен — правило выше по файлу
     (max-width: 575.98px) ставило колонку, и без явного nowrap длинная
     вторая подпись уводила бы кнопку на второй ряд.
     margin-top здесь — единственный зазор между заголовком и кнопками. */
  .vc-video-hero__cta {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
  }

  /* Геометрия ряда. min-height 46px — внутри требуемых 44..48px и выше
     минимальной тап-цели. Ужаты ровно две вещи и только ради того, чтобы ряд
     помещался в 390px без переноса: горизонтальный padding (30px -> 12px) и
     кегль (16px -> 13.5px); шрифт, начертание и цвет прежние. */
  .vc-video-hero__btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    gap: 6px;
    font-size: 0.845rem;
  }

  /* Обе CTA на телефоне выглядят одинаково — тёмное стекло: полупрозрачная
     тёмная заливка поверх кадра плюс размытие, поэтому видео сквозь кнопку
     слегка читается, и тонкая светлая рамка, которая держит границу на любом
     кадре. Разница между кнопками остаётся только смысловая (подпись и
     стрелка), визуального перевеса ни у одной нет.

     У первой кнопки на этой ширине отменяется всё её собственное оформление
     сразу: коралловый градиент (background — шорткат, он сбрасывает и
     background-image), коралловая тень и более жирное начертание. Правило
     идёт ниже базовых по файлу, специфичность та же, поэтому перебивает без
     !important. Десктоп и планшет не затронуты — там первая CTA остаётся
     коралловой. */
  .vc-video-hero__btn--primary,
  .vc-video-hero__btn--ghost {
    padding: 0 12px;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(8, 24, 28, 0.34);
    box-shadow: none;
    color: #fff;
    font-weight: 500;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }

  /* Тач: :hover после тапа «залипает», поэтому на пальце никакого движения —
     ни сдвига, ни тени, ни отъезда стрелки. Спокойный hover возвращается
     ниже, но только там, где есть настоящий курсор. */
  .vc-video-hero__btn--primary:hover,
  .vc-video-hero__btn--primary:focus-visible {
    transform: none;
    box-shadow: none;
  }

  /* Стрелка у второй CTA на телефоне убрана. display: none снимает и сам глиф,
     и его место в строке: gap: 6px у .__btn — свойство flex-контейнера и
     применяется только МЕЖДУ отрисованными детьми, поэтому пустого отступа
     после единственной оставшейся подписи не остаётся. Разметка, текст
     кнопки, href и data-vc-scroll-to не тронуты; на планшете и десктопе
     стрелка работает как раньше, включая её сдвиг на hover. */
  .vc-video-hero__arrow {
    display: none;
  }

  /* Korean hero follows the reference's editorial composition rather than
     the centered mobile composition used by every other locale. The padding
     places the first line at about 65% of a 390×844 hero while preserving
     a clear gap above the fixed AI-chat launcher. */
  html[lang="ko"] .vc-video-hero__inner {
    justify-content: flex-start;
    padding-inline: 32px;
    padding-bottom: max(146px, calc(35svh - 142px));
  }

  html[lang="ko"] .vc-video-hero__content {
    align-items: flex-start;
    text-align: left;
  }

  html[lang="ko"] .vc-video-hero__title {
    font-size: clamp(1.5rem, 7.2vw, 1.875rem);
  }

  html[lang="ko"] .vc-video-hero__cta {
    margin-top: 28px;
  }

  /* --- Корейский телефон: вместо пары CTA — две store-кнопки --------------
     Единственная локаль и единственная ширина, где первый экран ведёт прямо
     в магазины. Прежняя пара остаётся в разметке и просто не отрисовывается:
     display: none снимает её вместе с её местом в ряду, поэтому в строке
     оказываются ровно две новые кнопки, без пустых промежутков.

     Ряд остаётся тем же .__cta со своим margin-top, то есть положение под
     заголовком не меняется — правится только содержимое строки. Выключен
     только justify-content: center из базового мобильного правила, иначе
     компактная пара встала бы по центру колонки, а корейская композиция
     здесь левая (см. __content выше). */
  html[lang="ko"] .vc-video-hero__btn {
    display: none;
  }

  html[lang="ko"] .vc-video-hero__cta {
    justify-content: flex-start;
    gap: 8px;
  }

  /* Тёплое тёмное стекло без рамки и без свечения: кадр сквозь кнопку слегка
     читается, границу держит сам контраст заливки. Высота 45px — внутри
     требуемых 44..46px и выше минимальной тап-цели. */
  html[lang="ko"] .vc-video-hero__store {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 16px;
    border: 0;
    border-radius: 30px;
    background: rgba(38, 30, 26, 0.44);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: none;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Иконки — существующие ассеты проекта: images/png_icons/ios.png (сплошной
     чёрный apple) и google-play-black.png (сплошной чёрный треугольник).
     brightness(0) invert(1) переводит любой непрозрачный пиксель в чистый
     белый и не трогает альфу, поэтому глифы белые без второго комплекта
     файлов и без SVG в разметке. */
  html[lang="ko"] .vc-video-hero__store-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
  }

  /* Тач: :hover после тапа «залипает» — на пальце кнопка не двигается. */
  html[lang="ko"] .vc-video-hero__store:hover,
  html[lang="ko"] .vc-video-hero__store:focus-visible {
    color: #fff;
    transform: none;
  }
}

/* Настоящий курсор на узком экране (десктоп с узким окном, мышь на планшете):
   отклик есть, но спокойный — 1px по вертикали и лёгкое изменение яркости
   и рамки. Ни scale, ни пружин. */
@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
  html[lang="ko"] .vc-video-hero__store:hover,
  html[lang="ko"] .vc-video-hero__store:focus-visible {
    background: rgba(38, 30, 26, 0.58);
  }

  .vc-video-hero__btn--primary:hover,
  .vc-video-hero__btn--primary:focus-visible,
  .vc-video-hero__btn--ghost:hover,
  .vc-video-hero__btn--ghost:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.62);
    background: rgba(8, 24, 28, 0.46);
    box-shadow: none;
  }
}

/* Низкие экраны в альбомной ориентации: весь контент обязан поместиться
   в первый экран целиком, поэтому ужимаем отступы и убираем абзац. */
@media (max-height: 560px) and (orientation: landscape) {
  .vc-video-hero {
    --vcv-bottom-space: 56px;
    min-height: 0;
  }

  .vc-video-hero__inner {
    padding:
      calc(var(--vcv-header) + 8px)
      var(--vcv-gutter)
      calc(var(--vcv-bottom-space) + 16px);
  }

  .vc-video-hero__eyebrow {
    margin-bottom: 10px;
  }

  .vc-video-hero__title {
    font-size: clamp(1.7rem, 4.4vw, 2.4rem);
    margin-bottom: 10px;
  }

  .vc-video-hero__text {
    display: none;
  }

  .vc-video-hero__cta {
    margin-top: 16px;
  }

  .vc-video-hero__btn {
    min-height: 46px;
    padding: 0 22px;
  }
}

/* Короткий альбом на телефоне: вертикальная пара кнопок во всю ширину здесь
   упиралась бы в плавающий виджет AI-чата, поэтому в этом единственном случае
   CTA возвращаются в строку — по центру, как и весь остальной copy.
   Условие max-width обязательно: без него правило сдвинуло бы кнопки и на
   коротких альбомных десктопах (>= 768px), где композиция не меняется. */
@media (max-width: 767.98px) and (max-height: 560px) and (orientation: landscape) {
  .vc-video-hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .vc-video-hero__btn {
    width: auto;
  }
}

/* --- Уважение к настройкам пользователя ----------------------------------- */
/* Видео при reduce не декодируется вовсе (см. viewchat-video-hero.js) —
   здесь снимаем оставшиеся переходы, чтобы не осталось «мигания». */

@media (prefers-reduced-motion: reduce) {
  .vc-video-hero__video,
  .vc-video-hero__btn,
  .vc-video-hero__arrow {
    transition: none;
  }

  .vc-video-hero__btn--primary:hover,
  .vc-video-hero__btn--primary:focus-visible {
    transform: none;
  }

  .vc-video-hero__btn--ghost:hover .vc-video-hero__arrow {
    transform: none;
  }
}

/* ==========================================================================
   Шапка поверх видео (только главная, только десктоп)

   Верх главной больше не светлый 3D-hero, а тёмное видео, поэтому в верхнем
   положении шапка прозрачная и светлая. Состояние — пересечение двух условий:

   — .vc-over-video ставит viewchat-video-hero.js, пока секция видео реально
     перекрывает полосу шапки. Состояние выводится из геометрии секции
     (IntersectionObserver), а не из порога прокрутки в пикселях;
   — .wsmainfull:not(.scroll) — штатное «верхнее» состояние шапки шаблона.
     Как только шаблон переводит шапку в закреплённую белую полосу, мы не
     мешаем: контент первого экрана уходит под непрозрачную полосу, а не
     наезжает на прозрачную навигацию, и текст меню остаётся тёмным.

   Эти же правила отменяют тёмную трактовку верхнего состояния из
   viewchat-hero.css — она была написана, когда первым экраном был светлый
   3D-hero. Мобильную шапку (сплошная белая полоса) не трогаем: контраст
   на ней и так корректный.
   ========================================================================== */

@media (min-width: 992px) {
  body.vc-hero-page #header .wsmenu > .wsmenu-list > li > a.h-link,
  body.vc-hero-page #header .lang-btn--desktop .lang-btn__label {
    transition: color 280ms ease;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link {
    color: #fff;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--vcv-coral, #f2565c);
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) .lang-btn--desktop .lang-btn__label {
    color: #fff !important;
  }

  /* Иконку языка не трогаем: i18n.js подставляет туда флаг активного языка
     (см. syncLangButtonIcons), он одинаково читается и на светлом, и на
     тёмном. Перекрашивать его фильтром нельзя. */

  /* Логотип переключается инлайновым стилем из desktop-logo-on-scroll.js —
     перебиваем через !important и более точный селектор. */
  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) a.logo-white {
    display: inline-block !important;
  }

  body.vc-hero-page.vc-over-video #header .wsmainfull:not(.scroll) a.logo-black {
    display: none !important;
  }
}