:root {
  /* Фирменная палитра CardForge */
  --color-bg:      #0F172A; /* Navy Tech */
  --color-surface: #111111; /* Black Premium */
  --color-text:    #FFFFFF; /* Pure White */
  --color-muted:   #9AA3B2; /* осветлённый Professional Gray для контраста на тёмном фоне */
  --color-accent:  #D0A85D; /* Premium Gold */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: CLIP, а не hidden — hidden на одной оси заставляет браузер неявно
   выставлять overflow-y: auto на второй (правило CSS2.1), а это превращает html/body
   в отдельный скролл-контейнер и ломает position:sticky у всех потомков (Hero, стопка
   карточек "Обо мне"). clip обрезает горизонтальный оверфлоу так же, как hidden,
   но не трогает вторую ось и не создаёт лишний скролл-контейнер. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; }
img { max-width: 100%; display: block; }
/* Без keep-all браузер переносит корейский по слогам и рвёт термин посреди слова
   (의료기기 → «의료 / 기기»). Правило нужно везде, где в русском тексте стоят
   корейские вставки: 상세페이지, 로켓배송, названия категорий. */
:lang(ko) { word-break: keep-all; }

/* === Staggered reveal === */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === Skip-link: доступность для клавиатуры/скринридеров (скрыт, появляется по фокусу) === */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-sm); }

/* === Site header === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(208, 168, 93, 0.15);
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  /* Лёгкая микро-анимация логотипа в header — только hover, без постоянного движения:
     небольшой наклон + мягкое золотое свечение. Никакого отношения к intro-flip
     заголовка Hero — намеренно намного тише. */
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.25s ease;
}
.logo:hover {
  transform: translateY(-1px) rotate(-2deg);
  text-shadow: 0 0 16px rgba(208, 168, 93, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .logo { transition: text-shadow 0.25s ease; }
  .logo:hover { transform: none; }
}
.nav { display: flex; gap: var(--space-md); }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .site-header { padding: var(--space-sm); }
  .nav { gap: var(--space-sm); }
  .nav a { font-size: 0.85rem; }
}

/* Nav выросла до 5 пунктов (добавлен Research) — на узких телефонах логотип + 5 ссылок с
   базовым mobile-размером не помещаются в .site-header (position:fixed молча обрезает
   лишнее за край экрана вместо горизонтального скролла, поэтому document.scrollWidth это
   не ловит — проверять реальными rect'ами ссылок, не только scrollWidth). Сжимаем ещё
   плотнее только на самых узких экранах, не трогая ≤768px общий вид. */
@media (max-width: 480px) {
  .site-header { padding: 10px 12px; }
  .logo { font-size: 1.05rem; min-height: 40px; }
  .nav { gap: 7px; }
  .nav a { font-size: 0.66rem; min-height: 40px; white-space: nowrap; }
}

.eyebrow {
  font-family: var(--font-display);
  color: var(--color-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
}
@keyframes glass-sheen {
  0%, 100% { transform: rotate(8deg) translateX(0); }
  50% { transform: rotate(8deg) translateX(220%); }
}
/* === Глянцевый градиентный текст заголовка === */
.glossy-text {
  background: linear-gradient(100deg, #9c7a3d 0%, #f4e4c1 14%, #ffffff 24%, #f4e4c1 34%, var(--color-accent) 50%, #9c7a3d 68%, var(--color-accent) 84%, #f4e4c1 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3), 0 10px 26px rgba(0,0,0,0.55);
  animation: glossy-shine 6s ease-in-out infinite;
}
@keyframes glossy-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .glossy-text { animation: none; }
}




/* === Services: Create. Research. Launch. — три направления CardForge между "Обо мне" и
   "Живыми карточками". AI Content сейчас в приоритете (крупнее, золотой акцент), AI Research —
   второе направление, AI Websites — будущее (приглушено, бейдж Coming Soon). Тот же стеклянный
   материал и заголовок, что у "Живых карточек" (.lc-title-*) — визуальная преемственность. */
.services {
  position: relative;
  padding: var(--space-xl) var(--space-md);
  /* Раньше каждая .services-секция (Pain/Services/Research Lab) красила СВОЙ градиент
     заново от тёмного к чуть светлому — на стыке двух таких секций светлый низ одной сразу
     упирался в тёмный верх следующей, и это читалось как жёсткая линия. Теперь один плоский
     полупрозрачный тон на все три подряд идущие секции — граница между ними физически не
     существует (одинаковый цвет с обеих сторон), а лёгкая прозрачность (0.9) даёт сквозь
     нейросети/canvas #neurons тихое, но заметное свечение вместо полностью непрозрачного фона. */
  background: rgba(11, 15, 26, 0.9);
  text-align: center;
}
/* Research Lab — та же "средняя полоса", но чуть прозрачнее: больше видно сквозного
   нейронного свечения (не отдельный фон/стиль, просто на пару процентов легче). */
.research-lab { background: rgba(11, 15, 26, 0.82); }
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-md);
  max-width: 1100px;
  margin: var(--space-lg) auto 0;
}
.service-card {
  position: relative;
  flex: 1 1 280px;
  max-width: 340px;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border-radius: 22px;
  text-align: left;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(140, 190, 255, 0.12), transparent 60%),
    linear-gradient(165deg, rgba(120, 170, 255, 0.08) 0%, rgba(40, 70, 130, 0.05) 45%, rgba(6, 10, 22, 0.4) 100%);
  border: 1px solid rgba(140, 190, 255, 0.18);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -20px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(90, 190, 255, 0.4);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(90, 190, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.service-card--primary {
  flex-basis: 340px;
  max-width: 380px;
  border-color: rgba(208, 168, 93, 0.3);
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(208, 168, 93, 0.12), transparent 60%),
    linear-gradient(165deg, rgba(120, 170, 255, 0.1) 0%, rgba(40, 70, 130, 0.06) 45%, rgba(6, 10, 22, 0.4) 100%);
}
.service-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.service-title {
  font-size: 1.35rem;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.service-badge {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 3px 10px;
  border-radius: 20px;
}
.service-text {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
}
/* Пакеты (Phase 5): состав внутри карточки-пакета + плейсхолдер срока/цены — тот же
   .service-card, просто с двумя доп. элементами внутри, никакой новой механики. */
.service-list {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}
.service-meta {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  opacity: 0.7;
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(140, 190, 255, 0.12);
}
@media (max-width: 768px) {
  .services { padding: var(--space-lg) var(--space-sm); }
  .services-grid { gap: var(--space-sm); }
  .service-card, .service-card--primary { flex-basis: 100%; max-width: 420px; }
}

/* Направления CardForge выросли с 3 до 4 карточек (добавлен Trend Radar) — общий
   .services-grid (flex-wrap) используют ещё Pain и Packages с их 4 карточками, их не трогаю.
   Только для #services — явная сетка 2×2: AI Content/AI Research сверху (полная яркость,
   AI Content уже золотой primary), Trend Radar/AI Websites снизу (оба --soon, приглушены —
   это и есть "второстепенные", без доп. CSS под размер). Одно и то же 2×2 на desktop и
   tablet, mobile — 1 колонка. */
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}
#services .services-grid .service-card,
#services .services-grid .service-card--primary {
  max-width: none;
}
@media (max-width: 768px) {
  #services .services-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* Packages идёт следом за Video-showcase (тот заканчивается на #0a1424) — переопределяем
   общий фон .services только для этой секции, чтобы стык был бесшовным, не трогая
   Pain/Services (у них свой контекст — после About). */
.packages-section {
  background: linear-gradient(180deg, #0a1424 0%, #0d1220 100%);
}

/* === Research Lab: внутренний "экран" AI Research внутри той же страницы (не отдельный
   HTML-файл). Секция .services (тот же общий вид заголовка/eyebrow), два стеклянных
   media-window бок о бок — левое "AI-анализ", правое "проверка в рынке". Видео опциональны
   (assets/research/*.mp4) — если файла нет, <video> прячет себя через onerror и под ним
   виден CSS-плейсхолдер (faux terminal / faux market data), который работает сам по себе. */
.research-windows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 1100px;
  margin: var(--space-lg) auto 0;
  text-align: left;
}
.research-window-index {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.research-window-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(140, 190, 255, 0.12), transparent 60%),
    linear-gradient(165deg, rgba(120, 170, 255, 0.08) 0%, rgba(40, 70, 130, 0.05) 45%, rgba(6, 10, 22, 0.55) 100%);
  border: 1px solid rgba(140, 190, 255, 0.18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.research-window-caption {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* --- Плейсхолдер 1: faux terminal (виден, пока research-process.mp4 не загрузился/не существует) --- */
.rp {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  font-family: 'Courier New', monospace;
}
.rp-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(6, 10, 22, 0.55);
  border-bottom: 1px solid rgba(140, 190, 255, 0.14);
}
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.rp-dot:nth-child(1) { background: #e2685f; }
.rp-dot:nth-child(2) { background: #e0b04e; }
.rp-dot:nth-child(3) { background: #5fbf6f; }
.rp-terminal-title {
  margin-left: 8px;
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-terminal-body { padding: 14px 16px; }
.rp-line {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-line--prompt { color: #6fd0ff; }
.rp-keyword-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--color-muted);
  margin: 6px 0;
}
.rp-bar { flex: 1; max-width: 96px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rp-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #3fa9f5, #6fd0ff); border-radius: 2px; }
.rp-line--cursor { color: rgba(214, 232, 255, 0.85); }
.rp-caret { display: inline-block; width: 6px; height: 12px; margin-left: 2px; background: #6fd0ff; vertical-align: -2px; animation: rp-blink 1s step-end infinite; }
@keyframes rp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- Плейсхолдер 2: faux market data (research-verify.mp4) --- */
.rp-market { padding: 16px; font-family: var(--font-body); }
.rp-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--color-muted);
  background: rgba(6, 10, 22, 0.55);
  border: 1px solid rgba(140, 190, 255, 0.16);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-searchbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.rp-datacards { display: flex; gap: 8px; margin-top: 12px; }
.rp-datacard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(140, 190, 255, 0.06);
  border: 1px solid rgba(140, 190, 255, 0.14);
}
.rp-datacard-num { font-family: var(--font-display); font-size: 0.85rem; color: var(--color-text); }
.rp-datacard-label { font-size: 0.62rem; color: var(--color-muted); }
/* Реальные агрегаты выдачи вместо выдуманных карточек-конкурентов (Метрика | Значение,
   переиспользует ту же .rp-table-row — она уже была flex space-between на 2+ ячейки). */
.rp-table { margin-top: 12px; display: flex; flex-direction: column; }
.rp-table-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--color-muted);
  padding: 6px 0;
  border-top: 1px solid rgba(140, 190, 255, 0.1);
  white-space: nowrap;
}

/* Мягкая scan-line: тонкая светящаяся полоса медленно едет сверху вниз по плейсхолдеру —
   единственная анимация в мокапе, намекает на "живой" AI-процесс, а не статичный скриншот. */
.rp-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  top: -40%;
  background: linear-gradient(180deg, transparent, rgba(111, 208, 255, 0.06), transparent);
  animation: rp-scan 6s linear infinite;
  pointer-events: none;
}
@keyframes rp-scan { from { top: -40%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .rp-scanline { animation: none; display: none; }
  .rp-caret { animation: none; opacity: 1; }
}

.research-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: var(--space-lg) auto 0;
}
.research-chip {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(214, 232, 255, 0.8);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(140, 190, 255, 0.14), transparent 70%),
    linear-gradient(165deg, rgba(120, 170, 255, 0.06) 0%, rgba(20, 30, 55, 0.3) 100%);
  border: 1px solid rgba(140, 190, 255, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.research-chip:hover { border-color: rgba(90, 190, 255, 0.5); color: var(--color-text); }

/* Пояснение "это карта ключей, не проверка одного ключа" — между окнами и общими тегами
   секции, чтобы 청바지/29 500 в окне 01 не читалось как "проверили один ключ". Мельче
   section-sub, но крупнее research-note (это разъяснение метода, не мелкая сноска-источник). */
.research-explainer {
  max-width: 680px;
  margin: var(--space-lg) auto 0;
  text-align: center;
}
.research-explainer-text {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.6;
}
.research-explainer-text strong { color: var(--color-text); font-weight: 600; }
.research-explainer-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-sm);
}
.research-chip--mini { font-size: 0.64rem; padding: 4px 10px; }
.research-explainer-note {
  margin-top: var(--space-xs);
  font-size: 0.76rem;
  color: var(--color-muted);
  opacity: 0.7;
}

/* Маленькая спокойная подпись под источник данных — не часть основного текста секции,
   поэтому мельче и тише section-sub, без своего фона/рамки. */
.research-note {
  max-width: 640px;
  margin: var(--space-md) auto 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-muted);
  opacity: 0.75;
  text-align: center;
  line-height: 1.5;
}

/* Trust-strip: маленькая стеклянная полоска-подтверждение под тегами — фон заметно тише
   .research-window-frame (0.04 против 0.08+ и без box-shadow), чтобы не спорить с главными
   окнами. Кнопка копирует ключевое слово через Clipboard API с fallback на execCommand;
   если оба недоступны, клик просто ничего не делает — секция не ломается. */
.research-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 640px;
  margin: var(--space-md) auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(140, 190, 255, 0.04);
  border: 1px solid rgba(140, 190, 255, 0.12);
  text-align: center;
}
.research-trust-text {
  font-size: 0.74rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.research-trust-text strong { color: var(--color-text); font-weight: 600; }
.research-trust-copy {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: rgba(214, 232, 255, 0.85);
  background: rgba(140, 190, 255, 0.08);
  border: 1px solid rgba(140, 190, 255, 0.22);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.research-trust-copy:hover { border-color: rgba(90, 190, 255, 0.5); color: var(--color-text); }
.research-trust-copy.is-copied { color: #6fd0ff; border-color: rgba(90, 190, 255, 0.6); background: rgba(90, 190, 255, 0.1); }
@media (max-width: 480px) {
  .research-trust-strip { padding: 8px 12px; gap: 6px; }
  .research-trust-text { font-size: 0.7rem; }
}

@media (max-width: 1024px) {
  .research-windows { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 768px) {
  /* Окно 02 после замены на реальные данные (3 datacard + 4-строчная таблица метрик)
     стало выше, чем помещалось в 4:3 — контент обрезался снизу. Увеличил соотношение
     и подрезал внутренние отступы именно в market-плейсхолдере, чтобы поместилось
     без выхода за рамки на 390-430px. */
  .research-window-frame { aspect-ratio: 9 / 8; }
  .rp-market { padding: 12px; }
  .rp-datacards { flex-wrap: wrap; margin-top: 8px; }
  .rp-datacard { flex-basis: 44%; padding: 6px 10px; }
  .rp-table { margin-top: 8px; }
  .rp-table-row { padding: 4px 0; }
  .rp-table-row, .rp-line, .rp-keyword-row { font-size: 0.68rem; }
}

/* Заголовок секции — та же стеклянная/металлическая подача, что и логотип CardForge в hero:
   тёмно-синее стекло-панель за текстом, золотой глянцевый градиент текста (.glossy-text),
   голубой размытый дубль-слой (объём/свечение) и медленный бегущий блик — продолжение hero. */
.lc-title-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto var(--space-sm);
  padding: 26px 48px;
}
.lc-title-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(140, 190, 255, 0.16), transparent 60%),
    linear-gradient(165deg, rgba(120, 170, 255, 0.10) 0%, rgba(40, 70, 130, 0.06) 45%, rgba(6, 10, 22, 0.28) 100%);
  border: 1px solid rgba(140, 190, 255, 0.25);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 0 70px rgba(70, 150, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 2px 8px rgba(255, 255, 255, 0.06),
    inset 0 -24px 46px rgba(0, 0, 0, 0.28),
    inset 0 0 60px rgba(70, 150, 255, 0.08);
}
.lc-title-panel::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -25%;
  width: 55%;
  height: 180%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.02) 55%, transparent);
  transform: rotate(8deg) translateX(0);
  pointer-events: none;
  animation: glass-sheen 11s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .lc-title-panel::before { animation: none; } }
