/* Vidiocracy — main page styles
   Mobile-first, breakpoints: sm 640px / md 768px / lg 1024px */

:root {
  /* фикс SPEC-fix1.md п.2: основной фон светлее и менее жёлтый, ближе к белому */
  --color-bg: #fffaf7;
  --color-bg-soft: #f3e7d6;
  --color-text: #2e211d;

  /* фикс SPEC-fix1.md п.2: мягкий фон за пределами колонки на десктопе — светлее, менее жёлтый */
  --color-bg-outer: #f8f1eb;

  --color-gold-light: #f1e0d0;
  --color-gold-dark: #c4a98e;
  --color-card-border: #e2cfb0;

  /* фикс SPEC-fix1.md п.1: единый радиальный градиент шапки (лого + навигация — один
     общий фон без "разрыва" на стыке). Рисуется как один общий холст на .site-header
     и .site-nav через одинаковые background-size/position (см. syncHeaderGradient в js/main.js),
     поэтому сам градиент задаётся один раз здесь. */
  --gradient-header: radial-gradient(
    ellipse 105% 135% at 50% 32%,
    #fdfcfa 0%,
    #fcf7f3 38%,
    #faf1eb 68%,
    #f7eae1 100%
  );

  /* фикс п.2.3: золотистый акцент (иконки, CTA, плашки-разделители) */
  --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-dark) 100%);
  --gradient-plate: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light) 50%, var(--color-gold-dark));

  /* фикс fix.md: тёплый бежевый (не серый!) старт — заметно теплее
     --color-bg-outer, ближе к --color-gold-light, чтобы переход читался
     как бежевый, а не как лёгкое затемнение белого */
  --color-quote-beige: #f5e5cd;

  /* фикс fix.md: фон цитат — не отдельная плашка, а градиент, "просвечивающий"
     внешним бежевым фоном страницы и плавно, почти на всей ширине блока,
     смягчающийся в основной около-белый цвет активной зоны (--color-bg) —
     цвет фона достигается только ближе к правому краю (90%). Резкий стык
     (0% дублирован) даёт жёсткое начало градиента ровно на границе активной
     зоны, а не мягкое размытие в самом начале; сами границы (0% и правый
     край) выставляются в JS (syncQuoteGradients в js/main.js) через
     background-size/position, т.к. зависят от реального отступа и ширины
     конкретного блока цитаты относительно левого края .page-wrap. */
  --gradient-quote: linear-gradient(
    90deg,
    var(--color-quote-beige) 0%,
    var(--color-quote-beige) 0%,
    var(--color-bg) 90%
  );

  /* фикс spec-pages/main/fix.md: карточки блока "Новости" — тот же тёплый
     горизонтальный градиент, что и на референсе, но заметно светлее (ближе
     к --color-bg, без насыщенного тёмно-золотого тона на правом краю). */
  --gradient-news-card: linear-gradient(100deg, #fffdfb 0%, #fbf3e9 55%, #f6e9d6 100%);

  --section-gap: 3rem;
  --content-max: 1100px;

  --radius-lg: 1.75rem;
  --radius-md: 1.25rem;
  --radius-full: 999px;

  /* Единый размер круглых аватаров заказчика (GloraX / Adopta) — задаётся
     здесь, а не на конкретном блоке, чтобы оба кейса были одного размера.
     фикс fix.md: размер уменьшен на 25% (было 4.6rem / 5.4rem). */
  --case-avatar-size: 3.45rem;

  /* фикс spec-pages/main/fix.md: единая точка правды для высоты плашки
     заголовка (.section-plate) — используется как самой плашкой, так и
     соседними белыми рядами иконок (.platforms-row--video/--marketplace),
     чтобы их итоговая высота совпадала с высотой плашки на любой ширине
     экрана (font-size плашки — тот же clamp, что был раньше зашит прямо
     в .section-plate). Формула высоты: line-height (1.5, наследуется от
     body) * font-size + вертикальный padding плашки (1.1rem * 2). */
  --plate-font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  --plate-height: calc(var(--plate-font-size) * 1.5 + 2.2rem);

  /* фикс spec-pages/main/fix.md: единый TAP (эталон — .carousel-arrow) */
  --tap-scale: 0.94;
  --tap-duration: 0.15s;
  --tap-easing: ease;

  /* фикс spec-pages/main/fix.md: единый fade цитат при смене кейса
     (эталон — .order-info__panel в #marketplace-cards). JS читает
     то же значение через --quote-fade-duration. */
  --quote-fade-duration: 0.2s;
}

@media (min-width: 768px) {
  :root {
    --case-avatar-size: 4.05rem;
  }
}

* {
  box-sizing: border-box;
}

/* фикс spec-pages/main/fix.md: на мобильных (особенно Android/Chrome/Safari)
   тап по кнопке или ссылке (навигация, соцсети, CTA, крестик модалки и т.д.)
   оставляет системную синюю/голубую подсветку (-webkit-tap-highlight-color) и/
   или рамку фокуса (браузер трактует тап как :focus-visible). Обе — и
   системная подсветка, и любая обводка фокуса (в т.ч. кастомная — она так же
   подвержена этому багу) — на практике "зависают" на элементе заметно дольше
   самого тапа, поэтому по требованию убираем их безусловно, глобально, для
   всех кнопок/ссылок/role="button", а не точечно по классам (чтобы не забыть
   новые интерактивные элементы в будущем). user-select здесь не помогает —
   это отдельное WebKit/Chromium-свойство именно для тап-подсветки, не
   связанное с выделением текста. Клавиатурная навигация (Tab) продолжает
   переводить фокус между элементами как обычно — просто без визуального
   индикатора; функциональность (Enter/Space) не затронута. */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus,
[role="button"]:focus,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
}

html {
  scroll-behavior: smooth;
  /* фикс spec-pages/main/fix.md (iOS Safari): раньше overflow-x: hidden висел
     на <body>. В Safari на iOS это в паре со sticky-навигацией (.site-nav)
     иногда приводит к тому, что при скролле вниз, пока прячется адресная
     строка, панель навигации на кадр "сплющивается" по высоте — известный
     баг WebKit, когда body сам становится скролл-контейнером и конфликтует
     с анимацией системной адресной строки, влияя на пересчёт sticky-элемента.
     Перенос overflow-x: hidden на <html> убирает этот конфликт (виджет
     скролла — снова сам вьюпорт, а не body) и НЕ меняет поведение обрезки
     горизонтального переполнения ни на одном другом браузере/платформе —
     эффект (нет горизонтального скролла страницы) идентичен. */
  overflow-x: hidden;
}

