/* ==========================================================================
   ViewChat — Floating Reviews: изолированная локальная сцена отзывов и
   переход в footer главной страницы. Всё внутри .vc-reviews, кроме одного
   блока в конце файла: тёмная тема реального footer'а, ограниченная
   селектором body.vc-hero-page — этот класс есть ТОЛЬКО у index.html,
   поэтому на остальных страницах footer остаётся прежним.

   Композиция по референсу, сверху вниз:
     карточки отзывов → центрированный заголовок, описание и store badges →
     чистый зазор → дуга Земли → компактная строка
     `ViewChat © 2026 | Privacy | Terms | Safety | Contact` на чёрном.
   Ниже начинается настоящий полный footer сайта.

   На узком экране (≤767px) порядок низа другой и повторяет мобильный
   референс: карточки → воздух → заголовок и описание → воздух → Земля →
   бейджи магазинов → компактная строка. Там бейджи стоят ПОД планетой, а не
   между текстом и ней; вся арифметика этого блока собрана в одном месте —
   в мобильном media query в конце секции.

   Фон — переданная картинка ночной Земли, БЕЗ цветовых фильтров: только
   мягкая маска нижней кромки, чтобы край кадра не резал чернотой. Ни
   кораллового пятна, ни radial glow, ни светящегося ободка по горизонту —
   вместо ободка редкие мелкие мерцающие точки (.vc-reviews__sparks).

   Секция и footer используют один тон #07080b — тот же, что у Connection
   Story выше, поэтому ни сверху, ни снизу стыков не видно.
   ========================================================================== */

.vc-reviews {
  /* Почти чёрный, а не чистый #000: тёплые молочные карточки требуют тёплой
     тьмы, а общий тон совпадает с Connection Story над секцией. */
  --vcr-void: #07080b;
  /* Молочно-белая карточка: не чистый #fff и слегка полупрозрачная. Никакого
     blur — тяжёлый glassmorphism здесь не нужен. */
  --vcr-card: rgba(250, 249, 246, 0.94);
  --vcr-card-line: rgba(255, 255, 255, 0.16);
  --vcr-ink: #14161c;
  --vcr-muted: #5f6674;
  /* Приглушённое тёплое золото: оценка, а не ярлык маркетплейса. */
  --vcr-star: #c2954e;
  --vcr-coral: #f2565c;
  --vcr-copy: #eef1f6;
  --vcr-copy-muted: rgba(206, 215, 227, 0.74);

  /* Высота нижней полосы, где лежит компактная строка footer'а. На эту
     величину подняты и картинка Земли, и слой точек, поэтому строка всегда
     оказывается НИЖЕ края планеты, на чистом чёрном. */
  --vcr-footline: 84px;
  /* Пустое поле между композицией и дугой Земли. Формула, а не число: высота
     картинки пропорциональна ширине окна, поэтому и зазор задан в vw.
     Для абсолютной раскладки (≥1280px) отсчёт идёт от нижней карточки — она
     стоит на 176px выше низа сцены, отсюда вычитаемые 148px. */
  --vcr-earth-gap: clamp(120px, calc(24.76vw - 148px), 340px);

  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--vcr-void);
  color: var(--vcr-copy);
  padding: clamp(84px, 8vw, 128px) 24px 0;
}

/* --- Задний план ---------------------------------------------------------- */
/* Картинка подставляется через <picture> в разметке, поэтому браузер грузит
   ровно один вариант — десктопный или мобильный, а не оба. Слой декоративный:
   aria-hidden стоит на обёртке, у <img> пустой alt.

   Прижата не к самому низу секции, а к верху полосы --vcr-footline: под
   планетой остаётся чёрная полоса под компактную строку footer'а, как в
   референсе. По ширине растянута целиком: в кадре Земля стоит внизу, а верх —
   чистая чернота, поэтому изгиб лимба остаётся целым (object-fit: cover срезал
   бы треть ширины). Что не поместилось, снимает overflow: clip. */
.vc-reviews__backdrop {
  position: absolute;
  z-index: -3;
  right: 0;
  bottom: var(--vcr-footline);
  left: 0;
  pointer-events: none;
  user-select: none;
}

