/* ==========================================================================
   ViewChat — интерактивный hero главной страницы (scroll-driven 3D)
   Изолированный слой стилей: всё внутри .vc-hero, глобальные стили не трогаем.
   ========================================================================== */

.vc-hero {
  /* --- Токены оформления ------------------------------------------------ */
  --vc-coral: #f2565c;
  --vc-coral-light: #ff6d73;
  /* Тёмная типографика осталась ровно одному элементу — стеклянной капсуле
     метки: она светлая, и текст на ней по-прежнему чернильный. */
  --vc-ink: #14161c;
  --vc-copy: #f4f6fa;
  --vc-copy-soft: rgba(226, 232, 240, 0.76);
  /* Глубокая почти чёрная база всей секции. Под ней ничего не просвечивает:
     иллюстрация фона нигде не растягивается на всю площадь, и там, где её
     нет, лежит именно этот цвет. */
  --vc-surface: #050507;

  /* Фон-сцена. Одна статичная иллюстрация: планета справа, световые кольца и
     подиум внизу. Кадрирование задаётся двумя токенами, чтобы правка была в
     одном месте, а не размазана по правилам:
       --vc-stage-zoom — высота слоя, заданная в vh. Размер привязан к
         ВЫСОТЕ ЭКРАНА, а не к ширине и не к высоте элемента: вертикальная
         посадка планеты и подиума тогда одинакова на любом мониторе (и на
         1440x900, и на 1920x1080 верх подиума приходится на одну и ту же
         долю высоты), а в статичном режиме, где секция вытягивается на
         несколько экранов, кадр не раздувается вместе с ней;
       --vc-stage-y — вертикальная привязка в CSS-процентах.
     Пропорции исходника сохраняются: ширина всегда auto. */
  --vc-stage-zoom: 208vh;
  --vc-stage-y: 46%;
  /* Ширина слоя иллюстрации = аспект исходника (853/1844 = 0.4626) x зум,
     то есть 96.2vh. Держим её отдельным токеном по единственной причине:
     background-size у ГРАДИЕНТА не умеет вывести ширину из высоты — у
     градиента нет собственных пропорций, и auto там схлопывается в ширину
     элемента. А смягчающий клин обязан лечь ровно на левую кромку картинки,
     иначе он мажет мимо. Здесь чуть больше расчётного: клин начинается на
     несколько пикселей левее кромки и накрывает её гарантированно.
     Меняете --vc-stage-zoom — пересчитайте и это значение. */
  --vc-stage-w: 97vh;

  /* Высота скролл-дорожки. Четыре смысловых состояния те же, но во втором и
     третьем теперь разворачиваются последовательности карточек, и на прежних
     400vh они шли слишком быстро. Прогресс нормализованный, поэтому границы
     flip-диапазонов и ключевые кадры от этого не сдвигаются. */
  --vc-hero-track: 480vh;
  --vc-hero-header-offset: 92px;

  position: relative;
  z-index: 3;
  height: var(--vc-hero-track);
  background: var(--vc-surface);
  color: var(--vc-copy);
  isolation: isolate;
}

/* База сцены: чёрный, а не белый. Прежние коралловые свечения и off-white
   градиент убраны вместе с остальным светлым фоном — под видео должна лежать
   ровная глубокая чернота, иначе сетка «плавает» на цветном пятне. */
.vc-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Резервируем размеры заранее — canvas появляется без сдвига layout (CLS = 0) */
  min-height: 560px;
  overflow: hidden;
  background: var(--vc-surface);
}

/* --- Фон: космическая сцена -------------------------------------------- */

/* Единственный фоновый слой секции. Лежит под канвасом (z-index 2), поэтому
   телефон, Genie-карточки и текст всегда выше. Виден всегда: и до готовности
   WebGL, и в статичном режиме — сцена канваса в фон ничего не рисует, а сам
   канвас прозрачный.

   Слой статичен по замыслу: ни анимации, ни параллакса, ни фильтров. Вся
   динамика секции — это уже существующие flip телефона и Genie-карточки,
   и фон с ними не соревнуется. */
