/* =============================================================================
   landing.css — дизайн-система публичного лендинга id.szbi.ru
   -----------------------------------------------------------------------------
   ЧТО ЭТО. Перенос дизайн-системы лендинга НОК (C:\GOOD-ID-donor\nok\landing.html,
   инлайновый <style>) в отдельный файл нашего проекта.

   КОНТРАКТ ФАЙЛА
   1. Файл САМОДОСТАТОЧЕН. Лендинг задуман как standalone-страница (как login.html
      и register.html): свой <head>, своя шапка .lnav, свой подвал .lfooter.
      Достаточно подключить ОДИН этот файл — nok.css и id.css лендингу не нужны.
      Требуется только: <body class="l-body">.
   2. Всё, что здесь есть, живёт под классом .l-body или под собственными
      префиксами (.lnav-, .hero-, .section-, .how-, .prob-, .feat-, .exam-,
      .norm-, .cmp-, .price-, .faq-, .final-, .lfooter-). Классы кабинета
      (.nos-*, .id-*) не трогаются — файл можно подключить и рядом с ними
      (см. блок «Совместимость с base.html» в самом конце).
   3. Никаких внешних ресурсов: CSP проекта (app/main.py, CONTENT_SECURITY_POLICY)
      даёт font-src 'self' data: и default-src 'self'. Montserrat лежит локально
      в /static/fonts/ — @font-face ниже. Google Fonts осознанно выброшены.
   4. У body НЕТ overflow-x: hidden. У донора он был и МАСКИРОВАЛ переполнение
      (блок демо-телефонов .duo — 708px фиксированной ширины). Проверять прокрутку
      только так: window.scrollTo(500,0); window.scrollX  → должно быть 0.
   5. Цены в разметку руками не писать — только из Jinja-глобалей plans/plan_cards.
      Здесь только оформление ценовых карточек, ни одного числа.
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   1. ШРИФТ — Montserrat, локально
   Переменный шрифт (ось wght 700–900), SIL OFL 1.1 (лицензия: fonts/OFL.txt).
   Три подмножества с unicode-range: браузер скачивает ТОЛЬКО то, что реально
   встретилось на странице. latin-ext тянется лишь если появится ₽ или похожий
   символ — в обычной вёрстке не запрашивается вовсе.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-cyrillic-700-900.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-700-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext-700-900.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ТОКЕНЫ
   Палитра лендинга. ВНИМАНИЕ: это НЕ палитра кабинета (--id-blue #1B3A5C,
   --id-green #5ea13d в id.css). Две разные системы, смешивать нельзя.
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body {
  /* Тёмно-синий каркас */
  --l-navy-950: #001b3d;
  --l-navy-900: #003b7a;
  --l-navy-700: #0a4fa6;
  --l-navy-600: #1a3a6b;

  /* Синий акцент */
  --l-blue-700: #1d4ed8;
  --l-blue-500: #3b82f6;
  --l-blue-200: #93c5fd;

  /* Фиолетовый маркер секций */
  --l-violet: #4b509e;

  /* Оранжевый CTA и золото заголовка */
  --l-orange: #f97316;
  --l-red: #ef4444;
  --l-gold: #fbbf24;

  /* Текст */
  --l-ink: #0f172a;
  --l-body-text: #1e293b;
  --l-list: #334155;
  --l-para: #475569;
  --l-sub: #64748b;
  --l-faint: #94a3b8;

  /* Фоны и линии */
  --l-white: #fff;
  --l-bg-1: #f8fafc;
  --l-bg-2: #f0f4fa;
  --l-bg-3: #f1f5f9;
  --l-line: #e2e8f0;
  --l-footer: #0a0f1a;

  /* Семантика */
  --l-ok: #16a34a;
  --l-no: #dc2626;
  --l-warn: #d97706;

  /* Градиенты */
  --l-grad-hero: linear-gradient(145deg, #001b3d 0%, #003b7a 40%, #0a4fa6 70%, #1a3a6b 100%);
  --l-grad-cta: linear-gradient(135deg, #f97316, #ef4444);
  --l-grad-gold: linear-gradient(135deg, #fbbf24, #f97316);
  --l-grad-blue: linear-gradient(135deg, #003b7a, #1d4ed8);

  /* Тени */
  --l-sh-cta: 0 8px 30px rgba(249, 115, 22, 0.45);
  --l-sh-cta-hover: 0 12px 40px rgba(249, 115, 22, 0.55);
  --l-sh-card-hover: 0 20px 60px rgba(0, 0, 0, 0.1);

  /* Метрика */
  --l-nav-h: 64px;
  --l-anchor-offset: 84px; /* высота шапки + воздух: якорь не уезжает под .lnav */
  --l-max: 1100px;
  --l-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --l-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. БАЗА / RESET
   Reset намеренно ограничен потомками .l-body: файл не должен ломать кабинет,
   если его подключат рядом с nok.css. У донора reset был объявлен ДВАЖДЫ
   (строки 47 и 352) — здесь один раз.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

.l-body,
.l-body *,
.l-body *::before,
.l-body *::after {
  box-sizing: border-box;
}

.l-body {
  margin: 0;
  padding: 0;
  font-family: var(--l-font-body);
  font-size: 16px;
  color: var(--l-body-text);
  background: var(--l-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden НЕ ставим — см. п.4 контракта файла */
}

.l-body h1,
.l-body h2,
.l-body h3,
.l-body h4,
.l-body h5,
.l-body h6,
.l-body p,
.l-body ul,
.l-body ol,
.l-body figure,
.l-body blockquote,
.l-body dl,
.l-body dd {
  margin: 0;
  padding: 0;
}

.l-body a {
  text-decoration: none;
  color: inherit;
}

.l-body img,
.l-body svg,
.l-body video {
  display: block;
  max-width: 100%;
}

.l-body button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Длинные русские слова («Исполнительная», «освидетельствования») на 320px
   рвут строку и дают горизонтальную прокрутку — переносим по буквам. */
.l-body h1,
.l-body h2,
.l-body h3,
.l-body h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Дети grid по умолчанию min-width:auto и распирают сетку содержимым.
   Это вторая по частоте причина горизонтальной прокрутки. */
.l-body .hero-stats > *,
.l-body .how-steps > *,
.l-body .prob-grid > *,
.l-body .feat-grid > *,
.l-body .exam-grid > *,
.l-body .exam-pills > *,
.l-body .norm-grid > *,
.l-body .price-grid > * {
  min-width: 0;
}

/* Якоря не должны уезжать под фиксированную шапку.
   Меню base.html ведёт на /#features с других страниц — offset обязателен. */
.l-body section[id],
.l-body [id].l-anchor {
  scroll-margin-top: var(--l-anchor-offset);
}

.l-body .text-center {
  text-align: center;
}

.l-body .l-nowrap {
  white-space: nowrap;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   4. ШАПКА (.lnav) — фиксированная, с размытием
   ═══════════════════════════════════════════════════════════════════════════ */

.lnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 27, 61, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Класс вешает JS при scrollY > 80 (вместо правки style.background напрямую) */
.lnav.scrolled {
  background: rgba(0, 27, 61, 0.98);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.lnav-inner {
  max-width: var(--l-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  height: var(--l-nav-h);
}

/* Логотип уступает место первым: при нехватке ширины сжимается он, а не меню.
   Без min-width:0 flex-элемент не сжимается ниже своего содержимого и выдавливает
   ссылки за правый край — на .lnav это не даёт прокрутки страницы (элемент
   position:fixed не участвует в scrollWidth), зато молча срезает кнопку действия. */
.lnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.lnav-logo > span {
  min-width: 0;
}

.lnav-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--l-grad-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
  flex-shrink: 0;
}
.lnav-mark svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.lnav-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lnav-sub {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.lnav-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.lnav-link:hover,
.lnav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.lnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--l-grad-cta);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 22px;
  border: none;
  border-radius: 9px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lnav-btn:hover,
.lnav-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
  color: #fff;
}

/* Бургер */
.lnav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.lnav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.lnav-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.lnav-burger.open span:nth-child(2) {
  opacity: 0;
}
.lnav-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Мобильное меню — отдельный блок сразу после </nav> */
.lnav-mobile {
  display: none;
  position: fixed;
  top: var(--l-nav-h);
  left: 0;
  right: 0;
  background: rgba(0, 27, 61, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 16px 24px;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  max-height: calc(100vh - var(--l-nav-h));
  overflow-y: auto;
}
.lnav-mobile.open {
  display: flex;
}
.lnav-mobile a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lnav-mobile a:last-child {
  border-bottom: none;
}
.lnav-mobile .lnav-btn {
  margin-top: 10px;
  justify-content: center;
  border-bottom: none;
}

/* Промежуточный диапазон: меню ещё десктопное, но 1100px-контейнера уже мало.
   Замерено в браузере: при пяти пунктах, кнопке действия и двухстрочном
   логотипе на 1024px правый край меню уезжал на 1054px. Здесь меню поджимается. */
@media (min-width: 901px) and (max-width: 1140px) {
  .lnav-link {
    padding: 8px 9px;
    font-size: 13px;
  }
  .lnav-btn {
    padding: 9px 16px;
    font-size: 13px;
  }
  .lnav-name {
    font-size: 14px;
  }
  .lnav-mark {
    width: 38px;
    height: 38px;
  }
}

/* Брейкпоинт меню поднят с донорских 640px до 900px:
   у нас пять пунктов (Возможности, Как это работает, Тарифы, Справочник, Войти)
   плюс кнопка действия — в 1100px-контейнер на 700–900px они не влезают. */
@media (max-width: 900px) {
  .lnav-links {
    display: none;
  }
  .lnav-burger {
    display: flex;
  }
}

/* На узких экранах логотип поджимается, чтобы название сервиса помещалось
   целиком, а не обрезалось многоточием (замерено: на 360px при 15px/700
   «Исполнительная документация» не влезала рядом с бургером). */
@media (max-width: 480px) {
  .lnav-inner {
    padding: 0 16px;
    gap: 8px;
  }
  .lnav-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .lnav-mark svg {
    width: 20px;
    height: 20px;
  }
  .lnav-name {
    font-size: 13px;
  }
  .lnav-sub {
    font-size: 10px;
  }
  .lnav-mobile {
    padding: 14px 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. ГЕРОЙ
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* без учёта адресной строки: герой не скачет на мобильном */
  background: var(--l-grad-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--l-nav-h) + 36px) 24px 60px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Плашка нормативов */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--l-blue-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
  max-width: 100%;
  position: relative;
  animation: l-fade-down 0.6s ease;
}
.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: l-pulse 2s infinite;
}

/* Заголовок. Нижняя граница clamp снижена с донорских 36px до 28px:
   «Исполнительная» на 320px при 36px/900 выходит за экран. */
.hero h1 {
  font-family: var(--l-font-display);
  font-size: clamp(28px, 6vw, 68px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  max-width: 15em;
  position: relative;
  animation: l-fade-up 0.7s ease;
}
.hero h1 .accent {
  background: var(--l-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--l-gold); /* запасной вариант, если background-clip недоступен */
}

.hero-sub {
  font-size: clamp(15px, 2.5vw, 20px);
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto 36px;
  position: relative;
  animation: l-fade-up 0.8s ease;
}
.hero-sub strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Кнопки героя */
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
  position: relative;
  animation: l-fade-up 0.9s ease;
}
.btn-hero-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--l-grad-cta);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 16px 36px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--l-sh-cta);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-main:hover,
.btn-hero-main:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--l-sh-cta-hover);
  color: #fff;
}
.btn-hero-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-hero-sec:hover,
.btn-hero-sec:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.btn-hero-main svg,
.btn-hero-sec svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Стеклянные плитки со статистикой */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 800px;
  width: 100%;
  position: relative;
}
.hero-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.2s;
}
.hero-stat:hover {
  transform: translateY(-4px);
}
.hero-stat-num {
  font-family: var(--l-font-display);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.hero-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
  line-height: 1.35;
}

