/* ============================================================================
   Студия AI-ботов — Алекс Туль · styles.css
   Каркас (модуль skeleton). Все значения — через токены из DESIGN.md.
   Правило: НИКАКОГО хардкода hex в компонентах — только var(--token).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. ДИЗАЙН-ТОКЕНЫ (:root) — единственное место с «сырыми» значениями
   Экспорт модуля для следующих сессий: --accent-blue, --bg-base, --bg-soft,
   --surface-dark, --text-primary, --text-secondary, --space-*, --radius-*.
--------------------------------------------------------------------------- */
:root {
  /* Фон и поверхности */
  --bg-base: #FFFFFF;
  --bg-soft: #F6F8FC;
  --surface-1: #FFFFFF;
  --surface-dark: #030825;
  --border-subtle: rgba(3, 8, 37, 0.08);
  --glass-fill: rgba(255, 255, 255, 0.6);

  /* Акцент (бренд) */
  --accent-blue: #225AEA;
  --accent-blue-dim: #1B48BC;
  --accent-blue-soft: #E8EEFD;
  --accent-on: #FFFFFF;

  /* Текст */
  --text-primary: #0B1020;
  --text-secondary: #5A6172;
  --text-tertiary: #9AA0AD;
  --text-on-dark: #F5F7FB;
  --text-on-dark-dim: #A9B0C4;

  /* Статусы */
  --status-success: #22C55E;
  --status-warning: #F59E0B;

  /* Градиенты.
     hero: мягкое синее свечение сверху + плавный уход в --bg-soft, т.е. в фон
     следующей секции (#demo) — стыка секций не видно, ощущение «воздуха». */
  --gradient-hero:
    radial-gradient(1200px 620px at 74% -18%, rgba(34, 90, 234, 0.10), transparent 66%),
    linear-gradient(180deg,
      var(--bg-base) 0%,
      var(--accent-blue-soft) 52%,
      var(--bg-soft) 100%);
  --gradient-blue: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dim) 100%);

  /* Поверхность карточки: почти незаметный вертикальный уход белого в сторону
     --bg-soft (~2%). Вместе со светлым кантом сверху даёт «подсветку сверху». */
  --gradient-surface: linear-gradient(180deg, var(--surface-1) 0%, #FAFBFE 100%);
  /* Подложка иконки: мягкий блик сверху поверх пастельной заливки (не плоско) */
  --gradient-icon: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  /* Блик и притемнение на синей кнопке — «выпуклость» без смены цвета заливки */
  --gradient-btn-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(3, 8, 37, 0) 42%, rgba(3, 8, 37, 0.14) 100%);
  /* Секция с мягким фоном — лёгкий «утоп»: тень сверху уходит вниз широким градиентом */
  --gradient-section: linear-gradient(180deg, rgba(3, 8, 37, 0.022) 0, rgba(3, 8, 37, 0) 160px);

  /* Отступы (сетка 8px / кратные 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Скругления */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Тени / глубина.
     Каждая тень — двухслойная: близкая чёткая (контакт с фоном) + дальняя рассеянная
     (объём). Мягкие и низкоконтрастные — «премиальная» глубина, не жёсткий дроп. */
  --shadow-card: 0 1px 2px rgba(3, 8, 37, 0.05), 0 8px 32px rgba(3, 8, 37, 0.08);
  --shadow-card-hover: 0 2px 6px rgba(3, 8, 37, 0.06), 0 18px 48px rgba(34, 90, 234, 0.16);
  --shadow-modal: 0 2px 8px rgba(3, 8, 37, 0.08), 0 32px 80px rgba(3, 8, 37, 0.32);
  --shadow-header: 0 1px 0 var(--border-subtle);
  /* Светлый кант сверху (inset) — «подсветка сверху» на карточках */
  --rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Объём подложки иконки: блик сверху + мягкая внутренняя тень снизу */
  --shadow-icon: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(3, 8, 37, 0.05);
  /* Синяя кнопка: внутренняя подсветка сверху + контактная и рассеянная тени */
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.26),
                0 1px 2px rgba(3, 8, 37, 0.12), 0 6px 16px rgba(34, 90, 234, 0.22);
  --shadow-btn-hover: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                      0 2px 4px rgba(3, 8, 37, 0.14), 0 10px 26px rgba(34, 90, 234, 0.30);
  /* Стык секции с мягким фоном: тонкая тень сверху + светлый кант снизу = рельеф */
  --shadow-section: inset 0 1px 0 rgba(3, 8, 37, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --backdrop: rgba(3, 8, 37, 0.5);   /* затемнение под модалкой (DESIGN.md §5) */

  /* Раскладка / движение */
  --container-max: 1160px;
  --header-h: 64px;
  --touch: 48px;             /* минимальная тач-цель */
  --dur: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Шрифты.
     --font-sans    — весь текст (Inter).
     --font-heading — заголовки (Onest). Откат на Inter: убрать 'Onest' из строки ниже. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Onest', var(--font-sans);

  /* Пастельные пары для иконок-подложек (#skills). Единая мягкая гамма в духе
     --accent-blue-soft: фон — светлый, иконка — насыщенная того же тона.
     В #demo иконки остаются синими — ряд должен читаться как единый. */
  --icon-blue-bg:   #E8EEFD;   --icon-blue-fg:   #225AEA;
  --icon-violet-bg: #EFE9FD;   --icon-violet-fg: #6D3FD4;
  --icon-green-bg:  #E3F6EC;   --icon-green-fg:  #17915A;
  --icon-orange-bg: #FDF0E1;   --icon-orange-fg: #C1701A;
  --icon-teal-bg:   #E1F4F4;   --icon-teal-fg:   #10847F;

  /* Мягкое синее свечение за заголовком hero (декоративное, без движения) */
  --glow-blue: rgba(34, 90, 234, 0.22);

  /* Фон-«экран радара»: линии сетки и волна сканирования.
     Сетка читается с первого взгляда, но заголовок остаётся главным.
     Пара *-on-blue — тот же мотив белым поверх синей заливки CTA (#contact):
     локальные переопределения --radar-line / --radar-wave внутри .cta-radar. */
  --radar-line: rgba(34, 90, 234, 0.11);
  --radar-wave: rgba(34, 90, 234, 0.16);
  --radar-line-on-blue: rgba(255, 255, 255, 0.09);
  --radar-wave-on-blue: rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------------------
   2. СБРОС / БАЗА
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4)); /* якоря не под шапкой */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* страховка от горизонтального скролла */
}