.lc-title-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: #6fd0ff;
  filter: blur(16px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
.lc-title {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.32),
    0 3px 2px rgba(0, 0, 0, 0.28),
    0 6px 10px rgba(0, 0, 0, 0.4),
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(110, 190, 255, 0.3);
}

/* Раскрытие карточки поверх остального контента: карточка временно переносится в
   #mediaStage (position: fixed, координаты — те же, что были на исходном месте) и едет
   в центр экрана, с лёгким разворотом вокруг вертикальной оси в процессе. Движок общий
   для кейсов в "Из фото — в видео", см. window.__mediaOpen/__mediaClose в script.js. */
.media-stage {
  position: fixed;
  inset: 0;
  z-index: 900;
  perspective: 1600px;
  pointer-events: none;
}
.media-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.media-backdrop--visible { opacity: 1; pointer-events: auto; cursor: zoom-out; }

.media-close {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(140, 190, 255, 0.3);
  background: rgba(6, 10, 22, 0.55);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.2s ease;
}
.media-close:hover { background: rgba(20, 30, 55, 0.75); }
.media-close--visible { opacity: 1; pointer-events: auto; }

/* transition для left/top/width/height задаётся инлайн из script.js (MOVE_TRANSITION) —
   намеренно НЕ здесь, иначе при равной специфичности класса выигрывает то правило, что ниже
   по файлу (transition у .video-photo/.video-player тоже трогает box-shadow). */
.media-expanded {
  margin: 0 !important;
  z-index: 1000;
  cursor: zoom-out;
  pointer-events: auto;
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6), 0 0 90px rgba(90, 190, 255, 0.35);
  border-color: rgba(90, 190, 255, 0.6);
}
.media-expand-spin { animation: media-spin-open 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.media-collapse-spin { animation: media-spin-close 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes media-spin-open {
  0% { transform: rotateY(0deg); }
  45% { transform: rotateY(15deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes media-spin-close {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-11deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .media-expand-spin, .media-collapse-spin { animation: none; }
  .media-backdrop { transition: none; }
}

@media (max-width: 768px) {
  .lc-title-wrap { padding: 18px 24px; }
}

/* === Portfolio: до / после (3 товара × 2 ячейки) ===
   Мостик между опаковой атмосферой Motion и спокойно возвращающейся нейросетью CTA:
   фон начинается там же, где заканчивается Product Card, и постепенно светлеет/прозрачнеет —
   к низу секции сквозной neuron-canvas сайта уже может естественно проступать. */
.portfolio {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  background: linear-gradient(180deg,
    var(--color-surface) 0%,
    #0d1626 35%,
    rgba(15, 23, 42, 0.55) 75%,
    rgba(15, 23, 42, 0.1) 100%);
}
.portfolio::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -10%; left: 50%;
  width: 50vw; height: 40vw;
  max-width: 520px; max-height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(90, 190, 255, 0.14), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.portfolio .lc-title-wrap { position: relative; z-index: 1; }
.portfolio .section-sub { position: relative; z-index: 1; }
.section-sub {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}

.case-groups {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.ba-tag {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  background: rgba(15, 23, 42, 0.7);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.ba-tag--after { background: var(--color-accent); color: var(--color-bg); }

.soon-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-muted);
  border: 1px solid rgba(154, 163, 178, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-align: center;
}

@media (max-width: 768px) {
  .portfolio { padding: var(--space-lg) var(--space-sm); }
  .soon-label { font-size: 0.7rem; padding: 0.4rem 0.6rem; }
}

/* === Из фото — в видео: 6 кейсов (фото сверху, видео снизу) в горизонтальном ряду.
   Раскрытие фото/видео по клику — тот же общий .media-* движок, что и веер "Живые карточки".
   Секция намеренно НЕ повторяет фон Hero: градиент-продолжение цвета предыдущей секции
   + мягкие световые волны — "готовый результат" после "процесса" второй секции. === */
.video-showcase {
  position: relative;
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  /* Video-showcase теперь идёт после Portfolio — тот гаснет почти до прозрачности
     (виден var(--color-bg) сквозь неё), поэтому стартуем с того же цвета. */
  background: linear-gradient(180deg,
    var(--color-bg) 0%,
    #0a1220 30%,
    #0c1a2e 65%,
    #0a1424 100%);
}
.video-showcase .eyebrow { position: relative; z-index: 1; justify-content: center; }
.video-showcase .lc-title-wrap,
.video-showcase .section-sub { position: relative; z-index: 1; }

/* Атмосфера: мягкие объёмные световые волны, медленно дрейфующие — без хаоса и частиц,
   спокойный премиальный "выдох" после процесса генерации. Плавно проявляется при попадании
   секции в вид (класс is-visible из script.js) — переход со второй секции без резкого обрыва. */
.vshow-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.vshow-atmosphere.is-visible { opacity: 1; }
/* Всего 2 пятна (не 3) и умеренный blur — мягкое свечение без лишней постоянной нагрузки
   на рендер (по соседству и так уже работают canvas-сеть нейронов и автовидео в кейсах). */
.vshow-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.4;
  will-change: transform;
}
.vshow-glow--1 {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  left: -10%; top: 6%;
  background: radial-gradient(circle, rgba(90, 190, 255, 0.5), transparent 70%);
  animation: vshow-drift-1 22s ease-in-out infinite;
}
.vshow-glow--2 {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  right: -8%; bottom: -6%;
  background: radial-gradient(circle, rgba(208, 168, 93, 0.32), transparent 70%);
  animation: vshow-drift-2 26s ease-in-out infinite;
}
@keyframes vshow-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 3%) scale(1.08); } }
@keyframes vshow-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, -2%) scale(1.05); } }