/* Цвет картинки не трогаем: ни filter, ни tint, ни смены насыщенности.
   Единственная обработка — мягкая маска самой нижней кромки кадра, чтобы
   граница картинки не читалась горизонтальной линией. */
.vc-reviews__backdrop img {
  display: block;
  width: 100%;
  height: auto;
  /* Гасим обе кромки кадра: чистый #000 картинки на фоне секции #07080b даёт
     тонкую, но заметную горизонтальную ступеньку. Верхние 10% и нижние 12%
     кадра в исходнике всё равно пустая чернота, так что маска ничего не съедает. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
}

/* Единственный слой поверх фона — очень мягкая виньетка по краям кадра.
   Ни кораллового пятна, ни цветной завесы: текст стоит НАД планетой, а не на
   ней, поэтому затемнять картинку ради читаемости больше не нужно. */
.vc-reviews::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    130% 92% at 50% 42%,
    rgba(7, 8, 11, 0) 0%,
    rgba(7, 8, 11, 0.12) 62%,
    rgba(7, 8, 11, 0.6) 100%
  );
}

/* --- Мерцающие точки на планете ------------------------------------------ */
/* Вместо прежнего светящегося ободка — редкие мелкие огни. Слой повторяет бокс
   картинки (та же ширина, тот же aspect-ratio, тот же подъём над низом), а
   координаты каждой точки посчитаны от фактической дуги лимба конкретного
   файла: часть точек лежит на теле планеты, шесть — ровно по контуру, но
   отдельными точками, а не линией. Ни glow-колец, ни пульсирующих линий:
   анимируется только прозрачность, каждая точка со своей длительностью и
   фазой. Ни canvas, ни rAF, ни библиотек. */
.vc-reviews__sparks {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: var(--vcr-footline);
  left: 0;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
}

.vc-reviews__sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  /* Белый с лёгким холодным серебром — тон далёкого огня, не цветная искра. */
  background: rgb(228, 238, 250);
  opacity: var(--o);
}

.vc-reviews.is-playing .vc-reviews__sparks i {
  animation: vc-reviews-spark var(--d) ease-in-out var(--t) infinite alternate;
}

@keyframes vc-reviews-spark {
  from { opacity: calc(var(--o) * 0.22); }
  to { opacity: var(--o); }
}

/* --- Сцена --------------------------------------------------------------- */

.vc-reviews__scene {
  position: relative;
  width: min(100%, 1520px);
  /* Сцена намеренно высокая: центральной группе нужен воздух, иначе карточки
     сползаются к центру и нижняя половина выглядит пустой. 1440 → 979px. */
  min-height: clamp(920px, 68vw, 1000px);
  margin: 0 auto;
  perspective: 1450px;
  transform-style: preserve-3d;
}

.vc-reviews__cards {
  position: absolute;
  inset: 0;
}

/* Внешняя обёртка карточки: только место в кадре и 3D-наклон. Плавание живёт
   на внутреннем слое (__card-shell), hover — на третьем (__card-body), поэтому
   три трансформа не складываются в один и не мешают друг другу. */
.vc-reviews__card {
  --card-w: clamp(300px, 23vw, 360px);
  /* Набор дрейфа широкого экрана. Оба набора выбираются здесь, в таблице
     стилей: JS пишет инлайном только сырые --dfloat/--mfloat и т.д., иначе
     инлайн-значение перебило бы мобильную подмену ниже. */
  --float: var(--dfloat);
  --spin: var(--dspin);
  --duration: var(--ddur);
  --delay: var(--ddelay);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--card-w);
  z-index: var(--order);
  transform: translate(-50%, -50%) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
}

/* Две акцентные карточки крупнее остальных: композиции нужна разница весов,
   иначе равные прямоугольники снова читаются сеткой. */
.vc-reviews__card--hero {
  --card-w: clamp(330px, 25.5vw, 396px);
}

/* Ровно пять карточек на широком экране: Jordan уходит целиком, а не
   переезжает в другую точку. */
@media (min-width: 1280px) {
  .vc-reviews__card--no-desktop,
  .vc-reviews__fallback article.vc-reviews__card--no-desktop {
    display: none;
  }
}

