/* --- ЛОКАЛЬНЫЕ ШРИФТЫ ПО ТЗ: Manrope (заголовки) + Inter (текст) + Noto Sans (запас) --- */
/* Manrope — официальные срезы Google Fonts по подмножествам, чтобы заголовки
   на казахском рендерились самим Manrope (буквы Ә Ғ Қ Ң Ө Ұ Ү Һ І — в cyrillic /
   cyrillic-ext), а не подменялись запасным шрифтом. Вариативный, вес 200–800. */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope/Manrope-cyrillic-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope/Manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope/Manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope/Manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Variable.woff2') format('woff2'),
    url('../fonts/inter/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/noto-sans/NotoSans-Variable.woff2') format('woff2'),
    url('../fonts/noto-sans/NotoSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- ТЕХНОЛОГИЧЕСКИЙ ПРЕМИУМ-ДИЗАЙН (ДЕНТАЛ AI) --- */
:root {
  /* Фирменная палитра - Строгий благородный B2B стиль (без неона) */
  --color-primary: #008275;
  /* Благородный бирюзовый */
  --color-secondary: #11423D;
  /* Глубокий клинический хвойный */
  --color-accent: #D64603;
  /* Насыщенный B2B оранжевый для кнопок */
  --color-light-accent: #4FD6C4;
  /* Светлый бирюзовый акцент (для тёмных поверхностей: подвал, баннер) */

  /* Фоновые решения премиум-класса — чёткая иерархия поверхностей с заметным шагом тона */
  --bg-main: #DAE0DF;
  /* Мягкий светлый серо-зелёный фон для hero и родственных карточек/панелей */
  --surface-alt: #FFFFFF;
  /* Секции уровня B — белые (чередование белый/серый, как в исходной схеме) */
  --bg-card: #FFFFFF;
  /* Карточки/плашки — белые */
  --text-main: #0E1D1B;
  /* Глубокий хвойно-черный */
  --text-muted: #496360;
  /* Мягкий графитовый */
  --border-color: #9AACA8;
  /* Усиленные границы — заметны на любом мониторе (более тёмный тил-серый) */

  /* ЕДИНАЯ ТЕНЬ ПО ОБРАЗЦУ ПЕРЕКЛЮЧАТЕЛЕЙ ТЕМЫ/ЯЗЫКА В ХЕДЕРЕ.
     Один и тот же мягкий профиль применяется ко ВСЕМ элементам сайта:
     плашкам, кнопкам, картинке хедера, дашбордам, SVG-иконкам и цифрам.
     Варианты: box-shadow (-unified), filter (-drop), text-shadow (-text). */
  /* Единая видимая мягкая тень для светлой темы: без цветных ореолов, но читаемая на сером/белом фоне. */
  --shadow-unified: 0 12px 28px -10px rgba(0, 0, 0, 0.32), 0 4px 10px -6px rgba(0, 0, 0, 0.20);
  --shadow-unified-hover: 0 14px 34px -11px rgba(0, 0, 0, 0.36), 0 5px 13px -7px rgba(0, 0, 0, 0.22);
  --shadow-unified-drop: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.10));
  --shadow-unified-text: 0 2px 6px rgba(0, 0, 0, 0.18);
  /* Все семантические токены указывают на единую тень — единый облик по всему сайту. */
  --shadow-sm: var(--shadow-unified);
  --shadow-md: var(--shadow-unified);
  --shadow-lg: var(--shadow-unified);
  --shadow-pill: var(--shadow-unified);
  --shadow-panel: var(--shadow-unified);
  --shadow-panel-hover: var(--shadow-unified-hover);
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-blur: 16px;

  /* Типографика по ТЗ: Manrope для заголовков, Inter для текста/UI, Noto Sans — запас */
  --font-heading: 'Manrope', 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-body);
  /* алиас для обратной совместимости */

  /* Размеры шрифтов (глобально увеличенные для исключительной B2B читаемости).
     Дисплейные размеры — fluid через clamp(): на десктопе равны верхней границе
     (значения не меняются), на узких экранах плавно уменьшаются → нет переполнения
     и сохраняется крупная читаемая типографика на мобайле. */
  --font-xs: 17px;
  /* Мелкий текст/подписи */
  --font-sm: 19px;
  /* Базовый текст карточек и FAQ */
  --font-md: clamp(19px, 2.4vw, 22px);
  /* Описания и крупные акценты */
  --font-lg: clamp(21px, 3vw, 25px);
  /* Заголовки карточек и возможностей */
  --font-xl: clamp(23px, 4.2vw, 29px);
  /* Крупные выделенные цифры/лейблы */
  --font-2xl: clamp(28px, 5.6vw, 38px);
  /* Названия разделов/секций */
  --font-3xl: clamp(31px, 7vw, 46px);
  /* Подзаголовки первого экрана */
  --font-4xl: clamp(34px, 8vw, 56px);
  /* Главный заголовок Hero */

  /* Округлости и Сетка */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Интервалы */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 100px;

  --container-width: 1560px;
  /* Расширено до 1560px для широких мониторов */
  --header-height: 72px;
  /* Увеличена высота для читаемости элементов */
}

/* --- СБРОС И ОПТИМИЗАЦИЯ --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* Якоря и snap не прячутся под фикс-хедер */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Гасим любой горизонтальный «фантомный» скролл на корне (вертикальный
     скролл и scroll-snap не затрагиваются — clip действует только по X). */
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.65;
  letter-spacing: 0.008em;
  /* Золотой стандарт B2B-типографики для мелкого/базового текста (Inter) */
  /* Увеличен межстрочный интервал для легкого чтения */
  overflow-x: clip;
  /* clip (а не hidden) — чтобы html оставался скролл-контейнером для scroll-snap */
}

/* ============================================================
   ГЛАВНЫЙ SCROLLBAR СТРАНИЦЫ
   Десктоп/ноутбуки (мышь): аккуратный тонкий скроллбар с зарезервированным
   местом (scrollbar-gutter: stable) — он НЕ наезжает на картинку и контент.
   Планшеты/мобильные (тач): скроллбар скрыт, прокрутка естественная.
   Детект устройства по pointer/hover — как в остальном проекте.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  html::-webkit-scrollbar {
    width: 12px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 999px;
    /* прозрачная рамка делает «бегунок» уже и отодвигает его от края,
       чтобы он не прижимался вплотную к контенту */
    border: 3px solid transparent;
    background-clip: padding-box;
  }

  html::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary);
    background-clip: padding-box;
  }
}

/* Планшеты и мобильные (сенсорные устройства): скроллбар не виден */
@media (hover: none), (pointer: coarse) {
  html {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* --- МАГНИТНЫЙ SCROLL-SNAP ---
   Реализован на JS (js/main.js, smartCenterSnap): после остановки колеса мыши
   ближайший блок плавно центрируется по экрану (а высокие блоки выравниваются
   по верху под хедером). CSS scroll-snap отключён, чтобы не конфликтовать с JS.
   На сенсорных устройствах JS-снап не активируется — естественная прокрутка. */

/* Заголовки и крупные акцентные цифры — Manrope (по ТЗ) */
h1,
h2,
h3,
h4,
h5,
h6,
.logo-title,
.hero-title,
.section-title,
.banner-title,
.fact-num,
.price-amount,
.price-title,
.stat-card-value,
.db-screen-title,
.trainer-prompt {
  font-family: var(--font-heading);
  letter-spacing: -0.015em;
  /* Системный сжатый интервал для крупных дисплейных заголовков (Manrope) */
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

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

/* --- ГЛОБАЛЬНЫЙ МАКЕТ --- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.section {
  padding: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
}

.section-header {
  max-width: 720px;
  margin: 0 auto 64px auto;
  text-align: center;
}

.section-title {
  font-size: var(--font-2xl);
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.3;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
  /* Системный сжатый интервал для крупных заголовков */
}

/* Эстетичные переносы заголовков: браузер балансирует длину строк и не
   оставляет «висячее» одно слово на последней строке (напр. «уровне?»).
   Применяем balance ко ВСЕМ заголовкам (skill typography §1.1/§9), а не части. */
.hero-title,
.section-title,
.banner-title,
.pain-title,
.feat-title,
.role-title,
.sol-text-title,
.info-widget-title,
.info-step-title,
.how-step-title,
.db-screen-title,
.checklist-title,
.chart-title,
.price-title,
.price-includes-title,
.form-header-title,
.popup-promo-title,
.section-subtitle {
  text-wrap: balance;
}

/* Абзацы/лиды/буллеты: «красивый» перенос — браузер не оставляет одно
   висячее слово на последней строке и не делит слова (hyphens не включаем). */
.hero-descr,
.hero-bullet-text,
.section p,
.faq-answer,
p.lead,
li {
  text-wrap: pretty;
}

.section-subtitle {
  font-size: var(--font-md);
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Комфортный просторный интервал для дескриптора */
}

.section-title--left,
.section-subtitle--left {
  text-align: left;
}

.section-subtitle--left {
  margin-bottom: 24px;
}

/* --- ПРЕМИАЛЬНЫЕ КНОПКИ (Shift gradient) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  font-size: var(--font-sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.008em;
  /* Идеальное межбуквенное для кнопок */
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, #F3550C 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-panel);
  /* Единая мягкая тёмная тень (как у всех плашек), без цветного свечения */
  border: 1px solid rgba(214, 70, 3, 0.15);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-panel-hover);
  filter: brightness(1.05);
}

/* Единый размер всех CTA-кнопок на десктопе (кроме кнопки отправки формы) */
@media (min-width: 769px) {
  .btn:not(.form-submit-btn) {
    width: 300px;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Чуть отодвигаем подпись от увеличенной кнопки в Hero */
  .hero-actions-container .hero-trust-badge {
    margin-left: 10px;
  }
}

/* --- ФЛУИДНЫЙ КАПСУЛЬНЫЙ ХЕДЕР --- */
.site-header.hidden {
  transform: translateY(-120%);
}

.site-header {
  position: fixed;
  top: 12px;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-unified);
  padding: 0 40px;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  /* У логотипа уже свои скруглённые края и обводка — НЕ добавляем border-radius.
     Небольшая тень — через drop-shadow (следует форме иконки, а не квадрату),
     в тон остальным элементам хедера (переключатели темы/языка). */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.30)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}

/* RU: телефон, Telegram, MAX (WhatsApp скрыт).
   EN/KZ: телефон, WhatsApp, Telegram (MAX скрыт). */
.whatsapp-option {
  display: none;
}

html[lang="en"] .whatsapp-option,
html[lang="kk"] .whatsapp-option {
  display: block;
}

html[lang="en"] .max-option,
html[lang="kk"] .max-option {
  display: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  /* высота лого-текста = высоте лого-блока (= иконке логотипа); на десктопе
     это совпадает по высоте с телефоном+email справа */
  gap: 4px;
  /* заметный, но аккуратный отступ между «ПАЛАНТИР» и «ДЛЯ СТОМАТОЛОГИИ» */
  --logo-title-size: 26px;
  /* размер «ПАЛАНТИР»; подпись = его половина → одинаковая ширина строк.
     Переопределять нужно ТОЛЬКО эту переменную (на любом адаптиве). */
}

.logo-title {
  font-size: var(--logo-title-size);
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

/* На казахском браузер подставляет для «ПАЛАНТИР» более широкий системный
   шрифт (фолбэк по языку документа kk). Сжимаем по ширине ВЕСЬ блок логотипа
   (заголовок + подпись вместе) — так они остаются равной ширины между собой,
   а лого-локап совпадает по ширине с другими языками. */
html[lang="kk"] .logo-text {
  transform: scaleX(0.85);
  transform-origin: left center;
}

.logo-subtitle {
  font-size: calc(var(--logo-title-size) * 0.5); /* ровно половина «ПАЛАНТИР» → та же ширина */
  font-weight: 800;
  color: #7AADA7; /* как email в правой части хедера */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 0;
  display: block;
  line-height: 1;
  white-space: nowrap;
  /* Ширина «ДЛЯ СТОМАТОЛОГИИ» подобрана размером шрифта так, чтобы при
     нормальном интервале совпадать по длине с «ПАЛАНТИР» сверху. */
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
}

.nav-link {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 0;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary);
}

.contact-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 190px;
  justify-content: center;
  gap: 2px;
}

.contact-phone {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

.contact-email {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.contact-phone:hover,
.contact-email:hover {
  color: var(--color-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-transition {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}


.lang-switcher:hover {
  box-shadow: var(--shadow-unified-hover);
}

/* --- HERO SECTION (ПРЕМИУМ ШРИФТЫ, НЕТ ОВЕРЛАПОВ, ИДЕАЛЬНЫЙ ВОЗДУХ) --- */
.hero-section {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + clamp(56px, 7svh, 88px));
  padding-bottom: clamp(84px, 10svh, 124px);
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--bg-main);
  box-sizing: border-box;
  overflow: hidden;
}

/* «Живая» сетка точек на фоне всех секций (js/hero-dots.js, v5).
   Канвасы создаются скриптом и лежат ПОД контентом: canvas на
   z-index 0, контейнеры контента подняты на 1. */
.dots-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-section .hero-grid,
section.section>.container {
  position: relative;
  z-index: 1;
}

@media (min-width: 901px) and (max-width: 1559px) {
  /* Ноутбуки/MacBook/landscape-планшеты: повторяем композицию Full HD.
     Высота по контенту (без форсированных 100vh), но с комфортным отступом
     сверху — текст не прилипает к хедеру. Колонки РАВНОЙ высоты (stretch),
     H1 и картинка выровнены по верхнему краю, кнопка прижата вниз. */
  .hero-section {
    min-height: auto !important;
    align-items: flex-start !important;
    padding-top: calc(var(--header-height) + clamp(58px, 7.5vh, 100px)) !important;
    padding-bottom: clamp(52px, 7vh, 96px) !important;
  }

  /* IMAGE-FIRST: картинка держит большой размер как на Full HD (~600px), её
     НЕ сжимаем под сетку. Вместо этого сужаем текстовую колонку — текст
     переносится (подзаголовок ~3 строки, буллеты ~2 строки). min-width:0 не
     даёт длинному тексту распирать колонку и душить картинку.
     ВАЖНО: префикс .hero-section повышает специфичность, иначе базовые
     правила .hero-grid/.hero-visual-container (идут ниже в коде) перебивают. */
  .hero-section .hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(440px, 46vw, 600px);
    gap: clamp(32px, 3.5vw, 56px);
    align-items: start;
  }

  .hero-section .hero-content {
    min-width: 0;
  }

  /* Картинка прижата к ВЕРХУ своей колонки — её верхняя граница вровень с
     верхом H1 (а не по центру, иначе фото визуально «проседает» вниз). */
  .hero-section .hero-visual-container {
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 0;
  }

  /* Буллеты переносятся (до 2 строк), не распирают текстовую колонку. */
  .hero-section .hero-bullet-text {
    white-space: normal;
  }

  /* Кнопка + trust-бейдж в одной строке, бейдж справа от кнопки. Текст
     бейджа всегда ОДНОЙ строкой; если в узкой колонке не хватает места,
     бейдж переносится целиком под кнопку (но текст не ломается). */
  .hero-section .hero-actions-container {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  .hero-section .hero-actions-container .btn-primary {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 13px 20px;
  }

  .hero-section .hero-actions-container .hero-trust-badge {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.3;
  }
}

/* Ноутбуки 901–1365: справа от кнопки бейджу места уже не хватает, поэтому он
   стоит строго ПОД кнопкой и ровно той же ширины — кнопка всегда шире текста
   бейджа, ничего не выпирает (пропорция «кнопка ≥ подпись»). */
@media (min-width: 901px) and (max-width: 1365px) {
  .hero-section .hero-actions-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-section .hero-actions-container .btn-primary {
    width: 300px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .hero-section .hero-actions-container .hero-trust-badge {
    width: 300px;
    box-sizing: border-box;
    justify-content: center;
    margin-left: 0;
  }
}

/* ЖЁСТКОЕ ПРАВИЛО: hero целиком помещается в viewport на КАЖДОМ адаптиве.
   На ноутбуках с НИЗКОЙ высотой экрана (1366×768 → реальная высота ~640–700px
   с учётом хрома браузера и панели задач) квадратная картинка (~600px) + отступы
   делали hero выше экрана, и кнопка/бейдж уходили под обрез. Сжимаем по ВЫСОТЕ
   экрана: уменьшаем картинку (пропорции 1:1 сохраняются) и вертикальные отступы,
   чтобы CTA всегда был виден без прокрутки. Ширину не трогаем — только высотные @media. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 44px) !important;
    padding-bottom: 44px !important;
  }
  .hero-section .hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(420px, 44vw, 560px);
    gap: clamp(28px, 3vw, 48px);
  }
  .hero-title { margin-bottom: 18px; }
  .hero-descr { margin-bottom: 24px; }
  .hero-bullets-box { gap: 13px; margin-bottom: 28px; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 28px) !important;
    padding-bottom: 28px !important;
  }
  .hero-section .hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 40vw, 500px);
    gap: clamp(24px, 2.6vw, 40px);
  }
  .hero-title { margin-bottom: 14px; }
  .hero-descr { margin-bottom: 18px; }
  .hero-bullets-box { gap: 10px; margin-bottom: 20px; }
}

/* Резиновые поля по бокам на ноутбуках/планшетах: контент (включая hero и
   плавающую капсулу хедера) центрируется с воздухом слева и справа, как на
   Full HD. Десктоп ≥1560 не трогаем — там работает базовый --container-width. */
@media (max-width: 1559px) {
  .container {
    padding-left: clamp(28px, 4vw, 72px);
    padding-right: clamp(28px, 4vw, 72px);
  }
}

/* Чередование фонов секций: demo / offer = уровень B, contacts = уровень A */
.demo-section {
  background-color: var(--surface-alt);
}

.offer-section {
  background-color: var(--surface-alt);
  overflow: visible;
}

.contacts-section {
  background-color: var(--bg-main);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}



.hero-title {
  font-size: var(--font-3xl);
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1.3;
  letter-spacing: -0.015em;
  /* Системный сжатый интервал дисплейного заголовка */
  margin-bottom: 24px;
}

.hero-title span {
  color: var(--color-primary);
}

.hero-descr {
  font-size: clamp(16px, 1.35vw, 18px);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Подзаголовок-пояснение: заметно меньше главного заголовка, не «второй H1» */
}

.hero-bullets-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-bullet-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-bullet-icon {
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
}

.hero-bullet-text {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  line-height: 1.3;
  /* Тугой интервал: при переносе на адаптивах строки не разъезжаются
     (без него наследуется body line-height 1.65 — слишком много воздуха). */
}

.hero-actions-container {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-trust-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Текст бейджа всегда одной строкой; при нехватке места бейдж переносится
     целиком (контейнер wrap), но сам текст не ломается на 2 строки. */
  white-space: nowrap;
}

.hero-trust-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

/* Элегантный премиальный визуал в Hero справа (реалистичное фото в рамке) */
.hero-visual-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  position: relative;
  width: 100%;
  padding-right: 8px;
}

.hero-image-mockup {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-unified);
  overflow: hidden;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-image-mockup:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-unified-hover);
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: none !important;
}