body {
  margin: 0;
  /* фикс spec-main-fix2.md п.3: мягкий тёплый фон по краям на десктопе (не белый), кремовый — только внутри .page-wrap */
  background: var(--color-bg-outer);
  color: var(--color-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* фикс spec-pages/main/fix.md: пока открыто модальное окно "Связаться с нами"
   страница за ним не скроллится. */
body.modal-open {
  overflow: hidden;
}

.page-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  background: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */

/* фикс SPEC-fix1.md: логотип НЕ фиксируется и прокручивается вместе с контентом.
   ВАЖНО: .site-header и .site-nav — соседи, оба прямые дети .page-wrap (а не
   один вложен в другой). Если .site-nav сделать sticky внутри короткой общей
   обёртки (высота = высота хедера + высота навигации), у sticky-элемента не
   остаётся места, чтобы реально "прилипнуть" — контейнер обрывается ровно там
   же, где кончается сам sticky-блок, и фиксация не работает визуально. */
.site-header {
  position: relative;
  z-index: 1;
  background-image: var(--gradient-header);
  background-repeat: no-repeat;
  /* background-size/position выставляются в JS (syncHeaderGradient), чтобы
     совпадать с .site-nav ниже; эти значения — запасной вариант до JS/без него */
  background-size: 100% 100%;
  background-position: 50% 0;
  border-radius: 0;
  margin: 0;
  padding-block: 2rem 1rem;
  text-align: center;
}

.site-header__logo {
  display: inline-block;
  width: min(78%, 320px);
  margin-inline: auto;
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-nav {
  /* FIX 1: панель разделов остаётся видимой (position: sticky) при прокрутке страницы вниз.
     Containing block для sticky — .page-wrap (высокий, тянется на всю страницу),
     поэтому у панели есть место реально "прилипнуть", а не только на .site-header. */
  position: sticky;
  top: 0;
  z-index: 10;
  /* фикс SPEC-fix1.md п.1: тот же градиент, что и у .site-header, но со сдвигом
     background-position на высоту хедера — визуально это продолжение ОДНОГО и того же
     градиента, а не второй градиент, наложенный на новую коробку. Точные значения
     size/position считает syncHeaderGradient() в js/main.js по реальной высоте хедера,
     поэтому шов не появляется независимо от брейкпоинта/контента лого. */
  background-image: var(--gradient-header);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 0;
  padding-block: 0.75rem;
  box-shadow: 0 14px 20px -14px rgba(46, 33, 29, 0.48);
  /* фикс spec-pages/main/fix.md (iOS Safari): дополнительно промотируем
     панель в её собственный композитный слой. Это распространённый и
     безопасный обходной приём именно для описанного глюка WebKit
     (визуальное "сплющивание" sticky-элемента по высоте на кадр-два во
     время инерционного скролла/скрытия адресной строки) — сам по себе
     translateZ(0) не двигает и не масштабирует элемент, поэтому на
     остальных браузерах (Chrome/Firefox/десктоп Safari/Android) визуально
     ничего не меняется. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* фикс spec-pages/main/fix.md: при скролле вниз в закреплённой панели навигации
   слева от пункта ГЛАВНАЯ появляется уменьшенный логотип VIDIOCRACY, отступ
   которого от левого края активной зоны (.page-wrap) равен отступу кнопки
   "связаться с нами" от правого края (см. .site-nav__cta-wrap выше). Логотип
   позиционируется АБСОЛЮТНО и не участвует в раскладке .site-nav__list — она
   остаётся ровно там же, где была без логотипа (центр по всей ширине), и
   никогда не сдвигается при появлении/скрытии логотипа. Точную горизонтальную
   позицию (отступ, зеркальный отступу кнопки CTA) и допустимую ширину считает
   updateNavLogoPosition() в js/main.js — фиксированного CSS значения тут
   недостаточно, т.к. отступ кнопки и ширина списка зависят от контента и
   брейкпоинта. */
.site-nav__inner {
  position: relative;
}

.site-nav__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease, gap 0.25s ease;
}

/* фикс spec-pages/main/fix.md: компактный логотип панели навигации теперь
   собирается из ДВУХ файлов (icons/vidi_logo_small/) вместо одной цельной
   картинки — иконка (знак) слева, имя (словесный знак) справа, с аккуратным
   gap между ними (см. .site-nav__logo выше). Имя (текст) — на 25% меньше
   иконки по высоте, чтобы пара смотрелась сбалансированно; ширина авто,
   чтобы не искажать пропорции файлов. */
.site-nav__logo-icon,
.site-nav__logo-text {
  width: auto;
  max-width: none;
  display: block;
}

.site-nav__logo-icon {
  height: 1.4rem;
}

.site-nav__logo-text {
  height: 1.05rem; /* 1.4rem * 0.75 — на 25% меньше иконки */
}

/* фикс spec-pages/main/fix.md п.5: всплывающий логотип в sticky-навигации —
   фишка только десктоп-версии (≥1024px, порог совпадает с остальными
   lg-брейкпоинтами в этом файле). На мобильной/планшетной версии логотип
   в навигации никогда не показывается, даже при .is-scrolled — там для
   него банально не хватает места рядом с центрированным списком и кнопкой. */
@media (min-width: 1024px) {
  .site-nav.is-scrolled .site-nav__logo {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* фикс spec-pages/main/fix.md: дубль кнопки "связаться с нами" в sticky-панели
   виден ТОЛЬКО после скролла (.site-nav.is-scrolled) — на ВСЕХ шириноах, не
   только на десктопе. До скролла место кнопки в панели остаётся пустым —
   скрываем через opacity/visibility (НЕ display: none), чтобы
   .site-nav__cta-wrap продолжал резервировать место в flex-раскладке и
   центрирование ГЛАВНАЯ/НОВОСТИ не сдвигалось при появлении/скрытии кнопки.
   На десктопе (≥1024px) появление кнопки синхронно с компактным логотипом
   (см. .site-nav__logo выше); на мобильной компактного логотипа нет, но
   класс .is-scrolled всё равно выставляется при скролле (см. js/main.js) —
   этого достаточно, чтобы кнопка показывалась/скрывалась по тому же триггеру. */
.site-nav__cta-wrap .cta-button--nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform var(--tap-duration) var(--tap-easing);
}

.site-nav.is-scrolled .site-nav__cta-wrap .cta-button--nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* фикс spec-pages/main/fix.md: на мобильной/планшетной версии (<1024px)
   панель навигации больше не закрепляется при скролле (обычный `static`
   вместо `sticky`) — уходит вместе со страницей. Десктоп (≥1024px, см.
   `@media (min-width: 1024px)` ниже) не трогаем — там `.site-nav` остаётся
   sticky, а CTA/логотип появляются синхронно по `.is-scrolled`, как раньше.
   Само скрытие кнопки "связаться с нами" на мобильной — см. правило
   `.site-nav__cta-wrap` НИЖЕ, после базового `.site-nav__row` (см. комментарий
   там: важен порядок в файле, иначе более поздний безусловный `display: flex`
   для `.site-nav__cta-wrap` перебивает это `display: none` при равной
   специфичности селектора). */
@media (max-width: 1023.98px) {
  .site-nav {
    position: static;
  }
}

/* фикс spec-pages/main/fix.md: плавающая иконка чата — замена CTA "связаться
   с нами" в мобильной навигации. Видна ТОЛЬКО на <1024px и только после
   того, как крупный `.site-header` полностью ушёл за верх вьюпорта — тот же
   триггер/класс `.site-nav.is-scrolled`, что раньше показывал CTA (см.
   IntersectionObserver в js/main.js). `.mobile-chat-fab` — сосед `.site-nav`
   внутри `.page-wrap` (см. index.html/news.html), поэтому комбинатор
   общего соседа `~` работает без дополнительного JS. */
.mobile-chat-fab {
  /* фикс spec-pages/main/fix.md: без кружка-подложки — видна только сама
     иконка своей формы (прозрачный фон у контейнера), тень навешена на
     `<img>` через `filter: drop-shadow`, чтобы повторять силуэт иконки,
     а не рисовать прямоугольную/круглую рамку под ней. Элемент — <button>
     (открывает модалку контактов, как остальные CTA "связаться с нами"),
     поэтому дополнительно сбрасываем нативные стили кнопки (рамка/паддинг/
     фон), чтобы визуально это была просто иконка. */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  outline: none;
  /* фикс spec-pages/main/fix.md: в Safari (особенно iOS) тап по кнопке даёт
     нативную золотисто-коричневую подсветку/обводку — убираем оба источника:
     `-webkit-tap-highlight-color` (полупрозрачная подсветка при тапе) и
     `outline: none` на самом элементе (см. также `:focus-visible` ниже —
     кастомную обводку сознательно не показываем ни при тапе, ни при клике). */
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  width: 5.4rem;
  height: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.mobile-chat-fab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(46, 33, 29, 0.38));
}

.mobile-chat-fab:hover,
.mobile-chat-fab:focus-visible {
  transform: translateY(0) scale(1.05);
}

.mobile-chat-fab:active {
  transform: translateY(0) scale(var(--tap-scale));
  transition: opacity 0.25s ease, transform var(--tap-duration) var(--tap-easing), visibility 0.25s ease;
}

.site-nav.is-scrolled ~ .mobile-chat-fab {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

@media (min-width: 1024px) {
  .mobile-chat-fab {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-chat-fab {
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .mobile-chat-fab:hover,
  .mobile-chat-fab:focus-visible,
  .mobile-chat-fab:active,
  .site-nav.is-scrolled ~ .mobile-chat-fab {
    transform: none;
  }

  .mobile-chat-fab:active {
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
}

@media (min-width: 640px) {
  .site-nav__logo-icon {
    height: 1.7rem;
  }

  .site-nav__logo-text {
    height: 1.275rem; /* 1.7rem * 0.75 — на 25% меньше иконки */
  }
}

/* фикс spec-pages/main/fix.md п.4/6: раскладка строки навигации различается
   по брейкпоинту.
   МОБИЛЬНАЯ версия (<1024px, база — mobile-first): логотипа тут нет (см. п.5
   ниже), поэтому .site-nav__spacer не нужен — скрываем его, а
   .site-nav__list сам становится растяжимой зоной (flex: 1 1 auto) и
   центрирует ГЛАВНАЯ/НОВОСТИ ВНУТРИ своей зоны, т.е. по центру оставшегося
   места после кнопки "связаться с нами" (а не по центру всей строки) —
   так ГЛАВНАЯ не "прилипает" к левому краю, а НОВОСТИ не "прилипают" к кнопке.
   ДЕСКТОП (см. медиа-запрос ниже, ≥1024px): классический трюк с двумя
   равными flex:1 зонами по краям (.site-nav__spacer слева, .site-nav__cta-wrap
   справа) держит .site-nav__list строго по центру ВСЕЙ строки — симметрично
   уменьшенному логотипу, который появляется слева при скролле (см.
   .site-nav__logo и updateNavLogoPosition в js/main.js). */
.site-nav__row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.6rem;
}

.site-nav__spacer {
  display: none;
}

.site-nav__cta-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.site-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
}

/* фикс spec-pages/main/fix.md: кнопка "связаться с нами" в навигации на
   мобильной/планшетной версии (<1024px) убрана ПОЛНОСТЬЮ (не резервирует
   место в flex-раскладке) — заменена плавающей иконкой чата `.mobile-chat-fab`.
   Это правило ОБЯЗАНО идти в файле ПОСЛЕ безусловного `.site-nav__cta-wrap`
   выше (та же специфичность селектора → при равной специфичности выигрывает
   правило, встречающееся в файле позже, независимо от того, что оно внутри
   media query) — иначе `display: flex` из безусловного правила перебивает
   `display: none` и кнопка на секунду "мелькает" при загрузке страницы.
   Раз кнопки нет, `.site-nav__list` растягивается на всю ширину строки
   (`flex: 1 1 auto` задано выше) и центрирует ГЛАВНАЯ/НОВОСТИ внутри неё
   (`justify-content: center`, как в базовом правиле выше) — по центру ВСЕЙ
   панели, а не только свободного места слева от кнопки. */
@media (max-width: 1023.98px) {
  .site-nav__cta-wrap {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-nav__spacer {
    display: block;
    /* базис 0, как у .site-nav__cta-wrap (а НЕ flex-basis: auto/содержимое!) —
       иначе одна из зон стартует "тяжелее" другой, и рост от free space
       делает эту зону крупнее соседней, сдвигая список от центра активной
       зоны. */
    flex: 1 1 0;
    min-width: 0;
  }

  .site-nav__cta-wrap {
    /* Min-width не задаём (остаётся браузерный auto = ширина кнопки) — это
       гарантирует, что зона кнопки не сожмётся уже содержимого и не наедет
       на список ГЛАВНАЯ/НОВОСТИ; пустой спейсер при нехватке места сжимается
       первым за счёт своего min-width: 0. */
    flex: 1 1 0;
    /* фикс spec-pages/main/fix.md: кнопку "связаться с нами" отодвигаем от
       правого края активной зоны (.page-wrap), чтобы её отступ визуально
       совпадал с отступом компактного логотипа от левого края (см.
       updateNavLogoPosition в js/main.js, который зеркалит именно этот
       отступ). ГЛАВНАЯ/НОВОСТИ не задействуют .site-nav__cta-wrap, поэтому
       их центрирование не меняется. */
    padding-right: 1.5rem;
  }

  .site-nav__list {
    flex: 0 1 auto;
  }
}

.site-nav__link {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: 0.3rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--color-gold-dark);
}

/* фикс spec-pages/main/fix.md: временно скрыть ПРИМЕРЫ и УСЛУГИ до запуска
   страниц. Разметка остаётся в DOM. Чтобы вернуть пункты, снимите hidden
   с этих <li> и удалите правило ниже. */
.site-nav__link[href="examples"],
.site-nav__link[href="services"],
.site-nav__link[href="examples.html"],
.site-nav__link[href="services.html"],
.site-nav__link[href="/examples"],
.site-nav__link[href="/services"],
.site-nav__list > li[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .site-nav__list {
    gap: 1.75rem;
  }
  .site-nav__link {
    font-size: 0.95rem;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: 1rem 0;
  text-align: center;
}

.hero__title {
  /* фикс spec-pages/main/fix.md: Montserrat Medium, 26pt (=2.1667rem) на ПК;
     на мобиле — уменьшенный, но пропорциональный размер того же начертания. */
  font-family: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(1.35rem, 6vw, 2.1667rem);
  font-weight: 500;
  text-transform: none;
  margin: 0 0 1.5rem;
}

.features-grid {
  display: grid;
  /* фикс мобильного горизонтального скролла: `1fr` без явного минимума
     по спецификации grid неявно означает `minmax(auto, 1fr)` — колонка не
     может стать УЖЕ, чем min-content самого длинного неразрывного слова
     внутри (`.feature-card__text`). На очень узких экранах (≤~340px,
     напр. iPhone SE 320px) слово "передача" не влезает в получившуюся
     узкую колонку, и сетка целиком раздвигает `.features-grid`/`.hero`
     шире реального экрана — тот же класс бага, что и с `.device-frame--phone`
     (см. фикс выше): контент шире вьюпорта заставляет мобильный браузер
     расширить рабочую область страницы, появляется скролл вправо в
     пустоту. `minmax(0, 1fr)` явно разрешает колонке сжиматься до 0 —
     текст при нехватке места просто переносится на новую строку внутри
     карточки (см. также `min-width: 0` у `.feature-card__text` ниже —
     без него текст как flex-item не даст карточке сузиться теми же
     min-content правилами, только на уровне flex, а не grid). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  text-align: left;
  min-width: 0;
}

/* фикс мобильного горизонтального скролла: на предельно узких экранах
   (≤359px, напр. iPhone SE/5 320px) двух колонок не хватает даже с
   overflow-wrap — слова начинают рваться некрасиво посередине ("переда-
   ча"). Ниже этого порога карточки складываются в один столбец на всю
   ширину — места хватает, чтобы ни одно слово не переносилось. */
@media (max-width: 359px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card__icon {
  /* фикс spec-pages/main/fix.md: иконки-рефы (1official/2all_rights/
     3sroch_projects/4top_ai) уже вырезаны как готовая полноцветная
     картинка — без круглой золотой подложки и без инверсии в силуэт,
     показываем webp как есть. */
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card__text {
  /* фикс spec-pages/main/fix.md: текст плашки теперь двухстрочный —
     полужирный заголовок сверху (.feature-card__title) и обычное мелкое
     пояснение снизу (.feature-card__desc), друг под другом в колонку. */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.25;
  /* фикс мобильного горизонтального скролла: см. комментарий у
     .features-grid — без min-width: 0 текст как flex-item не даёт
     карточке сжаться на очень узких экранах. */
  min-width: 0;
  /* фикс мобильного горизонтального скролла: на предельно узких экранах
     (≲332px, напр. iPhone SE/5, 320px) даже после min-width: 0 длинное
     неразрывное слово не влезает в сузившуюся карточку и визуально
     вылезает за её край — само по себе это не меняет ширину grid-трека,
     НО этот визуальный overflow всё равно засчитывается в scrollable
     overflow предков (вплоть до .container/<html>), и мобильный браузер
     аналогично п.1 (см. .device-frame--phone) расширяет рабочую область
     страницы под него. overflow-wrap разрешает перенос ВНУТРИ слова
     именно тогда, когда оно физически не влезает целиком — на обычных
     ширинах ни на что не влияет. */
  overflow-wrap: break-word;
}

.feature-card__title {
  /* фикс spec-pages/main/fix.md: заголовок плашки — Manrope Bold
     (шрифт 700 подключён отдельно, wght@400;500;700 в <head>, иначе
     браузер не может отрисовать реальный полужирный/жирный начертание
     и подставляет обычный 400), размер как у прежнего однострочного
     текста (11pt на ПК). */
  font-weight: 700;
  font-size: 0.8125rem;
}

.feature-card__desc {
  /* фикс spec-pages/main/fix.md: пояснение — Manrope Regular, заметно
     мельче заголовка, приглушённый оттенок для визуальной иерархии. */
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--color-text-muted, #6b5c52);
  line-height: 1.3;
}

/* фикс spec-pages/main/fix.md: карточки 2 и 4 — короткий mobile-текст
   (<1024px), полный desktop-текст (≥1024px). display:none убирает
   скрытый вариант и из вёрстки, и из a11y-дерева (не читаются оба). */
.feature-card__desc-desktop {
  display: none;
}

@media (min-width: 640px) {
  .feature-card__title {
    font-size: 0.9167rem;
  }
  .feature-card__desc {
    font-size: 0.75rem;
  }
  .feature-card__icon {
    width: 3rem;
    height: 3rem;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    gap: 1.25rem;
  }
  .feature-card {
    padding: 1.1rem 1.3rem;
  }
  .feature-card__desc-mobile {
    display: none;
  }
  .feature-card__desc-desktop {
    display: inline;
  }
}

.cta-button {
  display: inline-block;
  /* фикс spec-pages/main/fix.md: CTA теперь <button>, открывающий модалку
     "Связаться с нами" (а не якорь на #contacts) — сбрасываем нативные
     стили кнопки, чтобы она выглядела идентично прежней ссылке. */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--gradient-gold);
  padding: 0.95rem 2.4rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(176, 143, 95, 0.6);
  /* фикс spec-pages/main/fix.md: TAP как у .carousel-arrow */
  transition: transform var(--tap-duration) var(--tap-easing);
}

.cta-button:hover {
  filter: brightness(1.03);
}

.cta-button:active {
  transform: scale(var(--tap-scale));
}

/* фикс spec-pages/main/fix.md: на мобильных Chrome/Safari тап по кнопке
   (в т.ч. программный возврат фокуса на кнопку-инициатор после закрытия
   модалки, см. closeModal() в js/main.js) триггерит :focus-visible, и
   ЛЮБАЯ рамка — даже кастомная золотистая — иногда "зависает" на кнопке
   и не гаснет после того, как тап уже закончился. По требованию — никакой
   обводки у этой кнопки вообще, ни в одном состоянии фокуса. */
.cta-button:focus-visible {
  outline: none;
}

/* фикс spec-pages/main/fix.md: дубль "связаться с нами" в панели навигации —
   визуально та же кнопка, но компактнее, чтобы не раздувать высоту sticky-бара.
   Кнопка — обычный <li> внутри .site-nav__list (justify-content: center),
   поэтому весь набор пунктов навигации остаётся отцентрован по середине
   активной зоны, а сама кнопка скроллится вместе с sticky .site-nav. */
.cta-button--nav {
  padding: 0.5rem 1.3rem;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px rgba(176, 143, 95, 0.6);
}

@media (min-width: 640px) {
  .cta-button--nav {
    padding: 0.6rem 1.6rem;
    font-size: 0.85rem;
  }
}

/* ---------- Section header plate ---------- */

.case-section {
  padding-block: var(--section-gap);
}

.section-plate {
  background: var(--gradient-plate);
  color: var(--color-text);
  text-align: center;
  text-transform: uppercase;
  /* фикс spec-pages/main/fix.md: Montserrat Bold, 18pt (=1.5rem) на ПК;
     на мобиле — уменьшенный, но пропорциональный размер того же начертания. */
  font-family: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  /* фикс spec-pages/main/fix.md: вынесено в переменную --plate-font-size
     (:root), чтобы --plate-height и белые ряды иконок ниже могли точно
     повторить высоту плашки. */
  font-size: var(--plate-font-size);
  padding: 1.1rem 1.5rem;
  /* фикс spec-pages/main/fix.md: плашка растянута на всю ширину активной
     зоны (.page-wrap) — "пробивает" боковые паддинги .container (1.25rem
     с каждой стороны, см. .container выше) через отрицательные margin и
     компенсирующую width. На десктопе плашка доходит вплотную до бежевого
     фона по краям .page-wrap; на мобиле — вплотную до краёв экрана, т.к.
     там .page-wrap уже растянут на всю ширину viewport. Раз плашка теперь
     во всю ширину — углы прямые (90°), скругление убрано (иначе торчащие
     полукруглые вырезы по краям .page-wrap смотрелись бы криво). */
  border-radius: 0;
  margin: 0 0 2rem;
  width: calc(100% + 2.5rem);
  margin-inline: -1.25rem;
}

/* фикс spec-pages/main/fix.md: расстояние между заголовком-плашкой и
   следующей за ней цитатой уменьшено в 3 раза — только в блоках,
   где сразу после хедера идёт цитата (GloraX, заказ SYCHE/Adopta,
   Adopta-соцсети). Секция "Наши инструменты" (заголовок → карусель)
   не затронута — там используется отдельный .tools-heading. */
#video-social .section-plate {
  margin-bottom: calc(2rem / 3);
}

/* фикс spec-pages/main/fix.md: иконки маркетплейсов перенесены под плашку
   заголовка «КАРТОЧКИ ДЛЯ МАРКЕТПЛЕЙСОВ» — в полной аналогии с рядом
   соцсетей/площадок в блоке «Видео любого формата». Отступ и от плашки,
   и до следующего блока (цитаты заказа) переопределяется ниже через
   --platforms-video-gap/--platforms-marketplace-gap (см. секцию
   "Platforms row"), чтобы логотипы стояли строго по центру белой полосы —
   здесь оставлен фолбэк на случай, если переменная почему-то не подхватится. */
#video-any-format .section-plate,
#marketplace-cards .section-plate {
  margin-bottom: calc(2rem / 3 * 2);
}

/* ---------- Case: quote block ---------- */

.case-block {
  position: relative;
  /* Just enough room for the corner avatar to fully clear the plate
     before the TV frame starts — keeps the gap tight per spec. */
  margin-bottom: calc(var(--case-avatar-size) * 0.5 + 0.3rem);
}

/* фикс spec-pages/main/fix.md: fade всего блока цитаты при переключении
   кейса — эталон маркетплейсов. Только opacity; overflow не трогать
   (кружок аватара нависает на нижний край плашки). */
.order-info__panel,
#video-any-format .case-block,
#video-social .social-case__quote-plate {
  transition: opacity var(--quote-fade-duration) ease;
}

.order-info__panel.is-fading,
#video-any-format .case-block.is-fading,
#video-social .social-case__quote-plate.is-fading {
  opacity: 0;
}

/* Тот же fade у видео при смене кейса: гаснет содержимое экрана
   (превью / Play / iframe), не рамка ТВ/телефона. Чёрный фон
   .device-frame__screen остаётся — дырка рамки не вспыхивает
   фоном страницы. Длительность — --quote-fade-duration. */
#video-any-format .device-frame__screen > *,
#video-social .device-frame__screen > * {
  transition: opacity var(--quote-fade-duration) ease;
}

#video-any-format .device-frame__screen.is-fading > *,
#video-social .device-frame__screen.is-fading > * {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .order-info__panel,
  #video-any-format .case-block,
  #video-social .social-case__quote-plate,
  #video-any-format .device-frame__screen > *,
  #video-social .device-frame__screen > * {
    transition: none;
  }
}

/* фикс spec-pages/main/fix.md: на mobile/tablet (<1024px) зазор от
   аватара до ТВ увеличен до того же визуального воздуха, что под
   кружком заказчика в «Карточки для маркетплейсов» (~1rem под кружком,
   см. .order-info margin-bottom). Desktop (≥1024px) — прежние +0.3rem,
   не трогаем. */
@media (max-width: 1023px) {
  #video-any-format .case-block {
    margin-bottom: calc(var(--case-avatar-size) * 0.5 + 1rem);
  }
}