.vc-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--vc-surface);
  /* Два слоя, и оба намеренно с ОДИНАКОВЫМИ size и position:
       1) мягкий чёрный клин — он привязан не к экрану, а к самой иллюстрации,
          поэтому всегда приходится ровно на её левую кромку. Кромка иначе
          читалась бы вертикальным швом (слой чуть светлее базы), а левая
          треть кадра должна оставаться спокойной чернотой под iPhone и
          Genie-карточками;
       2) сама иллюстрация.
     cover здесь не годится: исходник 853x1844, и на горизонтальном экране
     он срезал бы композицию до неузнаваемости. Ширина auto — пропорции
     оригинала сохраняются как есть. */
  background-image:
    linear-gradient(
      90deg,
      var(--vc-surface) 0%,
      rgba(5, 5, 7, 0.94) 9%,
      rgba(5, 5, 7, 0.55) 18%,
      rgba(5, 5, 7, 0) 28%
    ),
    url("../images/viewchat-flip-orbit-stage.png");
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--vc-stage-w) var(--vc-stage-zoom),
    auto var(--vc-stage-zoom);
  /* 100 % по горизонтали — правая кромка иллюстрации совпадает с правой
     кромкой сцены: планета уходит за край кадра, а не обрывается швом внутри
     него. Вертикальная доля общая для всех ширин, см. --vc-stage-y. */
  background-position:
    100% var(--vc-stage-y),
    100% var(--vc-stage-y);
}

/* --- Canvas ------------------------------------------------------------- */

.vc-hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Canvas декоративный: не перехватывает клики и тапы по CTA */
  pointer-events: none;
}

.vc-hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}

.vc-hero.is-3d-ready .vc-hero__canvas {
  opacity: 1;
}

/* --- Статичный телефон -------------------------------------------------- */
/* Виден, пока сцена собирается: Three.js и GLB на 4 МБ приходят за несколько
   секунд, и всё это время секция иначе выглядела бы пустой. Уходит той же
   плавностью, которой проявляется канвас, поэтому подмены не видно.
   В статичном режиме остаётся единственным изображением телефона. */

.vc-hero__poster {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: auto;
  height: min(62vh, 520px);
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 700ms ease;
  pointer-events: none;
  filter: drop-shadow(0 26px 50px rgba(20, 22, 28, 0.16));
}

.vc-hero.is-3d-ready .vc-hero__poster {
  opacity: 0;
}

/* --- Текстовые панели --------------------------------------------------- */

.vc-hero__panels {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding-top: var(--vc-hero-header-offset);
  pointer-events: none;
}

.vc-hero__panel {
  position: absolute;
  top: 50%;
  width: min(430px, 38vw);
  opacity: var(--vc-o, 0);
  transform: translate3d(0, calc(-50% + var(--vc-y, 0px)), 0);
  transition: none;
  will-change: opacity, transform;
  pointer-events: none;
}

.vc-hero__panel--left {
  left: max(6vw, calc(50vw - 620px));
}

.vc-hero__panel--right {
  right: max(6vw, calc(50vw - 620px));
}

/* Финальное состояние: копия и CTA по центру, под фронтальным телефоном */
.vc-hero__panel--center {
  top: auto;
  bottom: clamp(48px, 9vh, 104px);
  left: 50%;
  width: min(620px, 86vw);
  text-align: center;
  transform: translate3d(-50%, var(--vc-y, 0px), 0);
}

/* Первая панель видна до инициализации скрипта — заголовок и CTA
   отрисовываются сразу, без ожидания JS. */
.vc-hero__panel[data-vc-panel="0"] {
  --vc-o: 1;
}

/* Активная панель принимает клики (у неактивных ссылки некликабельны) */
.vc-hero__panel.is-active {
  pointer-events: auto;
}