/* Заголовки — Onest, плотный трекинг. Кнопка внутри h3 (FAQ) наследует шрифт. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
p { margin: 0; }
img, svg { max-width: 100%; }

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent-blue-dim); }

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Контейнер контента */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
/* Узкий вариант — для длинного текста (FAQ): комфортная длина строки */
.container--narrow { max-width: 820px; }

/* ---------------------------------------------------------------------------
   3. КНОПКИ  (экспорт: .btn-primary, .btn-secondary)
--------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-3) var(--space-6);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-md);   /* прямоугольные со скруглением, не таблетки */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Главная CTA — синяя заливка + вертикальный градиент-блик («выпуклость»).
   Цвет держим в background-color (он и анимируется на hover), а блик и притемнение
   лежат сверху в background-image — поэтому переход цвета остаётся плавным. */
.btn-primary {
  background-color: var(--accent-blue);
  background-image: var(--gradient-btn-sheen);
  color: var(--accent-on);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background-color: var(--accent-blue-dim);
  color: var(--accent-on);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}

/* Вторичная — прозрачная с обводкой */
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn-secondary:hover {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-dim);
  border-color: var(--accent-blue-soft);
}

/* ---------------------------------------------------------------------------
   4. ШАПКА (липкая, полупрозрачная, backdrop-blur)
--------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-fill);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-header);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* Логотип-wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  font-weight: 800;
  flex-shrink: 0;
}
.brand:hover { color: var(--text-primary); }
.logo-mark { color: var(--accent-blue); display: block; flex-shrink: 0; }
.brand-text { font-size: 16px; letter-spacing: -0.01em; }

/* Пульс радара: волна пробегает по дугам изнутри наружу раз в 5 секунд.
   В SVG дуги — это три <path> (круг и точка нарисованы через <circle>).
   На hover по логотипу волна ускоряется. Отключается в prefers-reduced-motion. */