/* Доверительная плашка под плитками (у донора была инлайном) */
.hero-trust {
  margin-top: 28px;
  max-width: 800px;
  width: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 22px;
  font-family: var(--l-font-display);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .hero {
    /* На низких экранах 100vh + плашка + h1 + 4 плитки не помещаются:
       фиксированная высота начинает резать контент. Отпускаем. */
    min-height: 0;
    padding: calc(var(--l-nav-h) + 28px) 20px 48px;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hero-cta {
    margin-bottom: 40px;
  }
  .hero-cta > * {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. АНИМАЦИИ И ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   .visible вешает IntersectionObserver (threshold 0.1, rootMargin 0 0 -40px 0)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes l-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes l-fade-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes l-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
/* Шестая задержка добавлена: карточек возможностей по ТЗ шесть,
   у донора задержек было пять и последняя карточка появлялась без лесенки. */
.reveal-delay-6 { transition-delay: 0.6s; }

/* Страховка: если JS не выполнился, контент всё равно виден. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .l-body *,
  .l-body *::before,
  .l-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. ПАТТЕРН СЕКЦИИ
   маркер → заголовок → полоска → подзаголовок
   ═══════════════════════════════════════════════════════════════════════════ */

.section {
  padding: 80px 24px;
}
.section-tight {
  padding-top: 40px;
}
.section-flush {
  padding-top: 0;
}

.section-inner {
  max-width: var(--l-max);
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  font-family: var(--l-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l-violet);
  margin-bottom: 14px;
}

.section-h {
  font-family: var(--l-font-display);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 900;
  color: var(--l-ink);
  line-height: 1.2;
  margin-bottom: 6px;
}

.section-line {
  width: 60px;
  height: 4px;
  background: var(--l-violet);
  margin: 20px auto 18px;
  border-radius: 2px;
}
/* Дефект референса: .section-line всегда центрируется через margin:auto,
   поэтому в левосторонних блоках (тёмная секция) полоска висела по центру
   колонки. Для таких блоков — этот вариант. */
.section-line-left {
  margin: 20px 0 18px;
}

.section-sub {
  font-size: 16px;
  color: var(--l-sub);
  max-width: 600px;
  line-height: 1.6;
}
.text-center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .section {
    padding: 56px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. «КАК ЭТО РАБОТАЕТ» — 4 шага с соединительной линией
   ═══════════════════════════════════════════════════════════════════════════ */

.how {
  background: var(--l-bg-1);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.how-steps::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #10b981);
  z-index: 0;
}

.how-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.how-step-num {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.how-step-num svg {
  width: 34px;
  height: 34px;
}
.how-step:nth-child(1) .how-step-num { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.how-step:nth-child(2) .how-step-num { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.how-step:nth-child(3) .how-step-num { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.how-step:nth-child(4) .how-step-num { background: linear-gradient(135deg, #10b981, #059669); }

.how-step h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--l-ink);
  margin-bottom: 10px;
}
.how-step p {
  font-size: 16px;
  color: var(--l-para);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .how-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .how-steps::before {
    display: none;
  }
}
@media (max-width: 480px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
  .how-step {
    padding: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. БОЛЕВЫЕ КАРТОЧКИ (красная гамма)
   ═══════════════════════════════════════════════════════════════════════════ */

.problems {
  background: var(--l-white);
}

.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.prob-card {
  border: 2px solid #fee2e2;
  background: #fff7f7;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.prob-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f97316);
}
.prob-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.prob-icon svg {
  width: 26px;
  height: 26px;
}
.prob-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #991b1b;
  margin-bottom: 8px;
  text-align: center;
}
.prob-card p {
  font-size: 15px;
  color: #7f1d1d;
  line-height: 1.6;
  opacity: 0.85;
  text-align: center;
}

@media (max-width: 768px) {
  .prob-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. КАРТОЧКИ ВОЗМОЖНОСТЕЙ — 6 пастельных градиентов
   ВНИМАНИЕ: классы f1…f6 задают И фон карточки, И фон иконки. Порядок карточек
   в разметке жёстко привязан к номеру класса — перестановка ломает палитру.
   ═══════════════════════════════════════════════════════════════════════════ */

.features {
  background: var(--l-white);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.feat-card {
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--l-line);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--l-sh-card-hover);
  border-color: transparent;
}

.feat-card.f1 { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.feat-card.f2 { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.feat-card.f3 { background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%); }
.feat-card.f4 { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); }
.feat-card.f5 { background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%); }
.feat-card.f6 { background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%); }

.feat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-icon svg {
  width: 27px;
  height: 27px;
}
.f1 .feat-icon { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.f2 .feat-icon { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.f3 .feat-icon { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.f4 .feat-icon { background: rgba(234, 88, 12, 0.15); color: #c2410c; }
.f5 .feat-icon { background: rgba(14, 165, 233, 0.15); color: #0369a1; }
.f6 .feat-icon { background: rgba(202, 138, 4, 0.15); color: #a16207; }

.feat-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--l-ink);
  margin-bottom: 10px;
}
.feat-card p {
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.7;
}
.feat-badge {
  display: inline-block;
  margin: 14px auto 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--l-list);
  padding: 5px 12px;
}

@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
  .feat-card {
    padding: 26px 22px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. ТЁМНАЯ СЕКЦИЯ — «Что такое исполнительная документация»
   ═══════════════════════════════════════════════════════════════════════════ */

.exam-section {
  background: linear-gradient(135deg, #001b3d 0%, #003b7a 100%);
  color: #fff;
}
.exam-inner {
  max-width: var(--l-max);
  margin: 0 auto;
  padding: 80px 24px;
}
.exam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.exam-left .section-tag { color: var(--l-blue-200); }
.exam-left .section-h { color: #fff; }
.exam-left .section-line { background: var(--l-blue-200); }
.exam-left .section-sub { color: rgba(255, 255, 255, 0.65); }
.exam-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.75;
}
.exam-left p + p {
  margin-top: 14px;
}
.exam-left a {
  color: var(--l-blue-200);
  text-decoration: underline;
}

.exam-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.exam-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.exam-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #4ade80;
}

.exam-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exam-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.exam-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.exam-card-icon svg {
  width: 22px;
  height: 22px;
}
.exam-card:nth-child(1) .exam-card-icon { background: rgba(59, 130, 246, 0.25); }
.exam-card:nth-child(2) .exam-card-icon { background: rgba(139, 92, 246, 0.25); }
.exam-card:nth-child(3) .exam-card-icon { background: rgba(16, 185, 129, 0.25); }
.exam-card:nth-child(4) .exam-card-icon { background: rgba(249, 115, 22, 0.25); }
.exam-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.exam-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .exam-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .exam-inner {
    padding: 56px 20px;
  }
}
@media (max-width: 420px) {
  .exam-pills {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. НОРМАТИВНАЯ БАЗА / СОСТАВ КОМПЛЕКТА
   Сетка донорских отзывов (.testi-grid/.testi-card) переиспользована под
   честный блок: отзывов у нас нет и выдумывать их нельзя.
   Звёзды и курсив (.testi-stars / font-style:italic) намеренно НЕ перенесены —
   курсив читается как цитата человека.
   ═══════════════════════════════════════════════════════════════════════════ */

.norms {
  background: var(--l-bg-1);
}

.norm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.norm-card {
  background: var(--l-white);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--l-line);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.norm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.norm-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--l-bg-3);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--l-violet);
  margin-bottom: 14px;
}
.norm-doc svg {
  width: 14px;
  height: 14px;
}
.norm-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--l-ink);
  line-height: 1.35;
  margin-bottom: 10px;
}
.norm-card p {
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.7;
}
.norm-list {
  list-style: none;
  margin-top: 14px;
  padding: 0;
}
.norm-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 15px;
  color: var(--l-list);
  line-height: 1.5;
}
.norm-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--l-ok);
  border-bottom: 2px solid var(--l-ok);
  transform: rotate(-45deg);
}
.norm-note {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  color: var(--l-faint);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .norm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .norm-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. СРАВНЕНИЕ — вручную в Word против сервиса
   У донора таблица не была обёрнута ничем прокручиваемым и на узких экранах
   переполняла страницу (маскировалось body{overflow-x:hidden}).
   Здесь обязательна обёртка .cmp-wrap — тот же приём, что .id-table-wrap.
   Второе (карточное) представление тех же данных НЕ переносится: дубль контента.
   ═══════════════════════════════════════════════════════════════════════════ */

.compare {
  background: var(--l-white);
}

.cmp-wrap {
  max-width: 900px;
  margin: 48px auto 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
}
.cmp-table th {
  padding: 16px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.cmp-table th:first-child {
  width: 44%;
}
.cmp-table th:not(:first-child) {
  text-align: center;
  width: 28%;
}
.cmp-th-us {
  background: var(--l-grad-blue);
  color: #fff;
  border-radius: 12px 12px 0 0;
}
.cmp-th-them {
  background: var(--l-bg-3);
  color: var(--l-sub);
  border-radius: 12px 12px 0 0;
}
.cmp-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--l-bg-3);
  font-size: 14px;
  color: var(--l-list);
}
.cmp-table td:not(:first-child) {
  text-align: center;
}
.cmp-table tr:nth-child(even) td {
  background: var(--l-bg-1);
}
.cmp-feat-name {
  font-weight: 600;
  color: var(--l-ink);
}
.cmp-us-col {
  background: rgba(0, 59, 122, 0.04) !important;
  font-weight: 700;
}
.cmp-yes {
  color: var(--l-ok);
}
.cmp-no {
  color: var(--l-no);
}
.cmp-partial {
  color: var(--l-warn);
  font-size: 13px;
  font-weight: 600;
}
.cmp-yes svg,
.cmp-no svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .cmp-table {
    font-size: 12px;
  }
  .cmp-table td,
  .cmp-table th {
    padding: 10px 10px;
    font-size: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. ТАРИФЫ
   Суммы — только из plans/plan_cards. В CSS ни одного числа цены.
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

/* Полоса «Пробуйте бесплатно, карта не нужна» */
.price-free-bar {
  max-width: 960px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px 24px;
  text-align: center;
}
.price-free-bar svg {
  width: 20px;
  height: 20px;
  color: var(--l-ok);
  flex-shrink: 0;
}
.price-free-bar b {
  color: #14532d;
  font-size: 16px;
  font-weight: 800;
}
.price-free-bar span {
  color: #166534;
  font-size: 15px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 40px auto 0;
  align-items: stretch;
}

.price-card {
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  border: 2px solid var(--l-line);
  background: var(--l-white);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--l-sh-card-hover);
}
.price-card.popular {
  border-color: var(--l-navy-900);
  box-shadow: 0 8px 40px rgba(0, 59, 122, 0.2);
}

.price-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--l-grad-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 20px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.price-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--l-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.price-value {
  font-family: var(--l-font-display);
  /* clamp вместо жёстких 48px: «46 900 ₽» в карточке ~300px на экране 360px
     впритык и переносится на вторую строку. */
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 900;
  color: var(--l-ink);
  line-height: 1;
  margin: 16px 0 4px;
  white-space: nowrap;
  letter-spacing: -1px;
}
.price-value small {
  /* Намеренно системный шрифт, а не Montserrat: во-первых, вес 500 лежит вне
     объявленного диапазона 700–900 переменного шрифта и был бы прижат к 700;
     во-вторых, ₽ (U+20BD) сидит в подмножестве latin-ext — из-за одного знака
     рубля браузер тянул бы лишний файл шрифта. */
  font-family: var(--l-font-body);
  font-size: 0.42em;
  font-weight: 500;
  color: var(--l-faint);
  letter-spacing: 0;
}
.price-period {
  font-size: 14px;
  color: var(--l-faint);
  margin-bottom: 28px;
  min-height: 20px;
}

.price-list {
  list-style: none;
  text-align: left;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}
.price-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--l-bg-3);
  font-size: 15px;
  color: var(--l-list);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.price-list li:last-child {
  border-bottom: none;
}
.price-list li.off {
  color: var(--l-faint);
}
.price-check,
.price-cross {
  flex-shrink: 0;
  margin-top: 3px;
  width: 15px;
  height: 15px;
}
.price-check {
  color: var(--l-ok);
}
.price-cross {
  color: #cbd5e1;
}

.price-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  margin-top: auto;
}
.price-btn-outline {
  background: var(--l-white);
  color: var(--l-navy-900);
  border: 2px solid var(--l-navy-900);
  padding: 12px;
}
.price-btn-outline:hover {
  background: var(--l-navy-900);
  color: #fff;
}
.price-btn-main {
  background: var(--l-grad-blue);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 59, 122, 0.35);
}
.price-btn-main:hover {
  box-shadow: 0 10px 30px rgba(0, 59, 122, 0.45);
  transform: translateY(-1px);
  color: #fff;
}
.price-btn-orange {
  background: var(--l-grad-cta);
  color: #fff;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.price-btn-orange:hover {
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
  color: #fff;
}

.price-guarantee {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--l-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.6;
}
.price-guarantee svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--l-navy-900);
}