.hero-image-mockup:hover .hero-photo-img {
  transform: scale(1.03);
}

/* Обёртка <picture> заполняет мокап, чтобы img height:100% считался от неё.
   Тему переключаем на уровне <picture>, а не img: у скрытой темы иначе осталась
   бы пустая обёртка с высотой 100% и ломала бы раскладку. */
.hero-photo-pic {
  display: block;
  width: 100%;
  height: 100%;
}

/* Тематические варианты hero-фото: light по умолчанию, dark — в тёмной теме */
.hero-photo-pic--dark {
  display: none;
}

body.dark-theme .hero-photo-pic--light {
  display: none;
}

body.dark-theme .hero-photo-pic--dark {
  display: block;
}

.hero-photo-overlay {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 10;
  pointer-events: none;
}

.mini-metric-pill {
  width: 184px;
  height: 42px;
  box-sizing: border-box;
  /* Визуально как контейнер хедера (.header-container): то же матовое стекло
     и окантовка. Радиус на шаг меньше (md): пропорционально росту бейджа
     (12/42 ≈ 16/70 у хедера) — иерархия скруглений: контейнеры 16 /
     чипы-бейджи 12 / кнопки 6. */
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  box-shadow: var(--shadow-unified);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mini-metric-pill > span:not(.pulse-indicator) {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

/* .secondary идентичен основному — единый стиль для обоих бейджей */
.mini-metric-pill.secondary {
  background-color: rgba(255, 255, 255, 0.65);
  color: var(--color-secondary);
}

/* Тёмная тема: как body.dark-theme .header-container */
body.dark-theme .mini-metric-pill,
body.dark-theme .mini-metric-pill.secondary {
  background-color: rgba(17, 35, 32, 0.96);
  border-color: #1E3330;
  color: #E6F3F1;
}

.mini-metric-pill .pulse-indicator {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  filter: none;
  animation: none;
}

.mini-metric-pill .pulse-indicator::before,
.mini-metric-pill .pulse-indicator::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: metricPulseRing 1.8s ease-out infinite;
}

.mini-metric-pill .pulse-indicator::after {
  animation-delay: 0.6s;
}

.mini-metric-pill .pulse-indicator--record {
  color: rgba(214, 70, 3, 0.55);
  background-color: var(--color-accent);
}

.mini-metric-pill .pulse-indicator--audit {
  color: rgba(214, 70, 3, 0.55);
  background-color: var(--color-accent);
}

@keyframes metricPulseRing {
  0% {
    transform: scale(0.45);
    opacity: 0.9;
  }

  75% {
    transform: scale(1.7);
    opacity: 0;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* --- БЛОК «ВАША ПРОБЛЕМА» --- */
.pain-section {
  background-color: var(--surface-alt);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pain-card {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  box-shadow: var(--shadow-unified);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.pain-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-unified-hover);
}

.pain-icon {
  font-size: var(--font-xl);
  margin-bottom: 24px;
}

.pain-title {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  /* Идеальное межбуквенное расстояние */
}

.pain-descr {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- БЛОК «НАШЕ РЕШЕНИЕ» --- */
.solution-section {
  background-color: var(--bg-main);
}

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.solution-content {
  align-self: start;
}

.solution-features-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 36px;
}

.sol-item {
  display: flex;
  gap: 20px;
}

.sol-icon-num {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: rgba(0, 130, 117, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-sm);
  font-weight: 800;
  flex-shrink: 0;
  /* Объём: настоящий box-shadow — drop-shadow из общей группы иконок
     почти невидим на полупрозрачном фоне кружка (тень повторяет альфу) */
  box-shadow: var(--shadow-pill);
}

.sol-text-title {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 6px;
}

.sol-text-descr {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

.solution-visual-box {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.info-steps-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.info-widget-title {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  border-bottom: 1.5px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.info-step-card {
  display: flex;
  gap: 16px;
  background-color: var(--bg-main);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-panel);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.info-step-card:hover,
.info-step-card.active {
  border-color: var(--color-primary);
  background-color: #FFFFFF;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.info-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--surface-alt);
  border: 1.5px solid var(--border-color);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.info-step-card:hover .info-step-num,
.info-step-card.active .info-step-num {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.info-step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-step-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.3;
}

.info-step-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 500;
}

.info-step-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.info-step-status.positive {
  color: var(--color-primary);
}

.info-step-status.danger {
  color: var(--color-accent);
}

.info-step-status.accent {
  color: var(--color-primary);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
  filter: var(--shadow-unified-drop);
  animation: pulseAnimation 1.5s infinite;
}

@keyframes pulseAnimation {
  0% {
    transform: scale(0.95);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}

/* --- БЛОК ФАКТОИДОВ --- */
.facts-section {
  background-color: #FFFFFF;
  color: var(--text-main);
  overflow: visible;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.fact-item {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-panel);
  filter: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
  position: relative;
  z-index: 1;
}

.fact-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-panel-hover);
}

.fact-num {
  font-size: clamp(2rem, 1.4rem + 1.7vw, 2.85rem);
  font-weight: 700;
  color: var(--color-light-accent);
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
  /* Плавно уменьшается на планшетах/ноутбуках (раньше был фикс 2.85rem). */
  /* в светлой теме цифры тёмные — читаемы на сером фоне карточки (см. ниже) */
  /* Системный сжатый интервал для крупных метрик */
  text-shadow: var(--shadow-unified-text);
  /* Единая тень под цифрой — по образцу переключателей хедера */
}

body:not(.dark-theme) .fact-num {
  color: var(--color-secondary);
  text-shadow: none;
}

.fact-label {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.fact-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- БЛОК ПРЕИМУЩЕСТВ --- */
.features-section {
  background-color: var(--surface-alt);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feat-card {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: var(--shadow-panel);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feat-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-panel-hover);
}

.feat-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-lg);
  margin-bottom: 28px;
}

.feat-title {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.feat-descr {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- БЛОК «ДЛЯ КОГО» --- */
.roles-section {
  background-color: var(--bg-main);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 4-я карточка ролей нужна только в 2-колоночном раскладе (≤1024), чтобы
   сетка 2×2 не оставляла пустую ячейку. На десктопе (3 колонки) её прячем —
   там 3 карточки заполняют ряд ровно. */
@media (min-width: 1025px) {
  .roles-grid .role-card--extra {
    display: none;
  }
}

.role-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  box-shadow: var(--shadow-panel);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.role-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-panel-hover);
}

.role-icon {
  font-size: 36px;
  margin-bottom: 24px;
  color: var(--color-primary);
}

.role-title {
  font-size: var(--font-md);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 16px;
}

.role-descr {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- ОБЯЗАТЕЛЬНЫЙ БЛОК ЦЕН (ЕДИНЫЙ ТАРИФ) --- */
.pricing-section {
  background-color: var(--surface-alt);
}

.price-card {
  background-color: var(--bg-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 32px 48px;
  box-shadow: var(--shadow-panel);
  position: relative;
  text-align: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-panel-hover);
}

/* Композиция тарифа: цена + действия слева, состав справа (на всю ширину блока) */
.price-card-grid {
  display: grid;
  /* Разделитель РОВНО по центру — колонки равной ширины. Левой хватает места для
     тарифов, правой — чтобы заголовки пунктов были в одну строку с мелким
     описанием снизу; обе половины заполняются ровно. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

.price-offer-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 56px 24px 32px;
  border-right: 1.5px solid var(--border-color);
}

.price-amount {
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1;
  letter-spacing: -0.015em;
  /* Плавно уменьшается на планшетах/ноутбуках, чтобы цена и «/ месяц»
     помещались в одну строку и не съезжали (раньше был фикс 3.6rem). */
  /* Системный сжатый интервал для крупных метрик/цен */
  text-shadow: var(--shadow-unified-text);
  /* Единая тень под ценой — по образцу переключателей хедера */
}

.price-user-add {
  font-size: var(--font-md);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.price-terms {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 600;
}

/* Тарифы по размеру команды — аккуратный список уровней (цена за всю клинику) */
.price-tiers-lead {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 26px;
}

.price-tiers {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.price-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1.5px solid var(--border-color);
}

.price-tier:first-child {
  padding-top: 0;
}

.price-tier:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.price-tier-size {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--color-secondary);
}

.price-tier-val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.price-tier-val > span:first-child {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.05rem + 1vw, 1.9rem);
  font-weight: 900;
  color: var(--color-secondary);
  letter-spacing: -0.015em;
  line-height: 1;
}

.price-tier-per {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 600;
}

.price-includes-col {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}

/* Заголовок правой колонки — ТОЧНО как «Палантир Максимум» слева (одинаковый
   размер и положение), чтобы заголовки колонок были выровнены по высоте. */
.price-includes-title {
  font-size: var(--font-xl);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 18px;
  text-align: left;
}

.price-features-grid {
  display: flex;
  flex-direction: column;
  /* Один столбец, пункты сверху вниз, каждый в одну строку. Тянемся на всю
     высоту колонки и распределяем равномерно (space-between), чтобы правая часть
     заполнялась так же ровно, как левая, без пустоты внизу. */
  gap: 16px;
  flex: 1 1 auto;
  justify-content: space-between;
  text-align: left;
  margin-bottom: 0;
}

.price-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.price-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.price-feature-title {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.price-feature-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.3;
}

.price-feature-item .green-check-svg {
  width: 22px;
  height: 22px;
  margin-right: 0;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Кнопка — под сеткой, по центру */
.price-button-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Заголовок и подзаголовок секции цен — в одну строку на десктопе/планшете,
   чтобы весь блок (заголовок + описание + карточка) помещался в один экран. */
@media (min-width: 1024px) {
  #pricing .section-title,
  #pricing .section-subtitle {
    white-space: nowrap;
    max-width: none;
  }
  #pricing .section-header {
    max-width: none;
  }
}

/* --- БЛОК FAQ (АККОРДЕОНЫ С РАВНОЙ ШИРИНОЙ) --- */
.faq-section {
  background-color: var(--bg-main);
}

.faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item-box {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item-box:first-child {
  border-top: 1.5px solid var(--border-color);
}

.faq-item-box:nth-child(even) {
  background-color: var(--bg-card);
}

.faq-item-box.active {
  border-color: var(--color-primary);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-panel-hover);
}

.faq-header-btn {
  width: 100%;
  min-height: 88px;
  padding: 20px 28px;
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-weight: 800;
  font-size: var(--font-sm);
  color: var(--color-secondary);
  transition: color 0.2s ease;
}

.faq-header-btn:hover {
  color: var(--color-primary);
}

.faq-icon-indicator {
  font-size: var(--font-md);
  color: var(--color-primary);
  font-weight: 800;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item-box.active .faq-icon-indicator {
  transform: rotate(45deg);
}

.faq-body-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-body-inner {
  padding: 0 28px 26px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.7;
}

.faq-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  margin-bottom: 8px;
}

.faq-more-btn {
  min-width: 184px;
  justify-content: center;
}

/* Промежуточные CTA-кнопки в середине страницы (равномерный призыв к действию) */
.section-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* --- ФИНАЛЬНОЕ ПРЕДЛОЖЕНИЕ И ГАРАНТИЯ --- */
.cta-banner-card {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #17544E 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 64px;
  position: relative;
  z-index: 1;
  margin: 6px 0 30px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: stretch;
}

.offer-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.offer-benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 4px;
}

.offer-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.offer-benefit-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #80FFF2;
}

.offer-benefit-item span {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.offer-benefit-item strong {
  color: #FFFFFF;
  font-weight: 800;
}

.banner-title {
  font-size: var(--font-2xl);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 24px;
  letter-spacing: -0.015em;
  /* Системный сжатый интервал для крупных заголовков */
}

.banner-desc {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
  line-height: 1.7;
}

/* Форма в баннере */
.banner-form-box {
  background-color: #FFFFFF;
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 36px;
  box-shadow: var(--shadow-panel);
}

.form-header-title {
  font-size: var(--font-lg);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.2;
  /* Тугой интервал: при переносе («Заявка на бесплатный / доступ») строки не
     разъезжаются (без него наследуется body line-height 1.65). */
}

.form-header-sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 24px;
  text-align: center;
}

.form-submit-btn {
  width: 100%;
}

.field-group {
  margin-bottom: 18px;
}

.field-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.field-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  transition: all 0.2s ease;
  background-color: var(--bg-main);
  box-shadow: var(--shadow-unified);
}

.field-control:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: #FFFFFF;
}

select.field-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008275' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-secondary);
}

.field-textarea {
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-secondary);
}

.field-control::placeholder {
  color: rgba(17, 66, 61, 0.45);
}

.method-selector-box {
  margin-bottom: 24px;
}

.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.consent-checkbox-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.consent-lbl-text {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.consent-lbl-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Honeypot-ловушка: поле невидимо для людей, но «существует» для ботов.
   Прячем обёрткой (не display:none на самом инпуте), чтобы боты его заполняли. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Сообщение об ошибке отправки заявки (показывается из main.js под кнопкой) */
.form-send-error {
  margin-top: 12px;
  font-size: var(--font-xs);
  line-height: 1.45;
  color: #C0392B;
}

.form-send-error:empty {
  display: none;
}

/* --- КОНТАКТЫ И КАРТА --- */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
  align-items: stretch;
}

.contact-details-box {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.info-item-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-icon-container {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: rgba(0, 130, 117, 0.06);
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-lg);
  flex-shrink: 0;
  box-shadow: var(--shadow-unified);
}

.info-item-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.info-item-val {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.5;
}

.info-item-val a:hover {
  color: var(--color-primary);
}

.info-social-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Кнопки мессенджеров в контактах — такие же отдельные кружки-иконки, как в
   шапке (без подписей), только чуть крупнее для удобного касания. */
.social-contact-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  background-color: #0E1B18;
  border: 1.5px solid #1E3330;
  border-radius: var(--radius-md);
  color: #E6F3F1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-unified);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.social-contact-btn span {
  display: none;
}

.social-contact-btn svg {
  flex-shrink: 0;
}

.social-contact-btn:hover {
  background-color: #112320;
  color: #80FFF2;
  border-color: #2A4A45;
  box-shadow: var(--shadow-unified-hover);
}

/* QR для быстрой связи */

.contact-qr-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: transparent;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-unified);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-qr-frame:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-unified-hover);
}

.contact-qr-frame img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 6px;
}

body.dark-theme .contact-qr-frame {
  border-color: #1E3330;
  box-shadow: var(--shadow-panel);
}

body.dark-theme .contact-qr-frame:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-panel-hover);
}

/* QR-код вместо карты (правая колонка) */
.qr-large-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  min-height: 440px;
  height: 100%;
  padding: 40px;
  background-color: var(--surface-alt);
}

/* Без отдельной плашки вокруг QR — это просто прозрачная ссылка-обёртка.
   Обводка теперь у САМОГО QR-кода (на img ниже). */
.contact-qr-frame--large {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
  display: inline-block;
  line-height: 0;
  transition: none;
}

.contact-qr-frame--large:hover {
  transform: none;
  box-shadow: none;
}

.contact-qr-frame--large img {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  transition: border-color 0.25s ease;
}

.contact-qr-frame--large:hover img {
  border-color: var(--color-primary);
}

.qr-large-caption {
  text-align: center;
  max-width: 320px;
}