/* Тонкие светящиеся линии и лёгкие частицы — спокойный "результат готов", без потоков и спешки
   (в отличие от Build, тут не нужен canvas: рядом и так уже играют видео-кейсы). */
.vshow-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 190, 255, 0.28), transparent);
  opacity: 0.35;
  animation: vshow-line-shimmer 9s ease-in-out infinite;
}
.vshow-line--1 { top: 20%; left: 4%; width: 42%; transform: rotate(-2deg); }
.vshow-line--2 { top: 72%; right: 6%; width: 36%; transform: rotate(1.5deg); animation-delay: 2s; }
@keyframes vshow-line-shimmer { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }

.vshow-mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8fe3ff;
  box-shadow: 0 0 8px 2px rgba(90, 190, 255, 0.45);
  opacity: 0.5;
  animation: vshow-mote-float 12s ease-in-out infinite;
}
@keyframes vshow-mote-float {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-22px); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .vshow-glow, .vshow-line, .vshow-mote { animation: none; }
  .vshow-atmosphere { transition: none; opacity: 1; }
}

/* Ряд кейсов: всегда горизонтальная линия (и на мобильном тоже) — скролл вместо переноса вниз */
.vshow-row-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 1400px;
  margin: var(--space-lg) auto 0;
}
.vshow-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-sm) var(--space-xs) var(--space-md);
  scrollbar-width: none;
}
.vshow-row::-webkit-scrollbar { display: none; }