@keyframes radar-pulse {
  0%, 100% { opacity: 1; }    /* в покое лого выглядит обычно */
  6%       { opacity: 0.15; } /* дуга гаснет... */
  20%      { opacity: 1; }    /* ...и снова загорается — со сдвигом по дугам это волна */
}
.logo-mark path {
  animation: radar-pulse 5s var(--ease) infinite;
}
.logo-mark path:nth-of-type(1) { animation-delay: 0s; }
.logo-mark path:nth-of-type(2) { animation-delay: 0.22s; }
.logo-mark path:nth-of-type(3) { animation-delay: 0.44s; }
.brand:hover .logo-mark path { animation-duration: 1.8s; }

/* Бургер — только мобайл */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--touch);
  height: var(--touch);
  padding: var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 22px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* Бургер → крестик при открытом меню */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Меню: мобайл — выпадающая панель */
.nav-menu {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  /* скрыто по умолчанию */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.nav-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-links a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.nav-links a:hover { color: var(--accent-blue); }

.nav-cta { margin-top: var(--space-2); }

/* ---------------------------------------------------------------------------
   5. HERO
--------------------------------------------------------------------------- */
.hero {
  /* Без border-bottom: граница с #demo растворяется в градиенте (правка автора) */
  position: relative;
  overflow: hidden;          /* радар-сетка не вылезает за пределы секции */
  background: var(--gradient-hero);
}

/* ---- Фон «экран радара» (декор) — общая техника -----------------------------
   Используется дважды: в hero (.hero-radar, синие линии) и в CTA-блоке #contact
   (.cta-radar, те же линии белым поверх синей заливки — см. §6g). Общее — здесь,
   различия (размер, центр, цвет через локальные --radar-*) — в блоках ниже.

   Слой 1 — концентрические круги: repeating-radial-gradient, шаг 90px, линия 1px.
   Слой 2 — три тонких луча: repeating-conic-gradient с шагом 120°, старт под углом
            (асимметрия — перекликается с логотипом).
   Маска гасит сетку к краям, чтобы не было жёсткого обреза.
---------------------------------------------------------------------------- */
.hero-radar,
.cta-radar {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 89px, var(--radar-line) 89px 90px),
    repeating-conic-gradient(from 14deg at 50% 50%,
      var(--radar-line) 0 0.2deg, transparent 0.2deg 120deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 82%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 82%);
}

/* Волна сканирования: расходится от центра раз в 7 секунд, к краю растворяется.
   Анимируются только композитные свойства — transform и opacity. */
.hero-radar-wave,
.cta-radar-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid var(--radar-wave);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18);
  will-change: transform, opacity;
}

/* Hero: сетка крупная, центр чуть левее-выше (как точка в логотипе).
   Мобайл (база) — сетка мельче и без волны; круги и волна включаются с 640px (§9). */
.hero-radar {
  left: 50%;
  top: 46%;
  width: min(620px, 150%);
  transform: translate(-52%, -50%);
}
.hero-radar-wave { display: none; }   /* на мобиле волны нет (см. §9) */

@keyframes radar-scan {
  0%   { transform: translate(-50%, -50%) scale(0.18); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 0.25; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}
.hero-inner {
  position: relative;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  text-align: center;
  max-width: 820px;
}
/* Свечение за заголовком: даёт глубину, текст не трогает (лежит под ним, без движения) */
.hero-inner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 0;
  width: min(640px, 92%);
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow-blue), transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}
.hero-inner > * { position: relative; z-index: 1; }