/* --- Метка состояния: liquid glass -------------------------------------- */
/* Капсула из стекла поверх 3D-сцены. Три слоя смысла:
   — заливка слева показывает прогресс внутри текущего состояния;
   — блик следует за курсором (это и есть «жидкость», без дорогих фильтров);
   — при наведении содержимое переводит себя на языки сайта, а номер
     состояния сменяется кодом языка. */

.vc-hero__mark {
  --vc-mark-blur: 14px;
  --vc-mark-lift: 1;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(var(--vc-mark-blur)) saturate(170%);
  backdrop-filter: blur(var(--vc-mark-blur)) saturate(170%);
  /* Верхний блик и нижняя коралловая рефракция — та же логика, что у
     пузырей в шейдере: плотная кромка, пустая середина. Тонкое коралловое
     кольцо и нейтральная тень отрывают капсулу от светлого фона. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(242, 86, 92, 0.16),
    0 0 0 1px rgba(242, 86, 92, 0.09),
    0 10px 24px rgba(20, 22, 28, 0.07);
  color: var(--vc-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transform: scale(var(--vc-mark-lift));
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 450ms ease,
    background 450ms ease;
}

.vc-hero__mark:hover {
  --vc-mark-blur: 18px;
  --vc-mark-lift: 1.035;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 6px rgba(242, 86, 92, 0.22),
    0 0 0 1px rgba(242, 86, 92, 0.16),
    0 14px 30px rgba(242, 86, 92, 0.18);
}

/* Коралловая заливка = прогресс внутри состояния (--vc-sp ставит JS) */
.vc-hero__mark-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -2;
  width: calc(var(--vc-sp, 0) * 100%);
  background: linear-gradient(90deg, rgba(242, 86, 92, 0.2) 0%, rgba(255, 109, 115, 0.06) 100%);
}

/* Блик, следующий за курсором */
.vc-hero__mark-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    70px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0) 72%
  );
  transition: opacity 380ms ease;
}

.vc-hero__mark:hover .vc-hero__mark-glow {
  opacity: 0.85;
}

/* Слоты: все языковые варианты лежат в одной grid-ячейке, поэтому ширина
   капсулы равна самому длинному варианту и при перелистывании не прыгает. */
.vc-hero__mark-slot {
  display: inline-grid;
  overflow: hidden;
  /* Скрытые варианты остаются в DOM — не даём им попадать в выделение. */
  -webkit-user-select: none;
  user-select: none;
}

.vc-hero__mark-slot > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(-120%);
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
}

.vc-hero__mark-slot--index {
  color: var(--vc-coral);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  justify-items: start;
}

.vc-hero__mark-slot--word {
  justify-items: start;
  /* Inter не содержит корейских и японских глифов — нужен системный фолбэк. */
  font-family: "Inter", "Apple SD Gothic Neo", "Noto Sans KR", "Yu Gothic",
    "Hiragino Sans", "Microsoft YaHei", sans-serif;
}

.vc-hero__mark-slot > span[lang] {
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Активный вариант выезжает на место, предыдущий уходит вверх */
.vc-hero__mark[data-variant="0"] .vc-hero__mark-slot > span:nth-child(1),
.vc-hero__mark[data-variant="1"] .vc-hero__mark-slot > span:nth-child(2),
.vc-hero__mark[data-variant="2"] .vc-hero__mark-slot > span:nth-child(3),
.vc-hero__mark[data-variant="3"] .vc-hero__mark-slot > span:nth-child(4),
.vc-hero__mark[data-variant="4"] .vc-hero__mark-slot > span:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
}

/* Уже показанные варианты уходят вниз, а не вверх — движение читается
   как непрерывная лента, а не как мигание. */
.vc-hero__mark[data-variant="1"] .vc-hero__mark-slot > span:nth-child(1),
.vc-hero__mark[data-variant="2"] .vc-hero__mark-slot > span:nth-child(-n + 2),
.vc-hero__mark[data-variant="3"] .vc-hero__mark-slot > span:nth-child(-n + 3),
.vc-hero__mark[data-variant="4"] .vc-hero__mark-slot > span:nth-child(-n + 4) {
  transform: translateY(120%);
}