.case-quote {
  /* фикс spec-pages/main/fix.md: фон плашки облегает ТОЛЬКО текст цитаты —
     раньше нижний padding резервировал место под аватар, из-за чего под
     текстом оставалась пустая область фона. Аватар живёт отдельно и лишь
     наполовину нависает поверх готового (более тесного) нижнего края фона
     через .case-quote__foot--corner, не влияя на высоту самого фона. */
  background-image: var(--gradient-quote);
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  /* фикс spec-pages/main/fix.md: цитата GloraX выровнена по левому краю,
     а не по центру. */
  text-align: left;
  /* фикс spec-pages/main/fix.md: точка отсчёта для .case-quote__brand--corner
     (имя заказчика теперь позиционируется внутри самого фона цитаты, а не
     относительно .case-block). Абсолютно позиционированный элемент не
     влияет на fit-content высоту фона. */
  position: relative;
}

.case-quote__text {
  margin: 0;
  /* фикс spec-pages/main/fix.md: на мобилке шрифт цитаты на 2pt меньше,
     на десктопе (см. медиа-запрос ниже) остаётся исходным 1.05rem */
  font-size: calc(1.05rem - 2pt);
  font-style: normal;
  /* фикс spec-pages/main/fix.md: текст занимает всю свободную ширину
     плашки (не ограничен узким max-width), но не заезжает на иконку
     заказчика — см. буфер в .case-quote ниже. */
  max-width: 100%;
}

/* фикс spec-pages/main/fix.md: .case-quote__text задаёт font-style: normal
   на весь блок — восстанавливаем курсив точечно у <em> (цитата Syche и
   любые другие акценты внутри цитат). */
.case-quote__text em {
  font-style: italic;
}

/* фикс spec-pages/main/fix.md: на мобилке — короткий альтернативный текст
   цитаты GloraX (меньше деталей), на десктопе (≥768px, см. медиа-запрос
   ниже) — полный. */
.case-quote__text-full {
  display: none;
}

.case-quote__text-short {
  display: block;
}

.case-quote__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* фикс fix.md: блок "бренд + аватар" скрывается через [hidden] у кейсов
   без данных (см. кнопку "Следующий кейс") — без этого правила display:flex
   выше (авторский стиль) перебивал бы стандартный display:none у [hidden]. */
.case-quote__foot[hidden] {
  display: none;
}

/* Corner-overlay variant: brand + avatar straddle the bottom-right
   edge of the quote plate, half on the quote background, half on
   the page background — not stacked below the quote text. */
.case-quote__foot--corner {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  transform: translateY(50%);
  z-index: 1;
}

.case-quote__brand {
  /* фикс: имя заказчика — Manrope, без широкого трекинга
     (раньше letter-spacing: 0.05em визуально растягивал подпись). */
  font-family: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0;
}

/* фикс spec-pages/main/fix.md: имя заказчика в #video-any-format — внутри
   фона цитаты, у правого нижнего края (примерно там же, где раньше стояло
   рядом с кружком, но целиком поверх фона, не в промежутке между фоном и
   аватаром). Кружок (.case-quote__foot--corner) не трогаем — координаты и
   размер прежние, центр по-прежнему на нижней границе фона. Правый отступ
   учитывает ширину кружка + зазор, чтобы имя оставалось слева от него;
   нижний отступ подобран так, чтобы текст не выходил за нижний край фона
   и не наезжал на видимую (верхнюю) половину аватара. */
.case-quote__brand--corner {
  position: absolute;
  right: calc(1.5rem + var(--case-avatar-size) + 0.5rem);
  bottom: 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 1;
  /* фикс spec-pages/main/fix.md: имена заказчиков заданы в JSON
     с конкретным регистром букв — не приводить принудительно к
     верхнему регистру, как у базового .case-quote__brand. */
  text-transform: none;
}

.case-quote__avatar {
  width: var(--case-avatar-size);
  height: var(--case-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  /* фикс spec-pages/main/fix.md: та же мягкая коричневая тень, что у
     круглого логотипа заказчика в «Карточки для маркетплейсов»
     (.order-info__logo) — единая для всех кружков заказчика на главной
     (#video-any-format и #video-social), на всех ширинах. Белый фон
     обязателен, иначе box-shadow "дырявится" через прозрачные края webp. */
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(46, 33, 29, 0.4);
}

/* фикс spec-pages/main/fix.md: пустой круг-заглушка для кейса без
   реального аватара (напр. VIDIOCRACY в #video-any-format) — тот же
   размер/форма, что у обычного аватара, но без изображения и без alt. */
.case-quote__avatar--empty {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

@media (min-width: 768px) {
  .case-quote {
    padding: 2.25rem 3.5rem;
  }
  .case-quote__foot--corner {
    right: 2.5rem;
  }
  .case-quote__brand--corner {
    right: calc(2.5rem + var(--case-avatar-size) + 0.75rem);
    bottom: 0.85rem;
    font-size: 0.9rem;
  }
  .case-quote__text {
    font-size: 1.05rem;
  }
  .case-quote__text-full {
    display: block;
  }
  .case-quote__text-short {
    display: none;
  }
}

/* фикс spec-pages/main/fix.md: на десктопе высота цитаты в «Видео любого
   формата» зафиксирована под 3 строки (эталон — длинная цитата GloraX),
   чтобы переключение на короткие заглушки (VIDIOCRACY / Syche) не сдвигало
   ТВ и кнопки навигации кейсов. Только #video-any-format — цитаты
   маркетплейсов и «Видео для соцсетей» эта правка не затрагивает. Mobile
   (<768px) — высота по контенту, как раньше. */
@media (min-width: 768px) {
  #video-any-format .case-quote__text {
    min-height: calc(1.05rem * 1.5 * 3);
  }
}

/* фикс spec-pages/main/fix.md: цитаты кейсов «Видео для соцсетей»
   (#video-social) зафиксированы под 3 строки и на ≥768px — в отличие от
   #video-any-format здесь короткие заглушки (ИИ-инфлюенсер, Флокси)
   занимают всего 1 строку, а Adopta может уйти дальше 3 строк, поэтому
   рассчитывать, что текст сам уложится в 3 строки, нельзя: нужны и
   min-height (резерв места под короткие тексты), и line-clamp с
   max-height (обрезка длинного текста многоточием) одновременно. Иначе
   при переключении кейсов прыгают плашка, .social-case__nav-desktop и
   рамка телефона. */
@media (min-width: 768px) {
  /* фикс spec-pages/main/fix.md: после split #video-social-quote — обёртка
     над short/full; клэмп на ней ломает 3-строчную фиксацию. Вешаем на
     видимый текст: не-split blockquote и .case-quote__text-full. */
  .social-case__quote .case-quote__text:not(.case-quote__text--split),
  .social-case__quote .case-quote__text-full {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.05rem * 1.5 * 3);
    max-height: calc(1.05rem * 1.5 * 3);
  }
}

/* фикс spec-pages/main/fix.md: мобильные цитаты во ВСЕХ трёх секциях
   (#video-any-format, #marketplace-cards, #video-social) зафиксированы
   ровно в 2 строки — разная длина текста не меняет высоту плашки и не
   сдвигает ТВ/карусель/телефон при переключении. Текст, не помещающийся
   в 2 строки, обрезается многоточием (CSS line-clamp) — исходные строки
   в HTML/JSON не трогаем. Только <768px: desktop-фиксации (3 строки в
   #video-any-format / #video-social выше) не меняются.
   - .case-quote__text-short — видимый на мобилке текстовый узел кейсов
     «Видео любого формата», цитат SYCHE/Adopta в маркетплейсах и
     #video-social (сам .case-quote__text там лишь обёртка над двумя <span>).
   - .order-info__quote / .social-case__quote .case-quote__text — текст
     лежит прямо в blockquote, только если нет --split.
   - Исключение: .case-quote__text--split — клэмп самого blockquote
     (:not(.case-quote__text--split)) исключён, иначе webkit-box внутри
     webkit-box. */
@media (max-width: 767.98px) {
  .case-quote__text-short,
  .order-info__quote .case-quote__text:not(.case-quote__text--split),
  .social-case__quote .case-quote__text:not(.case-quote__text--split) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc((1.05rem - 2pt) * 1.5 * 2);
    max-height: calc((1.05rem - 2pt) * 1.5 * 2);
  }
}

/* фикс spec-pages/main/fix.md: точечный адаптив ≤ iPhone 13 mini (375px).
   На ≥376px (в т.ч. iPhone 13 390px) правила выше не перебиваются. */
@media (max-width: 375px) {
  /* 1. Полужирные заголовки 4 карточек плюсов — минус 1pt. Пояснения
     (.feature-card__desc), иконки и сетка не трогаем. */
  .feature-card__title {
    font-size: calc(0.8125rem - 1pt);
  }

  /* 2. Цитаты всех трёх секций: те же 2 строки, но без многоточия.
     -webkit-line-clamp в WebKit всегда рисует ellipsis — снимаем клэмп
     и держим окно через min/max-height + overflow:hidden. display:block
     вместо -webkit-box, иначе высота «плывёт» без line-clamp. Тексты
     HTML/JSON не сокращаем. */
  .case-quote__text-short,
  .order-info__quote .case-quote__text:not(.case-quote__text--split),
  .social-case__quote .case-quote__text:not(.case-quote__text--split) {
    display: block;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    text-overflow: clip;
    overflow: hidden;
    min-height: calc((1.05rem - 2pt) * 1.5 * 2);
    max-height: calc((1.05rem - 2pt) * 1.5 * 2);
  }

  /* 3. Плашка «карточки для маркетплейсов» — чуть мельче, чтобы фраза
     влезала в одну строку на 375…320px. Глобальный --plate-font-size
     в :root не трогаем: локально на #marketplace-cards переопределяем
     и --plate-height, чтобы белая полоса ряда совпала с плашкой (B). */
  #marketplace-cards {
    --plate-font-size: clamp(0.72rem, 3.7vw, 0.95rem);
    --plate-height: calc(var(--plate-font-size) * 1.5 + 2.2rem);
  }

  #marketplace-cards .section-plate {
    letter-spacing: 0.02em;
  }
}

/* фикс spec-pages/main/fix.md: на мобилке цитаты всех трёх секций идут
   от края экрана до края — как .section-plate пробивает padding
   .container. Текст до правого края (правый padding 0.75rem, не колонка
   под имя/кружок). Углы прямые. ≥768px не трогаем. */
@media (max-width: 767.98px) {
  #video-any-format .case-quote {
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
    border-radius: 0;
    padding: 1.75rem 0.75rem 1.75rem 1.5rem;
  }

  /* кружок якорится от .case-block, поэтому right = bleed (−1.25rem)
     + новый padding-right (0.75rem). */
  #video-any-format .case-quote__foot--corner {
    right: calc(-1.25rem + 0.75rem);
  }

  /* фикс: на мобилке имена чуть меньше; вертикальный воздух как у
     #video-any-format (.case-quote__brand--corner { bottom: 0.6rem }) —
     не прилипать к тексту цитаты и не садиться на нижний край плашки. */
  #video-any-format .case-quote__brand--corner {
    right: calc(0.75rem + var(--case-avatar-size) + 0.5rem);
    font-size: 0.7rem;
  }

  #marketplace-cards .order-info__brand {
    font-size: 0.7rem;
    margin-bottom: 0.6rem;
  }

  #video-social .social-case__quote .case-quote__brand {
    font-size: 0.7rem;
    margin-bottom: 0.6rem;
  }

  #marketplace-cards .order-info__quote {
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
    border-radius: 0;
    padding: 1.35rem 0.75rem 1.5rem 1.5rem;
    /* фикс: на мобилке все три цитаты маркетплейсов (SYCHE / Adopta /
       Ariel) — по левому краю, как в #video-any-format. База
       .order-info__quote уже left и на desktop. */
    text-align: left;
  }

  #marketplace-cards .order-info {
    --order-logo-right: 0.75rem;
  }

  #video-social .social-case__quote-plate {
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
  }

  #video-social .social-case__quote-bg {
    border-radius: 0;
    /* фикс: снизу больше воздуха между 2-й строкой цитаты и именем;
       имя по-прежнему 0.6rem от края плашки. */
    padding: 1.5rem 0.75rem 2.35rem 1.5rem;
  }

  #video-social .case-quote__foot--corner-right {
    right: 0.75rem;
  }
}

/* ---------- TV / phone media frame ---------- */

.device-frame {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

.device-frame--tv {
  /* фикс spec-pages/main/fix.md: пропорции под новый tv_border.webp (852×561px реальный размер файла) */
  aspect-ratio: 852 / 561;
  /* фикс spec-pages/main/fix.md: рамка ТВ (и вписанный в неё iframe/video-facade,
     который масштабируется вместе с рамкой через проценты в .device-frame__screen)
     увеличена на 10% — было min(100%, 560px), максимум увеличен до 616px. */
  width: min(100%, 616px);
}

.device-frame--phone {
  width: min(70%, 320px);
  /* Габарит контейнера (и, соответственно, видимый размер рамки на
     странице) сознательно оставлен квадратным 1024/1024, как было
     изначально — менять "физический" размер рамки на странице не нужно.
     Реальный файл phone_border.webp — портретный (920×1920px), поэтому
     внутри квадратного контейнера он вписывается через object-fit: contain
     по высоте (100%) с горизонтальными полями (letterbox) слева/справа —
     это учтено ниже в inset у .device-frame__screen. */
  aspect-ratio: 1024 / 1024;
}

.device-frame__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

.device-frame__screen {
  position: absolute;
  overflow: hidden;
  background: #000;
}

.device-frame--tv .device-frame__screen {
  /* фикс spec-pages/main/fix.md: отступы пересчитаны под прозрачную "дырку"
     экрана в новом tv_border.webp (измерено по альфа-каналу файла: дыра —
     20..828px по X и 25..479px по Y при реальном размере файла 852×561px);
     нижний безель у новой рамки заметно толще верхнего и боковых. */
  inset: 4.46% 2.82% 14.62% 2.35%;
  border-radius: 0;
}

.device-frame--phone .device-frame__screen {
  /* фикс spec-pages/main/fix.md: отступы пересчитаны под актуальную
     прозрачную "дырку" экрана в phone_border.webp (измерено по
     альфа-каналу файла: дыра — 47..869px по X и 178..1642px по Y при
     реальном размере файла 920×1821px; сам вырез экрана — ровно 9:16).
     Контейнер `.device-frame--phone` квадратный (см. выше), а файл
     портретный, поэтому object-fit: contain вписывает картинку по высоте
     (100% контейнера) и добавляет пустые поля слева/справа (~24.74% с
     каждой стороны) — эти поля учтены в процентах ниже (иначе inset
     считался бы от квадрата целиком, а не от фактических пикселей рамки,
     и экран уезжал бы в сторону). По вертикали letterbox отсутствует,
     поэтому top/bottom — проценты напрямую с картинки. У экрана телефона
     прямые углы (border-radius: 0), а не скруглённые — скругление и
     неверный inset создают белую щель, не совпадающую с вырезом рамки. */
  inset: 9.775% 27.485% 9.775% 27.32%;
  border-radius: 0;
}

/* ---------- Next case navigation (fix.md) ---------- */

.case-media--tv {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* фикс fix.md: на десктопе стрелка позиционируется absolute относительно
     этого контейнера (см. медиа-запрос ниже) — ТВ при этом остаётся
     центрированным как самостоятельный блок (собственный margin-inline:auto
     у .device-frame), стрелка не влияет на его позицию. */
  position: relative;
}

/* фикс fix.md: обёртка кнопок навигации ("Предыдущий кейс" / "Следующий
   кейс") — на мобиле это простая горизонтальная строка под ТВ; на десктопе
   (см. медиа-запрос ниже) становится display:contents, чтобы обе кнопки
   позиционировались absolute прямо относительно .case-media--tv, а сама
   обёртка не создавала собственного бокса/отступов. */
.case-media__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1.75rem;
}

