/* --- ЛОКАЛЬНЫЕ ШРИФТЫ ПО ТЗ: Manrope (заголовки) + Inter (текст) + Noto Sans (запас) --- */
@font-face {
  font-family: 'Manrope';
  src: url('../project/src/fonts/manrope/Manrope-Variable.woff2') format('woff2'),
    url('../project/src/fonts/manrope/Manrope-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../project/src/fonts/inter/Inter-Variable.woff2') format('woff2'),
    url('../project/src/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('../project/src/fonts/noto-sans/NotoSans-Variable.woff2') format('woff2'),
    url('../project/src/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;
  /* Системный сжатый интервал для крупных заголовков */
}

/* Эстетичные переносы заголовков: браузер балансирует длину строк и не
   оставляет «висячее» одно слово на последней строке (напр. «уровне?»). */
.section-title,
.banner-title,
.pain-title,
.feat-title,
.role-title,
.price-title,
.form-header-title,
.section-subtitle {
  text-wrap: balance;
}

.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);
}

.theme-toggle {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--border-color);
  width: auto;
  height: 40px;
  gap: 4px;
  cursor: pointer;
}

/* --- 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;
}

@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 и
   плавающую капсулу хедера) центрируется с воздухом слева и справа, как на
   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);
}

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

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

body.dark-theme .hero-photo-img--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-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background-color: var(--color-accent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  box-shadow: var(--shadow-pill);
}

/* Композиция тарифа: цена + действия слева, состав справа (на всю ширину блока) */
.price-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: stretch;
}

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

.price-title {
  font-size: var(--font-xl);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 18px;
  text-align: left;
}

.price-main-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.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-period {
  font-size: var(--font-md);
  color: var(--text-muted);
  font-weight: 600;
}

.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-includes-col {
  display: flex;
  flex-direction: column;
}

.price-includes-title {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 26px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.price-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 38px;
  text-align: left;
  margin-bottom: 0;
}

.price-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.62;
}

.price-feature-item .green-check-svg {
  width: 24px;
  height: 24px;
  margin-right: 0;
  margin-top: 3px;
}

.price-button-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* --- БЛОК 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: 12px;
  margin-top: 10px;
}

.social-contact-btn {
  padding: 10px 20px;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 700;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-unified);
}

.social-contact-btn:hover {
  background-color: #B33A02;
  color: #FFFFFF;
  border-color: #B33A02;
  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 {
  background-color: rgba(17, 51, 47, 0.4);
  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" ниже (см. apple_typography_adaptive.md). */

    /* Также пропорционально уменьшаем отступы и пустоты */
    --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 {
    padding: 10px;
  }

  .popup-modal-overlay .popup-modal-box {
    padding: 22px 16px 18px;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .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 .field-textarea {
    min-height: 0;
    height: 62px;
    resize: none;
  }

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

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

  /* Кнопки компактнее по высоте, но шрифт держим читаемым (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/apple_typography_adaptive.md
   Desktop (>=1200px) использует базовую шкалу из :root и НЕ меняется.
   Здесь настраиваются только адаптивные брейкпоинты, чтобы
   заголовки/текст не были чрезмерно крупными и держали иерархию.
   ============================================================ */

/* Планшет горизонтальный: 900–1199px
   H1=3xl, H2=2xl, H3=xl, H4=lg, lead=md, body=sm, caption=xs.
   Значения у верхней границы диапазонов adaptive-rules.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
   Подняты к верхней части диапазонов adaptive-rules.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;
}

/* Крестик закрытия: без плашки, просто крупный символ × в углу */
.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);
}

/* Промо 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;
  }

  .price-card-badge {
    position: static;
    display: inline-flex;
    margin-bottom: 16px;
  }

  .price-title {
    text-align: left;
  }

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

  .price-main-val {
    align-items: center;
    flex-wrap: wrap;
  }
}

@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-title {
  color: #E6F3F1 !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-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 .price-period {
  color: #7AADA7;
}

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 tighten the letter-spacing for a denser, more professional B2B display look */
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;
}


/* 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);
}

.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: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

body.dark-theme .social-contact-btn:hover {
  background-color: #E8551A;
  border-color: #E8551A;
  color: #FFFFFF;
}

/* ============================================================
   ЭТАП 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;
  }
}

@media (max-width: 1240px) {
  .header-container {
    position: relative;
    padding: 0 18px;
  }

  .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;
  }

  .hero-visual-container {
    order: 4;
    justify-content: center;
    padding-right: 0;
  }

  /* Вертикальная версия: картинка просто переезжает вниз (стек), остаётся
     крупной и в том же соотношении, что и на десктопе (квадрат), по центру. */
  .hero-image-mockup {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }

  .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;
  }
}

/* На планшетах буллеты держим читаемыми, но компактными: умеренный шрифт и
   тугой межстрочный, чтобы 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: 8px;
  }

  .social-contact-btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  .info-social-buttons {
    gap: 6px;
  }

  .social-contact-btn {
    padding: 8px 8px;
    font-size: 11.5px;
  }
}