body.dark-theme .qr-large-holder {
  /* Opaque (was rgba(...,0.4)) so the background dots animation doesn't show through on hover;
     this solid value matches how the translucent card looked composited over the section. */
  background-color: #0F2521;
  border-color: #1E3330;
}

/* Старые стили карты — скрыты (убрана карта по запросу клиента) */
.map-frame-holder {
  display: none;
}

/* --- ФУТЕР --- */
.site-footer {
  background-color: var(--surface-alt);
  color: var(--text-main);
  border-top: 1.5px solid var(--border-color);
  padding: 44px 0 26px;
}

.footer-grid-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 48px;
  align-items: start;
  margin-bottom: 28px;
}

.footer-descr-text {
  max-width: 620px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-nav-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 22px;
  max-width: 620px;
}

.footer-nav-item {
  font-size: 15px;
  color: var(--text-muted);
}

.footer-nav-item:hover {
  color: var(--color-primary);
}

.footer-bottom-row {
  border-top: 1.5px solid var(--border-color);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-bottom-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.footer-legal-links-box {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.footer-requisites {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.footer-requisites p {
  margin: 0;
}

@media (max-width: 900px) {
  .footer-grid-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-nav-col {
    justify-content: flex-start;
  }

  .footer-bottom-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-legal-links-box {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .cta-banner-card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 28px;
  }

  .offer-content,
  .banner-form-box {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --header-height: 56px;

    /* Размеры шрифтов для этого диапазона заданы в общей секции
       "ADAPTIVE TYPOGRAPHY SCALE" ниже (см. .agents/rules/core/typography.md, Part 2). */

    /* Также пропорционально уменьшаем отступы и пустоты */
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
  }

  .site-header {
    top: 8px;
  }

  /* Плавающая капсула с зазором от краёв (боковой инсет — из блока ≤1559) */
  .header-container {
    position: relative;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-unified);
    background-color: rgba(255, 255, 255, 0.96);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-right {
    gap: 10px;
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .logo-block {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: none;
    z-index: auto;
  }

  .logo-mark {
    display: block;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    --logo-title-size: 17.5px; /* подпись = 8.75px авто → совпадает по ширине */
  }

  .logo-title {
    line-height: 0.95;
    letter-spacing: 0.045em;
  }

  .logo-subtitle {
    margin-top: 0;
    letter-spacing: 0.01em;
  }

  .mobile-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.72);
    color: var(--color-secondary);
    flex-shrink: 0;
  }

  body.dark-theme .mobile-theme-toggle {
    background-color: rgba(14, 27, 24, 0.86);
    border-color: rgba(128, 255, 242, 0.14);
    color: #80FFF2;
  }

  body.dark-theme .mobile-theme-icon--sun {
    display: none;
  }

  body.dark-theme .mobile-theme-icon--moon {
    display: block;
  }

  /* Compact card and form paddings to prevent excessive squeezing on mobile */
  .pain-card {
    padding: 20px 16px;
  }

  .feat-card {
    padding: 20px 16px;
  }

  .role-card {
    padding: 20px 16px;
  }

  /* Карточки «теряют 60%» / «Каждая деталь» / «Польза на каждом уровне»:
     иконки скромнее и меньше вертикального воздуха — как в остальных блоках. */
  .pain-icon {
    margin-bottom: 12px;
  }

  .pain-card .pain-icon .green-svg-icon,
  .role-card .role-icon .green-svg-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }

  .feat-icon-box {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
  }

  .feat-card .feat-icon-box .green-svg-icon {
    width: 36px;
    height: 36px;
  }

  .role-icon {
    margin-bottom: 12px;
  }

  .role-title {
    margin-bottom: 10px;
  }

  .banner-form-box {
    padding: 24px 16px;
  }

  /* Поп-ап лид-формы на телефоне: компактнее по вертикали, чтобы форма
     целиком (с крестиком) помещалась на экран смартфона.
     ВАЖНО (конфликт каскада): базовое `.popup-modal-overlay{align-items:center}`
     объявлено НИЖЕ в файле, поэтому при равной специфичности перебивало этот
     мобильный блок и попап оставался по центру (клавиатура перекрывала поля).
     Поднимаем специфичность через `.active` (оверлей всегда .active когда открыт),
     чтобы прижатие к верху реально выигрывало. */
  .popup-modal-overlay.active {
    /* К ВЕРХУ, не по центру: на телефоне экранная клавиатура съедает низ
       экрана и перекрывает поля ввода у вертикально-центрированной модалки.
       Прижимаем к верху (под safe-area / чёлку) и даём оверлею прокрутку —
       первое поле и кнопка отправки остаются над клавиатурой. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  .popup-modal-overlay .popup-modal-box {
    padding: 22px 16px 18px;
    /* Бокс не выше доступной высоты; если форма длинная — прокрутка внутри. */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .popup-modal-close {
    top: 10px;
    right: 10px;
  }

  /* Заголовки в поп-апе не заходят под крестик закрытия */
  .popup-modal-box .form-header-title,
  .popup-modal-box .popup-promo-title {
    padding: 0 30px;
  }

  .popup-modal-box .form-header-title {
    margin-bottom: 5px;
  }

  .popup-modal-box .form-header-sub {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .popup-modal-box .field-group {
    margin-bottom: 10px;
  }

  .popup-modal-box .field-label {
    margin-bottom: 4px;
  }

  .popup-modal-box .field-control {
    padding: 10px 14px;
  }

  .popup-modal-box .method-selector-box {
    margin-bottom: 10px;
  }

  .popup-modal-box .consent-checkbox-row {
    margin-bottom: 12px;
  }

  .popup-modal-box .consent-lbl-text {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Exit-форма на телефоне: над полями есть промо-блок (заголовок + абзац),
     он сдвигает поля вниз — под клавиатуру. Ужимаем его по вертикали:
     заголовок мельче, текст компактнее, отступы плотнее. */
  .popup-modal-overlay.exit-intent-mode .popup-promo-badge {
    margin-bottom: 12px;
  }

  .popup-modal-overlay.exit-intent-mode .popup-promo-title {
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: 6px;
    padding: 0 26px;
  }

  .popup-modal-overlay.exit-intent-mode .popup-promo-text {
    font-size: 12.5px;
    line-height: 1.35;
  }

  /* Кнопки компактнее по высоте, но шрифт держим читаемым (15px — норма 15–16) */
  .btn {
    padding: 11px 20px !important;
    font-size: 15px !important;
    white-space: normal;
    text-align: center;
  }

  /* Уменьшаем огромные цифры/ценовые показатели */
  .fact-num {
    font-size: 2.1rem !important;
    margin-bottom: 6px !important;
  }

  .price-amount {
    font-size: 2.4rem !important;
  }

  .section-header {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 360px) {
  .cta-banner-card {
    padding: 34px 22px;
  }
}

/* ============================================================
   ADAPTIVE TYPOGRAPHY SCALE (Apple-style hierarchy)
   Источник: .agents/rules/core/typography.md (Part 2 — type size hierarchy)
   Desktop (>=1200px) использует базовую шкалу из :root и НЕ меняется.
   Здесь настраиваются только адаптивные брейкпоинты, чтобы
   заголовки/текст не были чрезмерно крупными и держали иерархию.
   ============================================================ */

/* Планшет горизонтальный: 900–1199px
   H1=3xl, H2=2xl, H3=xl, H4=lg, lead=md, body=sm, caption=xs.
   Значения у верхней границы диапазонов PRIMARY ADAPTIVE RULES (.agents/skills/04_responsiveness.md) — текст читается легко. */
@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    --font-xs: 14px;
    --font-sm: 16.5px;
    --font-md: 19px;
    --font-lg: 22px;
    --font-xl: 26px;
    --font-2xl: 34px; /* banner-title; .section-title задаётся плавно ниже */
    --font-3xl: 40px; /* .hero-title задаётся плавно ниже (2 колонки) */
    --font-4xl: 46px;
  }
}

/* Планшет вертикальный: 768–899px */
@media (min-width: 768px) and (max-width: 899px) {
  :root {
    --font-xs: 14px;
    --font-sm: 16.5px;
    --font-md: 19px;
    --font-lg: 23px;
    --font-xl: 27px;
    --font-2xl: 35px;
    --font-3xl: 44px;
    --font-4xl: 46px;
  }

  .hero-title { line-height: 1.1; }
  .section-title { line-height: 1.15; }
}

/* Мобильный вертикальный (и узкий планшет в portrait): <=767px
   Подняты к верхней части диапазонов PRIMARY ADAPTIVE RULES (.agents/skills/04_responsiveness.md): H1 32–36, H2 26–30,
   H3 21–24, H4 18–20, lead 17–19, body 14–16. Раньше были занижены. */
@media (max-width: 767px) {
  /* Заголовки на телефоне компактнее (~на четверть меньше прежних): читаются
     легко, но не доминируют. Иерархия сохранена H1 > H2 > H3 > H4 > body. */
  :root {
    --font-xs: 13.5px;
    --font-sm: 15.5px;
    --font-md: 16.5px;
    --font-lg: 17px;
    --font-xl: 18.5px;
    --font-2xl: 21px;
    --font-3xl: 26px; /* H1: компактный, но > H2 (21) — стабильно влезает в 3 строки */
    --font-4xl: 28px;
  }

  .hero-title { line-height: 1.12; }
  .section-title { line-height: 1.18; }
}

/* Мобильный горизонтальный (низкая высота экрана): экономим высоту */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --font-xs: 13.5px;
    --font-sm: 15.5px;
    --font-md: 17.5px;
    --font-lg: 19.5px;
    --font-xl: 22px;
    --font-2xl: 26px;
    --font-3xl: 32px;
    --font-4xl: 34px;
  }

  .hero-title { line-height: 1.08; }
  .section-title { line-height: 1.16; }
}

/* 2-колоночный hero на ноутбуках/landscape-планшетах (901–1559px):
   текстовая колонка узкая (≈половина экрана), поэтому H1 плавно уменьшаем,
   чтобы заголовок держался в 3 строки (как на Full HD) с тугим межстрочным.
   H2 (заголовки секций и баннера) масштабируем НИЖЕ H1 — иерархия сохраняется.
   Desktop ≥1560 не затрагивается (там работают базовые размеры). */
@media (min-width: 901px) and (max-width: 1559px) {
  .hero-title {
    font-size: clamp(27px, 2.5vw, 42px);
    line-height: 1.1;
  }

  .section-title,
  .banner-title {
    font-size: clamp(28px, 2.55vw, 38px);
    line-height: 1.14;
  }
}

/* --- МОДАЛЬНОЕ ОКНО --- */
.popup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 66, 61, 0.55);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.popup-modal-overlay.active {
  display: flex;
}

.popup-modal-box {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow-lg);
  /* Никогда не выше экрана: если контент не влезает, прокручивается сам бокс,
     а крестик закрытия остаётся доступен (он в верху бокса). */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  /* Горизонтальной прокрутки в поп-апе не бывает по смыслу: контент
     колоночный. Страховка от субпиксельных переливов (канвас и т.п.). */
  overflow-x: hidden;
}

/* Крестик закрытия: без плашки, просто крупный символ × в углу */
.popup-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

.popup-modal-close:hover {
  color: var(--color-primary);
}

/* Комментарий в поп-апе: стартует одной строкой; main.js наращивает высоту
   по мере ввода до трёх строк, дальше — прокрутка внутри поля. */
.popup-modal-box .field-textarea {
  min-height: 0;
  resize: none;
  overflow-y: hidden;
}

/* Невысокие экраны (ноутбуки 768p/720p, landscape): поп-ап ужимается по
   вертикали, чтобы целиком помещаться на экран без прокрутки бокса. */
@media (min-width: 561px) and (max-height: 860px) {
  .popup-modal-overlay {
    padding: 16px;
  }

  .popup-modal-box {
    padding: 26px 32px 24px;
  }

  .popup-modal-box .form-header-title {
    margin-bottom: 6px;
    padding: 0 28px;
  }

  .popup-modal-box .form-header-sub {
    margin-bottom: 14px;
  }

  .popup-modal-box .field-group {
    margin-bottom: 12px;
  }

  .popup-modal-box .field-label {
    margin-bottom: 5px;
  }

  .popup-modal-box .field-control {
    padding: 10px 14px;
  }

  .popup-modal-box .method-selector-box {
    margin-bottom: 12px;
  }

  .popup-modal-box .consent-checkbox-row {
    margin-bottom: 14px;
  }

  .popup-promo-badge {
    margin-bottom: 16px;
  }
}

/* Совсем невысокие окна (720p с панелями браузера): ещё плотнее, чтобы
   поп-ап влезал целиком даже с комментарием, выросшим до трёх строк. */
@media (min-width: 561px) and (max-height: 760px) {
  .popup-modal-box {
    padding: 20px 28px 18px;
  }

  .popup-modal-box .form-header-sub {
    margin-bottom: 10px;
  }

  .popup-modal-box .field-group {
    margin-bottom: 9px;
  }

  .popup-modal-box .method-selector-box {
    margin-bottom: 9px;
  }

  .popup-modal-box .consent-checkbox-row {
    margin-bottom: 10px;
  }
}

/* Промо exit-intent: лёгкий и воздушный, по центру; виден только в режиме «выхода» */
.popup-promo-badge {
  display: none;
  margin-bottom: 28px;
  text-align: center;
}

.popup-modal-overlay.exit-intent-mode .popup-promo-badge {
  display: block;
  animation: promoBadgeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* В режиме exit-intent прячем дублирующий заголовок демо-доступа — больше воздуха */
.popup-modal-overlay.exit-intent-mode #formFieldsContainer>.form-header-title,
.popup-modal-overlay.exit-intent-mode #formFieldsContainer>.form-header-sub {
  display: none;
}

.popup-promo-title {
  font-size: var(--font-lg);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-secondary);
  margin-bottom: 10px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.popup-promo-text {
  font-size: var(--font-xs);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto;
}

@keyframes promoBadgeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.dark-theme .popup-promo-title {
  color: #FFFFFF;
}

body.dark-theme .popup-promo-text {
  color: #C5DAD6;
}

.success-message-holder {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}

.success-badge-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: rgba(0, 130, 117, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  font-weight: 800;
  margin-bottom: 24px;
}

.success-text {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 8px;
  max-width: 380px;
}

.success-pdf-btn {
  margin-top: 24px;
}

.success-social-block {
  margin-top: 28px;
  width: 100%;
}

.success-social-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.success-social-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- СТИЛИЗАЦИЯ УНИФИЦИРОВАННЫХ ЗЕЛЕНЫХ SVG-ИКОНОК (B2B SaaS) --- */
.green-svg-icon {
  width: 56px;
  height: 56px;
  color: var(--color-primary);
  display: block;
  margin: 0 auto 20px auto;
  stroke-width: 1.75;
  filter: var(--shadow-unified-drop);
}

/* Единая тень (как у переключателей хедера) под всеми SVG-иконками.
   В тёмной теме токен --shadow-unified-drop переопределяется автоматически. */
.pain-icon,
.hero-bullet-icon,
.green-svg-icon,
.green-check-svg,
.mobile-theme-toggle,
.mobile-theme-icon,
.pulse-indicator,
.info-step-num,
.feat-icon-box,
.role-icon,
.theme-btn svg,
.lang-btn svg,
.db-logo svg,
.db-nav-item svg,
.offer-benefit-icon,
.info-icon-container,
.success-badge-icon,
.faq-icon-indicator,
.cmp-hl-icon,
.cmp-hl-icon svg,
.offer-benefit-icon svg,
.role-icon svg,
.feat-icon-box svg,
.scroll-hint svg,
.scroll-to-hero svg,
.checklist-status-icon {
  filter: var(--shadow-unified-drop);
}

.feat-icon-box .green-svg-icon {
  margin: 0;
  width: 48px;
  height: 48px;
}

.contacts-section .info-icon-container {
  background-color: #FFFFFF;
  border-color: rgba(17, 66, 61, 0.14);
  color: var(--color-secondary);
  filter: none;
}

.contacts-section .info-icon-container .green-svg-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--color-secondary);
  filter: none;
}

/* В тёмной теме иконки контактов (трубка, письмо, сообщение) — светлее,
   в цвет подписей «Телефоны для связи» и т.п. */
body.dark-theme .contacts-section .info-icon-container .green-svg-icon {
  color: #80B5AE;
}

/* Неброская сноска под большим дашбордом */
.dashboard-disclaimer {
  margin: 22px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: var(--font-xs);
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Звёздочка перед сноской — через ::before, чтобы не стиралась при смене
   языка (i18n переписывает innerHTML параграфа). */
.dashboard-disclaimer::before {
  content: '*';
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 4px;
}

/* Звёздочка-сноска возле «Палантир Аналитика» в дашборде */
.db-logo-star {
  color: var(--color-primary);
  font-weight: 800;
  margin-left: 2px;
}

/* Деликатная заметка под формой об интерфейсе */

.role-icon .green-svg-icon {
  margin: 0;
  width: 52px;
  height: 52px;
}

.green-check-svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  margin-right: 14px;
  flex-shrink: 0;
}

/* --- БАЗОВЫЕ СТИЛИ СООБЩЕНИЙ ЧАТА (ИСПОЛЬЗУЮТСЯ В ДАШБОРДЕ) --- */