.next-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* фикс fix.md: раньше .next-case был <a>, теперь <button> (кнопка
     переключает кейс внутри секции, а не ссылка на другую секцию) —
     сбрасываем нативные стили кнопки, чтобы она выглядела так же. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
  /* фикс spec-pages/main/fix.md: TAP как у .carousel-arrow */
  transition: transform var(--tap-duration) var(--tap-easing);
}

.next-case:active {
  transform: scale(var(--tap-scale));
}

/* фикс fix.md: на мобиле кнопка "Предыдущий кейс" — просто стрелка без
   подписи (компактнее рядом со "Следующий кейс"); на десктопе подпись
   возвращается (см. медиа-запрос ниже). */
.next-case--prev .next-case__label {
  display: none;
}

/* фикс spec-pages/main/fix.md: на мобиле/tablet (<1024px) подпись
   "Следующий кейс" тоже скрыта — текст уже "запечён" в самой мобильной
   картинке next_case_with_text.webp; на десктопе подпись возвращается
   (см. медиа-запрос ниже). */
.next-case:not(.next-case--prev) .next-case__label {
  display: none;
}

/* фикс spec-pages/main/fix.md: мобильные (<1024px) иконки переключения
   кейсов — свои файлы (assets/icons/mobile/left_case.webp,
   assets/icons/mobile/next_case_with_text.webp), не desktop-ассеты.
   Высота единая у обеих кнопок, чтобы они были на одной визуальной оси —
   .case-media__nav выравнивает их по центру строки (align-items: center). */
.next-case__mobile-icon {
  display: block;
  /* фикс spec-pages/main/fix.md: размер мобильных иконок увеличен на 15%
     (было 2.6rem). */
  height: 2.99rem;
  width: auto;
  max-width: none;
  object-fit: contain;
  /* фикс spec-pages/main/fix.md: лёгкая тёплая тень — тот же тон, что у
     мобильных стрелок «Видео для соцсетей» (.social-case__arrow img) и
     у box-shadow кнопки "Связаться с нами" (rgba(176, 143, 95, …)). Тень
     на картинке (filter: drop-shadow), повторяет силуэт круглой иконки. */
  filter: drop-shadow(0 4px 10px rgba(176, 143, 95, 0.45));
}

/* На десктопе мобильные иконки не показываются (см. медиа-запрос ниже,
   где они скрываются вместе с включением desktop-раскладки). */

/* фикс fix.md: "Предыдущий кейс" скрывается через [hidden] на первом кейсе
   (см. JS) — и на мобиле, и на десктопе. Без этого правила display: flex
   у .next-case (авторский стиль) перебивал бы стандартный display: none
   у [hidden] (правило UA-стиля слабее авторского при равной специфичности). */
.next-case[hidden] {
  display: none;
}

.next-case__circle {
  /* фикс spec-pages/main/fix.md: на мобиле/tablet (<1024px) круг со
     SVG-стрелкой скрыт — вместо него используется собственная мобильная
     иконка .next-case__mobile-icon; круг возвращается только на десктопе
     (см. медиа-запрос ниже). */
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(circle at 72% 80%, rgba(196, 169, 142, 0.16) 0%, rgba(196, 169, 142, 0) 55%),
    linear-gradient(160deg, #fffdfa 0%, #fdf6ee 55%, #f7ecdc 100%);
  box-shadow:
    0 10px 22px -10px rgba(120, 90, 60, 0.35),
    0 2px 6px -2px rgba(120, 90, 60, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.2s ease;
}

.next-case__arrow {
  color: var(--color-gold-dark);
  transition: transform 0.2s ease;
}

/* фикс fix.md: на мобиле/tablet иконка-картинка скрыта — остаётся текущая
   SVG-стрелка; на десктопе (см. медиа-запрос ниже) — наоборот. */
.next-case__icon {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.next-case__label {
  font-family: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gold-dark);
  text-align: center;
  white-space: nowrap;
}

.next-case:hover .next-case__circle,
.next-case:focus-visible .next-case__circle {
  box-shadow:
    0 14px 26px -10px rgba(120, 90, 60, 0.42),
    0 3px 8px -2px rgba(120, 90, 60, 0.24),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.next-case:hover .next-case__arrow,
.next-case:focus-visible .next-case__arrow {
  transform: scale(1.05);
}

.next-case:active .next-case__circle {
  box-shadow:
    0 6px 14px -8px rgba(120, 90, 60, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.next-case:focus-visible {
  outline: none;
}

/* фикс spec-pages/main/fix.md: та же "зависающая" рамка на мобильных тапах —
   без обводки в любом состоянии фокуса. */
.next-case:focus-visible .next-case__circle {
  outline: none;
}

@media (min-width: 1024px) {
  /* фикс fix.md: ТВ возвращён к самостоятельному центрированию (block-layout,
     не flex-row) — стрелки больше не влияют на его позицию. .device-frame--tv
     центрируется своим же margin-inline: auto (см. .device-frame), как и до
     появления стрелки. */
  .case-media--tv {
    display: block;
  }

  .case-media--tv .device-frame--tv {
    margin-bottom: 0;
  }

  /* Обёртка перестаёт быть флекс-строкой и не создаёт бокса — обе кнопки
     становятся absolute прямо относительно .case-media--tv (следующий
     позиционированный предок), поэтому их взаимный порядок/gap в DOM
     больше не влияет на раскладку. */
  .case-media__nav {
    display: contents;
  }

  /* "Следующий кейс" — absolute-элемент поверх белой зоны СПРАВА от ТВ, по
     центру между правым краем рамки и правым краем контейнера.
     --next-case-tv-width повторяет максимальную ширину рамки (см.
     .device-frame--tv), чтобы при изменении этой ширины формулу было легко
     пересчитать в одном месте. Вывод формулы (W — ширина .case-media--tv,
     T — --next-case-tv-width): ТВ центрирован -> правый край рамки =
     (W + T) / 2; правый край зоны = W; центр зоны = ((W + T)/2 + W) / 2 =
     3W/4 + T/4. */
  .next-case {
    --next-case-tv-width: 616px;
    position: absolute;
    top: 50%;
    left: calc(75% + var(--next-case-tv-width) / 4);
    transform: translate(-50%, -50%);
  }

  .next-case:active {
    transform: translate(-50%, -50%) scale(var(--tap-scale));
  }

  /* "Предыдущий кейс" — зеркальная зона СЛЕВА от ТВ: левый край рамки =
     (W - T) / 2; центр левой зоны = ((W - T) / 2) / 2 = W/4 - T/4. Подпись,
     скрытая на мобиле, здесь возвращается (та же кнопка, что и "Следующий
     кейс", просто симметрична и с другим текстом). */
  .next-case--prev {
    left: calc(25% - var(--next-case-tv-width) / 4);
  }

  .next-case--prev .next-case__label {
    display: block;
  }

  /* фикс spec-pages/main/fix.md: на десктопе (≥1024px) мобильные ассеты
     (left_case.webp / next_case_with_text.webp) не показываются; возвращаем
     круг с desktop-иконкой и подпись — как было до появления мобильных
     ассетов. */
  .next-case__mobile-icon {
    display: none;
  }

  .next-case__circle {
    display: flex;
  }

  .next-case:not(.next-case--prev) .next-case__label {
    display: block;
  }

  /* фикс fix.md: на десктопе стрелки-кнопки навигации кейсов заменены на
     готовые иконки refs/pc_left_case.webp / pc_right_case.webp — SVG-стрелка
     скрывается, картинка показывается только здесь (mobile/tablet не трогаем). */
  .next-case__arrow {
    display: none;
  }

  .next-case__icon {
    display: block;
  }

  .next-case__label {
    font-family: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #C8AE94;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .next-case__circle,
  .next-case__arrow {
    transition: none;
  }
}

.video-facade {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #000;
}

.video-facade video,
.device-frame__screen iframe,
/* фикс spec-pages/main/fix.md: превью-заглушки кейсов без embed-плеера
   (media.type: "preview" в JS) вставляют <video> прямо в .device-frame__screen,
   без обёртки .video-facade — вписываем его так же, как facade-видео. */
.device-frame__screen > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* фикс spec-pages/main/fix.md: на macOS hover по играющему <video> рисует
   нативную паузу поверх кастомного Play. Курсор не должен попадать в сам
   ролик — клик и hover остаются на .video-facade. iframe Vimeo не трогаем. */
.video-facade video,
.device-frame__screen > video {
  pointer-events: none;
}

.video-facade video::-webkit-media-controls,
.video-facade video::-webkit-media-controls-panel,
.video-facade video::-webkit-media-controls-play-button,
.video-facade video::-webkit-media-controls-start-playback-button,
.video-facade video::-webkit-media-controls-overlay-play-button,
.video-facade video::-webkit-media-controls-overlay-enclosure,
.device-frame__screen > video::-webkit-media-controls,
.device-frame__screen > video::-webkit-media-controls-panel,
.device-frame__screen > video::-webkit-media-controls-play-button,
.device-frame__screen > video::-webkit-media-controls-start-playback-button,
.device-frame__screen > video::-webkit-media-controls-overlay-play-button,
.device-frame__screen > video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}

/* фикс spec-pages/main/fix.md: кастомная play-иконка вместо системного "▶",
   абсолютно спозиционирована и центрирована поверх превью независимо от
   .video-facade (flex тут больше не нужен). При ховере/фокусе — плавная
   подсветка (увеличение + мягкое свечение), сигнализирующая, что можно нажать. */
.video-facade .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s ease, filter 0.25s ease;
  pointer-events: none;
}

.video-facade:hover .play-icon,
.video-facade:focus-visible .play-icon {
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 8px rgba(241, 224, 208, 0.55));
}

/* фикс spec-pages/main/fix.md: TAP — только play-иконка, не экран */
.video-facade:active .play-icon,
.video-facade:hover:active .play-icon,
.video-facade:focus-visible:active .play-icon {
  transform: translate(-50%, -50%) scale(var(--tap-scale));
}

@media (min-width: 768px) {
  .video-facade .play-icon {
    width: 3.1rem;
    height: 3.1rem;
  }
}

/* фикс spec-pages/main/fix.md: иконка Play — полупрозрачная во всех
   превью разделов "Видео любого формата" (#video-any-format: GloraX,
   VIDIOCRACY, Syche) и "Видео для соцсетей" (#video-social: ИИ-инфлюенсер,
   Флокси, Adopta). При ховере/фокусе — чуть плотнее, тот же сигнал
   "можно нажать", что и у непрозрачного базового стиля. */
#video-any-format .play-icon,
#video-social .play-icon {
  opacity: 0.6;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

#video-any-format .video-facade:hover .play-icon,
#video-any-format .video-facade:focus-visible .play-icon,
#video-social .video-facade:hover .play-icon,
#video-social .video-facade:focus-visible .play-icon {
  opacity: 0.85;
}

#video-any-format .video-facade:active .play-icon,
#video-any-format .video-facade:hover:active .play-icon,
#video-any-format .video-facade:focus-visible:active .play-icon,
#video-social .video-facade:active .play-icon,
#video-social .video-facade:hover:active .play-icon,
#video-social .video-facade:focus-visible:active .play-icon {
  transform: translate(-50%, -50%) scale(var(--tap-scale));
  transition: transform var(--tap-duration) var(--tap-easing), filter 0.25s ease, opacity 0.25s ease;
}

/* фикс spec-pages/main/fix.md: без обводки в любом состоянии фокуса —
   на мобильных тапах она "зависает" на элементе дольше самого тапа. */
.video-facade:focus-visible {
  outline: none;
}

/* ---------- Platforms row ---------- */

.platforms-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 1.75rem;
}

.platforms-row span {
  /* фикс spec-pages/main/fix.md: иконки площадок/маркетплейсов — только
     демонстрация систем, не ссылки; было `.platforms-row a` до перевода
     обёрток из <a href="#"> в <span> (убрана кликабельность). */
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.platforms-row img {
  height: 1.6rem;
  width: auto;
}

/* фикс spec-pages/main/fix.md: белая полоса с иконками площадок должна быть
   ровно той же высоты, что и золотистая плашка заголовка над ней (было
   заметно выше). Отступ «плашка → ряд» (margin-bottom плашки, см.
   #video-any-format .section-plate ниже) и «ряд → цитата» (margin-bottom
   этого блока) остаются равными друг другу (общий паттерн B), но теперь
   оба вычисляются от общей --plate-height за вычетом высоты иконок, а не
   берутся фиксированным числом — так итоговая высота полосы (margin + высота
   иконки + margin) в точности равна --plate-height на любой ширине экрана. */
#video-any-format {
  --platforms-video-icon-h: 2.4rem;
  --platforms-video-gap: calc((var(--plate-height) - var(--platforms-video-icon-h)) / 2);
}

.platforms-row--video {
  margin-bottom: var(--platforms-video-gap);
  column-gap: 3rem;
}

.platforms-row--video img {
  height: var(--platforms-video-icon-h); /* чуть меньше, чем у .platforms-row--marketplace (2.6rem); width: auto из .platforms-row img сохраняет исходные пропорции */
}

/* Временно скрыта: элемент и ассет Instagram сохранены для будущего включения.
   Селектор усилен до `.platforms-row span.platforms-row__item--instagram`
   (специфичность как у `.platforms-row span` выше), иначе `display: inline-flex`
   из общего правила для span перебивал `display: none` и иконка оставалась
   видимой на всех ширинах экрана, включая мобильные. */
.platforms-row span.platforms-row__item--instagram {
  display: none;
}

/* фикс spec-pages/main/fix.md: Instagram запрещён в РФ — скрыта иконка в
   футере на всех ширинах экрана (и десктоп, и мобайл); ссылка/файл/разметка
   сохранены в исходниках для возможного будущего включения. */
.site-footer__social--instagram {
  display: none;
}

#video-any-format .section-plate {
  margin-bottom: var(--platforms-video-gap);
}

/* фикс spec-pages/main/fix.md: ряд теперь стоит сразу под плашкой
   заголовка (margin-top не нужен — отступ уже задан margin-bottom плашки
   выше), а перед следующим блоком (цитата заказа) — тот же отступ, что и
   у плашки над рядом (симметрично, паттерн B). Оба отступа вычисляются от
   --plate-height за вычетом высоты иконок маркетплейсов (см.
   #marketplace-cards ниже) — итоговая высота белой полосы равна высоте
   плашки заголовка на любой ширине экрана. */
#marketplace-cards {
  --platforms-marketplace-icon-h: 2.6rem;
  --platforms-marketplace-gap: calc((var(--plate-height) - var(--platforms-marketplace-icon-h)) / 2);
}