.hero-title {
  font-size: 36px;         /* мобайл; десктоп увеличивается ниже */
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.hero-title .accent { color: var(--accent-blue); }

.hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   6. СЕКЦИИ-ЗАГЛУШКИ (наполнение — след. сессии; чередование фонов)
--------------------------------------------------------------------------- */
.section {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
  /* высота появится вместе с контентом; сейчас — воздух между якорями */
  padding-block: var(--space-12);
}
/* ВНИМАНИЕ: чередование считает ВСЕ <section> внутри <main>, включая hero.
   Сейчас мягкий фон получают #demo, #process, #faq. Не добавлять/убирать section. */
.section:nth-of-type(even) { background: var(--bg-soft); }

/* Стык секций — рельеф, а не полоса: мягкая тень сверху (уходит вниз широким
   градиентом) + светлый кант снизу. Мягкая секция читается как чуть утопленная.
   #demo исключён намеренно: он идёт сразу за hero, чей градиент уходит в --bg-soft,
   и любая линия сверху вернула бы убранный автором резкий стык (см. CLAUDE.md). */
.section:nth-of-type(even):not(#demo) {
  background-image: var(--gradient-section);
  box-shadow: var(--shadow-section);
}

/* Заголовок секции */
.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.section-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-lead {
  margin-top: var(--space-4);
  font-size: 18px;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   6a. КАРТОЧКИ (боты + компактные «не только боты»)
   Экспорт: .card, .card--compact, .card-icon, .card-title, .card-text,
            .badge, .card-actions
--------------------------------------------------------------------------- */
.cards-grid,
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Объём карточки: градиент поверхности (белый → едва в сторону --bg-soft),
   светлый кант сверху (--rim-light) и двухслойная тень. Hover — тень глубже. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--gradient-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--rim-light), var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover {
  box-shadow: var(--rim-light), var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Иконка в мягкой акцентной подложке. Цвет заливки — background-color (его меняют
   модификаторы), поверх — общий блик background-image; --shadow-icon добавляет
   внутренний объём, чтобы «таблетка» не выглядела плоской заливкой. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--accent-blue-soft);
  background-image: var(--gradient-icon);
  box-shadow: var(--shadow-icon);
  color: var(--accent-blue);
  flex-shrink: 0;
}
.card-icon--sm { width: 40px; height: 40px; border-radius: var(--radius-sm); }

/* Цветные подложки (#skills). Без модификатора иконка синяя — как в #demo. */
.card-icon--blue   { background-color: var(--icon-blue-bg);   color: var(--icon-blue-fg); }
.card-icon--violet { background-color: var(--icon-violet-bg); color: var(--icon-violet-fg); }
.card-icon--green  { background-color: var(--icon-green-bg);  color: var(--icon-green-fg); }
.card-icon--orange { background-color: var(--icon-orange-bg); color: var(--icon-orange-fg); }
.card-icon--teal   { background-color: var(--icon-teal-bg);   color: var(--icon-teal-fg); }

.card-title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
.card-title--sm { font-size: 18px; }

.card-text {
  color: var(--text-secondary);
  font-size: 16px;
}
/* В карточках ботов описание тянется — бэйджи, видео и кнопки встают на одну линию */
.cards-grid .card-text { flex: 1 1 auto; }

/* Бэйдж / плашка ценности */
.badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
/* Соцдоказательство Radar — тот же стиль, отдельный хук на будущее */
.badge--proof { background: var(--accent-blue-soft); color: var(--accent-blue-dim); }

/* Низ карточки бота: бэйдж + видео + кнопка. Прижат книзу, поэтому у всех трёх
   карточек эти три блока встают на одну горизонталь, как бы ни отличались описания. */
.card-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}
/* Бэйджи одинаковой высоты (у одних текст в строку, у других в две) —
   иначе бэйджи соседних карточек встают на разной высоте.
   48px = две строки 13px/1.5 с запасом; вертикальные паддинги убраны, текст центрируется. */
.cards-grid .badge {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: 0;
}

.card-actions { margin-top: auto; padding-top: var(--space-2); }
.card-actions .btn-primary,
.card-actions .btn-secondary { width: 100%; }