/* Фолбэк для браузеров без backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vc-hero__mark {
    background: rgba(255, 255, 255, 0.82);
  }

  .vc-hero__mark:hover {
    background: rgba(255, 255, 255, 0.9);
  }
}

.vc-hero__title {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  /* Фон секции стал чёрным — прежняя чернильная копия на нём не читалась бы.
     Кегли, начертания и сами тексты не менялись, только цвет. */
  color: var(--vc-copy);
}

.vc-hero__text {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.6;
  color: var(--vc-copy-soft);
}

/* Локальный скрим под текстовой колонкой: не плашка, а мягкое затемнение
   фона ровно под копией. Живёт внутри панели, поэтому исчезает вместе с ней
   (панель везёт opacity) и не может перекрыть телефон — колонки стоят по
   краям кадра, а центральная панель прижата к нижней кромке. */
.vc-hero__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-56px, -6vh, -28px) clamp(-64px, -5vw, -28px);
  background: radial-gradient(
    78% 74% at 50% 52%,
    rgba(4, 5, 10, 0.66) 0%,
    rgba(4, 5, 10, 0.38) 56%,
    rgba(4, 5, 10, 0) 100%
  );
  pointer-events: none;
}

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

.vc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.vc-hero__panel--center .vc-hero__cta {
  justify-content: center;
}

.vc-hero__store {
  display: inline-block;
  border-radius: 10px;
  line-height: 0;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.vc-hero__store img {
  height: 48px;
  width: auto;
  display: block;
}

.vc-hero__store:hover,
.vc-hero__store:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

.vc-hero__store:focus-visible {
  outline: 2px solid var(--vc-coral);
  outline-offset: 3px;
}

/* --- Индикатор прокрутки ------------------------------------------------ */

.vc-hero__progress {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.vc-hero__progress span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(233, 238, 245, 0.2);
  transition: background 300ms ease;
}

.vc-hero__progress span.is-on {
  background: var(--vc-coral);
}

.vc-hero__panel--center ~ .vc-hero__progress {
  display: flex;
}

/* --- Мобильная композиция (отдельная, не уменьшенный десктоп) ----------- */

@media (max-width: 991.98px) {
  .vc-hero {
    --vc-hero-track: 400vh;
    --vc-hero-header-offset: 70px;
  }

  .vc-hero__stage {
    min-height: 520px;
  }

  /* Телефон — вертикальный, и исходник тоже: 853x1844 против 390x844 это
     почти один аспект (0.463 против 0.462). Поэтому на узком экране
     иллюстрация работает главным фоном сцены целиком, во всю ширину и без
     растяжения — ширина слоя равна ширине сцены, высота считается из неё.
     Ничего значимого не срезается: планета, кольца и подиум видны полностью.

     Клин слева здесь не нужен (слой занимает всю ширину, боковых кромок
     нет), зато нужен нижний градиент: копия и CTA на мобильном стоят внизу,
     ровно над отражающим полом — самой светлой полосой кадра. Градиент
     гасит только её и уходит в ноль ещё до колец, поэтому подиум остаётся
     подиумом, а не прячется под сплошной плашкой. */
  .vc-hero__backdrop {
    background-image:
      linear-gradient(
        180deg,
        rgba(5, 5, 7, 0) 58%,
        rgba(5, 5, 7, 0.5) 72%,
        rgba(5, 5, 7, 0.78) 86%,
        rgba(5, 5, 7, 0.9) 100%
      ),
      url("../images/viewchat-flip-orbit-stage.png");
    background-size:
      100% 100%,
      100% auto;
    background-position:
      50% 100%,
      50% 100%;
  }

  /* Статичный режим на телефоне: секция вытягивается в поток и становится
     заметно выше экрана, а слой иллюстрации остаётся прежней высоты. Привязка
     к низу оставила бы её ВЕРХНЮЮ кромку посреди пустой черноты — исходник в
     самом верху чернее базы (L 0.5 против 5.2), и кромка читалась бы полосой.
     Привязка к верху убирает её совсем: иллюстрация начинается вместе с
     секцией, телефон статичного режима стоит над подиумом, а копия уходит
     ниже — на чистую базу. */
  .vc-hero.is-static .vc-hero__backdrop {
    background-position:
      50% 0%,
      50% 0%;
  }

  /* Телефон живёт в верхней половине, копия — под ним.
     Нижний отступ поднимает CTA над плавающим виджетом AI-чата,
     чтобы тапы по кнопкам ничем не перекрывались. */
  .vc-hero__panel,
  .vc-hero__panel--center {
    top: auto;
    bottom: clamp(84px, 13vh, 128px);
    left: 50%;
    right: auto;
    width: min(560px, 88vw);
    text-align: center;
    transform: translate3d(-50%, var(--vc-y, 0px), 0);
  }

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

     32px — верх диапазона, который ещё не приводит бейджи под плавающий
     виджет AI-чата: он поднят на 14px от низа и высок примерно на 54px, то
     есть его кромка проходит по 68px, а бейджи после сдвига заканчиваются на
     ~77px. До полосы точек прогресса (её верх — 15px) остаётся ~45px. */
  .vc-hero__panel--center[data-vc-panel="3"] {
    bottom: calc(clamp(84px, 13vh, 128px) - 32px);
  }

  .vc-hero__cta {
    justify-content: center;
    margin-top: 22px;
  }

  .vc-hero__store img {
    height: 44px;
  }

  /* На мобильных backdrop-filter не используем: hover там нет, а размывать
     каждый кадр живого канваса ради статичной капсулы — лишняя работа GPU. */
  .vc-hero__mark {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.78);
    margin-bottom: 14px;
  }

  .vc-hero__title {
    font-size: clamp(1.75rem, 6.6vw, 2.4rem);
  }

  .vc-hero__text {
    font-size: 1rem;
  }

  .vc-hero__progress {
    bottom: 12px;
  }
}