/* фикс spec-pages/main/fix.md: раньше здесь не было переопределения — плашка
   продолжала использовать старый фиксированный margin-bottom (см. общее
   правило выше), а margin-bottom ряда уже считался через --platforms-marketplace-gap.
   Из-за рассинхрона отступ «плашка → ряд» был больше отступа «ряд → цитата»,
   и логотипы визуально садились ниже центра белой полосы. */
#marketplace-cards .section-plate {
  margin-bottom: var(--platforms-marketplace-gap);
}

.platforms-row--marketplace {
  margin-top: 0;
  margin-bottom: var(--platforms-marketplace-gap);
}

.platforms-row--marketplace img {
  height: var(--platforms-marketplace-icon-h); /* заметно крупнее базовых 1.6rem из .platforms-row img */
}

@media (max-width: 767px) {
  .platforms-row--video {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  /* Высота рассчитана из актуальных пропорций видимых иконок (Instagram
     скрыт): VK Видео 3.703:1, RUTUBE 2.753:1, YouTube 1.937:1, TikTok
     2.992:1 (сумма 11.385), с тремя gap по 0.75rem — так же, как формула
     .platforms-row--marketplace img, но под собственные пропорции этого
     ряда (важно: нельзя переиспользовать чужую сумму соотношений — иначе
     max-width: 100% из глобального сброса img сжимает ширину при
     неизменной высоте, что "плющит" иконки). Итоговый коэффициент немного
     уменьшен (~0.92) относительно точного заполнения строки, чтобы иконки
     были чуть мельче, чем в блоке маркетплейсов, но так же гарантированно
     помещались в одну строку. Значение записано в переменную
     --platforms-video-icon-h (а не напрямую в img), чтобы отступы
     плашка↔ряд↔цитата (см. выше) пересчитались вместе с высотой иконок. */
  #video-any-format {
    --platforms-video-icon-h: clamp(1.2rem, calc(8.08vw - 0.38rem), 2.2rem);
  }

  /* На мобилке логотипы должны помещаться в одну строку и использовать
     всю ширину контейнера. Высота рассчитывается из актуальных пропорций:
     WB 3.172:1, Ozon 1.634:1, Яндекс Маркет 3.172:1 и Авито 2.175:1
     (сумма 10.153), с тремя gap по 0.5rem. Аналогично записана в
     --platforms-marketplace-icon-h, чтобы отступы пересчитались вместе. */
  .platforms-row--marketplace {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  #marketplace-cards {
    --platforms-marketplace-icon-h: clamp(1.3rem, calc(9.85vw - 0.39rem), 2.4rem);
  }
}

/* ---------- Marketplace order info ---------- */

.order-info {
  /* фикс spec-pages/main/fix.md: иконка+имя заказчика перенесены в правый
     нижний угол цитаты (по аналогии с блоком «Видео для соцсетей») —
     круглый логотип наполовину нависает под нижним краем плашки, поэтому
     запас нужен снизу (перед каруселью), а не сверху (под заголовком). */
  /* фикс fix.md: размер уменьшен на 25% (было 4.6rem / 5.4rem). */
  --order-logo-size: 3.45rem;
  --order-logo-right: 1.5rem;
  margin-top: 0.4rem;
  /* фикс spec-pages/main/fix.md: карусель придвинута ближе к цитате —
     запас снизу уменьшен до строгого минимума (ровно половина высоты
     круглого логотипа, которая нависает под плашкой). Меньше нельзя:
     иначе логотип заедет на карточки карусели; сейчас он лишь
     соприкасается с их верхним краем, без наложения. Работает
     одинаково на mobile и desktop — переменная --order-logo-size уже
     учитывает брейкпоинт (см. @media (min-width: 768px) ниже). */
  margin-bottom: calc(var(--order-logo-size) * 0.5);
}

.order-info__panel[hidden] {
  display: none;
}

/* фикс spec-pages/main/fix.md: фон плашки облегает ТОЛЬКО текст цитаты —
   никакой отдельной строки/паддинга под иконку и имя заказчика. */
.order-info__quote {
  position: relative;
  background-image: var(--gradient-quote);
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  /* фикс spec-pages/main/fix.md: нижний паддинг увеличен, чтобы имя
     заказчика (внутри плашки, в правом нижнем углу) не наезжало на
     текст цитаты и не «прилипало» к самому краю фона. */
  padding: 1.35rem 1.75rem 1.5rem 1.5rem;
  /* фикс spec-pages/main/fix.md: все три цитаты маркетплейсов
     (SYCHE / Adopta / Ariel) — по левому краю на всех ширинах. */
  text-align: left;
}

/* избыточно при базовом left; оставлено, чтобы SYCHE явно не
   откатился к центру, если база когда-нибудь сменится. */
[data-group-panel="syche"] .order-info__quote {
  text-align: left;
}

/* фикс spec-pages/main/fix.md: угловой блок (имя + круглый логотип)
   перенесён в правый нижний угол цитаты — по аналогии с
   .case-quote__foot--corner-right в блоке «Видео для соцсетей». Имя
   остаётся целиком внутри фона цитаты (без translateY на всём блоке),
   а круглый логотип отдельно смещён вниз на половину своей высоты —
   его центр лежит ровно на нижней границе фона .order-info__quote:
   верхняя половина круга на плашке, нижняя — на общем фоне страницы. */
.order-info__corner {
  position: absolute;
  right: var(--order-logo-right);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  z-index: 2;
}

.order-info__brand {
  /* фикс: то же узкое начертание имени, что у видео-секций. */
  font-family: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0;
  font-size: 0.95rem;
}

[data-group-panel="adopta"] .order-info__brand,
[data-group-panel="ariel"] .order-info__brand {
  /* фикс: в маркетплейсах Adopta / Ariel — как в HTML, не ADOPTA / ARIEL. SYCHE. без изменений. */
  text-transform: none;
}

.order-info__logo {
  width: var(--order-logo-size);
  height: var(--order-logo-size);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 6px 14px -4px rgba(46, 33, 29, 0.4);
  transform: translateY(50%);
}

@media (min-width: 768px) {
  .order-info {
    --order-logo-size: 4.05rem;
    --order-logo-right: 2rem;
  }
  .order-info__quote {
    padding: 1.5rem 2rem 1.75rem 1.75rem;
  }
}

/* ---------- Carousel ----------
   фикс spec-pages/main/fix.md: стрелки перенесены с расположения ПОД
   карточками на расположение ПО БОКАМ от активной карточки — они лежат
   внутри `.carousel-viewport`, наложены абсолютно поверх трека и
   центрированы по вертикали относительно активной карточки, а по
   горизонтали прижаты к её левому/правому краю (см. `.carousel-arrows`
   ниже: ширина блока = ширина активной карточки + отступы + сами кнопки,
   сам блок центрирован, а `justify-content: space-between` разводит кнопки
   к внешним краям этой ширины). Сами карточки максимально крупные под
   mobile — трек карусели "пробивает" боковые отступы `.container`
   (margin-inline отрицательный, равный padding контейнера). Соотношение
   активной и задних карточек (масштаб/z-index/opacity) не меняется,
   меняется только базовый размер. Карусель управляется индексом из JS
   (main.js), а не нативным скроллом — каждая карточка позиционируется
   абсолютно и анимируется через transform/opacity при переключении.

   Задние боковые карточки не обрезаются краем трека (`.carousel-track`
   сам всегда `overflow: visible`) — их обрезает `.carousel-viewport`
   (родитель трека), причём ровно по границе активной зоны страницы:

   - на мобильных — по краю экрана (устройства), т.к. `.carousel-viewport`
     "пробивает" боковые отступы `.container` (см. `width`/`margin-inline`
     ниже — до полной ширины вьюпорта устройства). Карточки визуально могут
     уходить за пределы экрана — это ожидаемое поведение, но само это не
     должно создавать горизонтальный скролл страницы: opacity:0 карточки
     всё равно занимают место в layout, поэтому обрезка (`overflow: hidden`)
     обязательна, а не `overflow: visible`, — иначе скролл-контент страницы
     становится шире вьюпорта (фикс spec-pages/main/fix.md: "можно скроллить
     чуть вправо", боковой бежевый фон); `overflow-x: hidden` на `body` сам
     по себе от этого не спасает.
   - на десктопе (фикс spec-pages/main/fix.md п.3) — по границе активной
     белой зоны (`.page-wrap`), т.е. `.carousel-viewport` расширяется только
     до внешнего края `.container`, не дальше — карточки не улетают в
     бежевый фон страницы.

   `width: calc(100% + 2.5rem)` + `margin-inline: -1.25rem` (а не просто
   `width: 100%` с той же margin) — так ширина/margin не переопределяют
   друг друга (over-constrained box model) и растяжение получается
   действительно симметричным на оба края. */

.carousel {
  /* фикс spec-pages/main/fix.md п.2: карточки уменьшены на 15% относительно
     прежних размеров на всех брейкпоинтах (84vw/380px → 71vw/323px и т.д.) */
  --card-w: min(71vw, 323px);
  --peek: 14px;
  /* фикс spec-pages/main/fix.md: размер кнопки-стрелки и зазор между ней и
     краем активной карточки — используются для расчёта ширины
     `.carousel-arrows` (карточка + 2×зазор + 2×кнопка), см. ниже.
     `--arrow-edge-safe` — минимальный отступ от края экрана/вьюпорта:
     не даёт стрелкам "вылезать" за пределы видимой области на узких
     мобильных — при нехватке места стрелки сами подтягиваются ближе к
     активной карточке (см. `width` в `.carousel-arrows`, использующий
     `min()` между "естественной" шириной и шириной вьюпорта за вычетом
     этого отступа). */
  --arrow-size: 3.6rem;
  --arrow-gap: 0.35rem;
  --arrow-edge-safe: 0.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* фикс spec-pages/main/fix.md: карусель придвинута ещё ближе к цитате
     заказа. Основной "виновник" лишнего пустого пространства — не отступ
     `.order-info`, а невидимый запас 3rem СВЕРХУ внутри `.carousel-track`
     (см. комментарий там же), зарезервированный под угасание тени активной
     карточки. Тень смещена вниз (`box-shadow: 0 18px 30px -14px`), поэтому
     вверх она почти не расползается — большую часть верхнего запаса можно
     "съесть" отрицательным margin-top у всего блока карусели, не трогая
     сам расчёт высоты `.carousel-track` (запас остаётся зарезервирован
     внутри, просто блок целиком поднят выше). Оставленных ~1rem достаточно,
     чтобы круглый логотип заказчика (с его небольшой тенью) не наезжал на
     видимую карточку. */
  margin-top: -2rem;
}

.carousel-viewport {
  /* важно: overflow-x и overflow-y НЕ смешивать (`hidden` + `visible`) —
     по спецификации CSS в этом случае `visible` вычисляется как `auto` и
     всё равно обрезает контент, то есть "чистого" обреза только по одной
     оси таким способом не получить. Поэтому обрезка здесь — цельная
     `overflow: hidden` по обеим осям (нужна на десктопе, чтобы боковые
     карточки не уезжали в бежевый фон страницы), а от резкого обреза тени
     активной карточки (`.carousel-card.is-active`) спасает достаточный
     вертикальный запас в высоте `.carousel-track` (см. ниже) — граница
     обреза отнесена настолько далеко от карточки, что тень к этому месту
     уже полностью угасает сама. */
  position: relative;
  overflow: hidden;
  width: calc(100% + 2.5rem);
  margin-inline: -1.25rem;
}

.carousel-track {
  position: relative;
  width: 100%;
  /* запас 3rem сверху и снизу карточки (а не 1rem) — достаточно, чтобы
     тень активной карточки (offset 18px + blur 30px) успевала полностью
     угаснуть до границы обреза `.carousel-viewport`, а не обрывалась. */
  height: calc(var(--card-w) * 4 / 3 + 6rem);
  overflow: visible;
  touch-action: pan-y;
}

.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #e9e4dd;
  border: 1px solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%)
    translateX(calc(var(--diff, 0) * var(--card-w) * 0.62))
    scale(var(--card-scale, 1));
  z-index: var(--card-z, 1);
  opacity: var(--card-opacity, 1);
  pointer-events: var(--card-pointer, auto);
  transition: transform 0.45s cubic-bezier(0.22, 0.85, 0.32, 1), opacity 0.3s ease;
}

.carousel-card.is-active {
  cursor: default;
  box-shadow: 0 18px 30px -14px rgba(46, 33, 29, 0.45);
}

.carousel-card__inner {
  width: 100%;
  height: 100%;
  display: flex;
}

.carousel-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* фикс spec-pages/main/fix.md: паттерн D снимает синий tap-highlight только
   с a / button / [role="button"]. Карточки карусели — кликабельные <div>
   (соседняя → goTo), трек с tabindex="0"; глобальный селектор их не
   покрывает, после тапа на Android/iOS остаётся синяя заливка поверх
   картинки. Стрелки .carousel-arrow не трогаем — они уже button. */
.carousel-card,
.carousel-card__inner,
.carousel-card__image,
.carousel-track,
[data-carousel-track] {
  -webkit-tap-highlight-color: transparent;
}

.carousel-card:focus,
.carousel-card:focus-visible,
.carousel-card__inner:focus,
.carousel-card__inner:focus-visible,
.carousel-card__image:focus,
.carousel-card__image:focus-visible,
.carousel-track:focus,
.carousel-track:focus-visible,
[data-carousel-track]:focus,
[data-carousel-track]:focus-visible {
  outline: none;
}

.carousel-arrows {
  /* по бокам от активной карточки: блок центрирован по трек-зоне и имеет
     ширину "карточка + зазор + кнопка" с каждой стороны, а
     space-between разводит кнопки ровно к внешним краям этой ширины —
     то есть впритык за левым/правым краем активной карточки.
     `min()` со вторым слагаемым не даёт этой ширине превысить ширину
     вьюпорта минус `--arrow-edge-safe` с каждого края — если "естественная"
     ширина не влезает (узкий мобильный экран), стрелки подтягиваются ближе
     к карточке, а не уезжают за пределы экрана (фикс spec-pages/main/fix.md). */
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(
    calc(var(--card-w) + (var(--arrow-gap) + var(--arrow-size)) * 2),
    calc(100% - var(--arrow-edge-safe) * 2)
  );
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 4;
  pointer-events: none;
}

.carousel-arrow {
  /* фикс spec-pages/main/fix.md: кружок даёт сам ассет pc_left_case /
     pc_right_case (во весь --arrow-size, без вписывания). Тёмную подложку
     не оставлять — иначе просветит сквозь opacity: 0.9 у <img>. */
  flex: 0 0 auto;
  width: var(--arrow-size);
  height: var(--arrow-size);
  pointer-events: auto;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease, transform var(--tap-duration) var(--tap-easing);
}

.carousel-arrow:active {
  transform: scale(var(--tap-scale));
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-arrow:disabled:active {
  transform: none;
}

.carousel-arrow img {
  /* фикс spec-pages/main/fix.md: cover на весь кружок; прозрачность 10%
     (opacity 0.9) на иконке, не на кнопке — disabled остаётся на кнопке. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

@media (min-width: 640px) {
  .carousel {
    /* -15% от прежних 60vw/340px */
    --card-w: min(51vw, 289px);
  }
}

@media (min-width: 1024px) {
  .carousel {
    /* фикс spec-pages/main/fix.md п.2: -15% от прежних 420px/28px, карточки
       больше не "слишком огромные" */
    --card-w: 357px;
    --peek: 24px;
  }

  .carousel-track {
    width: calc(var(--card-w) + var(--peek) * 2);
    margin-inline: auto;
    height: calc((var(--card-w) + var(--peek) * 2) * 4 / 3);
  }

  /* фикс spec-pages/main/fix.md п.3: на десктопе граница обрезки —
     внешний край `.container` (= граница `.page-wrap`, белой активной
     зоны), а не край экрана: расширяем вьюпорт ровно до неё и компенсируем
     padding, чтобы сам трек внутри не сдвинулся визуально. */
  .carousel-viewport {
    padding-inline: 1.25rem;
  }
}