/* ---------------------------------------------------------------------------
   6b. ВИДЕО: постер + ленивый iframe (экспорт: .video-frame, .video-poster)
   Размер зарезервирован (aspect-ratio 16/9) → нулевой CLS при подмене на iframe.
--------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  flex-shrink: 0;   /* внутри flex-колонки (карточка, модалка) кадр не сплющивается */
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  border: none;
  cursor: pointer;
  background: var(--gradient-hero);
  transition: background-color var(--dur) var(--ease);
}
.video-poster[hidden] { display: none; }
/* Фокус-кольцо внутрь: у .video-frame overflow: hidden, снаружи обводку срежет */
.video-poster:focus-visible { outline-offset: -3px; }

.video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--accent-blue);
  color: var(--accent-on);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-poster:hover .video-play {
  transform: scale(1.06);
  box-shadow: var(--shadow-card-hover);
}
.video-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Подставленный iframe занимает весь зарезервированный кадр */
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Заглушка: ID видео ещё не подставлен автором */
.video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  background: var(--bg-soft);
}

/* ---------------------------------------------------------------------------
   6c. МОДАЛКА (экспорт: .modal, .modal-dialog, .is-open, body.modal-open)
--------------------------------------------------------------------------- */
/* Мобайл (база): почти полноэкранная. На ≥640px — центрированное окно (ниже, §9) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  height: 100%;              /* мобайл: почти полный экран */
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6);
  background: var(--surface-1);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  /* fade + scale (в reduced-motion transition ≈ 0 → просто появление) */
  transform: scale(0.96) translateY(8px);
  transition: transform var(--dur) var(--ease);
}
.modal.is-open .modal-dialog { transform: none; }

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}

.modal-title {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  padding-right: var(--touch);   /* не заезжать под крестик */
}
.modal-subtitle {
  margin-top: var(--space-6);
  font-size: 18px;
  font-weight: 600;
}
.modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.modal-body p { color: var(--text-secondary); }
.modal-body strong { color: var(--text-primary); font-weight: 600; }

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
}
.feature-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-blue);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.modal-note { font-size: 13px; color: var(--text-tertiary); }

/* Скролл страницы заблокирован, пока открыта модалка */
body.modal-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   6d. ШАГИ ПРОЦЕССА (#process) — экспорт: .steps-grid, .step-num
--------------------------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
/* Номер шага живёт в той же подложке, что и иконки карточек */
.step-num {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   6e. ДОВЕРИЕ (#trust) — экспорт: .trust-grid, .author, .author-photo
--------------------------------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.author { margin: 0; }
/* Плейсхолдер [[AUTHOR_PHOTO]]: инициалы на мягком градиенте.
   При замене на <img> рамка и тень остаются — картинка займёт весь блок. */
.author-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--gradient-hero);
}
.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-initials {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-blue);
  opacity: 0.85;
}
.author-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 320px;
  margin-top: var(--space-4);
  font-size: 15px;
  color: var(--text-secondary);
}
.author-caption strong { color: var(--text-primary); font-weight: 700; }

.trust-content .section-title { margin-bottom: var(--space-6); }
.trust-list { gap: var(--space-4); }
.feature-list strong { color: var(--text-primary); font-weight: 600; }
.trust-actions { margin-top: var(--space-8); }

/* ---------------------------------------------------------------------------
   6f. FAQ-АККОРДЕОН (#faq) — экспорт: .faq-list, .faq-item, .faq-trigger
   Ответы видимы по умолчанию (индексируемо и работает без JS).
   Схлопывание включает JS, добавляя .faq-js на .faq-list.
--------------------------------------------------------------------------- */
.faq-list {
  border-top: 1px solid var(--border-subtle);
}
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-question { margin: 0; }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-4) 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  transition: color var(--dur) var(--ease);
}
.faq-trigger:hover { color: var(--accent-blue); }