@media (max-width: 575.98px) {
  .vc-hero__store img {
    height: 42px;
  }
}

/* --- Статичный режим: prefers-reduced-motion, отсутствие WebGL, слабое
       устройство, Save-Data или ошибка загрузки. Причина попадает в
       data-vc-fallback на секции (её ставит viewchat-hero.js).

       Раньше четыре состояния выводились одной колонкой во всю страницу и
       читались как четыре пустых экрана подряд. Теперь это компактный блок:
       статичный телефон сверху и четыре коротких карточки состояний сеткой
       два на два. Ни пустых областей, ни перекрытий, ни канваса нулевого
       размера. -------------------------------------------------------------- */

.vc-hero.is-static {
  height: auto;
}

.vc-hero.is-static .vc-hero__stage {
  position: static;
  height: auto;
  min-height: 0;
  padding: calc(var(--vc-hero-header-offset) + 32px) 0 72px;
  /* Своей заливки у сцены здесь нет: она непрозрачна и в потоке, а значит
     закрыла бы фоновые слои, уведённые под поток через z-index: -1. Чёрную
     базу в этом режиме держит сама секция. */
  background: transparent;
}

.vc-hero.is-static .vc-hero__canvas-wrap,
.vc-hero.is-static .vc-hero__progress {
  display: none;
}

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

   z-index: -1 обязателен. Контент статичного режима лежит в обычном потоке,
   и любой позиционированный слой с z-index >= 0 накрыл бы его сверху. Уводить
   фон под поток безопаснее, чем поднимать контент: у постера и панелей есть
   left/top от абсолютных базовых правил, и position: relative вернул бы их к
   жизни, развалив композицию. Чёрная база самой секции остаётся ниже фона. */
.vc-hero.is-static .vc-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
}

/* Локальный скрим под копией в статике не нужен: панели стоят сеткой на ровном
   тёмном фоне, а без позиционированной панели он растянулся бы на всю секцию. */
.vc-hero.is-static .vc-hero__panel::before {
  display: none;
}