/* Строка для организаций (счёт и закрывающие документы) */
.price-corp {
  max-width: 960px;
  margin: 24px auto 0;
  background: var(--l-white);
  border: 1px solid var(--l-line);
  border-radius: 16px;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.price-corp-text {
  flex: 1;
  min-width: 240px;
  font-size: 15px;
  color: var(--l-para);
  line-height: 1.6;
}
.price-corp-text b {
  display: block;
  color: var(--l-ink);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}
.price-corp-link {
  color: var(--l-navy-900);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 59, 122, 0.35);
}

@media (max-width: 900px) {
  .price-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. ВОПРОСЫ И ОТВЕТЫ — аккордеон
   Реализация ОДНА: класс .open на .faq-item вешает JS лендинга.
   У донора аккордеон был сделан дважды (Alpine + голый JS) и обработчики
   дрались за один и тот же класс. Alpine здесь не нужен.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq {
  background: var(--l-white);
}

.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--l-line);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--l-ink);
  line-height: 1.45;
  transition: color 0.2s;
}
.faq-q:hover,
.faq-q:focus-visible {
  color: var(--l-navy-900);
}
.faq-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--l-bg-3);
  color: var(--l-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.2s, color 0.2s;
}
.faq-chevron svg {
  width: 14px;
  height: 14px;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--l-navy-900);
  color: #fff;
}
.faq-a {
  padding: 0 0 20px;
  font-size: 16px;
  color: var(--l-para);
  line-height: 1.8;
  display: none;
  max-width: 62ch;
}
.faq-item.open .faq-a {
  display: block;
}
.faq-a a {
  color: var(--l-navy-900);
  text-decoration: underline;
}
.faq-a p + p {
  margin-top: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. ФИНАЛЬНЫЙ ПРИЗЫВ
   ═══════════════════════════════════════════════════════════════════════════ */

.final-cta {
  background: linear-gradient(135deg, #001b3d 0%, #003b7a 50%, #0a4fa6 100%);
  text-align: center;
  padding: 96px 24px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59, 130, 246, 0.15), transparent);
  pointer-events: none;
}
.final-cta h2 {
  font-family: var(--l-font-display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  /* Без ограничения ширины заголовок на 1920px растягивается от края до края
     и выпадает из ритма 1100px-контейнера остальных секций. */
  max-width: 900px;
  margin: 0 auto 16px;
  position: relative;
}
.final-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 40px;
  position: relative;
  max-width: 520px;
  line-height: 1.7;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--l-grad-cta);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  padding: 18px 48px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  box-shadow: 0 8px 40px rgba(249, 115, 22, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.final-cta-btn:hover,
.final-cta-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 60px rgba(249, 115, 22, 0.6);
  color: #fff;
}
.final-note {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-top: 16px;
  position: relative;
}