.faq-chevron {
  flex-shrink: 0;
  color: var(--accent-blue);
  transition: transform var(--dur) var(--ease);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

.faq-answer-inner {
  color: var(--text-secondary);
  max-width: 68ch;
}
/* Нижний отступ — на внутреннем элементе: у самого .faq-answer-inner он бы не
   схлопывался вместе с grid-строкой 0fr и оставлял бы пустую полосу. */
.faq-answer-inner > :last-child { padding-bottom: var(--space-6); }

/* Схлопнутое состояние — только при живом JS */
.faq-list.faq-js .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq-list.faq-js .faq-answer > .faq-answer-inner { overflow: hidden; min-height: 0; }
.faq-list.faq-js .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

/* ---------------------------------------------------------------------------
   6g. ФИНАЛЬНЫЙ КОНТАКТ (#contact) — экспорт: .contact-cta, .btn-light
--------------------------------------------------------------------------- */
.contact-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  overflow: hidden;
  text-align: center;
  color: var(--text-on-dark);
  background: var(--gradient-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
/* Мягкий световой ореол внутри синей подложки — та же «глубина», что и в hero.
   Ореол приглушён (было 0.12): теперь объём в блоке держит радар-сетка, а два белых
   слоя поверх синего складывались и осветляли фон под текстом до потери контраста AA. */
.contact-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -30%;
  z-index: 0;
  width: min(760px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.03), transparent 70%);
  pointer-events: none;
}
.contact-cta > * { position: relative; z-index: 1; }

/* Фон-«экран радара» поверх синей заливки: та же техника, что в hero (§5),
   но линии белые — на синем мотив читается ярче, и фон «живёт» по всей странице.
   Локально переопределяем токены цвета — общий блок .hero-radar/.cta-radar их берёт.

   ВАЖНО: position и z-index задаём здесь явно. Правило .contact-cta > * выше имеет
   ту же специфичность (0,1,0), что и .cta-radar, но идёт ПОЗЖЕ в файле — оно бы
   перебило position: absolute на relative, слой встал бы в поток колонки и раздул
   блок на свою высоту (720px). Селектор .contact-cta > .cta-radar (0,2,0) — сильнее. */
.contact-cta > .cta-radar {
  --radar-line: var(--radar-line-on-blue);
  --radar-wave: var(--radar-wave-on-blue);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(720px, 150%);
  transform: translate(-50%, -50%);
  /* Только концентрические круги, без лучей. На синем два белых слоя (круг + луч)
     в точке пересечения складываются в ~19% белого и осветляют фон настолько, что
     белый текст проваливается ниже AA. Круги дают тот же мотив без пересечений. */
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 89px, var(--radar-line) 89px 90px);
}
/* Волна — раз в 7 секунд, как в hero. Блок компактный, поэтому она есть и на мобиле. */
.cta-radar-wave { animation: radar-scan 7s var(--ease) infinite; }

/* Декоративный радар над заголовком */
.contact-radar {
  display: inline-flex;
  color: var(--accent-on);
  opacity: 0.9;
  margin-bottom: var(--space-2);
}

.contact-cta .section-title {
  color: var(--accent-on);
  font-size: 32px;
  max-width: 18ch;
}
/* Текст на синей заливке — --accent-on (белый): по DESIGN.md §2 именно он назначен
   цветом текста НА синем. Прежний --accent-blue-soft давал ~4.1:1 поверх осветлённого
   радаром фона — ниже порога AA (4.5:1) для обычного текста. Замер — по пикселям. */