.vshow-case {
  flex: 0 0 auto;
  width: min(280px, 72vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  scroll-snap-align: center;
}
.vshow-case--soon { opacity: 0.6; }
.vshow-case-label {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.vshow-arrow {
  position: relative;
  color: var(--color-accent);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  animation: vshow-arrow-pulse 2.4s ease-in-out infinite;
}
/* Тонкая световая полоса, стекающая через стрелку — короткий, ясный "путь" энергии из фото
   в видео, ровно то место, где происходит "оживление". Не canvas, не новый DOM-узел. */
.vshow-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -16px;
  width: 2px;
  height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(90, 190, 255, 0.85), transparent);
  opacity: 0;
  animation: vshow-flow-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--flow-delay, 0s);
}
@media (prefers-reduced-motion: reduce) { .vshow-arrow, .vshow-arrow::after { animation: none; } }
@keyframes vshow-arrow-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(3px); }
}
@keyframes vshow-flow-pulse {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  35%  { opacity: 1; }
  75%  { opacity: 0; transform: translateX(-50%) translateY(16px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

.video-photo, .video-player {
  position: relative; /* якорь для .case-card-before, когда у кейса есть кнопка "До" */
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(208, 168, 93, 0.12);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.video-photo:hover, .video-player:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(90, 190, 255, 0.55);
  box-shadow: 0 20px 50px rgba(90, 190, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.video-photo.vshow-media--soon, .video-player.vshow-media--soon { cursor: default; }
.video-photo.vshow-media--soon:hover, .video-player.vshow-media--soon:hover {
  transform: none;
  border-color: rgba(208, 168, 93, 0.12);
  box-shadow: none;
}
.video-photo img,
.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(208, 168, 93, 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Стрелки прокрутки ряда — то же стеклянное решение, что и кнопка закрытия media-оверлея */
.vshow-nav {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(140, 190, 255, 0.3);
  background: rgba(6, 10, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.25s ease, background 0.2s ease;
}
.vshow-nav:hover { background: rgba(20, 30, 55, 0.75); }
.vshow-nav--disabled { opacity: 0.25; pointer-events: none; }

@media (max-width: 768px) {
  .video-showcase { padding: var(--space-lg) var(--space-sm); }
  .vshow-nav { display: none; }
  .vshow-case { width: min(240px, 76vw); }
}

/* === CTA === */
.cta-section {
  position: relative;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  /* Продолжает тёмный градиент .services (Packages заканчивается на #0d1220) и мягко
     возвращает к базовому фону страницы — без этого CTA падал на var(--color-bg) резким швом. */
  background: linear-gradient(180deg, #0d1220 0%, var(--color-bg) 100%);
}
.cta-section h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: var(--space-xs); max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-section > p:not(.cta-note) { color: var(--color-muted); margin-bottom: var(--space-md); }

.btn-primary {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Secondary/ghost-кнопка — тот же размер, что .btn-primary, но тише (обводка, без заливки),
   чтобы рядом с ней primary-кнопка оставалась главной. Используется в Hero. */
.btn-secondary {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(140, 190, 255, 0.35);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.btn-secondary:hover {
  border-color: rgba(140, 190, 255, 0.7);
  background: rgba(140, 190, 255, 0.08);
  transform: translateY(-2px);
}
.cta-note { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-sm); }


@media (max-width: 768px) {
  .cta-section { padding: var(--space-lg) var(--space-sm); }
}

/* === Footer === */
.footer {
  padding: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .footer { flex-direction: column; text-align: center; }
}

/* === Media gallery: портфолио теперь открывается через тот же общий #mediaStage,
   что и "Живые карточки"/Motion (единый backdrop, единая кнопка закрытия, единый
   Escape) — просто другой РЕЖИМ содержимого (последовательность картинок вместо
   FLIP-увеличения одной карточки), см. window.__galleryOpen в script.js. Фон здесь
   не нужен — тёмный дим уже даёт .media-backdrop под этим слоем. === */
.media-gallery {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.media-gallery--visible { opacity: 1; pointer-events: auto; cursor: zoom-out; }
.media-gallery-inner { max-width: 720px; width: 100%; border-radius: 12px; overflow: hidden; cursor: default; }
.media-gallery-inner img,
.media-gallery-inner video { width: 100%; display: block; }

@media (max-width: 768px) {
  .media-gallery { padding: var(--space-md) 0; }
}

/* === Phase 4, performance pass: backdrop-filter — одна из самых дорогих операций для слабых
   мобильных GPU, особенно на элементах, которые пересчитываются постоянно (фикс. хедер) или
   занимают весь экран (media-backdrop). Здесь ТОЛЬКО уменьшается радиус блюра — фирменный
   стеклянный стиль (цвет/прозрачность/бренд) не меняется, экран по-прежнему выглядит "стеклом",
   просто дешевле для рендера. Блок намеренно в самом конце файла — иначе более поздние правила
   с той же специфичностью (например, сам .site-header) перебили бы его в каскаде. === */
@media (max-width: 768px) {
  .site-header { backdrop-filter: blur(6px); }
  .lc-title-panel { backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
  .media-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .media-close { backdrop-filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .media-gallery { transition: none; }
}


/* ==========================================================================
   CardForge Operator Console — 2026 redesign
   Visual system: graphite / warm gold / milk white / restrained system cyan.
   This block intentionally sits last so the redesigned composition can retain
   the proven gallery, live-card and video mechanics without old art direction.
   ========================================================================== */

:root {
  --color-bg: #05070a;
  --color-surface: #0b0f14;
  --color-text: #f5f1e8;
  --color-muted: #a8afb8;
  --color-accent: #d7b878;
  --color-system: #74d8ff;
  --color-line: rgba(231, 214, 177, 0.16);
  --color-line-strong: rgba(231, 214, 177, 0.34);
  --panel: rgba(11, 15, 20, 0.84);
  --panel-solid: #0d1117;
  --shadow-deep: 0 28px 90px rgba(0, 0, 0, 0.46);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --content-width: 1200px;
  --hero-progress: 0%;
}

body.operator-console {
  position: relative;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -10%, rgba(31, 47, 61, 0.34), transparent 38rem),
    linear-gradient(180deg, #05070a 0%, #070a0f 45%, #05070a 100%);
  color: var(--color-text);
  font-size: 17px;
}

body.operator-console::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent 82%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent 82%);
}

body.operator-console::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(116, 216, 255, 0.04), transparent 38rem);
}

.operator-console main {
  position: relative;
  z-index: 1;
}

.operator-console section {
  scroll-margin-top: 84px;
}

.operator-console a,
.operator-console button {
  -webkit-tap-highlight-color: transparent;
}

.operator-console :focus-visible {
  outline: 2px solid var(--color-system);
  outline-offset: 4px;
}

.operator-console [role="button"]:not(button) {
  cursor: pointer;
}

.operator-console .video-photo:focus-visible,
.operator-console .video-player:focus-visible,
.operator-console .short-media:focus-visible {
  border-color: rgba(116, 216, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(116, 216, 255, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.36);
}

.operator-console .btn-primary,
.operator-console .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.78rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.operator-console .btn-primary {
  border: 1px solid rgba(255, 243, 216, 0.78);
  background: linear-gradient(135deg, #f4e7ca, #cfa965 72%, #f6ead2);
  color: #111317;
  box-shadow: 0 10px 36px rgba(207, 169, 101, 0.18);
}

.operator-console .btn-secondary {
  border: 1px solid var(--color-line-strong);
  background: rgba(10, 14, 19, 0.72);
  color: var(--color-text);
  backdrop-filter: blur(12px);
}

@media (hover: hover) and (pointer: fine) {
  .operator-console .btn-primary:hover,
  .operator-console .btn-secondary:hover {
    transform: translateY(-2px);
  }

  .operator-console .btn-primary:hover {
    box-shadow: 0 16px 44px rgba(207, 169, 101, 0.26);
  }

  .operator-console .btn-secondary:hover {
    border-color: rgba(116, 216, 255, 0.46);
    background: rgba(17, 24, 31, 0.88);
  }
}

.operator-console [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* Header */
.operator-console .site-header {
  min-height: 72px;
  padding: 10px clamp(18px, 3vw, 48px);
  background: rgba(5, 7, 10, 0.78);
  border-bottom: 1px solid rgba(231, 214, 177, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px) saturate(1.12);
}

.operator-console .logo {
  position: relative;
  min-height: 44px;
  color: var(--color-text);
  font-size: 1.22rem;
  letter-spacing: -0.035em;
}

.operator-console .logo::after {
  content: "CF / 2026";
  margin-left: 0.75rem;
  color: var(--color-accent);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.operator-console .nav {
  align-items: center;
  gap: 0.2rem;
}

.operator-console .nav a {
  min-height: 42px;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  color: #b9bec6;
  font-size: 0.78rem;
  font-weight: 500;
}

.operator-console .nav a:hover,
.operator-console .nav a[aria-current="true"] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

.operator-console .nav .nav-cta {
  margin-left: 0.45rem;
  border: 1px solid rgba(215, 184, 120, 0.35);
  color: #ead8b2;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.72rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text);
  font: 600 0.75rem/1 var(--font-display);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.nav-is-open .nav-toggle-icon { background: transparent; }
.nav-is-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-is-open .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }

/* Hero video system */
.hero-video-hero {
  position: relative;
  min-height: 100svh;
  padding: 88px 16px 72px;
  overflow: clip;
}

.hero-video-hero::before {
  content: "";
  position: absolute;
  inset: 14% 12% auto;
  height: 56%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(91, 174, 217, 0.12), transparent 68%);
  filter: blur(40px);
}

.hero-video-stage {
  position: relative;
  width: min(1460px, calc(100vw - 32px), calc((100svh - 260px) * 1.7778));
  margin: 0 auto;
  transition:
    width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(223, 205, 163, 0.22);
  border-radius: var(--radius-lg);
  background: #020407;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    var(--shadow-deep);
  isolation: isolate;
}

.hero-media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: inherit;
}

.hero-media-frame::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 8;
  width: var(--hero-progress);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), #f7ead0, var(--color-system));
  box-shadow: 0 0 18px rgba(116, 216, 255, 0.5);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-video,
.hero-final-poster,
.hero-final-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-video,
.hero-final-poster img {
  object-fit: contain;
  object-position: 50% 50%;
}

.hero-video {
  z-index: 1;
  background: #020407;
  transition: opacity 0.45s ease;
}

.hero-final-poster {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.hero-video-stage.is-ended .hero-video,
.hero-static .hero-video {
  opacity: 0;
}

.hero-video-stage.is-ended .hero-final-poster,
.hero-static .hero-final-poster {
  opacity: 1;
}

.hero-media-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 4, 7, 0.55), transparent 35%, transparent 76%, rgba(2, 4, 7, 0.24)),
    linear-gradient(0deg, rgba(2, 4, 7, 0.8), transparent 38%);
}

.hero-system-status {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 34px;
  padding: 0.46rem 0.7rem;
  border: 1px solid rgba(116, 216, 255, 0.2);
  border-radius: 999px;
  background: rgba(3, 7, 11, 0.66);
  color: #95a4af;
  font: 500 0.63rem/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.hero-system-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-system);
  box-shadow: 0 0 14px rgba(116, 216, 255, 0.9);
}

.hero-system-status strong {
  color: #d9f5ff;
  font-weight: 500;
}

/* Текст стоит РЯДОМ с кадром, а не поверх него: четыре карточки в ролике занимают
   почти всю площадь кадра по горизонтали и 25–82% по вертикали, поэтому любая
   накладная панель закрывает 01–03. Свободного места внутри кадра нет — только
   верхняя полоса с оператором и нижняя с подиумом. */
.hero-copy {
  position: relative;
  z-index: 12;
  width: 100%;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(231, 214, 177, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(17, 23, 30, 0.94), rgba(8, 11, 15, 0.84)),
    rgba(8, 11, 15, 0.9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

.hero-eyebrow,
.module-index {
  color: var(--color-accent);
  font: 600 0.68rem/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 17ch;
  margin-top: 1rem;
  color: var(--color-text);
  font-size: clamp(2.2rem, 3.65vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
  background: linear-gradient(118deg, #fff 4%, #efe5d1 46%, #d6b779 67%, #fff5e1 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.no-wrap {
  white-space: nowrap;
}

.hero-subtitle {
  max-width: 64ch;
  margin-top: 1.25rem;
  color: #c1c6cc;
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.operator-console .hero-actions {
  position: static;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.65rem;
  margin-top: 1.5rem;
  transform: none;
}

.hero-proof-note {
  margin-top: 1.25rem;
  color: #858e99;
  font: 500 0.68rem/1.4 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-video-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  gap: 0.45rem;
}

.hero-control {
  min-height: 40px;
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(231, 214, 177, 0.18);
  border-radius: 999px;
  background: rgba(4, 7, 10, 0.72);
  color: #d5d9dc;
  font: 500 0.68rem/1 var(--font-display);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.hero-control:hover,
.hero-control[aria-pressed="true"] {
  border-color: rgba(116, 216, 255, 0.48);
  background: rgba(11, 23, 31, 0.84);
  color: #dff7ff;
}

.hero-scroll-cue {
  position: absolute;
  right: 1rem;
  bottom: -3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #8e969f;
  font: 500 0.68rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-scroll-cue i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

/* Hotspots match the final 1920×1080 frame exactly. */
.hero-hotspots {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero-video-stage.is-ended .hero-hotspots,
.hero-static .hero-hotspots {
  opacity: 1;
  visibility: visible;
}

.hero-hotspot {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 245, 221, 0.24);
  border-radius: 5%;
  color: var(--color-text);
  text-decoration: none;
  pointer-events: auto;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.hero-hotspot--01 { left: 2.71%; top: 24.72%; width: 20.68%; height: 57.22%; }
.hero-hotspot--02 { left: 25.73%; top: 27.04%; width: 22.71%; height: 53.15%; }
.hero-hotspot--03 { left: 50.57%; top: 27.5%; width: 19.58%; height: 53.33%; }
.hero-hotspot--04 { left: 72.34%; top: 24.91%; width: 25.83%; height: 58.24%; }

.hero-hotspot > span {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 245, 221, 0.28);
  border-radius: 50%;
  background: rgba(4, 7, 10, 0.78);
  color: #efe1c5;
  font: 600 0.58rem/1 var(--font-display);
}

.hero-hotspot strong {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(116, 216, 255, 0.22);
  border-radius: 999px;
  background: rgba(3, 7, 11, 0.9);
  color: #e9f8fd;
  font: 500 0.64rem/1 var(--font-display);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-hotspot:hover strong,
.hero-hotspot:focus-visible strong,
.hero-hotspot.is-active strong {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hero-hotspot:hover,
.hero-hotspot:focus-visible,
.hero-hotspot.is-active,
body[data-hero-state="01"] .hero-hotspot--01,
body[data-hero-state="02"] .hero-hotspot--02,
body[data-hero-state="03"] .hero-hotspot--03,
body[data-hero-state="04"] .hero-hotspot--04 {
  border-color: rgba(116, 216, 255, 0.9);
  background: rgba(116, 216, 255, 0.055);
  box-shadow:
    0 0 0 1px rgba(116, 216, 255, 0.22) inset,
    0 0 32px rgba(116, 216, 255, 0.2);
}

/* Шкала пересчитана 29.08.2026 под новый порядок разделов. Состояний осталось
   четыре: Метод → Карточка → Видео → Research. Секции 04 (Websites) и complete
   больше не рендерятся, поэтому лента должна доходить до 100% на Research,
   иначе прогресс навсегда застревал бы на 61%. */
body[data-hero-state="00"] { --hero-progress: 12%; }
body[data-hero-state="01"] { --hero-progress: 42%; }
body[data-hero-state="02"] { --hero-progress: 72%; }
body[data-hero-state="03"] { --hero-progress: 100%; }

/* Shared section system */
.section-shell {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
}

.narrative-section {
  position: relative;
  min-height: auto;
  padding: clamp(92px, 10vw, 144px) 0;
  isolation: isolate;
}

.narrative-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--content-width), calc(100% - 40px));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line), transparent);
  transform: translateX(-50%);
}

.module-heading {
  max-width: 880px;
  text-align: left;
}

.module-index {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.module-index span {
  display: inline-grid;
  min-width: 34px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(215, 184, 120, 0.32);
  border-radius: 999px;
  background: rgba(215, 184, 120, 0.05);
}

.module-index em {
  margin-left: 0.35rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(116, 216, 255, 0.25);
  border-radius: 999px;
  color: var(--color-system);
  font-size: 0.58rem;
  font-style: normal;
}

.module-heading h2,
.system-complete h2 {
  max-width: 20ch;
  color: var(--color-text);
  font-size: clamp(2.35rem, 4.2vw, 4.5rem);
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.module-heading > p:last-child {
  max-width: 70ch;
  margin-top: 1.35rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}

.method-section {
  background: linear-gradient(180deg, rgba(7, 10, 14, 0.2), rgba(11, 15, 20, 0.74));
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(42px, 6vw, 78px);
}

.method-card {
  position: relative;
  min-height: 260px;
  padding: clamp(22px, 2.5vw, 32px);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 48%),
    var(--panel);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.method-card::after,
.website-slot::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -46%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(116, 216, 255, 0.11);
  border-radius: 50%;
}

.method-card > span,
.website-slot > span {
  color: var(--color-accent);
  font: 600 0.63rem/1 var(--font-display);
  letter-spacing: 0.12em;
}

.method-card h3,
.website-slot h3 {
  max-width: 13ch;
  margin-top: 4rem;
  color: var(--color-text);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  letter-spacing: -0.03em;
}

.method-card p,
.website-slot p {
  max-width: 33ch;
  margin-top: 0.85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .method-card:hover,
  .website-slot:hover,
  .operator-console .service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(215, 184, 120, 0.35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  }
}

.operator-console .product-card-section,
.operator-console .research-lab,
.operator-console .packages-section {
  width: 100%;
  max-width: none;
  margin: 0;
}

.operator-console .product-card-section {
  background:
    radial-gradient(circle at 75% 30%, rgba(215, 184, 120, 0.055), transparent 25rem),
    rgba(5, 7, 10, 0.44);
}

/* Второй ряд прайса: исследование стоит рядом с карточками, но это другая услуга —
   подзаголовок отделяет их, не разрывая единый блок цен. */
.packages-row-title {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(48px, 6vw, 76px) auto 0;
  color: var(--color-accent);
  font: 600 0.72rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}


.operator-console .packages-section .services-grid {
  width: min(var(--content-width), calc(100% - 40px));
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: clamp(42px, 6vw, 72px) auto 0;
}

.operator-console .service-card {
  min-height: 320px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.03), transparent 44%),
    rgba(10, 14, 19, 0.82);
  box-shadow: none;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.operator-console .service-card--primary {
  border-color: rgba(215, 184, 120, 0.38);
  background:
    linear-gradient(145deg, rgba(215, 184, 120, 0.09), transparent 54%),
    rgba(13, 17, 22, 0.92);
}

.operator-console .service-index {
  color: var(--color-accent);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.operator-console .service-title {
  margin-top: 3.4rem;
  color: var(--color-text);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.operator-console .service-text,
.operator-console .service-list,
.operator-console .service-meta {
  color: var(--color-muted);
}

.evidence-note {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(32px, 4vw, 54px) auto 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(215, 184, 120, 0.07), transparent 70%);
  color: #aeb4bc;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Короткий хук между Hero и Методом (29.08.2026) — проблема перед решением.
   Нарочно лёгкий: без eyebrow/module-index/большого заголовка, чтобы читаться
   как продолжение Hero, а не как ещё одна полноценная глава. */
.pain-hook {
  position: relative;
  padding: 0 var(--space-md) clamp(28px, 4vw, 48px);
}

.pain-board {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 52%), var(--panel);
  text-align: left;
}

.pain-board-title {
  color: var(--color-accent);
  font: 600 0.66rem/1 var(--font-display);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2.2rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pain;
}

.pain-list li {
  position: relative;
  padding-left: 2.4rem;
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.6;
  counter-increment: pain;
}

.pain-list li::before {
  content: counter(pain, decimal-leading-zero);
  position: absolute;
  top: 0.15rem;
  left: 0;
  color: #7d8590;
  font: 500 0.68rem/1 var(--font-display);
  letter-spacing: 0.08em;
}

.pain-list strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  font-weight: 600;
}

/* Мост к «00 Метод». Без него список проблем упирался прямо в заголовок
   «Ничего на глаз» — связка существовала в замысле, но не на странице.
   Набран заголовочным шрифтом: это вывод из списка, а не пятый пункт. */
.pain-bridge {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Existing proof modules, restyled but functionally preserved. */
.operator-console .portfolio,
.operator-console .video-showcase {
  min-height: auto;
  padding-right: clamp(20px, 4vw, 64px);
  padding-left: clamp(20px, 4vw, 64px);
  background: rgba(5, 7, 10, 0.72);
}

.operator-console .vshow-atmosphere,
.operator-console .research-tags {
  display: none;
}

.operator-console .eyebrow {
  color: var(--color-accent);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.operator-console .portfolio > .eyebrow,
.operator-console .video-showcase > .eyebrow,
.operator-console .research-lab > .eyebrow,
.operator-console .packages-section > .eyebrow {
  width: min(var(--content-width), 100%);
  margin: 0 auto 1rem;
  text-align: left;
}

.operator-console .lc-title-wrap {
  width: min(var(--content-width), 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.operator-console .lc-title-panel,
.operator-console .lc-title-glow {
  display: none;
}

.operator-console .lc-title {
  max-width: 18ch;
  padding: 0;
  color: var(--color-text);
  font-size: clamp(2.35rem, 4.4vw, 4.65rem);
  letter-spacing: -0.055em;
  text-align: left;
  text-wrap: balance;
  background: linear-gradient(118deg, #fff 5%, #efe5d1 48%, #d4b576 86%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: none;
}

.operator-console .section-sub {
  width: min(760px, 100%);
  max-width: none;
  margin: 1.2rem 0 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.7;
  text-align: left;
}

.operator-console .video-photo,
.operator-console .video-player {
  border-color: var(--color-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.operator-console .case-groups,
.operator-console .vshow-row-wrap,
.operator-console .research-windows,
.operator-console .research-explainer,
.operator-console .research-trust-strip,
.operator-console .research-note {
  width: min(var(--content-width), 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

/* Сетка кейсов в ритме AI Websites. auto-fit + центрирование: пока кейсов два,
   они стоят по центру без пустых заглушек; при четырёх ряд заполняется целиком,
   при шести — ложатся 4 + 2. display:grid задан явно — старая тема оставляла
   .case-groups во flex, из-за чего grid-template-columns не действовал и каждый
   кейс растягивался на всю ширину (1162px против 288px у слота Websites). */
.operator-console .case-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(42px, 6vw, 76px);
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.case-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #05070a;
}

.case-card-media > img,
.case-card-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Врезка с исходником — своя кнопка поверх результата. */
.case-card-before {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(4, 7, 10, 0.82);
  color: #cfd5dc;
  font: 600 0.62rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.case-card-before img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.case-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem 1rem;
}

.case-card-title {
  color: var(--color-text);
  font: 700 0.95rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
}

.case-card-note {
  color: var(--color-muted);
  font-size: 0.78rem;
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  .case-card:hover {
    transform: translateY(-6px);
    border-color: rgba(215, 184, 120, 0.35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  }

  .case-card:hover .case-card-media > img,
  .case-card:hover .case-card-media > video {
    transform: scale(1.04);
  }

  .case-card-before:hover {
    border-color: rgba(116, 216, 255, 0.6);
    background: rgba(11, 23, 31, 0.9);
    color: #dff7ff;
  }
}

.operator-console .case-card:focus-visible,
.case-card-before:focus-visible {
  border-color: rgba(116, 216, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(116, 216, 255, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.36);
}

@media (max-width: 767px) {
  .operator-console .case-groups {
    grid-template-columns: minmax(0, 360px);
  }

  /* Комфортная цель для пальца — не меньше 44px. */
  .case-card-before {
    min-height: 44px;
    padding: 5px 12px 5px 5px;
  }

  .case-card-before img {
    width: 34px;
    height: 34px;
  }
}

.operator-console .vshow-case--soon {
  display: none;
}

.operator-console .vshow-row {
  justify-content: center;
}

.operator-console .research-lab {
  min-height: auto;
  padding-right: clamp(20px, 4vw, 64px);
  padding-left: clamp(20px, 4vw, 64px);
  background:
    radial-gradient(circle at 50% 25%, rgba(58, 142, 180, 0.09), transparent 34rem),
    #06090d;
}

.operator-console .research-window,
.operator-console .research-explainer,
.operator-console .research-trust-strip {
  border-color: rgba(116, 216, 255, 0.14);
  background: rgba(8, 13, 18, 0.84);
}

/* Табы ниш над окнами анализа. Показываются только когда наборов больше одного —
   до этого JS держит контейнер скрытым. */
.research-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: min(var(--content-width), 100%);
  margin: 0 auto clamp(18px, 2vw, 28px);
}

.research-tab {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-muted);
  font: 500 0.78rem/1 var(--font-display);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.research-tab.is-active {
  border-color: rgba(116, 216, 255, 0.55);
  background: rgba(116, 216, 255, 0.07);
  color: #dff7ff;
}

@media (hover: hover) and (pointer: fine) {
  .research-tab:hover {
    border-color: rgba(116, 216, 255, 0.4);
    color: var(--color-text);
  }
}

/* Момент подмены набора: цифры коротко гаснут, чтобы смена читалась как обновление
   данных, а не как рывок. Это переход по классу, без покадровой анимации. */
.research-lab [data-rs],
.research-lab .rp-keyword-list {
  transition: opacity 0.18s ease;
}

.research-lab.is-swapping [data-rs],
.research-lab.is-swapping .rp-keyword-list {
  opacity: 0.15;
}

@media (prefers-reduced-motion: reduce) {
  .research-lab [data-rs],
  .research-lab .rp-keyword-list {
    transition: none;
  }
}

.operator-console .research-note {
  color: #8f98a3;
}

/* === Research: каталог услуг под интерактивной демонстрацией ===
   Переиспользует .service-card/.package-card из прайса — новых карточных стилей нет,
   только сетка на три места, блок «Что ты получишь», пример отчёта и пара кнопок. */
.research-demo-label {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-system);
}

.research-offer {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(34px, 4.5vw, 60px) auto 0;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, rgba(116, 216, 255, 0.05), transparent 48%),
    rgba(10, 14, 19, 0.72);
  text-align: left;
}

.research-offer-title {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.research-offer-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}

.research-offer-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.research-offer-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--color-system);
}

.research-offer-note {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: #8f98a3;
}

.operator-console .research-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(var(--content-width), calc(100% - 40px));
  max-width: none;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
}

/* Префикс «от» стоит перед числом — общий отступ .package-price-cur слева ему не подходит. */
.package-price-cur:first-child {
  margin-left: 0;
  margin-right: 6px;
}

.operator-console .research-services .service-card {
  min-height: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.operator-console .research-services .service-title {
  margin-top: 2.4rem;
}

.operator-console .research-services .service-meta {
  margin-top: auto;
}

.operator-console .research-services .package-cta {
  margin-top: 1rem;
}

.research-example {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(10, 14, 19, 0.72);
  text-align: left;
  scroll-margin-top: 84px;
}

.research-example-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0.6rem;
}

.research-example-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.research-example-badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 3px 10px;
  border-radius: 20px;
}

.research-example-lead {
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.research-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
}

.research-example-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.95rem 1rem;
  background: rgba(8, 11, 16, 0.92);
}

.research-example-item span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f98a3;
}

.research-example-item strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.research-example-item em {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.research-example-note {
  margin: 1.1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #8f98a3;
}

.research-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(26px, 3.2vw, 40px) auto 0;
}

@media (max-width: 1024px) {
  .operator-console .research-services,
  .research-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .operator-console .research-services,
  .research-example-grid,
  .research-offer-list {
    grid-template-columns: 1fr;
  }

  .research-actions .btn-primary,
  .research-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* Websites */
.websites-section {
  background:
    linear-gradient(180deg, rgba(5, 7, 10, 0.74), rgba(10, 15, 20, 0.84)),
    #05070a;
}

.website-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(42px, 6vw, 76px);
}

.website-slot {
  position: relative;
  min-height: 330px;
  padding: clamp(22px, 2.5vw, 32px);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 48%),
    var(--panel);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.website-slot small {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: #8f98a1;
  font: 600 0.6rem/1 var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.website-slot--active {
  border-color: rgba(116, 216, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(116, 216, 255, 0.08), transparent 56%),
    var(--panel);
}

.website-slot--active small {
  border-color: rgba(116, 216, 255, 0.3);
  color: var(--color-system);
}

/* Story completion */
.system-complete {
  position: relative;
  padding: clamp(100px, 12vw, 170px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(215, 184, 120, 0.1), transparent 32rem),
    #07090c;
}

.system-complete::before,
.system-complete::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 184, 120, 0.45));
}

.system-complete::before { left: 0; }
.system-complete::after { right: 0; transform: rotate(180deg); }

.system-complete-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.system-complete h2 {
  margin-top: 1.1rem;
}

.system-complete-inner > p {
  max-width: 64ch;
  margin-top: 1.35rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}

.system-complete .btn-secondary {
  margin-top: 2rem;
}

/* Packages and CTA */
.operator-console .packages-section {
  padding: clamp(96px, 11vw, 160px) clamp(20px, 4vw, 64px);
  background: #06080b;
}

.operator-console .packages-section .section-sub {
  max-width: 720px;
}

.operator-console .packages-section .service-card {
  min-height: 520px;
}

.operator-console .packages-section .service-title {
  margin-top: 2.7rem;
}

/* Прайс: карточки-пакеты переиспользуют .service-card. Делаем их flex-колонкой, чтобы
   цена стояла заметно вверху, а CTA прижималась к низу карточки независимо от длины
   списка. Новой механики нет — только цена и кнопка. */
.packages-section .package-card {
  display: flex;
  flex-direction: column;
}
/* Раскладка пакетов задумана сеткой: override темы уже задаёт grid-template-columns
   (4 колонки desktop, 2 — планшет, 1 — мобайл), но базовый .services-grid — flex, из-за
   чего сетка не включалась и 4 карточки вставали как 3+1. Включаем display:grid и снимаем
   max-width карточек, чтобы они заполняли колонки ровным рядом (как это уже сделано для
   #services). Адаптивные правила ниже по файлу теперь тоже начинают действовать. */
.operator-console .packages-section .services-grid {
  display: grid;
}
.operator-console .packages-section .service-card {
  max-width: none;
}
.package-price {
  font-family: var(--font-display);
  line-height: 1;
  margin: 0.1rem 0 var(--space-sm);
  color: var(--color-text);
}
.package-price-num {
  font-size: clamp(1.7rem, 2.8vw, 2.15rem);
  letter-spacing: -0.02em;
}
.package-price-cur {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-left: 6px;
}
.package-card--featured .package-price-num { color: var(--color-accent); }
.package-cta {
  margin-top: auto;            /* прижать к низу карточки */
  align-self: flex-start;
}

/* Блок «Важно» под прайсом — те же токены, что у .evidence-note (акцентная левая
   граница), но с заголовком и списком условий. */
.packages-important {
  width: min(var(--content-width), calc(100% - 40px));
  margin: clamp(32px, 4vw, 54px) auto 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(10, 14, 19, 0.6);
}
.packages-important-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.7rem;
}
.packages-important-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.packages-important-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.packages-important-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}

.operator-console .cta-section {
  position: relative;
  min-height: min(760px, 90svh);
  padding: clamp(100px, 12vw, 170px) 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(116, 216, 255, 0.08), transparent 30rem),
    linear-gradient(180deg, #06080b, #05070a);
}

.operator-console .cta-section::before {
  content: "CF";
  position: absolute;
  right: -0.02em;
  bottom: -0.28em;
  z-index: 0;
  color: rgba(255, 255, 255, 0.022);
  font: 700 clamp(18rem, 42vw, 44rem)/0.8 var(--font-display);
  letter-spacing: -0.12em;
  pointer-events: none;
}

.operator-console .cta-section > * {
  position: relative;
  z-index: 1;
}

.operator-console .cta-section h2 {
  max-width: 16ch;
  color: var(--color-text);
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.operator-console .cta-section > p:not(.eyebrow):not(.cta-note) {
  max-width: 64ch;
  margin-top: 1.4rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.operator-console .cta-note {
  max-width: 68ch;
  margin-top: 1.2rem;
  color: #7f8892;
  font-size: 0.78rem;
  line-height: 1.55;
}

.operator-console .footer {
  position: relative;
  z-index: 2;
  border-top-color: rgba(231, 214, 177, 0.11);
  background: #05070a;
}

/* Широкий экран: кадр и текст стоят в ряд, а не текст поверх кадра — четыре карточки
   в ролике занимают почти всю площадь кадра, и накладная панель закрывала 01–03.
   Кадр сохраняет 16:9, поэтому проценты hotspot'ов по-прежнему совпадают с карточками.
   Блок идёт после базовых правил hero: медиа-запрос не добавляет специфичности, и
   выше по файлу его переопределяли бы обычные .hero-copy / .hero-copy h1. */
@media (min-width: 1200px) {
  .hero-video-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(310px, 24vw, 400px);
    align-items: center;
    gap: clamp(18px, 1.8vw, 30px);
    width: min(1720px, calc(100vw - 48px));
  }

  /* Ограничение по ШИРИНЕ, а не по высоте: у кадра aspect-ratio 16/9 и width:100%,
     поэтому высоту он берёт из ширины — max-height сломал бы пропорцию и увёл
     hotspot'ы от карточек. */
  .hero-media-frame {
    max-width: calc((100svh - 150px) * 1.7778);
    margin: 0 auto;
  }

  .hero-copy {
    margin: 0;
    padding: clamp(18px, 1.5vw, 26px);
  }

  /* В колонке типографика мельче, чем была в панели во всю ширину кадра: иначе
     первый экран перестаёт вмещать сцену целиком. */
  .hero-copy h1 {
    max-width: none;
    margin-top: 0.6rem;
    font-size: clamp(1.7rem, 2.05vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -0.038em;
  }

  .hero-subtitle {
    margin-top: 0.75rem;
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .operator-console .hero-actions {
    margin-top: 1rem;
    gap: 0.5rem;
  }

  .operator-console .hero-actions .btn-primary,
  .operator-console .hero-actions .btn-secondary {
    width: 100%;
    min-height: 44px;
    font-size: 0.84rem;
  }

  .hero-proof-note {
    margin-top: 0.8rem;
    font-size: 0.6rem;
  }
}

/* Планшет и узкий десктоп: текст идёт под кадром, поэтому кадр слегка ужимается —
   иначе на низких экранах (768–800px) заголовок и кнопки полностью уходят за первый
   экран и оффер не виден без скролла. Пропорция 16:9 сохраняется. */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-media-frame {
    max-width: calc((100svh - 320px) * 1.7778);
    margin: 0 auto;
  }

  .hero-copy {
    padding-top: clamp(16px, 1.8vw, 22px);
  }
}

/* Закреплённая (sticky) сцена hero убрана по просьбе владельца: панель с четырьмя
   карточками висела под шапкой во время чтения секций и мешала тексту. Теперь hero
   уезжает вверх обычным скроллом, а секции идут нормальным потоком — поэтому здесь
   больше не нужны ни position:fixed для .hero-docked, ни компенсирующий padding-top
   (~430–560px), который резервировал место под висящую панель.
   Классы .hero-docked/.hero-released ещё выставляются в script.js, но ни на что не
   влияют — удалить их можно вместе со следующей правкой контроллера. */

/* Tablet: full 16:9 scene, normal document flow, no pinned stage. */
@media (max-width: 1099px) {
  .nav-toggle {
    display: inline-flex;
  }

  .operator-console .nav {
    position: fixed;
    top: 72px;
    right: 14px;
    left: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    max-height: calc(100svh - 88px);
    padding: 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--color-line);
    border-radius: 18px;
    z-index: 2;
    background: #070a0e;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .nav-is-open .nav,
  .operator-console .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .operator-console .nav a {
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.045);
    background: rgba(255, 255, 255, 0.025);
  }

  .operator-console .nav .nav-cta {
    margin-left: 0;
  }

  body.nav-is-open {
    overflow: hidden;
  }

  .hero-video-stage {
    width: min(960px, calc(100vw - 32px));
  }

  .hero-copy {
    width: min(680px, calc(100% - 48px));
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  .method-card {
    min-height: 220px;
  }

  .method-card h3 {
    margin-top: 3rem;
  }

  .operator-console .packages-section .services-grid,
  .website-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-console .packages-section .service-card {
    min-height: 470px;
  }
}

/* Mobile: final poster, no autoplay stage, no hotspots or desktop docking. */
@media (max-width: 767px) {
  body.operator-console {
    font-size: 16px;
  }

  body.operator-console::before {
    background-size: 48px 48px;
    opacity: 0.6;
  }

  .operator-console .site-header {
    min-height: 64px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
  }

  .operator-console .logo {
    font-size: 1.08rem;
  }

  .operator-console .logo::after {
    display: none;
  }

  .operator-console .nav {
    top: 66px;
    grid-template-columns: 1fr;
    padding: 0.8rem;
    background:
      radial-gradient(circle at 100% 0%, rgba(116, 216, 255, 0.08), transparent 12rem),
      #070a0e;
  }

  .operator-console .nav a {
    justify-content: flex-start;
    min-height: 48px;
    padding: 0.8rem 1rem;
    color: #e3e6e8;
    font-size: 0.9rem;
    text-align: left;
  }

  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .hero-video-hero {
    min-height: auto;
    padding: 82px 12px 72px;
  }

  .hero-video-hero::before {
    inset: 8% -20% auto;
    height: 32%;
  }

  .hero-video-stage {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .hero-media-frame {
    order: 1;
    border-radius: 18px;
  }

  .hero-video {
    display: none;
  }

  .hero-final-poster {
    opacity: 1;
  }

  .hero-media-vignette {
    background: linear-gradient(0deg, rgba(2, 4, 7, 0.34), transparent 40%);
  }

  .hero-hotspots,
  .hero-system-status,
  .hero-video-controls,
  .hero-scroll-cue {
    display: none;
  }

  .hero-copy {
    position: relative;
    left: auto;
    bottom: auto;
    order: 2;
    width: 100%;
    margin: 12px 0 0;
    padding: 26px 20px;
    border-radius: 18px;
    backdrop-filter: none;
  }

  .hero-copy h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 10.3vw, 3.2rem);
    line-height: 0.98;
  }

  .hero-subtitle {
    line-height: 1.58;
  }

  .operator-console .hero-actions,
  .cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operator-console .hero-actions .btn-primary,
  .operator-console .hero-actions .btn-secondary,
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary {
    width: 100%;
  }

  .section-shell {
    width: min(100% - 28px, var(--content-width));
  }

  .narrative-section {
    padding: 84px 0;
  }

  .module-heading h2,
  .system-complete h2,
  .operator-console .lc-title,
  .operator-console .cta-section h2 {
    font-size: clamp(2.2rem, 11.5vw, 3.65rem);
  }

  .method-grid,
  .website-slots,
  .pain-list,
  .operator-console .packages-section .services-grid {
    grid-template-columns: 1fr;
  }

  .pain-board {
    padding: 22px 18px;
  }

  .method-card,
  .website-slot,
  .operator-console .service-card,
  .operator-console .packages-section .service-card {
    min-height: auto;
  }

  .method-card,
  .website-slot {
    padding: 24px;
  }

  .method-card h3,
  .website-slot h3 {
    margin-top: 2.8rem;
  }

  .operator-console .service-title {
    margin-top: 2.5rem;
  }

  .operator-console .portfolio,
  .operator-console .video-showcase,
  .operator-console .research-lab,
  .operator-console .packages-section {
    padding: 84px 14px;
  }

  .operator-console .case-groups,
  .operator-console .research-windows {
    grid-template-columns: 1fr;
  }

  .operator-console .vshow-nav {
    display: none;
  }

  .operator-console .vshow-row {
    justify-content: flex-start;
    padding: 0;
  }

  .operator-console .research-trust-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-complete::before,
  .system-complete::after {
    display: none;
  }

  .operator-console .cta-section {
    min-height: auto;
    padding: 94px 18px 110px;
  }

  .operator-console .footer {
    align-items: flex-start;
    padding: 24px 18px;
    text-align: left;
  }
}

/* System accessibility mode. JS also switches the video to the final poster. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .operator-console *,
  .operator-console *::before,
  .operator-console *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .operator-console [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-video {
    visibility: hidden;
  }

  .hero-final-poster {
    opacity: 1;
  }

  .hero-hotspot {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* === HERO: живой кадр — карусель реальных кейсов ============================
   Кадр не стоит на месте: кейсы сменяются кроссфейдом, активный снимок очень
   медленно наезжает (Ken Burns), а при скролле рамка идёт с иным темпом, чем
   текст, — это даёт глубину. Вертикальный сплит "до/после" здесь не подошёл:
   у исходника и результата разная композиция, общая линия реза рвала оба
   кадра, поэтому результат идёт крупно, а исходник — врезкой. */
.hero-split {
  position: relative;
  padding: clamp(96px, 11vh, 150px) clamp(20px, 4vw, 64px) clamp(64px, 8vh, 104px);
}

.hero-split-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  width: min(var(--content-width), 100%);
  margin: 0 auto;
}

.hero-transform { margin: 0; }

.ht-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  /* --ht-shift двигает JS по прогрессу скролла; сам сдвиг делает композитор. */
  transform: translate3d(0, var(--ht-shift, 0px), 0);
  will-change: transform;
}

.ht-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.ht-slide.is-active { opacity: 1; }

.ht-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

/* Медленный наезд идёт только у видимого кейса и только пока кадр в экране. */
.ht-frame.is-live .ht-slide.is-active .ht-shot {
  animation: htKenBurns 9s ease-out forwards;
}

@keyframes htKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11); }
}

.ht-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0d12;
}

.ht-inset {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  width: 33%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 228, 0.28);
  border-radius: 10px;
  background: var(--color-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.ht-inset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ht-inset figcaption {
  padding: 0.38rem 0.5rem;
  background: rgba(5, 7, 10, 0.92);
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: #f4efe4;
}

.ht-dots {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 7px;
}

.ht-dot {
  width: 22px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 239, 228, 0.32);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}

.ht-dot.is-current {
  width: 34px;
  background: var(--color-accent);
}

.ht-dot:focus-visible {
  outline: 2px solid var(--color-system);
  outline-offset: 3px;
}

.ht-caption {
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.ht-badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Первый показ: метка и врезка догоняют кадр, а не появляются вместе с ним. */
.ht-frame.is-armed .ht-inset,
.ht-frame.is-armed .ht-tag--after { opacity: 0; }

.ht-frame.is-playing .ht-tag--after {
  animation: htFadeIn 0.5s ease 0.35s forwards;
}

.ht-frame.is-playing .ht-inset {
  animation: htInsetIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes htFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes htInsetIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero-split-stage {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
}

/* Всё движение отключается разом: кейсы остаются переключаемыми вручную. */
@media (prefers-reduced-motion: reduce) {
  .ht-frame {
    transform: none;
    will-change: auto;
  }

  .ht-slide { transition: none; }

  .ht-frame.is-live .ht-slide.is-active .ht-shot,
  .ht-frame.is-playing .ht-inset,
  .ht-frame.is-playing .ht-tag--after {
    animation: none;
  }

  .ht-frame.is-armed .ht-inset,
  .ht-frame.is-armed .ht-tag--after { opacity: 1; }
}

/* === Вертикальные ролики 9:16 ==============================================
   Сетка под формат ленты. Карточек пока одна, поэтому grid, а не карусель:
   при добавлении роликов раздел расширится сам, без правки логики. */
.shorts-section {
  padding: clamp(64px, 9vh, 116px) clamp(20px, 4vw, 64px);
}

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(34px, 5vw, 58px);
}

.short-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--panel);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.short-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 184, 120, 0.4);
}