.vc-reviews__card-shell {
  animation: none;
  transform: translate3d(0, 0, 0);
}

.vc-reviews.is-playing .vc-reviews__card-shell {
  animation: vc-review-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}

.vc-reviews__card-body,
.vc-reviews__fallback article {
  padding: 26px 26px 24px;
  border: 1px solid var(--vcr-card-line);
  /* Крупное скругление: записка, а не плитка дашборда. */
  border-radius: 28px;
  background: var(--vcr-card);
  color: var(--vcr-ink);
  /* Натуральная глубокая тень: широкий мягкий сброс на тёмный фон плюс
     короткий контактный слой. Ни свечения, ни цветного ореола. */
  box-shadow:
    0 38px 74px -22px rgba(0, 0, 0, 0.74),
    0 9px 22px -8px rgba(0, 0, 0, 0.5);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.vc-reviews__card-body {
  position: relative;
}

/* Едва заметный внутренний светлый кант: край листа, а не вторая рамка. */
.vc-reviews__card-body::after {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 27px;
  content: "";
  pointer-events: none;
}

.vc-reviews__review-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}

/* Круглый портрет: локальная фотография, кадрированная в квадрат
   (images/reviews/avatar-0N.webp, 224x224). CSS-плейсхолдеров нет. */
.vc-reviews__avatar {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(30, 25, 20, 0.08),
    0 2px 6px -1px rgba(0, 0, 0, 0.3);
}

.vc-reviews__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vc-reviews__stars {
  margin: 0;
  color: var(--vcr-star);
  font-size: 12px;
  letter-spacing: 1.8px;
  line-height: 1;
  opacity: 0.9;
}

.vc-reviews__quote {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.008em;
}