.chat-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.chat-sender {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- БЛАГОРОДНЫЙ ФОНОВЫЙ ДЕКОР (ТОНКАЯ СЕТКА И ВОДЯНЫЕ ЗНАКИ) --- */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 130, 117, 0.015) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

/* Благородные водяные знаки для B2B авторитета */
.pain-section::after {
  content: '60%';
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-size: 22rem;
  font-weight: 900;
  color: rgba(0, 130, 117, 0.012);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -0.02em;
}

.facts-section::after {
  content: '100%';
  position: absolute;
  top: -40px;
  left: -20px;
  font-size: 22rem;
  font-weight: 900;
  color: rgba(0, 130, 117, 0.012);
  line-height: 1;
  z-index: 0;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* ==========================================================================
   ТАРИФЫ, FAQ И ИНТЕРАКТИВНЫЙ ДАШБОРД (КРУПНО, ЧИТАЕМО, ШИРИНА 1560PX)
   ========================================================================== */

/* --- ПРЕМИАЛЬНЫЙ РЕЗИНОВЫЙ БЛОК ТАРИФОВ (ШИРИНА 1560PX) --- */
.pricing-grid-container {
  display: block;
  width: 100%;
  margin-top: 48px;
  margin-left: auto;
  margin-right: auto;
}

/* --- ШИРОКАЯ 2-КОЛОНОЧНАЯ FAQ СЕТКА (ШИРИНА 1560PX) --- */
.faq-section .faq-wrapper {
  max-width: 100%;
  width: 100%;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  width: 100%;
  align-items: start;
}

/* --- ИНТЕРАКТИВНЫЙ LIVE ДАШБОРД (МАСШТАБИРОВАННЫЕ КРУПНЫЕ ШРИФТЫ) --- */
.dashboard-showcase {
  background-color: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-unified);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: clamp(640px, calc(100vh - 92px), 860px);
  position: relative;
  margin-top: 48px;
  width: 100%;
  text-align: left;
  transition: box-shadow 0.3s ease;
}

.dashboard-showcase:hover {
  box-shadow: var(--shadow-unified-hover);
}

/* Dashboard Header */
.db-header {
  background-color: #F8FAFA;
  border-bottom: 1.5px solid var(--border-color);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  color: var(--color-primary);
}

.db-status {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.status-pulse-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  overflow: visible;
}

.status-pulse-core {
  fill: var(--color-primary);
  filter: var(--shadow-unified-drop);
  transform-origin: 28px 28px;
  animation: statusCorePulse 2.4s ease-in-out infinite;
}

.status-pulse-ring {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.8;
  opacity: 0;
  transform-origin: 28px 28px;
  animation: statusRingPulse 2.4s ease-out infinite;
}

.status-pulse-ring--two {
  animation-delay: 0.42s;
}

.status-pulse-ring--three {
  animation-delay: 0.84s;
}

@keyframes statusCorePulse {
  0%, 100% { opacity: 0.88; transform: scale(0.86); }
  18% { opacity: 1; transform: scale(1.14); }
  34% { opacity: 0.9; transform: scale(0.92); }
}

@keyframes statusRingPulse {
  0% { opacity: 0; transform: scale(0.45); }
  12% { opacity: 0.62; transform: scale(0.72); }
  58% { opacity: 0; transform: scale(2.05); }
  100% { opacity: 0; transform: scale(2.05); }
}

/* Layout Body */
.db-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar Navigation */
.db-sidebar {
  width: 260px;
  background-color: var(--bg-main);
  border-right: 1.5px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  gap: 8px;
}

.db-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 19px;
  border-radius: var(--radius-sm);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  background: none;
  text-align: left;
  width: 100%;
}

.db-nav-item:hover {
  background-color: #FFFFFF;
  color: var(--color-primary);
  border-color: rgba(0, 130, 117, 0.25);
  box-shadow: var(--shadow-unified);
}

.db-nav-item.active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-unified);
}

.db-nav-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
}

/* Main Content Area */
.db-content {
  flex: 1;
  background-color: #FFFFFF;
  overflow-y: auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.db-content,
.call-table-wrapper,
.transcript-body,
.checklist-box,
.chat-history {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 130, 117, 0.42) rgba(226, 236, 233, 0.48);
}

.db-content::-webkit-scrollbar,
.call-table-wrapper::-webkit-scrollbar,
.transcript-body::-webkit-scrollbar,
.checklist-box::-webkit-scrollbar,
.chat-history::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.db-content::-webkit-scrollbar-track,
.call-table-wrapper::-webkit-scrollbar-track,
.transcript-body::-webkit-scrollbar-track,
.checklist-box::-webkit-scrollbar-track,
.chat-history::-webkit-scrollbar-track {
  background: rgba(226, 236, 233, 0.48);
  border-radius: 999px;
}

.db-content::-webkit-scrollbar-thumb,
.call-table-wrapper::-webkit-scrollbar-thumb,
.transcript-body::-webkit-scrollbar-thumb,
.checklist-box::-webkit-scrollbar-thumb,
.chat-history::-webkit-scrollbar-thumb {
  background: rgba(0, 130, 117, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

.db-content::-webkit-scrollbar-thumb:hover,
.call-table-wrapper::-webkit-scrollbar-thumb:hover,
.transcript-body::-webkit-scrollbar-thumb:hover,
.checklist-box::-webkit-scrollbar-thumb:hover,
.chat-history::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.db-content::-webkit-scrollbar-corner,
.call-table-wrapper::-webkit-scrollbar-corner,
.transcript-body::-webkit-scrollbar-corner,
.checklist-box::-webkit-scrollbar-corner,
.chat-history::-webkit-scrollbar-corner {
  background: transparent;
}

/* Горизонтально прокручиваемые данные (таблица сравнения, вкладки дашборда):
   на мобильных не сжимаем до нечитаемого вида — двигаем прокруткой, а полоса
   прокрутки всегда видна, чтобы было понятно, что показана только часть. */
.compare-table-wrap,
.db-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 130, 117, 0.5) rgba(226, 236, 233, 0.6);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.compare-table-wrap.is-grabbable,
.db-sidebar.is-grabbable {
  cursor: grab;
}

.compare-table-wrap.is-grabbing,
.db-sidebar.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.compare-table-wrap::-webkit-scrollbar,
.db-sidebar::-webkit-scrollbar {
  height: 12px;
}

.compare-table-wrap::-webkit-scrollbar-track,
.db-sidebar::-webkit-scrollbar-track {
  background: rgba(226, 236, 233, 0.6);
  border-radius: 999px;
}

.compare-table-wrap::-webkit-scrollbar-thumb,
.db-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 130, 117, 0.5);
  border-radius: 999px;
}

body.dark-theme .compare-table-wrap,
body.dark-theme .db-sidebar {
  scrollbar-color: rgba(128, 255, 242, 0.42) rgba(20, 40, 35, 0.6);
}

body.dark-theme .compare-table-wrap::-webkit-scrollbar-track,
body.dark-theme .db-sidebar::-webkit-scrollbar-track {
  background: rgba(20, 40, 35, 0.6);
}

body.dark-theme .compare-table-wrap::-webkit-scrollbar-thumb,
body.dark-theme .db-sidebar::-webkit-scrollbar-thumb {
  background: rgba(128, 255, 242, 0.42);
}

/* Screen animations */
.db-screen {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  animation: dbScreenFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-screen.active {
  display: flex;
  min-height: 0;
}

@keyframes dbScreenFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.db-screen-title {
  font-size: var(--font-lg);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 6px;
}

.db-screen-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: 24px;
  font-weight: 600;
}

/* Call list table */
.call-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-unified);
}

.call-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 17px;
}

.call-table th {
  background-color: var(--bg-main);
  padding: 14px 18px;
  font-weight: 800;
  color: var(--color-secondary);
  border-bottom: 1.5px solid var(--border-color);
}

.call-table td {
  padding: 16px 18px;
  border-bottom: 1.5px solid var(--border-color);
  color: var(--text-main);
  font-weight: 600;
}

.call-table tr:last-child td {
  border-bottom: none;
}

.call-table tr {
  transition: background-color 0.25s ease, border-left-color 0.2s ease;
  border-left: 3px solid transparent;
}

.call-table tr:hover {
  background-color: var(--bg-main);
}

.call-table tbody tr.dashboard-row-trigger {
  cursor: pointer;
  background-color: rgba(0, 130, 117, 0.06);
}

.call-table tbody tr.active-row {
  background-color: rgba(0, 130, 117, 0.08) !important;
  border-left-color: var(--color-primary);
}

body.dark-theme .call-table tbody tr.active-row {
  background-color: rgba(128, 255, 242, 0.06) !important;
  border-left-color: var(--color-light-accent);
}

.call-score {
  font-weight: 800;
}

.call-score--high {
  color: var(--color-primary);
}

.call-score--low {
  color: var(--color-accent);
}

/* SCREEN 2: Audit detailed grid */
.audit-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  flex: 1;
  min-height: 0;
  height: auto;
  align-items: stretch;
}

.transcript-panel {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: auto;
}

/* Левая панель аудита приведена к тому же серому, что и чек-лист и карточки */
body:not(.dark-theme) .transcript-panel {
  background-color: var(--bg-main);
}

/* Реплики администратора белые — читаемы на сером фоне панели */
body:not(.dark-theme) .speech-bubble--operator {
  background-color: var(--surface-alt);
}

.transcript-header {
  background-color: var(--bg-main);
  padding: 14px 20px;
  border-bottom: 1.5px solid var(--border-color);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-secondary);
  display: flex;
  justify-content: space-between;
}

.transcript-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.speech-bubble {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.5;
}

/* Единый стиль реплик: пациент слева, администратор справа */
.speech-bubble--operator {
  background-color: var(--bg-main);
  color: var(--text-main);
  align-self: flex-end;
  border-top-right-radius: 0;
  border: 1.5px solid var(--border-color);
}

.speech-bubble--patient {
  background-color: rgba(0, 130, 117, 0.06);
  color: var(--color-secondary);
  align-self: flex-start;
  border-top-left-radius: 0;
  border: 1.5px solid rgba(0, 130, 117, 0.1);
}

.speech-bubble .speaker-name {
  font-weight: 900;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  text-transform: uppercase;
}

.loss-highlight {
  border: 1.5px dashed var(--color-accent);
  background-color: rgba(214, 70, 3, 0.03);
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}

/* В дашборде на светлом фоне зелёный всегда тёмно-зелёный — для контраста */
body:not(.dark-theme) :is(.checklist-label,
  .speech-bubble .speaker-name,
  .call-score--high,
  .checklist-status-icon--check) {
  color: var(--color-secondary);
}

/* Right Checklist Panel */
.checklist-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.checklist-box {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-y: visible;
  flex: 1;
  min-height: 0;
  height: auto;
}

body:not(.dark-theme) .checklist-box {
  background-color: var(--bg-main);
}

.checklist-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--color-secondary);
}

.checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 16px;
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
}

.checklist-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-size: 1.1em;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

.checklist-status-icon--check {
  color: var(--color-primary);
}

.checklist-status-icon--cross {
  color: var(--color-accent);
}

/* SCREEN 3: Trainer options and cards */
.trainer-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  height: auto;
}

.trainer-card {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 32px;
  background-color: var(--bg-main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.trainer-scenario-badge {
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: var(--shadow-pill);
}

.trainer-prompt {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-secondary);
  max-width: 700px;
  line-height: 1.4;
}

.trainer-speaker {
  color: var(--color-accent);
  font-weight: 900;
}

.trainer-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.trainer-option-btn {
  background-color: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family);
  font-size: 17px;
  color: var(--text-main);
  font-weight: 600;
  display: flex;
  gap: 16px;
  line-height: 1.4;
}

.trainer-option-btn:hover {
  border-color: var(--color-primary);
  background-color: rgba(0, 130, 117, 0.04);
}

.trainer-option-btn.correct {
  border-color: var(--color-primary);
  background-color: rgba(0, 130, 117, 0.09);
}

.trainer-option-btn.incorrect {
  border-color: var(--color-accent);
  background-color: rgba(214, 70, 3, 0.08);
}

.trainer-option-letter {
  font-weight: 900;
  color: var(--color-primary);
}

.trainer-feedback {
  display: none;
  background-color: rgba(0, 130, 117, 0.08);
  border: 1px solid rgba(0, 130, 117, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.5;
  animation: trainerFeedbackFadeIn 0.3s ease;
}

.trainer-feedback.is-visible {
  display: block;
}

.trainer-feedback.is-correct,
body.dark-theme .trainer-feedback.is-correct {
  background-color: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.2);
  color: #27AE60;
}

.trainer-feedback.is-incorrect,
body.dark-theme .trainer-feedback.is-incorrect {
  background-color: rgba(214, 70, 3, 0.08);
  border-color: rgba(214, 70, 3, 0.2);
  color: var(--color-accent);
}

@keyframes trainerFeedbackFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* SCREEN 4: GPT chat helper */
.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chat-history {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--bg-main);
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.5;
}

.chat-message--user {
  background-color: var(--color-primary);
  color: #FFFFFF;
  align-self: flex-end;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-unified);
}

.chat-message--assistant {
  background-color: #FFFFFF;
  color: var(--text-main);
  align-self: flex-start;
  border-top-left-radius: 0;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.chat-message .chat-sender {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.chat-message--user .chat-sender {
  color: rgba(255, 255, 255, 0.85);
}

.chat-message--assistant .chat-sender {
  color: var(--color-primary);
}

.chat-message p {
  color: inherit;
  margin-bottom: 0;
}

.chat-input-area {
  display: flex;
  padding: 16px;
  background-color: #FFFFFF;
  border-top: 1.5px solid var(--border-color);
  gap: 12px;
}

.chat-input {
  flex: 1;
  padding: 12px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 16px;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-weight: 600;
}

.chat-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: #FFFFFF;
}

.chat-send-btn {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-send-btn:hover {
  background-color: var(--color-secondary);
  transform: translateY(-1px);
}

.chat-send-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* SCREEN 5: Reports grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.analytics-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.stat-card {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  background-color: var(--bg-main);
  box-shadow: var(--shadow-panel);
}

.stat-card-value {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-primary);
  margin: 10px 0;
  text-shadow: var(--shadow-unified-text);
}

.stat-card-value.danger {
  color: var(--color-accent);
}

.stat-card-value.success {
  color: var(--color-primary);
}

.stat-card-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 700;
}

.db-chart-placeholder {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
}

/* Unified soft shadows for ALL card/container surfaces.
   Single source of truth — same shadow token across the entire site. */
.pain-card,
.hero-image-mockup,
.solution-visual-box,
.info-step-card,
.fact-item,
.feat-card,
.role-card,
.price-card,
.faq-item-box,
.banner-form-box,
.qr-large-holder,
.popup-modal-box,
.dashboard-showcase,
.call-table-wrapper,
.compare-table-wrap,
.compare-highlight,
.cta-banner-card,
.transcript-panel,
.checklist-box,
.trainer-card,
.chat-container,
.stat-card,
.db-chart-placeholder,
.how-step-item {
  box-shadow: var(--shadow-unified);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.chart-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-secondary);
}

.chart-period {
  font-size: 13px;
  color: var(--text-muted);
}

.chart-gain-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(0, 130, 117, 0.16);
  background-color: rgba(0, 130, 117, 0.08);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--shadow-pill);
}

.chart-visual {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  height: 168px;
  padding: 0 28px;
  border-bottom: 2px solid var(--border-color);
  position: relative;
}

.chart-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 88px;
}

.chart-bar {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-bar--before {
  background-color: #9CC1BB;
  height: 46px;
}

.chart-bar--mid-1 {
  background-color: #80B5AE;
  height: 62px;
}

.chart-bar--mid-2 {
  background-color: var(--color-primary);
  height: 84px;
}

.chart-bar--after {
  background-color: var(--color-primary);
  height: 100px;
}

.chart-bar-val {
  font-size: 16px;
  font-weight: 900;
}

.chart-bar-val--before {
  color: #9CC1BB;
}

.chart-bar-val--mid-1 {
  color: #80B5AE;
}

.chart-bar-val--mid-2 {
  color: var(--color-primary);
}

.chart-bar-val--after {
  color: var(--color-primary);
}

.dashboard-violation-count {
  color: #D64603;
  font-weight: 700;
}

.chart-label {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
}

body.dark-theme .chart-title {
  color: #E6F3F1;
}

body.dark-theme .chart-gain-badge {
  background-color: rgba(128, 255, 242, 0.08);
  border-color: rgba(128, 255, 242, 0.18);
  color: #80FFF2;
  box-shadow: var(--shadow-unified);
}

body.dark-theme .chart-label {
  color: #80B5AE;
}

/* RESPONSIVE LAYOUT ADJUSTMENTS FOR DASHBOARD */
@media (max-width: 1024px) {
  .price-card-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .price-offer-col {
    border-right: none;
    padding: 28px;
    border-bottom: 1.5px solid var(--border-color);
  }

  .price-features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .price-card {
    padding: 32px 22px;
  }

  /* На узких экранах пункты могут переноситься — иначе nowrap даст
     горизонтальный скролл. */
  .price-feature-item {
    white-space: normal;
    align-items: flex-start;
  }

  .price-feature-item .green-check-svg {
    margin-top: 2px;
  }
}

@media (max-width: 900px) {
  .dashboard-showcase {
    height: auto;
  }

  .db-body {
    flex-direction: column;
  }

  .db-sidebar {
    width: 100%;
    flex-direction: row;
    white-space: nowrap;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1.5px solid var(--border-color);
    padding: 16px;
  }

  .db-nav-item {
    padding: 9px 15px;
    width: auto;
    font-size: 15px;
  }

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

  .transcript-panel {
    min-height: 320px;
    height: auto;
  }

  .checklist-box {
    min-height: 240px;
    height: auto;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}

/* ================================================
   HOW IT WORKS — STEPS
   ================================================ */
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  position: relative;
}

.how-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  position: relative;
  z-index: 1;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  transition: all 0.3s ease;
}