/* 29.08.2026 — было жёсткое aspect-ratio:9/16 (всё обрезалось под вертикаль). Теперь
   каждая карточка задаёт свою пропорцию инлайн-style по факту пикселей файла (см.
   index.html) — так сетка принимает и горизонтальные ролики без обрезки. Радиус и
   overflow — на самом .short-media (а не только на .short-card), потому что при клике
   этот узел уезжает в #mediaStage отдельно от родителя (см. __mediaOpen в script.js)
   и должен выглядеть опрятно и вне карточки. */
.short-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #06090d;
  cursor: pointer;
}

.short-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .short-card:hover .short-video { transform: scale(1.04); }
}

.short-meta {
  padding: 0.95rem 1.05rem 1.15rem;
}

.short-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: #f4efe4;
}

.short-text {
  margin-top: 0.4rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.shorts-note {
  width: min(var(--content-width), 100%);
  margin: clamp(24px, 3vw, 38px) auto 0;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .short-card { transition: none; }
  .short-card:hover { transform: none; }
}

/* === Метод: колода карточек со скролл-перелистыванием ======================
   Перенесено из первого шаблона (там это .about-*), материал переведён с
   синего стекла на золотую палитру operator-console. Сцена выше экрана —
   именно этот запас скролла и перелистывает колоду; последняя карточка
   "отдыхает" в конце, чтобы секция не отклеилась ровно в момент её выхода. */
.deck-scene {
  position: relative;
  min-height: 320vh;
}

/* Колода на 4 карточки: переходов на один больше, поэтому и запас скролла
   больше — иначе на каждый переход приходилось бы заметно меньше пикселей,
   и перелистывание читалось бы рывками. */
.deck-scene--four {
  min-height: 430vh;
}

.deck-stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.deck-card {
  position: absolute;
  width: min(90vw, 900px);
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 26px;
  will-change: transform, opacity;
}

/* Подложка непрозрачная: позади каждой карточки лежит текст соседних,
   любая прозрачность дала бы нечитаемое наложение. */
.deck-card-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border: 1px solid rgba(215, 184, 120, 0.24);
  border-radius: inherit;
  background-color: #0a0e14;
  background-image:
    radial-gradient(120% 60% at 12% 0%, rgba(215, 184, 120, 0.14), transparent 60%),
    linear-gradient(165deg, rgba(215, 184, 120, 0.09) 0%, rgba(60, 48, 28, 0.08) 45%, transparent 100%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -30px 60px rgba(0, 0, 0, 0.34);
}

.deck-card-panel::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -25%;
  width: 55%;
  height: 180%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.02) 55%, transparent);
  transform: rotate(8deg);
  animation: deckSheen 13s ease-in-out infinite;
}