/* Локальный скрим под копией в статике не нужен: панели стоят сеткой на ровном
   тёмном фоне, а без позиционированной панели он растянулся бы на всю секцию. */
.vc-hero.is-static .vc-hero__panel::before {
  display: none;
}

/* Постер возвращается в поток: он и есть телефон этой секции. */
.vc-hero.is-static .vc-hero__poster {
  position: static;
  display: block;
  height: auto;
  max-width: 240px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  opacity: 1;
  transform: none;
}

.vc-hero.is-static .vc-hero__panels {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
  width: min(940px, 100% - 12vw);
  margin: 0 auto;
  padding: 0;
}

.vc-hero.is-static .vc-hero__panel {
  position: static;
  width: auto;
  max-width: 100%;
  opacity: 1;
  transform: none;
  text-align: left;
  pointer-events: auto;
}

/* Четыре крупных h2 подряд читались бы как четыре отдельных экрана. */
.vc-hero.is-static .vc-hero__title {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.vc-hero.is-static .vc-hero__mark {
  margin-bottom: 12px;
}

.vc-hero.is-static .vc-hero__cta {
  justify-content: flex-start;
  margin-top: 20px;
}

@media (max-width: 767.98px) {
  .vc-hero.is-static .vc-hero__panels {
    grid-template-columns: minmax(0, 1fr);
    width: min(560px, 100% - 12vw);
  }
}

/* В статике метка неподвижна: чистое стекло, без заливки, блика и перевода. */
.vc-hero.is-static .vc-hero__mark {
  --vc-sp: 0;
  --vc-mark-lift: 1;
}

.vc-hero.is-static .vc-hero__mark-glow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Halftone-слой статичен по умолчанию, поэтому гасить нечего — остаются
     только переходы канваса и постера ниже. */
  .vc-hero__canvas,
  .vc-hero__poster,
  .vc-hero__store {
    transition: none;
  }

  /* Ни блика, ни пружины, ни перелистывания языков — только английский. */
  .vc-hero__mark,
  .vc-hero__mark-slot > span,
  .vc-hero__mark-glow {
    transition: none;
  }

  .vc-hero__mark {
    --vc-mark-lift: 1;
    --vc-sp: 0;
  }

  .vc-hero__mark:hover {
    --vc-mark-blur: 14px;
  }

  .vc-hero__mark-glow {
    display: none;
  }
}

/* --- Контейнер страницы -------------------------------------------------- */
/* У шаблона #page { overflow: hidden } — это создаёт скролл-контейнер и
   ломает position: sticky. Только на главной меняем на overflow-x: clip:
   защита от горизонтальной прокрутки сохраняется, sticky работает.
   Браузеры без поддержки clip получают статичный hero (см. viewchat-hero.js). */

body.vc-hero-page #page,
body.vc-hero-page .wsmenucontainer {
  overflow-x: clip;
  overflow-y: visible;
}

/* --- Шапка сайта поверх светлого hero ----------------------------------- */
/* Только на главной: в верхнем положении (до скролла) шапка по умолчанию
   белая — на светлом hero она была бы нечитаемой. Меняем цвет ссылок и
   показываем тёмный логотип. На остальных страницах ничего не меняется. */

@media (min-width: 992px) {
  /* Переменные .vc-hero сюда не наследуются — цвета задаём явно. */
  body.vc-hero-page #header:not(.is-scrolled) .wsmenu-list > li > a.h-link {
    color: #14161c;
  }

  body.vc-hero-page #header:not(.is-scrolled) .wsmenu-list > li > a.h-link:hover {
    color: #f2565c;
  }

  body.vc-hero-page #header:not(.is-scrolled) .lang-btn--desktop .lang-btn__label {
    color: #14161c !important;
  }

  /* Логотип переключается инлайновым стилем из desktop-logo-on-scroll.js,
     поэтому здесь нужен !important. */
  body.vc-hero-page #header:not(.is-scrolled) a.logo-white {
    display: none !important;
  }

  body.vc-hero-page #header:not(.is-scrolled) a.logo-black {
    display: inline-block !important;
  }
}