/* ---------- Social case (video for social) ---------- */

/* Мобилка/планшет (<1024px): цитата сверху, телефон под ней (обычный
   поток, column-reverse ставит медиа-блок, идущий первым в HTML, визуально
   ниже цитаты). Десктоп (≥1024px) — телефон справа от цитаты (row-reverse). */
.social-case {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* фикс spec-pages/main/fix.md: фон цитаты больше не растягивается на весь
   блок (текст + бренд + аватар) — теперь он висит только на вложенном
   .social-case__quote-bg, обёрнутом вокруг текста, и заканчивается ровно
   там, где заканчивается текст. Бренд и аватар (.case-quote__foot) —
   отдельный элемент на общем фоне страницы, не привязанный к плашке. */
.social-case__quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* фикс spec-pages/main/fix.md: обёртка вокруг .social-case__quote-bg +
   .case-quote__foot--corner-right — именно она (а не внешний
   .social-case__quote) служит positioned-предком для абсолютного бренда/
   аватара, чтобы добавленная ниже .social-case__nav-desktop не сдвигала
   точку отсчёта bottom: 0 у аватара. */
.social-case__quote-plate {
  position: relative;
  width: 100%;
}

/* фикс spec-pages/main/fix.md: иконка (аватар) должна располагаться ровно
   между фоном цитаты и общим фоном страницы — центр аватара лежит точно
   на нижней границе .social-case__quote-bg (половина на плашке, половина
   на общем фоне). Бренд — слева от иконки, но целиком ВНУТРИ фона цитаты:
   не выравнен по центру аватара, а сидит чуть выше (без translateY). */
.case-quote__foot--corner-right {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  align-items: flex-end;
  z-index: 1;
}

.case-quote__foot--corner-right .case-quote__avatar {
  transform: translateY(50%);
}

/* фикс spec-pages/main/fix.md: имена в #video-social — как в JSON,
   без капса. Позиция блока не меняется (эталон Adopta). Составные
   имена («Андрей, интернет-маркетолог») — в одну строку. Mobile —
   прижато к кружку справа; desktop ≥1024px — text-align: left
   (имя правее кружка). */
.social-case__quote .case-quote__brand {
  text-transform: none;
  text-align: right;
  white-space: nowrap;
  flex: 0 1 auto;
  /* фикс: имя чуть выше нижнего края фона цитаты; кружок не сдвигать. */
  margin-bottom: 0.45rem;
}

.social-case__quote-bg {
  background-image: var(--gradient-quote);
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  /* фикс spec-pages/main/fix.md: текст цитаты выровнен по левому краю
     (не по центру) на всех ширинах — надпись бренда и аватар (отдельный
     элемент .case-quote__foot--corner-right) это не затрагивает. */
  text-align: left;
  width: 100%;
}

/* фикс spec-pages/main/fix.md: мобильные (<1024px) стрелки переключения
   кейсов "Предыдущий"/"Следующий" — по бокам ВИДИМОЙ рамки телефона, а не
   под ней (как под ТВ в #video-any-format). Раньше рамка растягивалась
   full-bleed (115vw через отрицательный margin-inline) — это съедало ровно
   те боковые поля, куда теперь должны встать стрелки, поэтому full-bleed
   приём убран целиком: рамка больше не выходит за границы `.container`
   (безопасно и без риска горизонтального скролла), а `.social-case__media` —
   просто позиционирующая обёртка (position: relative) для двух absolute
   кнопок вокруг обычной, центрированной через margin-inline: auto рамки. */
.social-case__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* min-width: auto у flex-item иначе равен ширине рамки (126.96%) и
     раздувает предков — scrollWidth страницы растёт вправо. */
  min-width: 0;
  /* фикс spec-pages/main/fix.md: рамка (width: var(--social-phone-w)) шире
     самого .social-case__media (126.96% > 100%) — в этом случае блочный
     margin-inline: auto, который раньше центрировал рамку, НЕ работает:
     по спецификации CSS при переполнении (box шире контейнера) auto-отступы
     у block-элемента резолвятся в 0, а не симметрично, поэтому рамка
     "прилипала" левым краем к контейнеру и весь избыток уходил направо —
     визуально рамка была смещена влево от истинного центра. Flex +
     justify-content: center центрирует even overflowing item симметрично
     (этому багу не подвержен) — переключаем родителя на flex ради этого. */
  display: flex;
  justify-content: center;
  /* --social-phone-w — единая точка правды для ширины рамки телефона на
     мобиле/планшете: используется и самой рамкой ниже, и формулой позиции
     стрелок (.social-case__arrow), чтобы при изменении ширины рамки
     позиция стрелок пересчиталась автоматически.
     фикс spec-pages/main/fix.md: рамка (и вписанные в неё экран/превью/
     iframe, которые масштабируются вместе с ней через проценты в
     .device-frame__screen) увеличена ещё на 15% от прежних 110.4%
     (96% * 1.15) → 110.4% * 1.15 = 126.96%. Рамка шире родителя, но
     letterbox-поля phone_border.webp (~24.74% с каждой стороны)
     компенсируют это — видимый чёрный корпус остаётся на экране. */
  --social-phone-w: 126.96%;
}

@media (max-width: 1023.98px) {
  /* Рамка 126.96% на узкой ширине чуть вылезает за вьюпорт прозрачным
     letterbox. Без обрезки это расширяет scrollWidth вправо — появляется
     горизонтальный скролл (влево overflow не создаёт scroll origin).
     overflow-x: hidden на html этого не закрывает на мобильных (тот же
     класс бага, что у карусели маркетплейсов). Клипуем секцию: видимый
     корпус и стрелки остаются на экране, скролл только вертикальный.
     clip не форсирует overflow-y: auto, в отличие от одного hidden. */
  #video-social {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

.social-case .device-frame--phone {
  /* фикс spec-pages/main/fix.md: было 115vw full-bleed; затем рамка
     вписана в границы контейнера (96% его ширины); далее 96% * 1.15 =
     110.4%; затем ещё +15% (см. --social-phone-w выше, 126.96%) —
     видимый корпус телефона крупнее, letterbox-поля компенсируют выход
     контейнера за .container. Центрирование через justify-content: center
     родителя (см. .social-case__media выше) — margin-inline: auto здесь
     больше не нужен (и не центрировал бы корректно переполняющий блок);
     flex-shrink: 0, чтобы flex не сжимал заданную ширину рамки. */
  width: var(--social-phone-w);
  flex-shrink: 0;
  margin-block: 0;
}

/* Стрелки — ассеты assets/icons/mobile/left_case.webp / right_case.webp
   (те же файлы-стрелки, что у навигации ТВ, но без круга/подписи/
   desktop-варианта — в этой секции на десктопе стрелок нет вообще, см.
   @media ниже). Формула позиции — по той же идее, что процентная
   desktop-навигация ТВ (--next-case-tv-width): --social-phone-w — ширина
   контейнера рамки, 0.2474 — доля прозрачного letterbox-поля
   phone_border.webp с каждой стороны (см. .device-frame--phone
   .device-frame__screen выше). Независимо от ширины экрана:
   gutterInsideMedia (от края .social-case__media до видимого корпуса) =
     (100% - phone-w) / 2 + 0.2474 * phone-w
   центр стрелки — середина желоба между РЕАЛЬНЫМ краем экрана сайта
   (вьюпорт / .page-wrap) и видимой текстурой корпуса, а не краем
   .social-case__media: из середины gutterInsideMedia вычитается половина
   padding-inline .container (1.25rem / 2 = 0.625rem), чтобы внешняя точка
   желоба совпала с краем экрана. */
.social-case__arrow {
  --social-gutter: calc(
    (100% - var(--social-phone-w)) / 4
    + var(--social-phone-w) * 0.1237
    - 0.625rem
  );
  position: absolute;
  top: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* фикс spec-pages/main/fix.md: размер стрелок увеличен на 15%
     (было 2.75rem / 2.7rem). */
  width: 3.16rem;
  height: 3.16rem;
  z-index: 3;
  /* фикс spec-pages/main/fix.md: TAP как у .carousel-arrow */
  transition: transform var(--tap-duration) var(--tap-easing);
}

.social-case__arrow img {
  display: block;
  width: 3.11rem;
  height: 3.11rem;
  object-fit: contain;
  /* фикс spec-pages/main/fix.md: лёгкая тень стрелок — тот же тёплый
     золотистый тон, что у box-shadow кнопки "Связаться с нами" (.cta-button:
     rgba(176, 143, 95, 0.6)), но мягче/светлее ("лёгкая"). Тень на самой
     картинке (filter: drop-shadow), а не на прозрачной кнопке (box-shadow
     у прозрачного .social-case__arrow не даст видимой формы) — повторяет
     силуэт круглой стрелки из ассета left_case.webp/right_case.webp. */
  filter: drop-shadow(0 4px 10px rgba(176, 143, 95, 0.45));
}

.social-case__arrow--prev {
  left: var(--social-gutter);
  transform: translate(-50%, -50%);
}

.social-case__arrow--prev:active {
  transform: translate(-50%, -50%) scale(var(--tap-scale));
}

.social-case__arrow--next {
  right: var(--social-gutter);
  transform: translate(50%, -50%);
}

.social-case__arrow--next:active {
  transform: translate(50%, -50%) scale(var(--tap-scale));
}

/* фикс spec-pages/main/fix.md: как и у кнопок под ТВ — скрытая на первом
   кейсе "Предыдущий кейс" не должна занимать место и не должна сдвигать
   ни телефон, ни правую кнопку. Кнопка absolute (см. выше), поэтому
   простого [hidden] достаточно — в отличие от .next-case, здесь нет
   конкурирующего авторского display: flex, но правило добавлено для
   единообразия и на случай будущих переопределений. */
.social-case__arrow[hidden] {
  display: none;
}

/* фикс spec-pages/main/fix.md: desktop-only навигация по кейсам под
   цитатой (.social-case__nav-desktop) — отдельная от мобильных стрелок
   .social-case__arrow, живущих по бокам рамки телефона. На <1024px эта
   группа полностью скрыта и не занимает места; включается только в
   @media ниже. */
.social-case__nav-desktop {
  display: none;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background: #d9d2c7;
}

@media (min-width: 1024px) {
  /* фикс spec-pages/main/fix.md: раскладка "цитата | телефон" в этой
     секции теперь начинается с 1024px (было 768px) — на 768–1023px
     остаётся мобильная колонка со стрелками по бокам рамки (иначе левая
     стрелка оказалась бы между цитатой и рамкой). */
  .social-case {
    flex-direction: row-reverse;
    justify-content: center;
    /* фикс fix.md: небольшой аккуратный зазор между цитатой и рамкой
       телефона — цитата теперь растягивается через flex до этого зазора
       (см. .social-case__quote ниже), а не до фиксированного % ширины. */
    gap: 1.25rem;
  }
  .social-case__quote {
    align-items: flex-start;
    /* фикс fix.md: цитата больше не занимает фиксированные 45% ширины —
       она заполняет всё свободное место в строке (контейнер минус
       зафиксированная ширина телефона минус gap), поэтому её правый край
       почти доходит до рамки телефона на любой ширине экрана. Рамка
       телефона зафиксирована через flex-shrink: 0 ниже, поэтому рост
       цитаты не сжимает и не сдвигает телефон. */
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .social-case__quote-bg {
    /* фикс fix.md: увеличенный нижний внутренний отступ — резервирует
       место для круглого аватара, перенесённого в левый нижний угол
       плашки (см. .case-quote__foot--corner-right ниже), чтобы последняя
       строка цитаты (текст выровнен по левому краю, поэтому неизбежно
       начинается прямо у левого нижнего угла) не пересекалась с аватаром. */
    padding: 2.25rem 2rem 3.5rem;
  }
  .case-quote__foot--corner-right {
    /* фикс fix.md: блок «бренд + аватар» перенесён из правого нижнего
       угла в левый нижний угол плашки цитаты (только на ПК — на мобилке
       выше сохраняется исходное правое положение). */
    right: auto;
    left: 2.5rem;
  }
  .case-quote__foot--corner-right .case-quote__avatar {
    /* фикс fix.md: на ПК аватар — самый левый элемент блока (стоит точно
       в углу плашки), имя бренда — правее, рядом с ним; на мобилке порядок
       в разметке (бренд → аватар) не меняется, поэтому это правило не
       затрагивает мобильную композицию. */
    order: -1;
  }
  .social-case__quote .case-quote__brand {
    /* фикс spec-pages/main/fix.md: на desktop имя правее кружка. */
    text-align: left;
  }
  .social-case .device-frame--phone {
    /* фикс spec-pages/main/fix.md: рамка (и iframe внутри неё) увеличена
       на 15% на ПК — 48% * 1.15 = 55.2%, 460px * 1.15 = 529px. */
    width: min(55.2%, 529px);
    /* фикс fix.md: рамка телефона не должна сжиматься при расширении
       цитаты — её размер и позиция остаются прежними, растёт только
       цитата слева от неё. */
    flex-shrink: 0;
    /* фикс spec-pages/main/fix.md: сбрасываем margin-inline — на мобилке/
       планшете выше рамка центрируется через margin-inline: auto при
       ширине var(--social-phone-w), на ПК ширина и отступ считаются
       заново под фиксированный min(55.2%, 529px). */
    margin-inline: 0;
    /* фикс fix.md: у phone_border.webp внутри квадратного контейнера есть
       прозрачные горизонтальные поля (~24.74% ширины контейнера с каждой
       стороны — letterbox от object-fit: contain, см. .device-frame__screen
       ниже) — визуально видимый корпус телефона начинается заметно правее
       левого края самого контейнера. Из-за этого при увеличенной цитате
       между ней и ВИДИМЫМ корпусом телефона остаётся большой пустой
       промежуток, хотя раскладочный (flex) зазор между блоками маленький.
       Компенсируем ровно шириной прозрачного поля отрицательным левым
       отступом контейнера — контейнер сдвигается влево на величину
       letterbox'а, и видимый корпус телефона оказывается ровно там, где
       раньше была граница самого контейнера (реального смещения видимого
       телефона относительно прежней раскладки почти нет — это чисто
       компенсация прозрачных полей, а не сдвиг видимого объекта). */
    margin-left: calc(-0.2474 * min(55.2%, 529px));
    /* фикс spec-pages/main/fix.md: на широком десктопе верх видимой рамки
       телефона слегка отодвинут от плашки «ВИДЕО ДЛЯ СОЦСЕТЕЙ» — раньше
       телефон стартовал вровень с цитатой сразу под плашкой. Величина —
       промежуточная между исходной раскладкой (без зазора) и половиной
       высоты плашки (~2.25rem). Затрагивает только рамку телефона (не
       цитату) и только десктоп — раскладка <1024px не меняется. */
    margin-top: 1.1rem;
  }

  /* фикс spec-pages/main/fix.md: на десктопе стрелок нет вообще — секция
     возвращается к исходной раскладке "цитата | телефон" без навигации.
     `.social-case__media` (мобильная позиционирующая обёртка стрелок)
     больше не нужна: `display: contents` убирает у неё собственный box
     (width/position становятся неприменимы), и её единственный видимый
     ребёнок `.device-frame--phone` становится прямым flex-item'ом
     `.social-case` (row-reverse) — раскладка идентична варианту без
     обёртки. Скрытые кнопки-стрелки (display: none ниже) при
     `display: contents` родителя не создают бокса и не влияют на layout. */
  .social-case__media {
    display: contents;
  }

  .social-case__arrow {
    display: none;
  }

  /* фикс spec-pages/main/fix.md: desktop-навигация по кейсам — горизонтальная
     группа "Предыдущий кейс" (left_case.webp) + "Следующий кейс"
     (next_case_with_text.webp, текст уже "запечён" в самом ассете) под
     плашкой цитаты. На первом кейсе "Предыдущий кейс" скрыта — видна
     только "Следующий кейс" (см. JS). Группа не сдвигает ни цитату, ни
     телефон — идёт обычным flow-элементом после .social-case__quote-plate.

     Ширина группы — shrink-wrap, а сама группа центрируется через align-self
     относительно ПОЛНОЙ ширины .social-case__quote (которая идёт от левого
     края контейнера до зазора перед рамкой телефона — родительский
     align-items: flex-start иначе прижал бы её к левому краю).

     фикс spec-pages/main/fix.md ("Следующий кейс" — фиксированная позиция):
     слот "Предыдущий кейс" зарезервирован в потоке ВСЕГДА (см.
     .social-case__nav-btn[hidden] ниже — только visibility, не display:none),
     поэтому shrink-wrap ширина группы одна и та же на кейсах 0/1/2, и центр
     (align-self: center) не пересчитывается при появлении/скрытии
     "Предыдущий кейс". "Следующий кейс" стоит в одной точке на всех кейсах —
     там же, где раньше стояла только после первого клика; "Предыдущий кейс"
     просто появляется/пропадает слева от неё, не сдвигая её. */
  .social-case__nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-self: center;
    width: auto;
  }

  .social-case__nav-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* фикс spec-pages/main/fix.md: TAP как у .carousel-arrow */
    transition: transform var(--tap-duration) var(--tap-easing);
  }

  .social-case__nav-btn:active {
    transform: scale(var(--tap-scale));
  }

  /* фикс spec-pages/main/fix.md: "Следующий кейс" — фиксированная позиция.
     Раньше скрытая "Предыдущий кейс" убиралась через display: none, из-за
     чего shrink-wrap ширина группы менялась и align-self: center пересчитывал
     центр — "Следующий кейс" прыгала по горизонтали при первом переходе
     0 → 1 (и обратно 1 → 0). Теперь слот "Предыдущий кейс" остаётся в потоке
     (ширина кнопки + gap: 0.75rem всегда зарезервированы), скрытие — только
     visibility + pointer-events, без клика/тапа/Tab. Ширина группы одна и
     та же на всех трёх кейсах, поэтому её центр (align-self: center) не
     смещается, и "Следующий кейс" стоит в одной точке всегда — там же, где
     она стояла после появления "Предыдущий кейс". */
  .social-case__nav-btn[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
  }

  .social-case__nav-btn img {
    display: block;
    height: 2.99rem;
    width: auto;
    max-width: none;
    object-fit: contain;
    /* фикс spec-pages/main/fix.md: та же тень, что уже есть у мобильных
       .social-case__arrow img — desktop-кнопки под цитатой раньше были
       без тени. */
    filter: drop-shadow(0 4px 10px rgba(176, 143, 95, 0.45));
  }
}