@keyframes deckSheen {
  0%, 100% { transform: rotate(8deg) translateX(-40%); }
  50%      { transform: rotate(8deg) translateX(260%); }
}

.deck-card-index {
  position: absolute;
  top: clamp(18px, 2.4vw, 30px);
  right: clamp(20px, 3vw, 40px);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.deck-card-content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4.5vw, 66px);
}

.deck-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.deck-headline {
  margin-top: 0.9rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f4efe4;
}

.deck-divider {
  margin: clamp(18px, 2.4vw, 30px) 0;
  border: none;
  border-top: 1px solid var(--color-line);
}

.deck-text {
  max-width: 60ch;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-muted);
}

@media (max-width: 768px) {
  .deck-card { width: 92vw; max-height: 80vh; border-radius: 20px; }
}

/* Скролл-стек сам по себе активное движение: для reduced-motion его не
   замедляем, а убираем — карточки идут обычным вертикальным потоком. */
@media (prefers-reduced-motion: reduce) {
  /* Модификатор перечислен явно: иначе он гасился бы только за счёт порядка
     правил в файле, и любая перестановка блоков вернула бы 430vh пустоты. */
  .deck-scene,
  .deck-scene--four { min-height: auto; }

  .deck-stage {
    position: static;
    display: block;
    height: auto;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
  }

  .deck-card {
    position: static;
    max-height: none;
    margin: 0 auto clamp(20px, 3vw, 36px);
    transform: none !important;
    opacity: 1 !important;
  }

  .deck-card-panel::before { animation: none; }
}