.how-step-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-panel-hover);
  transform: translateY(-4px);
}

.how-step-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #006b5e 100%);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-unified);
  flex-shrink: 0;
  position: relative;
}

body.dark-theme .how-step-num {
  box-shadow: var(--shadow-unified);
}

.how-step-title {
  font-size: var(--font-md);
  font-weight: 800;
  color: var(--color-secondary);
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.005em;
}

body.dark-theme .how-step-title {
  color: #FFFFFF;
}

.how-step-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 900px) {
  .how-steps {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   БЛОК «ЧЕМ МЫ ОТЛИЧАЕМСЯ» (сравнение с альтернативами)
   ================================================ */
.compare-section {
  background-color: var(--bg-main);
  overflow: visible;
}

.compare-table-wrap {
  margin-top: 48px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-unified);
  transition: box-shadow 0.25s ease;
  position: relative;
  z-index: 2;
}

.compare-table-wrap:hover {
  box-shadow: var(--shadow-unified-hover);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.compare-table th,
.compare-table td {
  padding: 20px 24px;
  text-align: center;
  border-bottom: 1.5px solid var(--border-color);
  vertical-align: middle;
}

.compare-table thead th {
  font-weight: 700;
  color: var(--text-muted);
  font-size: var(--font-xs);
  background-color: var(--bg-main);
}

.compare-table .cmp-feature-col,
.compare-table .cmp-feature {
  text-align: left;
  font-weight: 700;
  color: var(--color-secondary);
  width: 38%;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:hover {
  background-color: rgba(0, 130, 117, 0.02);
}

.cmp-col-us,
.cmp-cell.cmp-us {
  background-color: rgba(0, 130, 117, 0.06);
  border-left: 1.5px solid rgba(0, 130, 117, 0.2);
  border-right: 1.5px solid rgba(0, 130, 117, 0.2);
}

.cmp-us-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary) 0%, #009c8c 100%);
  color: #FFFFFF;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  box-shadow: var(--shadow-pill);
}

.cmp-yes {
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 900;
}

.cmp-no {
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 800;
}

.cmp-partial {
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
}

.cmp-row-key .cmp-feature {
  color: var(--color-secondary);
}

.compare-highlight {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-secondary) 0%, #17544E 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-panel);
  position: relative;
  z-index: 2;
}

.compare-highlight .cmp-hl-icon {
  flex-shrink: 0;
  color: #80FFF2;
}

.compare-highlight p {
  font-size: var(--font-sm);
  line-height: 1.6;
  font-weight: 500;
}

.compare-highlight strong {
  color: #80FFF2;
  font-weight: 800;
}

body.dark-theme .compare-highlight {
  background: linear-gradient(135deg, #112320 0%, #0E1B18 100%);
  border: 1.5px solid #1E3330;
}

body.dark-theme .compare-table-wrap {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .cmp-no {
  color: #44605B;
}

@media (max-width: 768px) {
  .compare-table-wrap {
    overflow-x: auto;
  }

  .compare-table {
    min-width: 640px;
  }
}

/* ================================================
   DARK THEME — complete override using .dark-theme on body
   ================================================ */
body.dark-theme {
  --bg-main: #0B1614;
  --surface-alt: #0E1B18;
  --bg-card: #112320;
  --text-main: #E6F3F1;
  --text-muted: #7AADA7;
  --border-color: #1E3330;
  --glass-bg: rgba(20, 40, 35, 0.95);
  --shadow-unified: 0 10px 24px rgba(0, 0, 0, 0.34), 0 2px 7px rgba(0, 0, 0, 0.22);
  --shadow-unified-hover: 0 14px 30px rgba(0, 0, 0, 0.42), 0 4px 10px rgba(0, 0, 0, 0.24);
  --shadow-unified-drop: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.34)) drop-shadow(0 2px 7px rgba(0, 0, 0, 0.22));
  --shadow-unified-text: 0 2px 7px rgba(0, 0, 0, 0.42);
  --shadow-sm: var(--shadow-unified);
  --shadow-md: var(--shadow-unified);
  --shadow-lg: var(--shadow-unified);
  --shadow-pill: var(--shadow-unified);
  --shadow-panel: var(--shadow-unified);
  --shadow-panel-hover: var(--shadow-unified-hover);
  --color-light-accent: #80FFF2;
}

body.dark-theme .header-container {
  background-color: rgba(17, 35, 32, 0.96);
  border-color: #1E3330;
  box-shadow: var(--shadow-unified);
}

body.dark-theme .logo-title {
  color: #E6F3F1;
}

body.dark-theme .contact-phone {
  color: #E6F3F1;
}

body.dark-theme .hero-title {
  color: #E6F3F1;
}

body.dark-theme .hero-image-mockup {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .pain-card,
body.dark-theme .feat-card,
body.dark-theme .role-card,
body.dark-theme .info-step-card,
body.dark-theme .fact-item,
body.dark-theme .price-card,
body.dark-theme .faq-item-box,
body.dark-theme .dashboard-showcase,
body.dark-theme .call-table-wrapper,
body.dark-theme .transcript-panel,
body.dark-theme .checklist-box,
body.dark-theme .trainer-card,
body.dark-theme .chat-container,
body.dark-theme .stat-card,
body.dark-theme .db-chart-placeholder,
body.dark-theme .solution-visual-box,
body.dark-theme .compare-table-wrap,
body.dark-theme .compare-highlight {
  box-shadow: var(--shadow-panel) !important;
}

body.dark-theme .pain-card:hover,
body.dark-theme .feat-card:hover,
body.dark-theme .role-card:hover,
body.dark-theme .info-step-card:hover,
body.dark-theme .fact-item:hover,
body.dark-theme .price-card:hover,
body.dark-theme .faq-item-box:hover,
body.dark-theme .dashboard-showcase:hover,
body.dark-theme .compare-table-wrap:hover {
  box-shadow: var(--shadow-panel-hover) !important;
}

body.dark-theme .pain-card {
  background-color: rgba(17, 35, 32, 0.96);
  border-color: #1E3330;
  box-shadow: var(--shadow-unified) !important;
}

body.dark-theme .pain-card:hover {
  background-color: rgba(17, 35, 32, 0.96);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-unified-hover) !important;
}