.vc-reviews__meta {
  margin: 17px 0 0;
  color: var(--vcr-muted);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* Наведение — только на настоящем курсоре и только на третьем слое, поэтому
   с float-трансформом обёрток оно не конфликтует: карточка не уезжает с
   места и не задевает соседей. */
@media (hover: hover) and (pointer: fine) {
  .vc-reviews__card:hover .vc-reviews__card-body,
  .vc-reviews__card:focus-within .vc-reviews__card-body {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
      0 46px 88px -22px rgba(0, 0, 0, 0.8),
      0 11px 26px -8px rgba(0, 0, 0, 0.56);
    transform: translateY(-3.5px) scale(1.018);
  }
}

/* --- Центральная зона ------------------------------------------------------ */
/* Заголовок, описание и store badges по центру. Ни отдельной красной кнопки,
   ни подложки, ни radial glow: к установке ведут только настоящие бейджи. */

.vc-reviews__cta {
  position: absolute;
  top: 45.5%;
  left: 50%;
  z-index: 20;
  width: min(100% - 32px, 560px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.vc-reviews__cta h2 {
  margin: 0;
  color: var(--vcr-copy);
  font-family: "Plus Jakarta Sans", Inter, Arial, sans-serif;
  font-size: clamp(52px, 4.5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
}

/* Вторая строка заголовка — вопрос, поэтому он мягче первой. */
.vc-reviews__cta h2 .vc-reviews__ask {
  display: block;
  color: rgba(238, 241, 246, 0.62);
}

.vc-reviews__cta > p {
  margin: 20px auto 30px;
  max-width: 470px;
  color: var(--vcr-copy-muted);
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 1.38;
  /* Иначе на 470px последним словом остаётся одинокое «world.». */
  text-wrap: balance;
}

/* Бейджи магазинов — единственный CTA секции. */
.vc-reviews__stores {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 0;
}

.vc-reviews__stores a {
  display: block;
  border-radius: 8px;
  line-height: 0;
  transition: transform 180ms ease;
}

.vc-reviews__stores a:hover {
  transform: translateY(-2px);
}

.vc-reviews__stores a:focus-visible {
  outline: 3px solid #9fb0c8;
  outline-offset: 4px;
}

.vc-reviews__stores img {
  width: auto;
  height: 48px;
  max-width: 162px;
}

/* --- Компактная строка footer'а ------------------------------------------- */
/* Одна горизонтальная строка под планетой, ровно по референсу. Это не второй
   footer: ни колонок, ни QR-кода, ни соцсетей, ни заголовков — только имя,
   год и четыре настоящие ссылки. Полный footer сайта идёт ниже своим блоком.
   Занимает полосу --vcr-footline, на которую подняты картинка и точки,
   поэтому лежит на чистом чёрном, а не на планете. */

.vc-reviews__footline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-height: var(--vcr-footline);
  margin-top: var(--vcr-earth-gap);
  padding: 24px 0 26px;
  color: rgba(198, 208, 222, 0.62);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.vc-reviews__footline b {
  color: rgba(226, 233, 243, 0.8);
  font-weight: 600;
}

.vc-reviews__footline a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.vc-reviews__footline a:hover,
.vc-reviews__footline a:focus-visible {
  color: var(--vcr-coral);
}

.vc-reviews__footline a:focus-visible {
  outline: 3px solid #9fb0c8;
  outline-offset: 3px;
}

/* Разделители — декоративные, поэтому aria-hidden в разметке. */
.vc-reviews__footline span {
  color: rgba(255, 255, 255, 0.16);
}

/* --- Фолбэк без JS -------------------------------------------------------- */
/* Карточки собирает скрипт, поэтому без JS секция показывает те же отзывы
   обычной сеткой. Раскладку в этом режиме задаёт <noscript><style> в
   разметке: он переводит сцену в поток. Отступ сверху здесь — страховка на
   случай, если тот style до движка не дошёл. */

.vc-reviews__fallback {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
  padding-top: 880px;
}

.vc-reviews__fallback .vc-reviews__avatar {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

/* Без обёртки __review-head звёзды падали бы под аватар отдельной строкой. */
.vc-reviews__fallback .vc-reviews__stars {
  display: inline-block;
  margin-bottom: 12px;
  vertical-align: middle;
}

.vc-reviews__fallback footer {
  margin-top: 14px;
  color: var(--vcr-muted);
  font-size: 13.5px;
  font-weight: 600;
}

/* Дрейф: вертикаль плюс микроповорот. Амплитуда, направление, фаза и
   длительность у каждой карточки свои — конфиг в JS. */
@keyframes vc-review-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(0, var(--float), 0) rotate(var(--spin)); }
}

/* --- Ниже 1280px: плавающая композиция в потоке ---------------------------- */
/* Абсолютная раскладка держится на защищённом центре: уже на 1024px сцена
   сужается настолько, что карточки физически не расходятся по сторонам центра.
   Поэтому ниже 1280px сцена уходит в поток, но НЕ в список: карточки встают
   парами. Здесь зазор до Земли отсчитывается от бейджей, а не от карточки,
   поэтому формула другая: подъём лимба над нижней кромкой кадра (0.2476
   ширины окна для горизонтального файла) плюс 28px. */

@media (max-width: 1279.98px) {
  .vc-reviews {
    --vcr-earth-gap: calc(24.76vw + 28px);
    padding: clamp(76px, 7vw, 108px) 20px 0;
  }

  .vc-reviews__scene {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: clamp(44px, 7vw, 60px);
    /* 3D-контекст в потоке не нужен и только мешает растру шрифтов. */
    perspective: none;
    transform-style: flat;
  }

  /* Зона отзывов идёт ПЕРВОЙ и заканчивается до заголовка: типографике нужно
     чистое пространство. */
  .vc-reviews__cards {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 2.6%;
    order: 1;
  }

  /* Дрейф здесь мягче: свои амплитуда, поворот, длительность и фаза. */
  .vc-reviews__card {
    --float: var(--mfloat);
    --spin: var(--mspin);
    --duration: var(--mdur);
    --delay: var(--mdelay);
    position: static;
    width: var(--mw);
    margin-top: var(--mt);
    /* Глубина здесь — только порядок слоёв и сила тени, без перспективы. */
    z-index: var(--order);
    transform: none;
  }

  .vc-reviews__card--hero {
    --card-w: auto;
  }

  /* Ближний план чуть контрастнее дальнего: разница читается как глубина,
     а не как разные стили карточек. */
  .vc-reviews__card-body {
    box-shadow:
      0 calc(20px + var(--depth) * 16px) calc(40px + var(--depth) * 30px) -20px rgba(0, 0, 0, 0.74),
      0 6px 16px -8px rgba(0, 0, 0, 0.48);
  }

  .vc-reviews__cta {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    width: min(100%, 560px);
    margin: 0 auto;
    transform: none;
  }

  .vc-reviews__fallback {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 36px;
  }
}

/* --- Мобильная композиция ------------------------------------------------- */
/* Ровно четыре карточки, ровными парами 2 + 2 в верхней части. Ширина 44–45%
   доступной ширины, правая колонка опущена на 18px — как в референсе.
   Верхнее поле 108px: это больше высоты фиксированной шапки (около 78px) плюс
   максимальной амплитуды дрейфа (14px), поэтому верхние карточки не уходят ни
   под шапку, ни за верхний край секции. */

@media (max-width: 767.98px) {
  .vc-reviews {
    /* На узком экране порядок другой, чем на десктопе, и повторяет референс:
       текст → Земля → бейджи → компактная строка. Земля стоит МЕЖДУ текстом и
       бейджами, поэтому вертикаль считается от самой планеты, а не от кромки
       картинки. Две величины мобильного кадра (853 × 1844):
         86.47vw — от верха дуги лимба до нижней кромки кадра;
         22vw    — чёрный хвост кадра ниже последних огней планеты.
       Отсюда зазор от нижней кромки текста до компактной строки:
         50px (текст → Земля) + 86.47vw − 22vw (сама планета)
         + 32px (Земля → бейджи) + 46px (бейджи) + 42px (бейджи → строка). */
    --vcr-earth-gap: calc(64.47vw + 170px);
    /* Подъём кадра над низом секции. Считается обратно от бейджей: последние
       огни планеты должны оказаться ровно на 32px выше них, а чёрный хвост
       кадра — уйти бейджам под низ, как в референсе.
         224px = 146px (низ бейджей над низом секции) + 46px + 32px. */
    --vcr-footline: calc(224px - 22vw);
    padding: 108px 16px 0;
  }

  /* Ровно четыре карточки: Theo и Amina живут только в широкой композиции. */
  .vc-reviews__card--no-mobile,
  .vc-reviews__fallback article.vc-reviews__card--no-mobile {
    display: none;
  }

  /* Слой точек повторяет мобильный кадр фона и берёт мобильные координаты:
     дуга в нём проходит иначе, чем в горизонтальном файле. */
  .vc-reviews__sparks {
    aspect-ratio: 853 / 1844;
  }

  .vc-reviews__sparks i {
    left: var(--mx);
    top: var(--my);
  }

  /* На узком экране точек меньше: 10 на теле планеты и 5 по контуру. */
  .vc-reviews__sparks i.is-wide-only {
    display: none;
  }

  /* 84px в покое: нижняя пара опускается дрейфом ещё на 11px, поэтому чистого
     воздуха до заголовка остаётся заметно больше требуемых 56px, и текстовый
     блок больше не прилипает к карточкам.
     position: static здесь обязателен: бейджи ниже позиционируются от низа
     СЕКЦИИ, а позиционированная сцена перехватила бы их на себя. */
  .vc-reviews__scene {
    position: static;
    gap: 84px;
  }

  .vc-reviews__cards {
    gap: 22px 11%;
  }

  .vc-reviews__card-body {
    padding: 17px 15px 15px;
    border-radius: 22px;
  }

  .vc-reviews__card-body::after {
    border-radius: 21px;
  }

  .vc-reviews__avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .vc-reviews__review-head {
    gap: 9px;
    margin-bottom: 12px;
  }

  .vc-reviews__stars {
    font-size: 9.5px;
    letter-spacing: 1.1px;
  }

  .vc-reviews__quote {
    font-size: 13.5px;
    line-height: 1.42;
  }

  .vc-reviews__meta {
    margin-top: 13px;
    font-size: 11.5px;
  }

  /* Тоже static — по той же причине, что и сцена: иначе абсолютные бейджи
     считались бы от бокса текста, а не от низа секции. */
  .vc-reviews__cta {
    position: static;
    width: 96%;
  }

  .vc-reviews__cta h2 {
    font-size: clamp(40px, 11.4vw, 52px);
  }

  /* Нижнего поля больше нет: бейджи уехали под Землю, и от этой кромки текста
     отсчитывается зазор до планеты. */
  .vc-reviews__cta > p {
    margin: 16px auto 0;
    font-size: 17px;
  }

  /* Бейджи уходят ПОД Землю, на её чёрный хвост, и стоят между планетой и
     компактной строкой — как в референсе. Из потока они вынуты и считаются от
     низа секции: 90px safe-area до плавающего AI-чата + 14px строка footer'а
     + 42px зазор = 146px. Пара единственная, вторую не добавляем.
     Крупной целью бейджи остаются: половина ширины экрана на каждый. */
  .vc-reviews__stores {
    position: absolute;
    right: 16px;
    bottom: 146px;
    left: 16px;
    z-index: 21;
    gap: 10px;
  }

  .vc-reviews__stores img {
    height: 46px;
    max-width: calc(50vw - 26px);
  }

  /* Строка помещается целиком, кегль и зазоры меньше — но это по-прежнему
     одна строка, а не аккордеон. Высота строки фиксирована: от неё считается
     и подъём кадра, и позиция бейджей. Верхнего поля нет — зазор до бейджей
     задан их собственным bottom. Нижнее поле 90px — safe area до плавающего
     виджета AI-чата (он поднят на 14px и высок 60px), поэтому ни Google Play,
     ни строка под ним виджетом не перекрываются. */
  .vc-reviews__footline {
    min-height: 0;
    gap: 3px 11px;
    padding: 0 0 90px;
    font-size: 11.5px;
    line-height: 14px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-reviews *,
  .vc-reviews *::before,
  .vc-reviews *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Тёмный footer — ТОЛЬКО главная страница
   ==========================================================================

   Класс vc-hero-page стоит на <body> лишь в index.html, поэтому все правила
   ниже действуют только там: на about/download/faqs/features и остальных
   страницах footer остаётся светлым и не меняется ни на пиксель.

   Второго footer нет: это тот же самый блок разметки со своими живыми
   ссылками, логотипом, QR-кодом и copyright — меняются только цвета, чтобы он
   читался продолжением тёмной секции. Начинается он ПОСЛЕ компактной строки
   референса и тем же тоном #07080b, что низ #reviews.
   ========================================================================== */

body.vc-hero-page footer.footer {
  --vcf-ink: #07080b;
  --vcf-ink-2: #0d0f15;
  --vcf-title: #eef1f6;
  --vcf-text: rgba(198, 208, 222, 0.72);
  --vcf-line: rgba(255, 255, 255, 0.1);

  position: relative;
  background: linear-gradient(180deg, var(--vcf-ink) 0%, var(--vcf-ink-2) 46%, var(--vcf-ink-2) 100%);
  color: var(--vcf-text);
}

body.vc-hero-page footer.footer h6,
body.vc-hero-page footer.footer .d-title,
body.vc-hero-page footer.footer .m-title {
  color: var(--vcf-title);
}

body.vc-hero-page footer.footer p,
body.vc-hero-page footer.footer li,
body.vc-hero-page footer.footer .footer-copyright p,
body.vc-hero-page footer.footer .bottom-footer-list p {
  color: var(--vcf-text);
}

body.vc-hero-page footer.footer a {
  color: var(--vcf-text);
  transition: color 180ms ease;
}

body.vc-hero-page footer.footer a:hover,
body.vc-hero-page footer.footer a:focus-visible {
  color: var(--vcr-coral, #f2565c);
}

body.vc-hero-page footer.footer .footer-socials a {
  color: var(--vcf-title);
}

body.vc-hero-page footer.footer hr {
  border-top-color: var(--vcf-line);
  color: var(--vcf-line);
  opacity: 1;
}

/* QR-код должен оставаться сканируемым, поэтому светлую подложку не трогаем —
   только приглушаем её, чтобы белый квадрат не бил по глазам на чёрном. */
body.vc-hero-page footer.footer .footer-qr-code {
  background: #e9ebee;
}

body.vc-hero-page footer.footer a:focus-visible {
  outline: 3px solid #9fb0c8;
  outline-offset: 3px;
}