@media (max-width: 640px) {
  .final-cta {
    padding: 64px 20px;
  }
  .final-cta-btn {
    width: 100%;
    padding: 18px 24px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. ПОДВАЛ
   ═══════════════════════════════════════════════════════════════════════════ */

.lfooter {
  background: var(--l-footer);
  color: rgba(255, 255, 255, 0.5);
  padding: 40px 24px 32px;
  text-align: center;
}
.lfooter-top {
  display: flex;
  justify-content: center;
  gap: 12px 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lfooter-link {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  transition: color 0.2s;
}
.lfooter-link:hover,
.lfooter-link:focus-visible {
  color: rgba(255, 255, 255, 0.85);
}
.lfooter-sep {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  margin-top: 4px;
}
.lfooter-contacts {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.lfooter-contacts a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}
.lfooter-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. COOKIE-БАННЕР И КНОПКА «НАВЕРХ»
   На standalone-лендинге они не подтянутся из base.html — разметку надо
   продублировать в шаблоне, оформление берётся отсюда.
   Значения 1:1 с base.html, чтобы баннер выглядел одинаково на всех страницах.
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body #cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  padding: 20px 24px;
  border-top: 1px solid var(--l-line);
}
.l-body #cookie-banner.show {
  display: block;
}
.cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  min-width: 260px;
}
.cookie-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--l-ink);
  margin-bottom: 4px;
}
.cookie-text p {
  font-size: 13px;
  color: var(--l-para);
  line-height: 1.5;
}
.cookie-text a {
  color: var(--l-navy-900);
  text-decoration: underline;
}
/* Кнопка согласия — тем же оранжевым градиентом, что и остальные кнопки действия.
   Тёмно-синяя заливка сливалась с шапкой и читалась плохо.
   Селектор с .l-body обязателен: правило сброса `.l-body button { color: inherit }`
   специфичнее одиночного класса и иначе перекрашивает надпись в тёмный. */