body.dark-theme .solution-visual-box,
body.dark-theme .info-step-card {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .info-step-card.active,
body.dark-theme .info-step-card:hover {
  background-color: #15302B;
  border-color: var(--color-primary);
}

body.dark-theme .info-widget-title {
  color: #FFFFFF !important;
  border-bottom-color: #1E3330 !important;
}

body.dark-theme .info-step-title {
  color: #FFFFFF !important;
}

body.dark-theme .info-step-text {
  color: #E6F3F1 !important;
}

body.dark-theme .info-step-num {
  background-color: #1E3330 !important;
  color: #7AADA7 !important;
}

body.dark-theme .info-step-card.active .info-step-num,
body.dark-theme .info-step-card:hover .info-step-num {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

body.dark-theme .info-step-status:not(.positive):not(.danger):not(.accent) {
  color: #7AADA7 !important;
}

body.dark-theme .feat-card {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .role-card {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .faq-item-box {
  background-color: #112320 !important;
  border-color: #1E3330 !important;
}

body.dark-theme .faq-item-box:nth-child(even) {
  background-color: #112320 !important;
}

body.dark-theme .faq-item-box.active {
  background-color: rgba(0, 130, 117, 0.14) !important;
  border-color: var(--color-primary) !important;
}

body.dark-theme .faq-header-btn {
  color: #E6F3F1 !important;
}

body.dark-theme .faq-header-btn:hover {
  color: #80FFF2 !important;
}

body.dark-theme .faq-body-inner {
  color: #7AADA7 !important;
}

body.dark-theme .price-card {
  background-color: #112320 !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-panel) !important;
}

body.dark-theme .price-card:hover {
  box-shadow: var(--shadow-panel-hover) !important;
}

body.dark-theme .price-amount {
  color: #E6F3F1 !important;
}

body.dark-theme .price-user-add {
  color: #80FFF2 !important;
}

body.dark-theme .price-terms {
  color: #7AADA7 !important;
}

body.dark-theme .price-tiers-lead {
  color: #7AADA7 !important;
}

body.dark-theme .price-tier {
  border-bottom-color: #1E3330 !important;
}

body.dark-theme .price-tier-size,
body.dark-theme .price-tier-val > span:first-child {
  color: #E6F3F1 !important;
}

body.dark-theme .price-tier-per {
  color: #7AADA7 !important;
}

body.dark-theme .price-includes-title {
  color: #E6F3F1 !important;
  border-bottom-color: #1E3330 !important;
}

body.dark-theme .price-feature-item {
  color: #7AADA7 !important;
}

body.dark-theme .info-icon-container {
  background-color: rgba(0, 130, 117, 0.12);
}

body.dark-theme .map-frame-holder {
  border-color: #1E3330;
}

/* Формы заявки в темной теме */
body.dark-theme .popup-modal-box,
body.dark-theme .banner-form-box {
  background-color: #112320 !important;
  border: 1.5px solid #1E3330 !important;
}

/* Переопределение фонов для плашек оффера, ROI и секции фактоидов в темной теме */
body.dark-theme .cta-banner-card {
  background: linear-gradient(135deg, #0E1B18 0%, #0B1614 100%) !important;
  border: 1.5px solid #1E3330 !important;
}

body.dark-theme .price-offer-col {
  border-color: #1E3330;
}

body.dark-theme .facts-section {
  background-color: #0E1B18 !important;
  border-top: 1.5px solid #1E3330 !important;
  border-bottom: 1.5px solid #1E3330 !important;
}

body.dark-theme .form-header-title {
  color: #E6F3F1 !important;
}

body.dark-theme .form-header-sub {
  color: #7AADA7 !important;
}

body.dark-theme .field-label {
  color: #E6F3F1 !important;
}

body.dark-theme .consent-lbl-text {
  color: #7AADA7 !important;
}

body.dark-theme .popup-modal-close {
  color: #FFFFFF;
}

/* Всегда белые фоны для полей ввода во всех темах по требованию */
.field-control,
body.dark-theme .field-control {
  background-color: #FFFFFF !important;
  color: #11423D !important;
  border: 2px solid var(--border-color) !important;
}

.field-control:focus,
body.dark-theme .field-control:focus {
  background-color: #FFFFFF !important;
  color: #11423D !important;
  border-color: var(--color-primary) !important;
}

body.dark-theme .stat-card {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .db-chart-placeholder {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .dashboard-showcase {
  background-color: #0B1614;
  border-color: #1E3330;
}

body.dark-theme .db-header,
body.dark-theme .db-sidebar {
  background-color: #0E1B18;
  border-color: #1E3330;
}

body.dark-theme .db-content,
body.dark-theme .call-table-wrapper,
body.dark-theme .transcript-panel,
body.dark-theme .transcript-header,
body.dark-theme .transcript-body,
body.dark-theme .checklist-box,
body.dark-theme .trainer-card,
body.dark-theme .trainer-option-btn,
body.dark-theme .trainer-feedback,
body.dark-theme .chat-container,
body.dark-theme .chat-history,
body.dark-theme .chat-input-area {
  background-color: #112320;
  border-color: #1E3330;
}

body.dark-theme .call-table th {
  background-color: #0E1B18;
  color: #E6F3F1;
  border-color: #1E3330;
}

body.dark-theme .call-table td {
  color: #E6F3F1;
  border-color: #1E3330;
}

body.dark-theme .call-table tr:hover {
  background-color: rgba(128, 255, 242, 0.06);
}

body.dark-theme .db-screen-title,
body.dark-theme .chart-title,
body.dark-theme .transcript-header,
body.dark-theme .checklist-title,
body.dark-theme .checklist-label,
body.dark-theme .trainer-prompt {
  color: #E6F3F1;
}

body.dark-theme .db-screen-desc,
body.dark-theme .stat-card-label,
body.dark-theme .trainer-feedback {
  color: #7AADA7;
}

body.dark-theme .checklist-label {
  color: #80FFF2;
}

body.dark-theme .speech-bubble--patient {
  background-color: rgba(128, 255, 242, 0.08);
  color: #E6F3F1;
  border-color: rgba(128, 255, 242, 0.16);
}

body.dark-theme .speech-bubble--operator {
  background-color: #0E1B18;
  color: #E6F3F1;
  border-color: #1E3330;
}

body.dark-theme .speech-bubble .speaker-name,
body.dark-theme .trainer-option-letter {
  color: #80FFF2;
}

body.dark-theme .trainer-option-btn:hover {
  background-color: rgba(128, 255, 242, 0.08);
  border-color: rgba(128, 255, 242, 0.22);
}

body.dark-theme .trainer-option-btn.correct {
  background-color: rgba(0, 130, 117, 0.14);
}

body.dark-theme .trainer-option-btn.incorrect {
  background-color: rgba(214, 70, 3, 0.14);
}

body.dark-theme .chat-input-area {
  background-color: #112320;
  border-top-color: #1E3330;
}

body.dark-theme .chat-input {
  background-color: #0E1B18;
  border-color: #1E3330;
  color: #E6F3F1;
}

body.dark-theme .chat-input:focus {
  background-color: #112320;
  border-color: var(--color-primary);
}

body.dark-theme .chat-message--assistant {
  background-color: #0E1B18;
  border-color: #1E3330;
  color: #E6F3F1;
}

body.dark-theme .section-title {
  color: #E6F3F1;
}

body.dark-theme .sol-text-title,
body.dark-theme .feat-title,
body.dark-theme .role-title,
body.dark-theme .pain-title {
  color: #E6F3F1;
}

@media (min-width: 992px) {

  /* Оптимизация высоты блока аудита звонков для Full HD экранов */

  .checklist-item {
    font-size: 13px !important;
    gap: 6px !important;
  }

  .checklist-status-icon {
    width: auto !important;
    height: auto !important;
    font-size: 1.1em !important;
  }

}

/* --- SCROLLBAR HIDDEN --- */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 36px;
  padding: 10px 0;
  z-index: 990;
  cursor: pointer;
}

.scroll-progress::before {
  content: none;
}

.scroll-to-hero {
  width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.24s ease;
}

.scroll-to-hero svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.24s ease;
}

.scroll-arrow-check,
.scroll-arrow-base {
  transform-box: fill-box;
  transform-origin: center;
}

.scroll-arrow-check {
  opacity: 0.92;
}

.scroll-arrow-base {
  opacity: 0.82;
}

.scroll-to-hero.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.scroll-to-hero.is-visible:hover {
  transform: translateY(-2px);
  color: #006F66;
}

.scroll-to-hero:hover svg {
  transform: translateY(-1px);
}

.scroll-to-hero:focus-visible {
  outline: 2px solid rgba(0, 130, 117, 0.42);
  outline-offset: 3px;
}

.scroll-tick {
  width: 14px;
  height: 2px;
  background-color: rgba(14, 29, 27, 0.62);
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.scroll-tick:hover {
  background-color: var(--color-primary);
  width: 18px;
}

.scroll-tick.active {
  background-color: var(--color-primary);
  width: 28px;
  height: 4px;
}

.scroll-tick-minor {
  width: 7px;
  height: 2px;
  border-radius: 4px;
  background-color: rgba(14, 29, 27, 0.68);
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.scroll-progress:hover .scroll-tick-minor {
  background-color: rgba(14, 29, 27, 0.82);
}

body.dark-theme .scroll-tick-minor {
  background-color: rgba(255, 255, 255, 0.64);
}

body.dark-theme .scroll-to-hero {
  color: #80FFF2;
}

body.dark-theme .scroll-to-hero.is-visible:hover {
  color: #B9FFF8;
}

body.dark-theme .scroll-tick {
  background-color: rgba(128, 255, 242, 0.48);
}

body.dark-theme .scroll-tick:hover,
body.dark-theme .scroll-tick.active {
  background-color: #80FFF2;
}

/* Индикатор прогресса прокрутки — только на мониторах/ноутбуках (мышь/трекпад).
   На планшетах и мобильных (сенсорные, любая ориентация) его нет совсем. */
@media (max-width: 1240px) {
  .scroll-progress {
    display: none;
  }
}

/* Сенсорные устройства (планшеты/телефоны) — скрываем индикатор при любой ширине,
   включая iPad Pro в landscape (1366px). Остаётся только на мышь/трекпад. */
@media (hover: none), (pointer: coarse) {
  .scroll-progress,
  .scroll-hint {
    display: none !important;
  }
}

/* На ноутбуках прижимаем индикатор к самому краю, в зону боковых полей,
   чтобы он НЕ наезжал на картинку hero. */
@media (min-width: 1241px) and (max-width: 1559px) {
  .scroll-progress {
    right: 6px;
  }
}

/* Сегментированный переключатель языка (в одном стиле с переключателем темы) */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 700;
  background-color: #F4F6F8;
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-pill);
  /* перенесено из удалённой ранней версии .lang-switcher: единственное
     свойство, которое не перекрывалось этим блоком */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn {
  cursor: pointer;
  color: var(--text-muted);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn:hover {
  color: var(--color-secondary);
}

.lang-btn.active {
  color: var(--color-primary);
  background-color: #FFFFFF;
  box-shadow: var(--shadow-unified);
  border: 1.5px solid var(--border-color);
}

body.dark-theme .lang-switcher {
  background-color: #0E1B18;
  border-color: #1E3330;
  /* перенесено из удалённой ранней версии body.dark-theme .lang-switcher */
  color: #7AADA7;
}

body.dark-theme .lang-btn {
  color: #4A7A72;
}

body.dark-theme .lang-btn:hover {
  color: #80FFF2;
}

body.dark-theme .lang-btn.active {
  background-color: #112320;
  color: #80FFF2;
  box-shadow: var(--shadow-unified);
  border: 1px solid #1E3330;
}

/* Language-specific icons */
html[lang="ru"] .lang-icon-en,
html[lang="ru"] .lang-icon-kz {
  display: none !important;
}

html[lang="ru"] .lang-icon-ru {
  display: block;
}

html[lang="en"] .lang-icon-ru,
html[lang="en"] .lang-icon-kz {
  display: none !important;
}

html[lang="en"] .lang-icon-en {
  display: block;
}

html[lang="kk"] .lang-icon-ru,
html[lang="kk"] .lang-icon-en {
  display: none !important;
}

html[lang="kk"] .lang-icon-kz {
  display: block;
}

/* Kazakh typography: avoid over-heavy mixed Cyrillic rendering in large headings. */
html[lang="kk"] {
  --font-heading: 'Noto Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[lang="kk"] :is(.hero-title,
  .section-title,
  .banner-title,
  .pain-title,
  .feat-title,
  .role-title,
  .info-step-title,
  .sol-text-title,
  .price-title,
  .form-header-title,
  .db-screen-title) {
  font-family: var(--font-heading);
  font-weight: 650;
  letter-spacing: 0;
}

html[lang="kk"] .hero-title {
  font-size: clamp(39px, 2.22vw, 42px);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

html[lang="kk"] .section-title {
  font-size: clamp(33px, 1.95vw, 36px);
  line-height: 1.34;
}

@media (max-width: 600px) {
  html[lang="kk"] .hero-title {
    font-size: clamp(30px, 8vw, 34px);
    line-height: 1.24;
  }

  /* KZ section-title по умолчанию clamp(33…36) — слишком крупно для телефона
     (норма H2 26–30). Приводим к мобильной шкале. */
  html[lang="kk"] .section-title {
    font-size: clamp(26px, 7vw, 29px);
    line-height: 1.28;
  }
}

html[lang="kk"] .nav-link {
  letter-spacing: 0.035em;
}

/* Russian typography: Cyrillic glyphs are naturally wider, so on DESKTOP/laptop we tighten
   letter-spacing for a denser, more professional B2B display look.
   Scoped to >=769px ON PURPOSE: on phones / tablet-portrait this negative tracking turned
   headings into a "brick" (words visually fused). Below 769px the block right after restores
   normal tracking. Refs: skill typography-line-breaks-and-spacing §8/§9, 04_responsiveness CRITICAL. */
@media (min-width: 769px) {
  html[lang="ru"] :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .hero-title,
    .section-title,
    .banner-title,
    .price-title,
    .form-header-title,
    .db-screen-title) {
    letter-spacing: -0.02em !important;
  }
}

/* GLOBAL HEADING WORD-SPACING (all sizes, all languages).
   Headings previously had word-spacing only on mobile (and a tiny 0.02em); on desktop/laptop/4K
   the negative display letter-spacing made word gaps look cramped ("слова сливаются"). This adds a
   gentle, clearly-visible space BETWEEN WORDS (orthogonal to letter-spacing — no conflict) so titles
   read as separate words at every breakpoint. Numbers (.fact-num/.price-amount) and brand .logo-title
   are intentionally excluded. The mobile block below keeps the same value + resets the negative tracking. */
:is(h1, h2, h3, h4, h5, h6,
  .hero-title, .section-title, .banner-title, .pain-title, .feat-title, .role-title,
  .sol-text-title, .info-widget-title, .info-step-title, .how-step-title, .db-screen-title,
  .checklist-title, .chart-title, .price-title, .price-includes-title, .form-header-title,
  .popup-promo-title) {
  word-spacing: 0.14em;
}

/* MOBILE/TABLET-PORTRAIT HEADING "BRICK" FIX (all languages: RU/EN/KZ).
   Negative letter-spacing from large display headings must NOT carry onto small headings —
   it fuses words into one block. Restore normal tracking and keep the gentle word-spacing so
   words read as separate words. Headings/titles ONLY (body text already spaces fine here);
   numbers (.fact-num/.price-amount) and the brand .logo-title are intentionally left as-is. */
@media (max-width: 768px) {
  html[lang] :is(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .hero-title,
    .section-title,
    .banner-title,
    .pain-title,
    .feat-title,
    .role-title,
    .sol-text-title,
    .info-widget-title,
    .info-step-title,
    .how-step-title,
    .db-screen-title,
    .checklist-title,
    .chart-title,
    .price-title,
    .price-includes-title,
    .form-header-title,
    .popup-promo-title,
    .trainer-prompt) {
    letter-spacing: normal;
    word-spacing: 0.16em;
  }
}


/* Sleek Pill Theme Switcher */
.theme-switcher-pill {
  display: flex;
  align-items: center;
  background-color: #F4F6F8;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-pill);
}

/* Мессенджеры — ТРИ ОТДЕЛЬНЫХ кружка (каждый сам по себе), одного размера,
   в стиле переключателей языка/темы; БЕЛЫЕ значки, чтобы выделялись как телефон */
.social-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #0E1B18;
  border: 1.5px solid #1E3330;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pill);
  color: #E6F3F1;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-cell:hover {
  color: #80FFF2;
  background-color: #112320;
  border-color: #2A4742;
}
.social-cell svg {
  display: block;
}

.theme-switcher-pill .theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: none;
}

.theme-switcher-pill .theme-btn:hover {
  color: var(--color-secondary);
}

.theme-switcher-pill .theme-btn.active {
  background-color: #FFFFFF;
  color: var(--color-primary);
  box-shadow: var(--shadow-unified);
  border: 1.5px solid var(--border-color);
}

body.dark-theme .theme-switcher-pill {
  background-color: #0E1B18;
  border-color: #1E3330;
}

body.dark-theme .theme-switcher-pill .theme-btn {
  color: #4A7A72;
}

body.dark-theme .theme-switcher-pill .theme-btn:hover {
  color: #80FFF2;
}

body.dark-theme .theme-switcher-pill .theme-btn.active {
  background-color: #112320;
  color: #80FFF2;
  box-shadow: var(--shadow-unified);
  border: 1px solid #1E3330;
}

/* ============================================================
   ХЕДЕР ВСЕГДА ТЁМНО-ЗЕЛЁНЫЙ — и в светлой теме тоже (как в тёмной).
   Перекрашиваем капсулу и все её элементы в светлой теме под тёмную
   палитру. Тёмная тема уже такая (её правила не дублируем/не трогаем).
   ============================================================ */
body:not(.dark-theme) .header-container {
  background-color: rgba(17, 35, 32, 0.96);
  border-color: #1E3330;
}

body:not(.dark-theme) .logo-title { color: #E6F3F1; }
body:not(.dark-theme) .contact-phone { color: #E6F3F1; }
body:not(.dark-theme) .contact-email { color: #7AADA7; }

body:not(.dark-theme) .nav-link { color: #7AADA7; }
body:not(.dark-theme) .nav-link:hover { color: #80FFF2; }

body:not(.dark-theme) .lang-switcher {
  background-color: #0E1B18;
  border-color: #1E3330;
}
body:not(.dark-theme) .lang-btn { color: #4A7A72; }
body:not(.dark-theme) .lang-btn:hover { color: #80FFF2; }
body:not(.dark-theme) .lang-btn.active {
  background-color: #112320;
  color: #80FFF2;
  box-shadow: var(--shadow-unified);
  border: 1.5px solid #1E3330;
}

body:not(.dark-theme) .theme-switcher-pill {
  background-color: #0E1B18;
  border-color: #1E3330;
}
body:not(.dark-theme) .theme-switcher-pill .theme-btn { color: #4A7A72; }
body:not(.dark-theme) .theme-switcher-pill .theme-btn:hover { color: #80FFF2; }
body:not(.dark-theme) .theme-switcher-pill .theme-btn.active {
  background-color: #112320;
  color: #80FFF2;
  box-shadow: var(--shadow-unified);
  border: 1.5px solid #1E3330;
}

body:not(.dark-theme) .nav-burger span { background-color: #E6F3F1; }

body:not(.dark-theme) .mobile-theme-toggle {
  background-color: rgba(14, 27, 24, 0.86);
  border-color: rgba(128, 255, 242, 0.14);
  color: #80FFF2;
}

body:not(.dark-theme) .nav-mobile-phone { color: #E6F3F1; }

/* Тёмный фон — ТОЛЬКО у выпадающего бургер-меню (≤1240). На десктопе/ноуте
   .nav-block инлайновый, фон ему не нужен (иначе появляется плашка под меню). */
@media (max-width: 1240px) {
  body:not(.dark-theme) .nav-block {
    background-color: #0E1B18;
    border-color: rgba(128, 255, 242, 0.12);
  }
  body:not(.dark-theme) .nav-link:hover {
    background-color: rgba(128, 255, 242, 0.08);
  }
}

/* ============================================================
   ТЁМНАЯ ТЕМА — контраст контактов, таблицы сравнения, мессенджеров
   ============================================================ */
body.dark-theme .info-item-val,
body.dark-theme .info-item-val a {
  color: #E6F3F1;
}

body.dark-theme .info-item-label {
  color: #80B5AE;
}

body.dark-theme .compare-table .cmp-feature,
body.dark-theme .compare-table .cmp-feature-col {
  color: #E6F3F1;
}

body.dark-theme .compare-table thead th {
  color: #80B5AE;
}

body.dark-theme .cmp-yes {
  color: #80FFF2;
}

body.dark-theme .compare-table tbody tr:hover {
  background-color: rgba(0, 130, 117, 0.06);
}

body.dark-theme .social-contact-btn {
  background-color: #0E1B18;
  border-color: #1E3330;
  color: #E6F3F1;
}

body.dark-theme .social-contact-btn:hover {
  background-color: #112320;
  border-color: #2A4A45;
  color: #80FFF2;
}

/* ============================================================
   ЭТАП 4 — АНИМАЦИИ И МИКРО-ВЗАИМОДЕЙСТВИЯ
   ============================================================ */

/* --- Появление блоков при скролле: маска + подтягивание --- */
html.anim-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 38px, 0) scale(0.985);
  clip-path: inset(0 0 12% 0 round 12px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, clip-path;
}

html.anim-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
  /* clip-path НЕ оставляем — inset обрезал бы box-shadow по краю блока,
     из-за чего тени пропадали по умолчанию. После появления клип не нужен. */
  clip-path: none;
}

html.anim-ready .pain-card.reveal,
html.anim-ready .pain-card.reveal.is-visible {
  clip-path: none !important;
}

html.anim-ready .reveal :is(.pain-title, .feat-title, .role-title, .info-step-title, .sol-text-title, .price-title, .form-header-title, .db-screen-title) {
  opacity: 0;
  transform: translate3d(0, 14px, 0) rotateX(8deg);
  transform-origin: left bottom;
}

html.anim-ready .reveal.is-visible :is(.pain-title, .feat-title, .role-title, .info-step-title, .sol-text-title, .price-title, .form-header-title, .db-screen-title) {
  animation: cardTitleLift 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}

@keyframes cardTitleLift {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Быстрое "написание" главных заголовков --- */
html.anim-ready .text-write {
  perspective: 900px;
}

html.anim-ready .text-write .text-write-word {
  display: inline-block;
  color: inherit;
  opacity: 0;
  transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
  transform-origin: left bottom;
  clip-path: inset(0 0 100% 0);
  will-change: opacity, transform, clip-path;
}

html.anim-ready .text-write.is-visible .text-write-word {
  animation: textWriteWord 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--write-delay, 0ms) + (var(--word-i) * 28ms));
}

html.anim-ready .hero-title.text-write {
  --write-delay: 480ms;
}

html.anim-ready .section-title.text-write {
  --write-delay: 80ms;
}

@keyframes textWriteWord {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
    clip-path: inset(0 0 100% 0);
  }

  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

/* --- Header + Hero: последовательный вход элементов при загрузке --- */
html.anim-ready .header-container {
  opacity: 0;
  transform: translate3d(0, -18px, 0) rotateX(8deg);
  transform-origin: center top;
}

html.anim-ready body.hero-in .header-container {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

html.anim-ready .logo-block,
html.anim-ready .nav-menu li,
html.anim-ready .header-right>* {
  opacity: 0;
  transform: translate3d(0, -14px, 0) rotateX(10deg);
  transform-origin: center top;
}

html.anim-ready body.hero-in .logo-block,
html.anim-ready body.hero-in .nav-menu li,
html.anim-ready body.hero-in .header-right>* {
  opacity: 1;
  transform: none;
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1), transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

html.anim-ready body.hero-in .logo-block {
  transition-delay: 0.18s;
}

html.anim-ready body.hero-in .nav-menu li,
html.anim-ready body.hero-in .header-right>* {
  transition-delay: calc(0.32s + (var(--header-i, 0) * 58ms));
}

html.anim-ready .hero-content {
  opacity: 1;
  transform: none;
}

html.anim-ready .hero-title,
html.anim-ready .hero-descr,
html.anim-ready .hero-bullet-item,
html.anim-ready .hero-actions-container {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotateX(8deg);
  transform-origin: left bottom;
}

html.anim-ready body.hero-in .hero-title,
html.anim-ready body.hero-in .hero-descr,
html.anim-ready body.hero-in .hero-bullet-item,
html.anim-ready body.hero-in .hero-actions-container {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

html.anim-ready body.hero-in .hero-title {
  transition-delay: 0.64s;
}

html.anim-ready body.hero-in .hero-descr {
  transition-delay: 1.24s;
}

html.anim-ready body.hero-in .hero-bullet-item {
  transition-delay: calc(1.52s + (var(--hero-i, 0) * 140ms));
}

html.anim-ready body.hero-in .hero-actions-container {
  transition-delay: 2.12s;
}

html.anim-ready .hero-visual-container {
  opacity: 0;
  transform: translate3d(34px, 18px, 0) scale(0.97) rotateY(-5deg);
  transform-origin: right center;
  clip-path: inset(8% 0 0 9% round 16px);
}

html.anim-ready body.hero-in .hero-visual-container {
  opacity: 1;
  transform: none;
  clip-path: inset(-40px -40px -40px -40px round 16px);
  transition: opacity 1.18s cubic-bezier(0.16, 1, 0.3, 1) 1.18s, transform 1.18s cubic-bezier(0.16, 1, 0.3, 1) 1.18s, clip-path 1.18s cubic-bezier(0.16, 1, 0.3, 1) 1.18s;
}

/* --- CTA: плавный перетекающий градиент по основной кнопке --- */
html.anim-ready .btn-primary {
  position: relative;
  background-image: linear-gradient(110deg, #C23E02 0%, #E84D08 28%, #FF7A3D 50%, #E84D08 72%, #C23E02 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
}

@keyframes btnFlow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

html.anim-ready .btn-primary.cta-attention:hover {
  animation-duration: 3s;
}

/* --- CTA: мягкий отложенный акцент — плавное свечение --- */
@keyframes ctaSoftGlow {

  0%,
  100% {
    box-shadow: var(--shadow-unified);
  }

  50% {
    box-shadow: var(--shadow-unified-hover);
  }
}

html.anim-ready .btn-primary.cta-attention {
  animation: btnFlow 4s ease-in-out infinite, ctaSoftGlow 2.6s ease-in-out 3;
}

/* --- Подсказка-стрелка «листайте вниз» --- */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom));
  transform: translate3d(-50%, 8px, 0);
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  isolation: isolate;
  transition: opacity 0.55s ease, visibility 0.55s ease, transform 0.55s ease, color 0.3s ease;
}

.scroll-hint::before {
  display: none;
}

.scroll-hint.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0);
}

.scroll-hint:hover {
  color: var(--color-primary);
  box-shadow: none;
}

.scroll-hint svg {
  width: 48px;
  height: 48px;
  filter: var(--shadow-unified-drop);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-hint:hover svg {
  transform: scale(1.18);
  filter: var(--shadow-unified-drop);
}

html.anim-ready .scroll-hint.is-shown {
  animation: scrollHintFloat 2.8s ease-in-out infinite;
}

html.anim-ready .scroll-hint.is-shown::before {
  animation: scrollHintHalo 2.8s ease-in-out infinite;
}

html.anim-ready .scroll-to-hero.is-visible .scroll-arrow-check {
  animation: scrollArrowCheck 2.45s ease-in-out infinite;
}

html.anim-ready .scroll-to-hero.is-visible:hover .scroll-arrow-check {
  animation-play-state: paused;
}

@keyframes scrollHintFloat {

  0%,
  100% {
    transform: translate3d(-50%, -5px, 0);
  }

  50% {
    transform: translate3d(-50%, 7px, 0);
  }
}

@keyframes scrollArrowCheck {

  0%,
  100% {
    opacity: 0.48;
    transform: translateY(1px);
  }

  45% {
    opacity: 0.95;
    transform: translateY(-2px);
  }

  72% {
    opacity: 0.64;
    transform: translateY(0);
  }
}

@keyframes scrollHintHalo {

  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.46;
    transform: scale(1.08);
  }
}

body.dark-theme .scroll-hint {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-light-accent);
}

body.dark-theme .scroll-hint::before {
  display: none;
}

body.dark-theme .scroll-hint svg {
  filter: var(--shadow-unified-drop);
}

body.dark-theme .scroll-hint:hover {
  box-shadow: none;
}

body.dark-theme .scroll-hint:hover svg {
  filter: var(--shadow-unified-drop);
}

/* Индикатор скролла не нужен на планшетах и мобильных — убираем полностью */
@media (max-width: 1240px) {
  .scroll-hint {
    display: none !important;
  }
}

/* --- Count-up: мягкий «поп» по завершении --- */
@keyframes countPop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.09);
  }

  100% {
    transform: scale(1);
  }
}

html.anim-ready .fact-num.count-done {
  animation: countPop 0.5s ease;
}

/* === ЕДИНЫЙ ХОВЕР-ЛИФТ ДЛЯ ВСЕХ КАРТОЧЕК ===
   Reveal-анимация в конце ставит `transform: none` через селектор с высокой
   специфичностью (html.anim-ready .reveal.is-visible) — он гасил подъём при
   наведении. Поэтому здесь форсируем подъём с !important (но ДО блока
   prefers-reduced-motion, чтобы доступность по-прежнему его отключала). */
.pain-card:hover,
.hero-image-mockup:hover,
.solution-visual-box:hover,
.feat-card:hover,
.role-card:hover,
.info-step-card:hover,
.cta-banner-card:hover,
.contact-qr-frame:hover,
.fact-item:hover,
.price-card:hover,
.faq-item-box:hover,
.how-step-item:hover {
  transform: translateY(-6px) !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-unified-hover) !important;
}

/* Более толстые, заметные бордеры карточек в светлой теме.
   Тень по умолчанию задаёт единый токен --shadow-unified (заметна у всех блоков). */
body:not(.dark-theme) :is(.pain-card,
  .hero-image-mockup,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .cta-banner-card,
  .contact-qr-frame,
  .fact-item,
  .price-card,
  .faq-item-box,
  .how-step-item,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .theme-switcher-pill,
  .lang-switcher,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active) {
  border-width: 2px;
}

/* Точечно запрошенные сероватые карточки в светлой теме (pain / факты / «как работает»).
   Секции при этом остаются в исходном чередовании белый/серый. */
body:not(.dark-theme) :is(.pain-card, .fact-item, .how-step-item) {
  background-color: var(--bg-main);
}

/* Единые тени для всех карточек и панелей светлой темы */
body:not(.dark-theme) :is(.pain-card,
  .hero-image-mockup,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .cta-banner-card,
  .contact-qr-frame,
  .fact-item,
  .price-card,
  .faq-item-box,
  .how-step-item,
  .banner-form-box,
  .qr-large-holder,
  .popup-modal-box,
  .dashboard-showcase,
  .call-table-wrapper,
  .compare-table-wrap,
  .compare-highlight,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .theme-switcher-pill,
  .lang-switcher,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active) {
  box-shadow: var(--shadow-unified) !important;
}

body:not(.dark-theme) :is(.pain-card,
  .hero-image-mockup,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .cta-banner-card,
  .contact-qr-frame,
  .fact-item,
  .price-card,
  .faq-item-box,
  .how-step-item,
  .banner-form-box,
  .qr-large-holder,
  .popup-modal-box,
  .dashboard-showcase,
  .compare-table-wrap,
  .compare-highlight,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .theme-switcher-pill,
  .lang-switcher,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active):hover {
  box-shadow: var(--shadow-unified-hover) !important;
}

/* Final shadow unification: use the same shadow as the approved role cards everywhere. */
body:not(.dark-theme) :is(.hero-image-mockup,
  .pain-card,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .fact-item,
  .dashboard-showcase,
  .call-table-wrapper,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .price-card,
  .faq-item-box,
  .banner-form-box,
  .qr-large-holder,
  .contact-qr-frame,
  .contact-qr-frame--large,
  .compare-table-wrap,
  .compare-highlight,
  .cta-banner-card,
  .popup-modal-box,
  .how-step-item,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .lang-switcher,
  .theme-switcher-pill,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active) {
  box-shadow: var(--shadow-panel) !important;
}

body:not(.dark-theme) :is(.hero-image-mockup,
  .pain-card,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .fact-item,
  .dashboard-showcase,
  .call-table-wrapper,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .price-card,
  .faq-item-box,
  .banner-form-box,
  .qr-large-holder,
  .contact-qr-frame,
  .contact-qr-frame--large,
  .compare-table-wrap,
  .compare-highlight,
  .cta-banner-card,
  .popup-modal-box,
  .how-step-item,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .lang-switcher,
  .theme-switcher-pill,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active):hover,
body:not(.dark-theme) .faq-item-box.active {
  box-shadow: var(--shadow-panel-hover) !important;
}

body:not(.dark-theme) :is(.hero-image-mockup,
  .fact-item,
  .pain-card,
  .dashboard-showcase) {
  filter: none !important;
}

/* --- Подстраховка для prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {

  html.anim-ready .reveal,
  html.anim-ready .hero-content,
  html.anim-ready .hero-visual-container,
  html.anim-ready .text-write .text-write-word,
  html.anim-ready .logo-block,
  html.anim-ready .nav-menu li,
  html.anim-ready .header-right>*,
  html.anim-ready .hero-title,
  html.anim-ready .hero-descr,
  html.anim-ready .hero-bullet-item,
  html.anim-ready .hero-actions-container {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  html.anim-ready .btn-primary,
  html.anim-ready .btn-primary.cta-attention,
  html.anim-ready .fact-num.count-done,
  html.anim-ready .scroll-hint.is-shown,
  html.anim-ready .scroll-hint.is-shown::before,
  html.anim-ready .scroll-hint.is-shown svg,
  html.anim-ready .scroll-to-hero.is-visible,
  html.anim-ready .scroll-to-hero.is-visible .scroll-arrow-check {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE LAYER — целостная адаптивная вёрстка (планшеты + мобайл).
   ========================================================================== */

/* --- Глобальные отступы контейнера на узких экранах --- */
@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- ШАПКА: бургер-меню --- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(128, 255, 242, 0.18);
  border-radius: 14px;
  background-color: rgba(14, 27, 24, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 8px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background-color: var(--color-secondary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

body.dark-theme .nav-burger span {
  background-color: #E6F3F1;
}

.nav-mobile-extra {
  display: none;
}

.nav-mobile-controls {
  display: none;
}

.mobile-theme-toggle {
  display: none;
}

@media (max-width: 767px) {
  .mobile-theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.72);
    color: var(--color-secondary);
    flex-shrink: 0;
  }

  body.dark-theme .mobile-theme-toggle {
    background-color: rgba(14, 27, 24, 0.86);
    border-color: rgba(128, 255, 242, 0.14);
    color: #80FFF2;
  }

  body.dark-theme .mobile-theme-icon--sun {
    display: none;
  }

  body.dark-theme .mobile-theme-icon--moon {
    display: block;
  }
}

.mobile-theme-icon--moon {
  display: none;
}

/* Ноутбуки/планшеты: компактнее шапку, чтобы элементы НЕ наезжали друг на друга
   (email прячем, меньше промежутки). Полный inline-навбар показываем только когда
   он реально помещается (≥1241px); ниже — бургер. */
@media (max-width: 1559px) {
  /* Капсула хедера не должна прижиматься к краям экрана на адаптивах —
     инсетим её через боковой padding фиксированной обёртки. */
  .site-header {
    padding-left: clamp(14px, 3vw, 40px);
    padding-right: clamp(14px, 3vw, 40px);
  }

  .header-container {
    padding: 0 24px;
  }

  .nav-menu {
    gap: 22px;
  }

  .header-right {
    gap: 16px;
  }

  .contact-email {
    display: none;
  }

  .contact-block {
    min-width: 0;
  }
}

/* Узкие ноутбуки/планшеты-ландшафт 1241–1400: раньше здесь всё сжималось (меню
   впритык к переключателям), потому что пилюля мессенджеров забивала бар. Теперь
   в этом диапазоне мессенджеры прячем (они остаются в бургер-меню и в блоке
   «Связаться с нами»), а меню и правый кластер получают равномерный воздух. */
@media (max-width: 1400px) {
  .social-pill { display: none !important; }
  .nav-menu { gap: 26px; }
  .header-right { gap: 18px; }
}

@media (max-width: 1240px) {
  .header-container {
    position: relative;
    padding: 0 18px;
  }

  /* Мессенджеры — фича десктопной шапки. На мобиле/планшете (где бургер)
     шапка = логотип + переключатели + бургер; мессенджеры остаются в разделе
     «Связаться с нами» и в бургер-меню, чтобы не забивать бар. */
  .social-pill {
    display: none !important;
  }

  .nav-burger {
    display: flex;
  }

  .nav-block {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-unified);
    max-height: calc(100svh - var(--header-height) - 36px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s ease;
  }

  .site-header.menu-open .nav-block {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 14px 14px;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }

  .nav-link:hover {
    background-color: rgba(0, 130, 117, 0.07);
  }

  .site-header.menu-open .nav-burger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .site-header.menu-open .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .site-header.menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  body.dark-theme .nav-block {
    background-color: #0E1B18;
    border-color: rgba(128, 255, 242, 0.12);
    box-shadow: var(--shadow-unified);
  }

  body.dark-theme .nav-link:hover {
    background-color: rgba(128, 255, 242, 0.08);
  }
}

@media (max-width: 767px) {

  .header-right>.theme-switcher-pill,
  .contact-block {
    display: none !important;
  }

  /* Языковой переключатель — прямо в шапке мобильной версии (компактный) */
  .header-right>.lang-switcher {
    display: inline-flex !important;
    gap: 2px;
    padding: 4px 6px;
    flex-shrink: 0;
  }

  .header-right>.lang-switcher .lang-btn {
    padding: 4px 6px;
    font-size: 12.5px;
  }

  .nav-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
  }

  /* Язык и тема уже доступны в шапке — дубль в бургер-меню не нужен */
  .nav-mobile-controls {
    display: none !important;
  }
}

/* Телефон (портрет): переключатели не помещаются в баре. Язык убираем в
   бургер-меню, в баре остаются логотип + тема + бургер. Перебиваем правила
   из блока ≤767 выше (поэтому идём ПОСЛЕ него и тоже с !important). */
@media (max-width: 560px) {
  .nav-burger {
    width: 34px;
    height: 34px;
    gap: 4px;
    border-radius: var(--radius-sm);
  }

  .nav-burger span {
    width: 22px;
    height: 3px;
  }

  .site-header.menu-open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-right > .lang-switcher {
    display: none !important;
  }

  .nav-mobile-controls {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 255, 242, 0.12);
  }

  /* Тема остаётся в баре — дубль темы в меню прячем, оставляем только язык */
  .nav-mobile-controls .theme-switcher-pill--mobile {
    display: none;
  }

  .nav-mobile-phone {
    font-size: 19px;
    font-weight: 800;
    color: #E6F3F1; /* меню всегда тёмно-зелёное → телефон светлый в обеих темах */
    text-align: center;
    letter-spacing: 0.01em;
  }

  .nav-mobile-cta {
    width: 100%;
    text-align: center;
    padding: 15px 18px;
    font-size: 15px;
    white-space: normal;
    line-height: 1.3;
  }
}

@media (max-width: 1100px) {
  /* Картинка во всю ширину блока, без серой/зелёной пустой полосы.
     По ширине НЕ режем (важная информация по краям), бейджи — НА картинке. */
  .hero-image-mockup {
    width: 100%;
  }

  .hero-photo-overlay {
    position: absolute !important;
    inset: auto 16px 16px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
  }

  .mini-metric-pill {
    /* То же стекло, что у хедера, и на ноутбуках/планшетах */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
}

/* Бейджи: только размеры/отступы, цвета наследуются из базы.
   На телефонах (≤560) размеры задаёт свой компактный блок ниже. */
@media (min-width: 561px) and (max-width: 1100px) {
  .mini-metric-pill {
    width: 184px !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    gap: 14px !important;
  }
}

@media (max-width: 360px) {
  .header-container {
    padding: 0 12px;
  }

  .header-right {
    gap: 7px;
  }

  .lang-btn {
    padding: 0 9px;
  }

  .theme-switcher-pill .theme-btn {
    width: 28px;
    height: 28px;
  }

  .nav-burger span {
    width: 22px;
  }
}

/* --- ГЕРОЙ --- */
@media (max-width: 1180px) {
  .hero-grid {
    gap: 40px;
  }

  .hero-bullet-text {
    white-space: normal;
  }

  .hero-visual-container {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .hero-section {
    min-height: auto;
    align-items: stretch;
    padding-top: calc(var(--header-height) + 44px);
    padding-bottom: 56px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* единый компактный интервал между блоками hero */
  }

  .hero-content {
    display: contents;
  }

  /* В стеке интервал задаёт ТОЛЬКО gap — собственные margin-bottom элементов
     обнуляем, иначе они складываются с gap и дают огромные пустоты. */
  .hero-title,
  .hero-descr,
  .hero-bullets-box {
    margin-bottom: 0;
  }

  .hero-title {
    order: 2;
    width: 100%;
  }

  .hero-descr {
    order: 3;
    width: 100%;
  }

  .hero-bullet-text {
    white-space: normal;
  }

  .hero-bullet-item {
    align-items: flex-start;
  }

  /* Картинка — СРАЗУ под описанием (на месте буллетов), чтобы фото было видно
     в первом экране без прокрутки. Стало возможным потому, что mob-версия
     широкая-короткая (16:9) и почти не занимает высоту. Буллеты — под фото. */
  .hero-visual-container {
    order: 4;
    justify-content: center;
    padding-right: 0;
  }

  /* Вертикальная версия: подгружается широкая-короткая mob-картинка (16:9),
     поэтому и мокап делаем 16:9 — блок занимает заметно меньше высоты, CTA и
     контент остаются в первом экране. Граница 900px совпадает с media в <picture>.
     Картинка — на ВСЮ ширину hero-блока (без ограничения 560px): в портрете так
     эффектнее и ровнее по композиции. */
  .hero-image-mockup {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }

  .hero-bullets-box {
    order: 5;
    width: 100%;
  }

  /* Кнопка и trust-бейдж в одну строку (бейдж справа). Текст бейджа всегда
     ОДНОЙ строкой; при нехватке места бейдж переносится целиком вниз.
     Кнопка — последняя в стеке (после буллетов). */
  .hero-actions-container {
    order: 6;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
  }

  /* Кнопка держит свою натуральную ширину в ОДНУ строку (не толстеет). */
  .hero-actions-container .btn-primary {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Бейдж не сжимается и не ломает текст — при нехватке места уходит вниз. */
  .hero-actions-container .hero-trust-badge {
    flex: 0 0 auto;
    white-space: nowrap;
    justify-content: flex-start;
    line-height: 1.25;
  }
}

/* Ландшафтные телефоны (ширина ≤900, но экран низкий): картинку на всю ширину
   не даём — иначе широкая 16:9 раздувается по высоте и hero не влезает. Держим
   умеренную ширину, по центру. Портретных планшетов это не касается. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-image-mockup {
    max-width: 480px;
  }
}

/* Низкие ландшафтные экраны типа 800×600 (старые 4:3 мониторы): ужимаем hero по
   вертикали — меньше верхний отступ, компактнее картинка и интервалы, — чтобы
   кнопка «Получить демо-доступ» попадала в первый экран. Диапазон высоты 450–700
   не задевает ландшафтные телефоны (они ещё ниже, там прокрутка ожидаема). */
@media (max-width: 900px) and (orientation: landscape) and (min-height: 450px) and (max-height: 700px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 12px) !important;
    padding-bottom: 22px !important;
  }
  .hero-grid {
    gap: 10px !important;
  }
  .hero-image-mockup {
    max-width: 268px;
  }
  .hero-title,
  .hero-descr,
  .hero-bullets-box {
    margin-bottom: 0;
  }
}

/* На планшетах буллеты держим читаемыми, но компактными: умеренный шрифт и
   тугой межстрочный, чтобы 2-строчные пункты не разъезжались по высоте. */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-bullet-text {
    font-size: 16px;
    line-height: 1.3;
  }

  .hero-bullet-icon {
    font-size: 20px;
  }

  .hero-bullets-box {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 26px);
    padding-bottom: 44px;
  }

  .hero-grid {
    gap: 20px;
  }

  .hero-title {
    margin-bottom: 0;
  }

  .hero-descr {
    margin-bottom: 0;
    font-size: 16.5px;
    line-height: 1.55;
  }

  .hero-bullets-box {
    gap: 12px;
    margin-bottom: 8px;
  }

  .hero-visual-container {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }

  .hero-image-mockup {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-md);
  }

  /* Бейджи — компактные плашки ГОРИЗОНТАЛЬНО внизу картинки:
     «Запись» слева, «Аудит активен» справа. Если в одну строку совсем
     не влезают — переносятся во второй ряд (wrap), а не обрезаются. */
  .hero-photo-overlay {
    inset: auto 10px 10px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
  }

  /* Оба бейджа СТРОГО одинаковой ширины: делят ряд поровну */
  .mini-metric-pill {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 184px;
    justify-content: center;
    height: 32px;
    padding: 0 11px;
    gap: 9px;
  }

  .mini-metric-pill > span:not(.pulse-indicator) {
    font-size: 11.5px;
  }

  .mini-metric-pill .pulse-indicator {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
  }
}

/* Совсем узкие экраны: ужимаем сами ПЛАШКИ (высоту, отступы, точку),
   текст держим читаемым (10.5px) — чтобы оба бейджа влезали в ОДИН ряд.
   Два ряда справа внизу — только если не влезли даже ужатые. */
@media (max-width: 374px) {
  .hero-photo-overlay {
    inset: auto 6px 6px 6px !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 5px 6px !important;
  }

  .mini-metric-pill {
    height: 25px;
    padding: 0 7px;
    gap: 5px;
  }

  .mini-metric-pill > span:not(.pulse-indicator) {
    font-size: 10.5px;
  }

  .mini-metric-pill .pulse-indicator {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
  }
}

/* Вертикальный мобильный (телефон-портрет): на узком экране бейдж справа
   выходит тесным/в 3 строки, поэтому ЗДЕСЬ (и только здесь) trust-бейдж
   переносим ПОД кнопку. На всех остальных адаптивах (≥561, планшеты и
   десктоп) он остаётся справа от кнопки. */
@media (max-width: 560px) {
  .hero-actions-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-actions-container .btn-primary {
    width: 100%;
    flex: 0 0 auto;
    white-space: normal;
    text-align: center;
  }

  /* Под кнопкой (телефон-портрет) текст бейджа может переноситься
     в 2 строки, если совсем не влезает в одну. */
  .hero-actions-container .hero-trust-badge,
  .hero-trust-badge {
    justify-content: center;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
}

/* --- КОНТЕНТ-БЛОКИ --- */
@media (max-width: 1024px) {

  .pain-grid,
  .facts-grid,
  .features-grid,
  .roles-grid,
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {

  .solution-grid,
  .contacts-grid,
  .footer-grid-layout,
  .price-card-grid,
  .price-features-grid,
  .audit-grid,
  .analytics-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 64px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {

  .pain-grid,
  .facts-grid,
  .features-grid,
  .roles-grid,
  .how-steps {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 50px 0;
  }

  .section-header {
    margin-bottom: 32px;
  }
}

/* --- ДАШБОРД «Палантир Аналитика» --- */
@media (max-width: 900px) {
  .call-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .call-table {
    min-width: 560px;
  }
}

@media (max-width: 600px) {
  .call-table-wrapper {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .call-table {
    display: block;
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    font-size: 16px;
  }

  .call-table thead {
    display: none;
  }

  .call-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .call-table tr {
    display: block;
    padding: 14px 16px;
    border: 1.5px solid var(--border-color);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
  }

  .call-table tr:hover {
    background-color: var(--bg-card);
  }

  .call-table td {
    display: grid;
    grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    line-height: 1.45;
  }

  .call-table td:last-child {
    border-bottom: 0;
  }

  .call-table td::before {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .call-table td:nth-child(1)::before {
    content: "Дата";
  }

  .call-table td:nth-child(2)::before {
    content: "Администратор";
  }

  .call-table td:nth-child(3)::before {
    content: "Время звонка";
  }

  .call-table td:nth-child(4)::before {
    content: "Чек-лист";
  }

  .call-table td:nth-child(5)::before {
    content: "Оценка ИИ";
  }

}

@media (max-width: 600px) {
  .db-content {
    padding: 24px 16px;
  }

  /* Вкладка «Отчеты и графики»: график не должен вылезать за край экрана —
     столбики делим поровну на доступную ширину вместо фиксированных 88px. */
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .chart-visual {
    padding: 0;
    gap: 10px;
  }

  .chart-bar-col {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .chart-bar-val {
    font-size: 14px;
  }

  .chart-label {
    font-size: 11px;
  }

  .chart-gain-badge {
    font-size: 18px;
    padding: 7px 16px;
  }

  .db-chart-placeholder {
    padding: 18px 14px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-card-value {
    font-size: 26px;
    margin: 6px 0;
  }

  .stat-card-label {
    font-size: 12px;
  }

  /* Две компактные метрики помещаются в один ряд даже на телефоне */
  .analytics-grid--two {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .db-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 16px;
  }

  .db-status {
    font-size: 14px;
  }
}

/* --- КОНТАКТЫ / ФОРМЫ / ФУТЕР --- */
@media (max-width: 900px) {

  .contacts-grid>*,
  .footer-grid-layout>*,
  .price-card-grid>* {
    min-width: 0;
  }

  .info-social-buttons {
    flex-wrap: wrap;
  }

  .map-frame-holder {
    min-height: 320px;
  }

  .qr-large-holder {
    min-height: auto;
    padding: 32px 24px;
  }

  .contact-qr-frame--large img {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 600px) {
  .qr-large-holder {
    padding: 24px 16px;
  }

  .contact-qr-frame--large {
    padding: 0;
  }

  .contact-qr-frame--large img {
    width: 160px;
    height: 160px;
  }
}

/* --- ТАБЛИЦА СРАВНЕНИЯ --- */
@media (max-width: 900px) {
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-table {
    min-width: 600px;
  }
}

/* На телефонах таблица сравнения в полном размере занимает 2+ экрана.
   Умеренно сжимаем текст и отступы (не пережимая), колонки сравнения делаем
   одинаковой ширины и разграничиваем вертикальными линиями. */
@media (max-width: 600px) {
  .compare-table {
    min-width: 560px;
    table-layout: fixed;
  }

  .compare-table th,
  .compare-table td {
    padding: 14px 10px;
  }

  /* Вертикальные разделители между всеми колонками */
  .compare-table th + th,
  .compare-table td + td {
    border-left: 1px solid var(--border-color);
  }

  .compare-table thead th {
    font-size: 11px;
    line-height: 1.3;
    padding: 12px 8px;
  }

  /* table-layout: fixed — ширины задаёт первая строка: колонка «Возможности»
     34%, остальные 4 колонки делят остаток поровну (равная ширина). */
  .compare-table .cmp-feature-col,
  .compare-table .cmp-feature {
    width: 34%;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Вместо плашки (наезжала на линии таблицы) — просто яркая надпись
     ЗАГЛАВНЫМИ фирменным зелёным, выделяется среди остальных колонок. */
  .cmp-us-badge {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }

  body.dark-theme .cmp-us-badge {
    background: none;
    box-shadow: none;
    color: var(--color-light-accent);
  }

  .cmp-yes {
    font-size: 18px;
  }

  .cmp-no,
  .cmp-partial {
    font-size: 15px;
  }

  .compare-highlight {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 20px;
  }
}

/* Compact header styling for very narrow screens */
@media (max-width: 360px) {
  .logo-text {
    --logo-title-size: 15px; /* подпись = 7.5px авто → совпадает по ширине */
  }

  .logo-title {
    letter-spacing: 0.03em !important;
  }

  .logo-subtitle {
    letter-spacing: 0.01em !important;
  }

  .mobile-theme-toggle {
    width: 30px !important;
    height: 30px !important;
  }

  .nav-burger {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 900px) {

  .compare-table-wrap::-webkit-scrollbar,
  .db-sidebar::-webkit-scrollbar {
    height: 10px !important;
    display: block !important;
  }

  .compare-table-wrap::-webkit-scrollbar-track,
  .db-sidebar::-webkit-scrollbar-track {
    background: rgba(17, 66, 61, 0.08) !important;
    border-radius: 999px !important;
    margin: 0 16px !important;
  }

  .compare-table-wrap::-webkit-scrollbar-thumb,
  .db-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-primary) !important;
    border-radius: 999px !important;
    border: 2.5px solid var(--surface-alt) !important;
    min-width: 48px !important;
  }

  body.dark-theme .compare-table-wrap::-webkit-scrollbar-track,
  body.dark-theme .db-sidebar::-webkit-scrollbar-track {
    background: rgba(128, 255, 242, 0.08) !important;
  }

  body.dark-theme .compare-table-wrap::-webkit-scrollbar-thumb,
  body.dark-theme .db-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-light-accent) !important;
    border-color: #0e1b18 !important;
  }
}

/* Layout and positioning properties for cards/containers (shadows are handled by unified rules/classes) */
.cta-banner-card,
body.dark-theme .cta-banner-card,
.cta-banner-card:hover,
body.dark-theme .cta-banner-card:hover {
  overflow: visible !important;
  clip-path: none !important;
}

.call-table-wrapper {
  position: relative;
  z-index: 1;
  margin: 2px 2px 14px;
}

.compare-table-wrap,
.compare-table-wrap:hover,
body.dark-theme .compare-table-wrap,
body.dark-theme .compare-table-wrap:hover {
  position: relative;
  z-index: 1;
  margin: 48px 0 24px;
  clip-path: none !important;
}

.contact-qr-frame,
.contact-qr-frame--large {
  position: relative;
  z-index: 1;
}

.contact-qr-frame img {
  position: relative;
  z-index: 1;
  box-shadow: none !important;
  filter: var(--shadow-unified-drop) !important;
}

/* Большой QR — без тени-ореола и без плашки: только аккуратная обводка
   у самого кода (и в светлой, и в тёмной теме). */
.contact-qr-frame--large img {
  position: relative;
  z-index: 1;
  box-shadow: none !important;
  filter: none !important;
}

html.anim-ready .hero-image-mockup.reveal,
html.anim-ready .hero-image-mockup.reveal.is-visible,
html.anim-ready .pain-card.reveal,
html.anim-ready .pain-card.reveal.is-visible,
html.anim-ready .solution-visual-box.reveal,
html.anim-ready .solution-visual-box.reveal.is-visible,
html.anim-ready .info-step-card.reveal,
html.anim-ready .info-step-card.reveal.is-visible,
html.anim-ready .fact-item.reveal,
html.anim-ready .fact-item.reveal.is-visible,
html.anim-ready .feat-card.reveal,
html.anim-ready .feat-card.reveal.is-visible,
html.anim-ready .role-card.reveal,
html.anim-ready .role-card.reveal.is-visible,
html.anim-ready .how-step-item.reveal,
html.anim-ready .how-step-item.reveal.is-visible,
html.anim-ready .dashboard-showcase.reveal,
html.anim-ready .dashboard-showcase.reveal.is-visible,
html.anim-ready .call-table-wrapper.reveal,
html.anim-ready .call-table-wrapper.reveal.is-visible,
html.anim-ready .price-card.reveal,
html.anim-ready .price-card.reveal.is-visible,
html.anim-ready .faq-item-box.reveal,
html.anim-ready .faq-item-box.reveal.is-visible {
  clip-path: none !important;
}

/* Final light-theme shadow lock.
   Keep this at the end: older responsive/reveal rules above use !important and otherwise split shadows again. */
body:not(.dark-theme) :is(.header-container,
  .hero-image-mockup,
  .pain-card,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .dashboard-showcase,
  .call-table-wrapper,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .price-card,
  .faq-item-box,
  .banner-form-box,
  .qr-large-holder,
  .contact-qr-frame,
  .contact-qr-frame--large,
  .compare-table-wrap,
  .compare-highlight,
  .cta-banner-card,
  .popup-modal-box,
  .how-step-item,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .lang-switcher,
  .theme-switcher-pill,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active) {
  box-shadow: var(--shadow-panel) !important;
  filter: none !important;
}

body:not(.dark-theme) :is(.hero-image-mockup,
  .pain-card,
  .solution-visual-box,
  .feat-card,
  .role-card,
  .info-step-card,
  .dashboard-showcase,
  .call-table-wrapper,
  .transcript-panel,
  .checklist-box,
  .trainer-card,
  .chat-container,
  .stat-card,
  .db-chart-placeholder,
  .price-card,
  .faq-item-box,
  .banner-form-box,
  .qr-large-holder,
  .contact-qr-frame,
  .contact-qr-frame--large,
  .compare-table-wrap,
  .compare-highlight,
  .cta-banner-card,
  .popup-modal-box,
  .how-step-item,
  .mini-metric-pill,
  .price-card-badge,
  .trainer-scenario-badge,
  .chart-gain-badge,
  .cmp-us-badge,
  .lang-switcher,
  .theme-switcher-pill,
  .lang-btn.active,
  .theme-switcher-pill .theme-btn.active):hover,
body:not(.dark-theme) .faq-item-box.active {
  box-shadow: var(--shadow-panel-hover) !important;
}

body:not(.dark-theme) section.facts-section#facts .facts-grid .fact-item {
  box-shadow: var(--shadow-panel) !important;
  filter: none !important;
}

body:not(.dark-theme) section.facts-section#facts .facts-grid .fact-item:hover {
  box-shadow: var(--shadow-panel-hover) !important;
}

body.dark-theme .hero-image-mockup {
  box-shadow: var(--shadow-panel) !important;
  filter: none !important;
}

body.dark-theme .hero-image-mockup:hover {
  box-shadow: var(--shadow-panel-hover) !important;
}

/* ================================================
   МОБИЛЬНЫЕ КНОПКИ: широкие (как карточки, ~300px),
   слова внутри не переносятся; «демо‑доступ» с неразрывным дефисом
   переносится только целиком на вторую строку.
   ================================================ */
@media (max-width: 768px) {
  .btn:not(.form-submit-btn) {
    width: 100%;
    max-width: 300px;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  /* В колонке hero (телефон-портрет) широкая кнопка по центру */
  .hero-actions-container .btn-primary {
    margin-left: auto;
    margin-right: auto;
  }
}

/* «Связаться с нами»: кнопки мессенджеров (MAX / Telegram / ВКонтакте)
   на телефонах всегда в ОДНУ строку — компактнее отступы и шрифт. */
@media (max-width: 600px) {
  .info-social-buttons {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .social-contact-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 374px) {
  .info-social-buttons {
    gap: 8px;
  }

  .social-contact-btn {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   БОЛЬШИЕ ЭКРАНЫ (2.5K / 4K / 5K / 6K / 8K — все 16:9).
   FullHD (1920) — эталон. Выше 1920 раскладку НЕ перерисовываем: сайт
   масштабируется как ЕДИНАЯ КАРТИНКА (zoom ≈ ширина / 1920) — лэйаут всегда
   считается на 1920 и просто увеличивается, поэтому 2.5K/4K/6K/8K выглядят
   ВИЗУАЛЬНО ТОЧ-В-ТОЧ как FullHD, только крупнее и чётче (как будто увеличили
   сам скрин). Ступени подобраны так, чтобы на стандартных разрешениях zoom был
   ТОЧНЫМ: 2560→1.333, 3840→2.0, 5120→2.667, 6016→3.125, 7680→4.0.
   На мониторах с ДРУГИМ соотношением сторон (16:10 / 4:3 / ultrawide) контент
   остаётся центрированным, а по краю добавляются поля.
   ВАЖНО про hero min-height: под `zoom:Z` Chromium считает `vh` от НЕзумленной
   высоты экрана → `min-height:100vh` = ≈Z экранов. Делим на тот же Z, чтобы hero
   снова был ровно один экран (иначе сверху большой пустой провал). */
@media (min-width: 2000px) { html { zoom: 1.10; } .hero-section { min-height: calc(100vh / 1.10); min-height: calc(100svh / 1.10); } }
@media (min-width: 2400px) { html { zoom: 1.33; } .hero-section { min-height: calc(100vh / 1.33); min-height: calc(100svh / 1.33); } }   /* 2.5K / QHD 2560 */
@media (min-width: 3000px) { html { zoom: 1.66; } .hero-section { min-height: calc(100vh / 1.66); min-height: calc(100svh / 1.66); } }
@media (min-width: 3840px) { html { zoom: 2.00; } .hero-section { min-height: calc(100vh / 2.00); min-height: calc(100svh / 2.00); } }   /* 4K = ×2 FullHD */
@media (min-width: 5120px) { html { zoom: 2.667; } .hero-section { min-height: calc(100vh / 2.667); min-height: calc(100svh / 2.667); } } /* 5K / 5K2K */
@media (min-width: 6000px) { html { zoom: 3.125; } .hero-section { min-height: calc(100vh / 3.125); min-height: calc(100svh / 3.125); } } /* 6K */
@media (min-width: 7680px) { html { zoom: 4.00; } .hero-section { min-height: calc(100vh / 4.00); min-height: calc(100svh / 4.00); } }  /* 8K = ×4 FullHD */