/* ===================================================================
   04 / Аналитика.
   Переиспользует общий каркас секции (.narrative-section, .eyebrow,
   .lc-title-wrap, .section-sub) и сетку цифр .research-example-grid.
   Свои классы — с префиксом .an-, чтобы не пересекаться с пакетами
   карточек: это другая услуга и другой момент покупки.
   =================================================================== */
.operator-console .analytics-section {
  min-height: auto;
  padding-right: clamp(20px, 4vw, 64px);
  padding-left: clamp(20px, 4vw, 64px);
  background:
    radial-gradient(circle at 50% 18%, rgba(215, 184, 120, 0.07), transparent 32rem),
    #070a0e;
}

.operator-console .analytics-section > .eyebrow {
  width: min(var(--content-width), 100%);
  margin: 0 auto 1rem;
  text-align: left;
}

.an-shell {
  width: min(var(--content-width), 100%);
  margin: clamp(40px, 5vw, 68px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 104px);
  text-align: left;
}

.an-block-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.035em;
  color: var(--color-text);
}

.an-block-lead {
  max-width: 62ch;
  margin-top: 0.7rem;
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* --- Три способа потерять деньги. Крупная цифра + две строки: карточка
       должна читаться за 15 секунд, поэтому текст ограничен по длине. --- */
.an-loss-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
}