.l-body .cookie-accept {
  background: var(--l-grad-cta);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.l-body .cookie-accept:hover,
.l-body .cookie-accept:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.42);
}
.cookie-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--l-faint);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
}

.l-scroll-top {
  position: fixed;
  bottom: 90px;
  left: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--l-line);
  background: rgba(255, 255, 255, 0.95);
  color: var(--l-navy-900);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.l-scroll-top.show {
  display: flex;
}
.l-scroll-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  /* На телефоне баннер про cookie не должен съедать первый экран: в полном виде
     он закрывал половину героя вместе с кнопкой действия. Ужимаем отступы и
     кегль, кнопку возвращаем в строку — блок занимает около четверти высоты. */
  .l-body #cookie-banner {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 42vh;
    overflow-y: auto;
  }
  /* Текст занимает всю строку, кнопка уходит под него: если пустить их в одну
     строку, кнопка отбирает ширину и текст переносится по два слова. */
  .cookie-inner {
    gap: 8px;
    align-items: stretch;
    flex-direction: column;
  }
  .cookie-text {
    min-width: 0;
    flex: none;
    padding-right: 28px; /* место под крестик закрытия */
  }
  .cookie-text b {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .cookie-text p {
    font-size: 12px;
    line-height: 1.4;
  }
  .cookie-accept {
    width: 100%;
    flex: none;
    padding: 11px 18px;
    font-size: 13px;
  }
  .cookie-close {
    position: absolute;
    top: 8px;
    right: 10px;
  }
  .l-scroll-top {
    bottom: 76px;
    left: 16px;
  }
}