.contact-lead {
  font-size: 18px;
  color: var(--accent-on);
  max-width: 46ch;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
/* Главная кнопка страницы — крупнее обычной */
.contact-actions .btn-light {
  padding: var(--space-4) var(--space-12);
  font-size: 16px;
}
.contact-note {
  font-size: 13px;
  color: var(--accent-on);
  opacity: 0.9;     /* мелкий кегль — держим контраст выше AA, не уводим в полупрозрачность */
}

/* Кнопка на тёмной/синей подложке (DESIGN.md §6): белая заливка, тёмный текст */
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-3) var(--space-8);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--accent-on);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn-light:hover {
  color: var(--accent-blue-dim);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.btn-light:active { transform: translateY(0); }

.contact-email {
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  color: var(--accent-on);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-email:hover { color: var(--accent-blue-soft); }
.contact-cta :focus-visible { outline-color: var(--accent-on); }

/* ---------------------------------------------------------------------------
   7. ФУТЕР (тёмная секция)
--------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-top: var(--space-16);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}
.brand--footer { color: var(--text-on-dark); }
.brand--footer:hover { color: var(--text-on-dark); }
.footer-note {
  margin-top: var(--space-4);
  max-width: 44ch;
  color: var(--text-on-dark-dim);
  font-size: 15px;
}
.footer-heading {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
  color: var(--text-on-dark);
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--text-on-dark-dim);
  font-size: 15px;
}
.footer-list a:hover { color: var(--text-on-dark); }

.footer-top-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-top: var(--space-2);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 15px;
}
.footer-top-link:hover { color: var(--accent-blue-soft); }

.footer-bottom {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--text-on-dark-dim);
}

/* ---------------------------------------------------------------------------
   8. АНИМАЦИЯ ПОЯВЛЕНИЯ (экспорт: класс .reveal — JS подхватывает)
--------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   9. АДАПТИВ (mobile-first → планшет → десктоп)
--------------------------------------------------------------------------- */

/* Планшет */
@media (min-width: 640px) {
  .hero-title { font-size: 44px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }

  /* Компактные карточки — по две в ряд */
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }

  /* Радар-сетка крупнее (4–5 колец), волна сканирования включается */
  .hero-radar { width: min(1080px, 130%); }
  .hero-radar-wave { display: block; animation: radar-scan 7s var(--ease) infinite; }

  /* Модалка перестаёт быть полноэкранной: центрированное окно */
  .modal { padding: var(--space-4); }
  .modal-dialog {
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: 90vh;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
  }
}

/* Десктоп: горизонтальное меню, бургер скрыт */
@media (min-width: 960px) {
  .nav-toggle { display: none; }

  .nav-menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    /* всегда видно на десктопе */
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-links { flex-direction: row; gap: var(--space-2); }
  .nav-links a { min-height: auto; padding: var(--space-2) var(--space-3); }
  .nav-cta { margin-top: 0; }

  .hero-inner {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
  .hero-title { font-size: 60px; line-height: 1.1; }
  .section { padding-block: var(--space-24); }
  .section-title { font-size: 36px; }

  /* Демо: три карточки в один ряд */
  .cards-grid { grid-template-columns: repeat(3, 1fr); }

  /* «Не только боты»: 5 карточек как 3 + 2, вторая строка по центру.
     Сетка из 6 колонок, карточка занимает 2 → 4-я и 5-я сдвинуты на полколонки. */
  .skills-grid { grid-template-columns: repeat(6, 1fr); }
  .skills-grid > * { grid-column: span 2; }
  .skills-grid > :nth-child(4) { grid-column: 2 / span 2; }
  .skills-grid > :nth-child(5) { grid-column: 4 / span 2; }

  /* Процесс: четыре шага в линию */
  .steps-grid { grid-template-columns: repeat(4, 1fr); }

  /* Доверие: фото слева, текст справа */
  .trust-grid { grid-template-columns: 320px 1fr; gap: var(--space-16); }

  .contact-cta { padding: var(--space-24) var(--space-12); }
  .contact-cta .section-title { font-size: 44px; }
  .faq-trigger { font-size: 18px; padding: var(--space-6) 0; }

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
  }
  .footer-about { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   10. reduced-motion — уважаем: без движения, только мгновенная видимость
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Движение заменяем статикой: без подъёма карточек и без scale у модалки */
  .card:hover { transform: none; }
  .video-poster:hover .video-play { transform: none; }
  .modal-dialog { transform: none; }
  /* Пульс логотипа — только по явному желанию пользователя видеть движение */
  .logo-mark path,
  .brand:hover .logo-mark path { animation: none; opacity: 1; }
  /* Волна сканирования выключается полностью (и в hero, и в CTA);
     статичная радар-сетка в обоих местах остаётся */
  .hero-radar-wave,
  .cta-radar-wave { animation: none; opacity: 0; }
}