/* фикс spec-pages/main/fix.md: hover кнопок кейсов #video-social —
   тот же brightness(1.03), что у .cta-button. На кнопке, не на <img>,
   чтобы не стереть drop-shadow. Только настоящая мышь: на таче :hover
   залипает (паттерн D). Без min-width: 1024px — иначе mobile-стрелки
   не получили бы hover на узком окне с указателем. */
@media (hover: hover) and (pointer: fine) {
  .social-case__arrow:hover,
  .social-case__nav-btn:hover {
    filter: brightness(1.03);
  }
}

/* ---------- Таблица цен — фикс spec-pages/main/fix.md ----------
   Реф: spec-pages/main/refs/prices.png. Двухколоночная таблица: левая
   колонка (иконка + услуга) на основном светлом фоне (--color-bg), правая
   (цена) — на тёплом бежевом (--color-quote-beige), как на рефе. Каждая
   .price-table__row — display:contents, чтобы её две ячейки участвовали
   в общей grid-раскладке таблицы (иначе строки-обёртки сломали бы сетку
   на 2 колонки). Разделители — тонкая нижняя граница у каждой ячейки,
   кроме последней строки. */

.price-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  box-shadow: 0 22px 44px -30px rgba(120, 90, 60, 0.4);
}

.price-table__row {
  display: contents;
}

.price-table__cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.1rem;
  border-bottom: 1px solid rgba(196, 169, 142, 0.35);
  font-size: 0.95rem;
}

.price-table__row:last-child .price-table__cell {
  border-bottom: none;
}

.price-table__cell--service {
  background: var(--color-bg);
  justify-content: flex-start;
  font-weight: 600;
}

.price-table__cell--price {
  background: var(--color-quote-beige);
  justify-content: center;
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
}

.price-table__cell--contact {
  font-weight: 700;
  font-size: 0.95rem;
}

.price-table__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.65rem;
  height: 2.65rem;
}

.price-table__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.price-table__cta {
  display: flex;
  justify-content: center;
  margin-top: 1.9rem;
}

/* фикс spec-pages/main/fix.md: на десктопе по референсу таблица цен —
   компактный вертикальный блок, а не растянутая на всю ширину секции
   (как .page-wrap); сужаем и центрируем только на широких экранах,
   мобильная раскладка (на всю ширину .container) не трогается. */
@media (min-width: 1024px) {
  .price-table {
    max-width: 32rem;
    margin-inline: auto;
  }
  /* фикс spec-pages/main/fix.md: «Рекламный ролик до 20 секунд» на
     desktop остаётся одной строкой — mobile-only <br> не участвует
     в вёрстке. На <1024px br виден (две строки: название / «до 20 секунд»). */
  .price-table__br-mobile {
    display: none;
  }
}

@media (min-width: 640px) {
  .price-table__cell {
    padding: 1.3rem 1.5rem;
    font-size: 1.02rem;
  }
  .price-table__cell--price {
    font-size: 1.3rem;
  }
  .price-table__cell--contact {
    font-size: 1.02rem;
  }
  .price-table__icon {
    width: 3rem;
    height: 3rem;
  }
}

/* ---------- Our tools heading — фикс spec-pages/main/fix.md ----------
   Плашка «наши инструменты» сделана по референсу: полоса с затуханием
   (градиентом) по бокам вместо сплошной пилюли-фона. Реализация — через
   .tools-plate::before с той же mask-image-техникой, что и у
   .tools-marquee (прозрачный → непрозрачный → непрозрачный → прозрачный),
   чтобы края полоски плавно растворялись в фоне страницы. Цвет плашки —
   светлый тон нижней зоны сайта (--color-bg-soft), а не золотой градиент.
   Ширина полоски ограничена шириной таблицы цен (.price-table: 32rem на
   десктопе, 100% контейнера на мобиле) — см. .tools-plate ниже. */
.tools-plate {
  position: relative;
  width: 100%;
  margin: 0.4rem auto 1.5rem;
}

.tools-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  /* фикс fix.md: цвет плашки светлее — тон нижней (бежевой) зоны сайта
     (--color-bg-soft, тот же, что у .site-footer), а не золотой градиент. */
  background: var(--color-bg-soft);
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 20%,
    #000 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 20%,
    #000 80%,
    transparent 100%
  );
}

/* фикс fix.md: на десктопе ширина плашки ограничена шириной таблицы цен
   (см. .price-table { max-width: 32rem } ниже) — та же логика, что и у
   самой таблицы: центрируем через margin-inline: auto. На мобиле плашка
   остаётся на всю ширину .container, как и таблица цен. */
@media (min-width: 1024px) {
  .tools-plate {
    max-width: 32rem;
  }
}

.tools-heading {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.03em;
  /* фикс fix.md: шрифт хедера на 4pt меньше прежнего значения */
  font-size: clamp(calc(1rem - 4pt), 3.6vw, calc(1.35rem - 4pt));
  padding: 0.5rem 1.25rem;
  margin: 0;
}

/* Секция «Наши инструменты» — фикс spec-pages/main/fix.md: блок сдвинут
   ближе к нижней бежевой зоне сайта, но остаётся на обычном (белом/светлом)
   фоне страницы — не сливается фоном с бежевым футером и не образует с ним
   один визуальный блок. Отступ "карусель → низ сайта" равен отступу
   "хедер → карусель" (.tools-heading margin-bottom: 1.5rem): padding-bottom
   обнулён, а margin-bottom компенсирует часть margin-top футера
   (--section-gap = 3rem) через margin collapsing, оставляя ровно 1.5rem. */
.case-section--tools {
  padding-top: calc(var(--section-gap) * 0.6);
  padding-bottom: 0;
  margin-bottom: calc(1.5rem - var(--section-gap));
}

/* ---------- Our tools (наши инструменты) — фикс spec-pages/main/fix.md ----------
   Бесконечная бегущая строка иконок ИИ-инструментов. Две одинаковые копии
   трека лежат в одной обёртке `.tools-marquee__mover`. Анимируется только
   обёртка: translateX(-50%) за 42s — это ровно ширина одного трека, и в
   момент, когда первая копия уходит за левый край, вторая стоит на её
   стартовой позиции. Процент считается от ширины обёртки, а не от видимой
   полосы: сам `.tools-marquee` не flex, иначе WebKit берёт процент от
   контейнера и лента ползёт. Старт — после загрузки иконок (класс
   is-running в main.js), чтобы ширина ряда уже была полной.
   Затухание по краям — псевдоэлементы с градиентом в --color-bg, не
   mask-image: маска вместе с transform на WebKit перестаёт перерисовывать
   иконки. */

.tools-marquee {
  --tools-marquee-fade: 12%;
  /* Один и тот же интервал используется и внутри дорожки, и на её стыке
     с повторной копией — логотипы идут равномерно без увеличенного зазора
     при бесконечном повторе. */
  --tools-marquee-gap: clamp(1.15rem, 4.6vw, 2.0125rem);
  /* фикс spec-pages/main/fix.md: на десктопе сама полоска карусели должна
     стать физически уже (не на всю ширину контейнера) — иконки исчезают
     ближе к центру не потому, что растянут градиент, а потому, что сам
     блок `.tools-marquee` сужен и вставлен по центру. На mobile ширину
     и --tools-marquee-fade не трогаем — переопределяем только в
     media-запросе (min-width: 1024px) ниже. */
  position: relative;
  overflow: hidden;
  width: 100%;
}

.tools-marquee::before,
.tools-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--tools-marquee-fade);
  z-index: 1;
  pointer-events: none;
}

.tools-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.tools-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.tools-marquee__mover {
  display: flex;
  width: max-content;
  min-width: max-content;
  /* фикс fix.md: "медленно двигающаяся" — намеренно длинная продолжительность,
     linear (без ускорений/замедлений). Пауза до класса is-running: WebKit
     не должен зафиксировать -50% на ещё нулевой ширине ряда. */
  animation: tools-marquee-scroll 42s linear infinite;
  animation-play-state: paused;
}

.tools-marquee__mover.is-running {
  animation-play-state: running;
}

.tools-marquee__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--tools-marquee-gap);
  padding-inline-end: var(--tools-marquee-gap);
  width: max-content;
}

.tools-marquee__track:first-child {
  padding-inline-start: 0;
}

/* фикс spec-pages/main/fix.md: временно скрыть Photoshop и After Effects
   в карусели инструментов (паттерн A — только CSS, без медиа-гейта;
   разметка и файлы иконок остаются на месте, скрытие снимается одной
   правкой ниже). Не занимают место во flex-ряде обоих треков. */
.tools-marquee__track img[src*="5ps_log"],
.tools-marquee__track img[src*="7AE_log"] {
  display: none;
}

.tools-marquee__track img {
  flex: 0 0 auto;
  height: clamp(2.2rem, 6vw, 3rem);
  width: auto;
  max-width: none;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .tools-marquee__mover,
  .tools-marquee__mover.is-running {
    animation: none;
  }
}

/* фикс spec-pages/main/fix.md: desktop-only — сужаем сам блок карусели
   (а не только градиент), центрируем его и делаем fade коротким внутри
   этой новой узкой ширины. За счёт этого края видимой "полоски" реально
   смещаются к центру экрана (как на референсе), а не просто плавнее
   гаснут у прежних боковых границ. Mobile (< 1024px) не меняем ни
   ширину, ни --tools-marquee-fade. */
@media (min-width: 1024px) {
  .tools-marquee {
    width: 58%;
    margin-inline: auto;
    --tools-marquee-fade: 18%;
  }
}

@keyframes tools-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Новости (страница news.html) — фикс spec-pages/main/fix.md ----------
   Реф: карточка на всю ширину блока со скруглёнными углами и мягким
   горизонтальным градиентом (см. --gradient-news-card выше — светлее, чем
   на референсе). Заголовок "НОВОСТИ" — переиспользуем .section-plate
   (тот же золотой градиент-плашка, что и в остальных секциях страницы). */

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* фикс spec-pages/main/fix.md: mobile-first колонка — текст на всю ширину,
   логотипы ИИ/маркетплейсов отдельной полосой под новостью; от 768px снова
   ряд «текст слева / логотипы справа». */
.news-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  background-image: var(--gradient-news-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
}