.an-loss-card {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(10, 14, 19, 0.74);
}

.an-loss-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-accent);
}

.an-loss-figure--dual {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}

.an-loss-figure em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.an-loss-figure span {
  flex: 1 0 100%;
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8f98a3;
}

.an-loss-name {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.an-loss-text {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-loss-text code {
  font-family: var(--font-display);
  font-size: 0.95em;
  color: var(--color-text);
  background: rgba(215, 184, 120, 0.12);
  padding: 1px 6px;
  border-radius: 5px;
}

.an-loss-close {
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-left: 1rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--color-text);
}

/* --- Как это работает --- */
.an-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
}

.an-steps li {
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

.an-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.an-steps p {
  margin-top: 0.6rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-inline-note {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--color-line-strong);
  background: linear-gradient(90deg, rgba(215, 184, 120, 0.05), transparent 70%);
  font-size: 0.87rem;
  line-height: 1.6;
  color: #aeb4bc;
}

/* --- Тарифы. Раскладка 2 + 2 + 1: пять карточек в один ряд не помещаются,
       а «Вход под ключ» занимает всю ширину как верхний тариф. --- */
.an-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 3vw, 40px);
}

.an-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(9, 13, 18, 0.78);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.an-tier:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-strong);
}

.an-tier--wide {
  grid-column: 1 / -1;
}

/* Основной тариф: акцент даёт рамка и подсветка, а не другой размер шрифта —
   карточки должны сравниваться по вопросу, а не по типографике. */
.an-tier--featured {
  border-color: rgba(215, 184, 120, 0.42);
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(215, 184, 120, 0.12), transparent 62%),
    rgba(9, 13, 18, 0.9);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.an-tier-badge {
  position: absolute;
  top: -10px;
  left: clamp(24px, 2.6vw, 34px);
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Вопрос — главный элемент карточки: тарифы различаются размером вопроса,
   а не числом пунктов в списке. */
.an-tier-q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.85vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-wrap: balance;
}

.an-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
}

.an-tier-name {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.an-tier-price {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-accent);
}

.an-tier-desc {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-tier-includes {
  margin-top: 1rem;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.an-tier-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.an-tier-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.an-tier-list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.7;
}

.an-tier-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

.an-tier-list--split {
  display: block;
  columns: 2;
  column-gap: clamp(20px, 2.4vw, 34px);
}

.an-tier-list--split li {
  break-inside: avoid;
  margin-bottom: 9px;
}

.an-tier-term {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f98a3;
}

.an-tier-term strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Подписка — отдельная широкая карточка внизу, не шестой тариф в ряду. */
.an-watch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: rgba(7, 10, 14, 0.6);
}

.an-watch-main { flex: 1 1 420px; }

.an-watch .an-tier-name { margin-top: 0.8rem; }

.an-watch-cond {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #8f98a3;
}

.an-watch-price { flex: 0 0 auto; }

/* --- Механики цены и гарантия --- */
.an-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.an-money-card {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(10, 14, 19, 0.62);
}

.an-money-title {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}

.an-money-card p:last-child {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-money-card span[data-price] {
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

/* Гарантия на данные — не гарантия продаж. Она выполнима именно потому,
   что у каждой цифры в отчёте есть источник и дата среза. */
.an-guarantee {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(215, 184, 120, 0.34);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(215, 184, 120, 0.13), transparent 66%),
    rgba(9, 13, 18, 0.9);
}

.an-guarantee-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.an-guarantee-main {
  max-width: 30ch;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: var(--color-text);
  text-wrap: balance;
}

.an-guarantee-sub {
  max-width: 60ch;
  margin-top: 1rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.an-capacity {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(215, 184, 120, 0.07), transparent 70%);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #aeb4bc;
}

.an-capacity strong { color: var(--color-text); }

/* --- Чего мы не измеряем. Карточки, а не таблица: на мобильном таблицу
       пришлось бы скроллить вбок, а этот блок читают целиком. --- */
.an-limits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 3vw, 40px);
}

.an-limit {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(8, 11, 16, 0.8);
}

.an-limit-what {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

/* Перечёркнутый круг — это не ошибка и не «скоро будет», а граница источника. */
.an-limit-what::before {
  content: '';
  position: absolute;
  top: 0.32em;
  left: 0;
  width: 13px;
  height: 13px;
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  opacity: 0.55;
}

.an-limit-what::after {
  content: '';
  position: absolute;
  top: 0.72em;
  left: 1px;
  width: 11px;
  height: 1px;
  background: var(--color-muted);
  transform: rotate(-45deg);
  opacity: 0.55;
}

.an-limit-why {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-limits-close {
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-left: 1rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--color-text);
}

/* --- Живой пример отчёта --- */
.an-sample {
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(10, 14, 19, 0.72);
  scroll-margin-top: 84px;
}

.an-sample-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.an-sample-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.an-sample-lead {
  margin: 0.7rem 0 1.3rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-sample-note {
  margin-top: 1.2rem;
  font-size: 0.89rem;
  line-height: 1.65;
  color: #8f98a3;
}

.an-sample-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--color-line);
}

.an-sample-hint {
  flex: 1 1 260px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #8f98a3;
}

.an-sample-hint span[data-price] {
  color: var(--color-text);
  white-space: nowrap;
}

/* --- FAQ --- */
.an-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(26px, 3vw, 40px);
}

.an-faq-item {
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

.an-faq-item h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.an-faq-item p {
  margin-top: 0.65rem;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.an-actions { margin-top: 0; }

/* --- Планшет --- */
@media (max-width: 1024px) {
  .an-loss-grid,
  .an-steps,
  .an-money-grid,
  .an-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .an-tier-list--split { columns: 1; }
}

/* --- Мобильный --- */
@media (max-width: 767px) {
  .operator-console .analytics-section {
    padding: 84px 14px;
  }

  .an-loss-grid,
  .an-steps,
  .an-tiers,
  .an-money-grid,
  .an-limits-grid,
  .an-faq-grid {
    grid-template-columns: 1fr;
  }

  .an-watch { flex-direction: column; align-items: flex-start; }

  .an-tier:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .an-tier { transition: none; }
  .an-tier:hover { transform: none; }
}

/* === SEO-тарифы внутри общего прайса ===
   Ряд «Исследование и аналитика» переехал из раздела Research в «Пакеты»
   (29.08.2026), чтобы все цены на сайте стояли в одном месте. Правила
   .operator-console .packages-section .services-grid специфичнее, чем
   .operator-console .research-services, поэтому раскладку задаём явно —
   иначе три карточки встали бы в сетку на четыре колонки и растянулись
   до высоты пакетов карточек (min-height: 520px). */
.operator-console .packages-section .research-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operator-console .packages-section .research-services .service-card {
  min-height: 0;
}

.operator-console .packages-section .research-services .service-title {
  margin-top: 2.4rem;
}

@media (max-width: 1024px) {
  .operator-console .packages-section .research-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .operator-console .packages-section .research-services {
    grid-template-columns: 1fr;
  }
}