/* Совсем узкие экраны: текст согласия ужимаем до сути, подробности остаются
   по ссылке на политику. */
@media (max-width: 400px) {
  .cookie-text p {
    font-size: 11.5px;
  }
  .l-body #cookie-banner {
    max-height: 38vh;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. ФОКУС (доступность)
   ═══════════════════════════════════════════════════════════════════════════ */

.l-body a:focus-visible,
.l-body button:focus-visible {
  outline: 2px solid var(--l-orange);
  outline-offset: 3px;
}
.hero a:focus-visible,
.hero button:focus-visible,
.lnav a:focus-visible,
.lnav button:focus-visible,
.final-cta a:focus-visible,
.final-cta button:focus-visible {
  outline-color: var(--l-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. ПЕЧАТЬ
   Лендинг печатают редко, но пусть не съедает тонер градиентами.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .lnav,
  .lnav-mobile,
  .l-scroll-top,
  #cookie-banner,
  .hero-grid {
    display: none !important;
  }
  .l-body {
    background: #fff;
  }
  .hero,
  .final-cta,
  .exam-section {
    background: #fff !important;
    color: #000 !important;
    min-height: 0 !important;
    padding: 24px 0 !important;
  }
  .hero h1,
  .hero-sub,
  .final-cta h2,
  .final-cta p,
  .exam-card h4,
  .exam-card p,
  .exam-pill {
    color: #000 !important;
  }
  .hero h1 .accent {
    -webkit-text-fill-color: #000;
    color: #000;
  }
  /* transition обязателен: без него браузер печатает блок в середине
     перехода 0→1 и на бумаге получается полупрозрачный текст.
     Блоки ниже первого экрана вообще не получают .visible — только это
     правило делает их видимыми при печати. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section {
    padding: 24px 0 !important;
    break-inside: avoid;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. СОВМЕСТИМОСТЬ С base.html (страховка)
   Основной путь — standalone-лендинг без base.html.
   Если лендинг всё-таки оставят на {% extends "base.html" %}, .nos-content
   (max-width:1100px + padding) не даст секциям растянуться на всю ширину,
   а .nos-header встанет над героем. Блок ниже снимает ограничения контейнера
   и прячет шапку/подвал кабинета — но только когда .nos-content реально есть
   на странице, поэтому standalone-вариант он не задевает.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports selector(:has(*)) {
  .l-body:has(.nos-content) .nos-content,
  .l-body:has(.nos-content) .nos-content-wide,
  .l-body:has(.nos-content) .nos-content-narrow {
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .l-body:has(.nos-content) .nos-header,
  .l-body:has(.nos-content) .nos-footer,
  .l-body:has(.nos-content) .nos-mobile-nav {
    display: none;
  }
}