.news-card__text {
  flex: 0 1 auto;
  width: 100%;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.news-card__date {
  font-weight: 800;
  white-space: nowrap;
}

.news-card__logos {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

/* фикс spec-pages/main/fix.md: на mobile (<768px) логотипы ИИ и
   маркетплейсов в карточках новостей крупнее на 20% (clamp ×1.2).
   На ≥768px — прежний размер, см. медианиже. */
.news-card__logos img {
  height: clamp(1.92rem, 5.4vw, 2.64rem);
  width: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .news-card {
    padding: 1.3rem 1.75rem;
  }

  .news-card__text {
    font-size: 1.02rem;
  }
}

@media (min-width: 768px) {
  .news-card {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .news-card__text {
    flex: 1 1 auto;
    width: auto;
  }

  .news-card__logos {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  /* фикс spec-pages/main/fix.md: tablet/desktop — без +20% */
  .news-card__logos img {
    height: clamp(1.6rem, 4.5vw, 2.2rem);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-bg-soft);
  /* фикс fix.md: на мобильной версии копирайт должен стоять у самого низа
     экрана (минимальный нижний паддинг), а ряд соцсетей — визуально по
     центру бежевой плашки над ним (равный отступ сверху и отступ до
     копирайта); на десктопе паддинг снова симметричный (см. override ниже). */
  padding-top: 2rem;
  padding-bottom: 0.6rem;
  margin-top: var(--section-gap);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.site-footer__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* фикс fix.md: отступ от соцсетей до копирайта на мобильной — равен
     верхнему паддингу футера (--pad-top 2rem), чтобы ряд иконок оказался
     по центру высоты плашки над узкой полосой копирайта у самого низа. */
  gap: 2rem;
  width: 100%;
}

/* фикс fix.md: на мобильной версии (<640px) футер показывает только
   ряд соцсетей и копирайт — email/иконка почты скрыты (без удаления
   из разметки, чтобы вернуть их на десктопе через override ниже). */
.site-footer__contacts {
  display: none;
}

.site-footer__contacts a {
  text-decoration: none;
}

/* фикс fix.md: почта футера — один контрол (иконка + адрес).
   <1024px: mailto-ссылка; ≥1024px: кнопка копирования (не mailto). */
.site-footer__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.site-footer__email--copy {
  display: none;
}

.site-footer__email-text {
  font-weight: 400;
}

.site-footer__tooltip {
  position: absolute;
  top: -1.9rem;
  left: 0;
  background: var(--color-text);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-footer__email.is-copied .site-footer__tooltip,
.site-footer__email.is-copy-error .site-footer__tooltip {
  opacity: 1;
  transform: translateY(0);
}

.site-footer__email.is-copy-error .site-footer__tooltip {
  background: #8a3b2e;
}

@media (min-width: 1024px) {
  .site-footer__email--mailto {
    display: none;
  }

  .site-footer__email--copy {
    display: inline-flex;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-footer__email--copy:hover .site-footer__email-text {
    font-weight: 600;
  }
}

/* фикс fix.md: маленькая декоративная иконка почты слева от адреса в футере */
.site-footer__mail-icon {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  flex-shrink: 0;
}

.site-footer__socials {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.site-footer__socials a {
  /* фикс spec-pages/main/fix.md: TAP как у .carousel-arrow; flex-item уже
     blockified, display не трогаем — иначе перебьёт скрытие Instagram. */
  transition: transform var(--tap-duration) var(--tap-easing);
}

.site-footer__socials a:active {
  transform: scale(var(--tap-scale));
}

.site-footer__socials img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

/* фикс spec-pages/main/fix.md: на ПК hover по MAX/Telegram/VK — заметное
   затемнение картинки (brightness), не opacity. TAP-transform остаётся
   на ссылке; display ссылок не трогаем — иначе перебьёт скрытие Instagram. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-footer__socials a img {
    transition: filter 0.2s ease;
  }

  .site-footer__socials a:hover img {
    filter: brightness(0.7);
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .site-footer__socials a img {
    transition: none;
  }
}

.site-footer__copyright {
  /* фикс fix.md: копирайт на мобильной прижат к низу плашки — отступ
     до нижнего края даёт padding-bottom футера (0.6rem), без своего margin */
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  color: rgba(46, 33, 29, 0.6);
  text-align: center;
}

@media (min-width: 640px) {
  /* фикс fix.md: на десктопе футер — снова симметричный вертикальный
     паддинг (одна строка, без анкоринга копирайта к нижнему краю) */
  .site-footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .site-footer .container {
    text-align: left;
  }
  /* фикс fix.md: на десктопе футер — три зоны в одну строку:
     контакты слева, соцсети по геометрическому центру, копирайт справа.
     Grid с крайними колонками 1fr гарантирует центрирование средней
     колонки независимо от ширины email/копирайта. */
  .site-footer__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
  }
  .site-footer__contacts {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    gap: 0.4rem;
    font-size: 0.95rem;
  }
  .site-footer__socials {
    grid-column: 2;
    justify-self: center;
  }
  .site-footer__copyright {
    grid-column: 3;
    justify-self: end;
    text-align: right;
    margin: 0;
  }
}

/* ==========================================================================
   Модальное окно "Связаться с нами" — фикс spec-pages/main/fix.md
   Открывается кликом по CTA (hero и дубль в sticky-навигации), затемняет
   всю страницу, закрывается кликом по тёмной зоне / Escape / крестиком.
   ========================================================================== */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

/* Скрытие/блокировку клика и фокуса в закрытом состоянии обеспечивает
   нативный атрибут [inert] (см. js/main.js) — в отличие от visibility,
   он применяется мгновенно, без задержки на "тик" CSS-перехода. Само же
   визуальное появление (затемнение + блюр) анимируется НЕ через opacity
   родителя, а отдельным переходом на .contact-modal__backdrop (см. ниже) —
   иначе backdrop-filter на дочернем элементе "допроявляется" с задержкой
   в один-два кадра относительно простого затемнения (браузеру нужно
   успеть продвинуть элемент в отдельный composite-слой), из-за чего блюр
   на глаз ощутимо отстаёт от потемнения фона. */
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  /* нейтральное серо-коричневое затемнение — контент страницы позади
     остаётся различимым (как на референсе), но недоступен для взаимодействия */
  background: rgba(32, 25, 22, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  /* фикс spec-pages/main/fix.md: backdrop — обычный <div data-modal-close>,
     а не <button>/<a>/role="button", поэтому глобальное правило тап-
     -подсветки (см. вверху файла) на него не действует. Тап по пустой зоне
     закрывает модалку, но перед этим на весь экран "вспыхивает" системная
     синяя подсветка Chrome/Android — убираем её явно здесь же. */
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  /* will-change заранее промотирует элемент в свой compositing-слой ещё
     ДО начала перехода, чтобы backdrop-filter не "включался" с опозданием
     в первый момент анимации — потемнение и блюр идут строго синхронно. */
  will-change: opacity, backdrop-filter;
  transition: opacity 0.25s ease;
}

.contact-modal.is-open .contact-modal__backdrop {
  opacity: 1;
}

.contact-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 540px);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  background: #fffcfa;
  border-radius: 1.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 30px 60px -20px rgba(46, 33, 29, 0.5);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 0.85, 0.32, 1), opacity 0.22s ease;
}

.contact-modal.is-open .contact-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal__backdrop,
  .contact-modal__dialog {
    transition: none;
  }
}

.contact-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(46, 33, 29, 0.07);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform var(--tap-duration) var(--tap-easing);
}

.contact-modal__close:hover,
.contact-modal__close:focus-visible {
  background: rgba(46, 33, 29, 0.15);
}

.contact-modal__close:active {
  transform: scale(var(--tap-scale));
}

/* фикс spec-pages/main/fix.md: клик/тап по крестику закрытия на мобильных
   браузерах тоже триггерит :focus-visible, и рамка (в т.ч. кастомная)
   иногда "зависает" на кнопке дольше самого тапа. По требованию — без
   обводки вообще, в любом состоянии фокуса. */
.contact-modal__close:focus-visible {
  outline: none;
}

/* fix.md: логотип VIDIOCRACY над заголовком карточки — тот же файл, что в
   хедере (.site-header__logo), но заметно компактнее; не ссылка/кнопка. */
.contact-modal__logo {
  display: block;
  width: min(63.25%, 289px);
  max-height: 4.95rem;
  height: auto;
  object-fit: contain;
  margin: 0 auto 0.65rem;
}

.contact-modal__title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--color-text);
}

/* ---------- Блок соцсетей ---------- */

.contact-modal__socials {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border: 1px solid var(--color-card-border);
  border-radius: 1.4rem;
  padding: 0.85rem;
  background: linear-gradient(180deg, #fbf3e7 0%, #f6e9d6 100%);
  margin-bottom: 1.1rem;
}

.contact-modal__social-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.contact-modal__social-icon {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0.28rem;
  border-radius: 0.78rem;
  overflow: hidden;
  display: block;
  background: rgba(255, 252, 248, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow:
    0 4px 12px -4px rgba(46, 33, 29, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(196, 169, 142, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-modal__social-icon[href*="max.ru"] {
  background:
    linear-gradient(rgba(92, 78, 220, 0.08), rgba(92, 78, 220, 0.08)),
    rgba(255, 252, 248, 0.42);
}

.contact-modal__social-icon[href*="t.me"] {
  background:
    linear-gradient(rgba(42, 171, 238, 0.08), rgba(42, 171, 238, 0.08)),
    rgba(255, 252, 248, 0.42);
}

.contact-modal__social-icon[href*="vk.ru"] {
  background:
    linear-gradient(rgba(0, 119, 255, 0.08), rgba(0, 119, 255, 0.08)),
    rgba(255, 252, 248, 0.42);
}

@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .contact-modal__social-icon {
    background: rgba(255, 248, 240, 0.88);
  }

  .contact-modal__social-icon[href*="max.ru"] {
    background:
      linear-gradient(rgba(92, 78, 220, 0.08), rgba(92, 78, 220, 0.08)),
      rgba(255, 248, 240, 0.88);
  }

  .contact-modal__social-icon[href*="t.me"] {
    background:
      linear-gradient(rgba(42, 171, 238, 0.08), rgba(42, 171, 238, 0.08)),
      rgba(255, 248, 240, 0.88);
  }

  .contact-modal__social-icon[href*="vk.ru"] {
    background:
      linear-gradient(rgba(0, 119, 255, 0.08), rgba(0, 119, 255, 0.08)),
      rgba(255, 248, 240, 0.88);
  }
}

.contact-modal__social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.18) 36%,
    rgba(255, 255, 255, 0) 58%
  );
  pointer-events: none;
  z-index: 0;
}

.contact-modal__social-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(46, 33, 29, 0.16));
}

/* фикс spec-pages/main/fix.md: без обводки в любом состоянии фокуса —
   на мобильных тапах браузерный контур "зависает" дольше самого тапа. */
.contact-modal__social-icon:focus,
.contact-modal__social-icon:focus-visible {
  outline: none;
}

/* Hover-сдвиг только для мыши: на таче :hover залипает после тапа. */
@media (hover: hover) and (pointer: fine) {
  .contact-modal__social-icon:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 16px -8px rgba(46, 33, 29, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(196, 169, 142, 0.22);
  }
}

.contact-modal__login {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fffaf3;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-full);
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* фикс spec-pages/main/fix.md: без обводки в любом состоянии фокуса —
   на мобильных тапах браузерный контур "зависает" дольше самого тапа.
   :focus / :focus-visible не меняют фон, рамку и scale — иначе после
   тапа капсула остаётся «нажатой». */
.contact-modal__login:focus,
.contact-modal__login:focus-visible {
  outline: none;
}

/* Подсветка капсулы только для настоящей мыши: на таче :hover залипает. */
@media (hover: hover) and (pointer: fine) {
  .contact-modal__login:hover {
    background: #ffffff;
    border-color: var(--color-gold-dark);
  }
}

.contact-modal__login-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-modal__copy-icon {
  /* fix.md: значок копирования уменьшен примерно на 30% (1.5rem → ~1.05rem) */
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal__copy-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Всплывающая подсказка "Скопировано" — появляется над кнопкой копирования
   на ~1.6с (см. showCopyFeedback в js/main.js), затем плавно исчезает. */
.contact-modal__tooltip {
  position: absolute;
  top: -1.9rem;
  right: 0.2rem;
  background: var(--color-text);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.is-copied .contact-modal__tooltip,
.is-copy-error .contact-modal__tooltip {
  opacity: 1;
  transform: translateY(0);
}

.is-copy-error .contact-modal__tooltip {
  background: #8a3b2e;
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal__social-icon,
  .contact-modal__tooltip,
  .site-footer__tooltip {
    transition: none;
  }
}

/* ---------- Email ---------- */

.contact-modal__email {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #fbf3e7 0%, #f6e9d6 100%);
  padding: 0.85rem 1.1rem;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.contact-modal__email:focus,
.contact-modal__email:focus-visible {
  outline: none;
}

/* fix.md: иконка почты слева от адреса, декоративная (aria-hidden);
   размер контейнера совпадает с .contact-modal__social-icon, чтобы
   визуальная "колонка" иконок была одинаковой ширины/высоты во всех рядах */
.contact-modal__email-icon {
  flex: 0 0 auto;
  /* fix.md: иконка почты −20% ещё раз (2.32rem → 1.856rem) */
  width: 1.856rem;
  height: 1.856rem;
  display: block;
  /* fix.md: доп. отступ от адреса почты по горизонтали */
  margin-right: 0.9rem;
}

.contact-modal__email-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contact-modal__email-text {
  font-weight: 700;
  font-size: 1rem;
  /* мягкий коричневый вместо почти чёрного --color-text, в тон сайта */
  color: #6b5344;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-modal__email .contact-modal__copy-icon {
  /* значок копирования email ~−30% от базового (1.9rem → 1.33rem),
     не размер иконки логина (1.05rem) */
  width: 1.33rem;
  height: 1.33rem;
  margin-left: 0.9rem;
}

/* TAP копирования: одноразовая анимация (сжалось → вернулось), не :active.
   На таче :active залипает до следующего тапа — из-за этого «раз через раз». */
@keyframes contact-modal-tap {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(var(--tap-scale));
  }
  100% {
    transform: scale(1);
  }
}

.contact-modal__login.contact-modal--tap,
.contact-modal__email.contact-modal--tap,
.contact-modal__social-icon.contact-modal--tap {
  animation: contact-modal-tap 0.22s var(--tap-easing);
}

@media (hover: none) {
  .contact-modal__login:hover,
  .contact-modal__login:focus,
  .contact-modal__login:active {
    background: #fffaf3;
    border-color: var(--color-card-border);
  }

  .contact-modal__social-icon:hover,
  .contact-modal__social-icon:focus,
  .contact-modal__social-icon:active {
    box-shadow:
      0 4px 12px -4px rgba(46, 33, 29, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(196, 169, 142, 0.22);
  }
}

@media (min-width: 640px) {
  .contact-modal__dialog {
    padding: 2.25rem 2rem 2rem;
  }
  .contact-modal__title {
    font-size: 1.24rem;
  }
}

/* fix.md: на mobile сократить вертикальные отступы/интервалы между блоками,
   чтобы модалка целиком помещалась в viewport без прокрутки карточки */
@media (max-width: 639px) {
  .contact-modal {
    padding: 0.85rem;
  }

  .contact-modal__dialog {
    padding: 1rem 0.9rem 0.9rem;
  }

  .contact-modal__logo {
    width: min(57.75%, 207px);
    max-height: 3.58rem;
    margin: 0 auto 0.5rem;
  }

  .contact-modal__title {
    margin: 0 0 0.6rem;
    font-size: 0.86rem;
  }

  /* соц. кнопки — крупнее и с большим вертикальным зазором между строками,
     чтобы было удобно попадать пальцем на mobile */
  .contact-modal__socials {
    gap: 0.75rem;
    padding: 0.55rem;
    margin-bottom: 0.55rem;
  }

  .contact-modal__social-icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.26rem;
    border-radius: 0.74rem;
  }

  .contact-modal__login {
    padding: 0.55rem 0.5rem 0.55rem 0.9rem;
    font-size: 0.85rem;
    min-height: 2.75rem;
  }

  .contact-modal__email {
    padding: 0.5rem 0.8rem;
  }

  .contact-modal__email-icon {
    /* fix.md: иконка почты −20% ещё раз на mobile (2.2rem → 1.76rem) */
    width: 1.76rem;
    height: 1.76rem;
  }

  .contact-modal__email-text {
    font-size: 0.88rem;
  }
}

/* фикс spec-pages/main/fix.md: TAP-scale выключается при reduced-motion;
   layout-transform (translate стрелок/кейсов, центрирование play) сохраняется. */
@media (prefers-reduced-motion: reduce) {
  .cta-button:active,
  .next-case:active,
  .carousel-arrow:active,
  .carousel-arrow:disabled:active,
  .social-case__nav-btn:active,
  .contact-modal__close:active,
  .site-footer__socials a:active {
    transform: none;
  }

  .contact-modal__login.contact-modal--tap,
  .contact-modal__email.contact-modal--tap,
  .contact-modal__social-icon.contact-modal--tap {
    animation: none;
  }

  .social-case__arrow--prev:active {
    transform: translate(-50%, -50%);
  }

  .social-case__arrow--next:active {
    transform: translate(50%, -50%);
  }

  .video-facade:active .play-icon,
  .video-facade:hover:active .play-icon,
  .video-facade:focus-visible:active .play-icon,
  #video-any-format .video-facade:active .play-icon,
  #video-any-format .video-facade:hover:active .play-icon,
  #video-any-format .video-facade:focus-visible:active .play-icon,
  #video-social .video-facade:active .play-icon,
  #video-social .video-facade:hover:active .play-icon,
  #video-social .video-facade:focus-visible:active .play-icon {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .next-case:active {
    transform: translate(-50%, -50%);
  }
}