/* base.css — переменные, типографика, утилиты */
/* Шрифт Inter — self-hosted, объявлен в assets/css/fonts.css и подключён
   через <link> в <head> страниц (параллельно с CSS), а не через @import —
   так рендер не блокируется цепочкой запросов. */

:root {
  /* Тёмная тема — единственная. Красим скроллбары, автозаполнение форм
     и системные контролы под тёмный интерфейс. */
  color-scheme: dark;

  /* ── Поверхности ── Слои: bg (фон) → surface-2 (подложки) → surface (карточки).
     surface-3 — «утопленный» уровень: поля ввода, чипы и теги чуть темнее
     карточки, на которой лежат. Заливок светлее surface нет. */
  --bg:          #0B0B0D; /* фон страницы */
  --surface-2:   #111114; /* подложки секций и блоков (темнее карточки) */
  --surface:     #121215; /* карточки, подложки калькулятора и формы, подвал */
  --surface-3:   #101013; /* поля ввода, варианты калькулятора, чипы — «утопленный» уровень */
  --border:      #292929; /* ТОЛЬКО линии и разделители, не как фон */
  --border-subtle: #1A1A1A; /* неактивные шаги калькулятора — линия тише обычной */
  --divider:     #1D1D1D; /* толстые (2px) разделители секций и кейсов на десктопе */

  /* ── Текст: три обязательных уровня иерархии ──
     Нейтральный белый с прозрачностью, как в макете Figma. Макет держит
     ещё 30% и 20% — для текста они не проходят WCAG AA на нашем фоне
     (2.6:1 и 1.7:1), поэтому такие подписи сведены к --text-muted.
     Исключение по решению владелицы — --text-faint (30%), только для
     тегов-подписей капсом под заголовком карточки (.svc-acc__sub): это
     вспомогательная метка, смысл несёт заголовок над ней. */
  --text:            #FFFFFF;                  /* заголовки и основной текст */
  --text-secondary:  rgba(255, 255, 255, 0.7); /* подзаголовки, навигация подвала */
  --text-muted:      rgba(255, 255, 255, 0.5); /* описания, подписи */
  --text-faint:      rgba(255, 255, 255, 0.3); /* теги под заголовком карточки */

  /* ── Акцент ── */
  --accent:        #D8F249;
  --accent-ink:    #000000; /* текст на акцентной заливке */
  /* Акцент как ТЕКСТ: на тёмном фоне лайм читается — используем его. */
  --accent-text:   var(--accent);

  /* ── Легаси-алиасы → новая шкала поверхностей ──
     Через var(), поэтому меняются вместе с базовыми токенами. */
  --surface-sunk: var(--surface-2); /* «вложенные» блоки */
  --bg-2:         var(--surface);   /* приподнятые карточки */
  --bg-3:         var(--surface-2); /* подложки блоков */
  --bg-card:      var(--surface);
  --calc-card:    var(--surface-2);

  /* ── «Рамка»: хедер и первый экран (одна тёмная тема) ── */
  --frame:        var(--bg);
  --frame-text:   var(--text);
  --frame-muted:  var(--text-muted);

  /* ── Радиусы ── */
  --radius-card:   12px;
  --radius-ctrl:   8px;  /* кнопки и поля */

  /* ── Шрифты ── */
  --font-base:    'Inter', system-ui, -apple-system, sans-serif;
  /* Единый шрифт по всему сайту, без засечек */
  --font-display: var(--font-base);

  /* ── Логотип: единый размер везде, футер — крупнее одной переменной ── */
  --logo-size:        clamp(20px, 2vw, 26px);
  --logo-size-footer: 30px;

  /* ── Размеры заголовков ── */
  --h1-hero:  clamp(3.375rem, 9vw, 12.375rem);
  --h1-page:  clamp(2.8125rem, 6vw, 9rem);
  /* Заголовок кейса: мельче страничного и подобран под одну строку. Нижняя
     граница считана по самому длинному названию («Архитектура двора»,
     17 знаков капсом): на 375px оно занимает 319px при доступных 335px.
     Запас 16px — трогать вниз нельзя, а новое название длиннее требует
     пересчёта. Помни, что до 64em база документа 111.1111%, и 1.6875rem
     там — это 30px, а не 27. */
  --h1-case:  clamp(1.6875rem, 4.4vw, 4.5rem);
  --h2:       clamp(1.6875rem, 3.5vw, 4.5rem);
  --body:     1.125rem;
  --small:    0.95625rem;
  --label:    0.7875rem;

  /* ── Шкала типографики ──
     Единственный источник кеглей. В :root — мобильная колонка (до 64em),
     в @media 64em ниже — десктопная: H1 56 · H2 38 · H3 22 · лид 20 ·
     текст 17 · мелкий 15 · надзаголовок 12. До мобильного аудита база до
     64em равна 111.11% (1rem = 17.78px), поэтому мобильные значения
     записаны как px ÷ 17.78 и пока не подключены: мобильные кегли живут
     в прежних правилах. */
  --fs-h1:    1.9125rem; /* 34px */
  --fs-h2:    1.4625rem; /* 26px */
  --fs-h3:    1.125rem;  /* 20px */
  --fs-lead:  1.0125rem; /* 18px */
  --fs-text:  0.9rem;    /* 16px */
  --fs-small: 0.7875rem; /* 14px */
  --fs-label: 0.675rem;  /* 12px */
  --lh-h1:    1.06;
  --lh-h2:    1.12;
  --lh-h3:    1.25;
  --lh-lead:  1.45;
  --lh-text:  1.55;
  --lh-small: 1.5;
  --ls-label: 0.08em;

  /* ── Контейнер ──
     --container — ширина контента, поля снаружи. Поля ступенями
     (--gutter): 20px, с 48em 32px. С 64em и то и другое — по макету:
     1720 + 2 × 100 единиц --u (см. десктопный блок шкалы). */
  --container: 1200px;
  --gutter:    20px;
  /* Длина строки сплошного текста: ≈70 знаков кириллицы при 17px */
  --measure:   41.25rem; /* 660px на десктопе */

  /* ── Отступы: шаг 4px (единственный источник значений) ──
     Внутри блока 8/12/16/24/32, между блоками 48/64/80. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --gap-block-s: 48px;
  --gap-block-m: 64px;
  --gap-block-l: 80px;

  /* Вертикальные поля секций — три размера: S / M / L. Здесь мобильный и
     планшет, десктоп — в @media 64em. .section ниже пока держит прежние
     64 / 96 / 128 — перевод секций на размеры идёт отдельной правкой. */
  --section-s: 56px;
  --section-m: 72px;
  --section-l: 96px;

  /* Легаси-имена отступов → та же шкала (снап к 8px-сетке) */
  --space-2xs: var(--s-2);  /*  8px */
  --space-xs:  var(--s-3);  /* 12px */
  --space-s:   var(--s-4);  /* 16px */
  --space-m:   var(--s-5);  /* 24px */
  --space-l:   var(--s-7);  /* 48px */
  --space-xl:  var(--s-8);  /* 64px */
  --space-2xl: var(--s-9);  /* 96px */

  /* Надзаголовок-лейбл → свой заголовок. Единственное место, где это
     расстояние задаётся: раньше каждый блок держал его сам (12 / 16 / 24 /
     36px по страницам), и оно разъезжалось при каждой правке. Эталон —
     блок FAQ на главной, 12px. */
  --label-gap: var(--s-3);

  /* ── Переходы ── */
  --transition: 200ms ease;

  /* ── Спецназначение ── */
  --bg-glass:   rgba(11, 11, 13, 0.85); /* оверлей с блюром для sticky-хедера */
  --telegram:   #229ed9;                   /* бренд-цвет Telegram */

  /* ── Алиасы для совместимости с калькулятором ── */
  --color-bg:         var(--bg);
  --color-ink:        var(--text);
  --color-muted:      var(--text-muted);
  --color-line:       var(--border);
  --color-accent:     var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-surface:    var(--surface);
  --color-border:     var(--border);

  /* ── Шкала z-index ──
     Одним списком лежит всё, что борется за верх страницы: фиксированные и
     липкие слои. Раньше значения расставлялись по месту, и 150 рядом с 30 и 40
     было совпадением, а не системой. Новый слой добавляем сюда, а не числом в
     правиле. Значения внутри локальных контекстов (карточка, диалог модалки,
     подложка обложки) в шкалу не входят: они не конкурируют с этими слоями.
     Снизу вверх: */
  --z-sticky-cta:   30; /* нижняя кнопка на мобильном */
  --z-float:        40; /* круглая кнопка Telegram */
  --z-sticky-nav:   50; /* липкая навигация по разделам услуг */
  --z-header:      100; /* шапка */
  --z-cookie:      150; /* баннер согласия — поверх шапки и нижних кнопок */
  --z-overlay:     200; /* мобильное меню, полоса прогресса, скип-ссылка */
  --z-modal:       300; /* модальное окно заявки */
  --z-cursor:     9999; /* кастомный курсор — всегда поверх всего */

  /* Сколько баннер согласия занимает от нижнего края экрана. Ноль, пока
     баннера нет; реальную высоту проставляет cookie-consent.js. От неё
     считает отступ снизу sticky-CTA — иначе он наезжает на баннер, и спасает
     только удачный порядок z-index. */
  --cookie-h: 0px;

  /* ── Типошкала (для калькулятора) ── */
  --step--1: 0.984375rem; /* описания — крупнее прежнего */
  --step-0:  1.125rem;
  --step-1:  1.40625rem;
  --step-2:  1.758375rem;
  --step-3:  2.197125rem;
  --step-4:  2.746125rem;
  --step-5:  3.4335rem;
}

/* ── База ── */

html {
  font-family: var(--font-base);
  /* База — 16px (100%) с 64em: там 1rem = 16px, и шкала пишется ровными
     числами. До 64em временно 111.1111% (1rem = 17.78px): все rem на сайте
     пересчитаны ×1.125 под десктоп, и этот множитель возвращает мобильному
     и планшету прежние 20px на 1.125rem. Уйдёт в 100% вместе с мобильной
     колонкой шкалы — до мобильного аудита не трогать. */
  font-size: calc(1000% / 9); /* 111.11…% */
  color: var(--text);
  background-color: var(--bg);
  font-weight: 300;
}

/* Плавная прокрутка живёт в transitions.css и включается точечно, на клик по
   якорю (класс vt-smooth). Глобально её ставить нельзя: браузер начинает
   анимировать и восстановление позиции при возврате из кейса — вместо
   мгновенного приземления страница едет сверху вниз. */

body {
  font-size: var(--body);
  color: var(--text);
  background-color: var(--bg);
  font-weight: 400; /* плотнее на мобильном; на десктопе → 300 (см. media 64em) */
  line-height: 1.65; /* больше воздуха между строками на мобильном */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Здесь раньше жил показ страницы: body{opacity:0} + класс page-ready
   от инлайн-скрипта. Пока класс не проставлен, браузер не рисует ни
   пикселя контента — Lighthouse на мобильном профиле упирался в NO_FCP
   и не мог посчитать ни LCP, ни Performance вообще. Плата за плавное
   появление — пустой экран на всё время загрузки CSS и разбора HTML.
   Убрано целиком: контент рисуется сразу, входные анимации остались там,
   где они не держат первую отрисовку (секции, карточки, кейсы). */

/* ── Возврат к деликатной типографике десктопа ──
   Мобильный/планшет получают крупнее кегль, плотнее вес и больше воздуха
   (см. :root, html и body выше). С 64em возвращаем исходные значения десктопа.
   Блок стоит ПОСЛЕ базовых правил html/body, иначе при равной специфичности
   мобильные значения перебивали бы десктопные. */
@media (min-width: 64em) {
  :root {
    /* ── Единица макета ──
       Десктоп нарисован в Figma на ширине 1920px. --u — один пиксель
       макета: на 1920 и шире ровно 1px, ниже пропорционально меньше, до
       0.5334px на 1024 (64em). Всё, что снято с макета, пишется как
       calc(N * var(--u)): на 1920 совпадает пиксель в пиксель, на
       1280–1536 раскладка та же, только мельче. Мелкий текст при этом
       держит пол через max() — без него 20px макета на 1024 стали бы 11px. */
    --u: clamp(0.5334px, 100vw / 1920, 1px);

    --small:   0.84375rem;
    --label:   0.765rem;
    --step--1: 0.9rem;

    /* Шкала: десктопная колонка — стили текста из Figma (Inter/Desctop/*) */
    --fs-h1:    calc(96 * var(--u));          /* H1_Medium_96 / 100 */
    --fs-h2:    calc(64 * var(--u));          /* H3_Medium_64 / 74 — заголовки секций */
    --fs-h3:    max(22px, calc(40 * var(--u)));  /* H5_Medium_40 / 54 */
    --fs-lead:  max(18px, calc(32 * var(--u)));  /* Body_Regular_32 / 40 */
    --fs-text:  max(16px, calc(20 * var(--u)));  /* Body_Regular_20 / 28 */
    --fs-small: max(15px, calc(24 * var(--u)));  /* Body_Regular_24 / 30 */
    --fs-label: max(14px, calc(28 * var(--u)));  /* Caption_caps_28 / 28 */
    --lh-h1:    1.0417; /* 100 / 96 */
    --lh-h2:    1.1563; /* 74 / 64 */
    --lh-h3:    1.35;   /* 54 / 40 */
    --lh-lead:  1.25;   /* 40 / 32 */
    --lh-text:  1.4;    /* 28 / 20 */
    --lh-small: 1.25;   /* 30 / 24 */
    --ls-label: 0;

    /* Роли, которых нет в мобильной колонке */
    --fs-statement: calc(86 * var(--u));         /* H2_Medium_86 / 100 — «Обо мне» на главной */
    --fs-h4:        max(24px, calc(48 * var(--u))); /* H4_Medium_48 / 58 — вопрос калькулятора */
    --fs-h6:        max(19px, calc(32 * var(--u))); /* H6_32 / 38 — карточки, FAQ, колонки подвала */
    --lh-h6:        1.1875; /* 38 / 32 */

    /* Контейнер макета: 1720px контента и поля по 100px на 1920 */
    --container: calc(1720 * var(--u));
    --gutter:    calc(100 * var(--u));

    --radius-card: 22px;
    --radius-ctrl: 12px;
    --label-gap:   calc(25 * var(--u));

    --section-s: 96px;
    --section-m: 128px;
    --section-l: 160px;

    /* Прежние имена кеглей на десктопе ведут на шкалу: через них H1, H2 и
       основной текст получают все страницы, включая кейсы и главную. */
    --h1-page: var(--fs-h1);
    --h1-case: var(--fs-h1);
    --h2:      var(--fs-h2);
    --body:    var(--fs-text);
  }
  html { font-size: 100%; } /* 1rem = 16px */
  body { font-weight: 400; line-height: var(--lh-text); }
}

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: var(--h1-page); }
h2 { font-size: var(--h2); }
h3 { font-size: 1.2375rem; font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }

p { text-wrap: pretty; }
/* Сплошной текст ограничиваем по ширине — на широком контейнере строки
   иначе становятся нечитаемо длинными. Сетки карточек это не затрагивает. */
p, li { max-width: var(--measure); }

a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Скип-ссылка ── */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -4.5rem;
  z-index: var(--z-overlay);
  padding: var(--space-2xs) var(--space-s);
  background-color: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-ctrl);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-s); color: var(--accent-ink); }

/* ── Контейнер ── единый для всех секций на всех страницах */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Только планшет: с 64em поля задаёт единица макета (блок шкалы выше), а
   это правило стоит позже по файлу и перебило бы её. */
@media (min-width: 48em) and (max-width: 63.99em) {
  :root { --gutter: 32px; }
}

/* ── Секции ── единый вертикальный ритм: 64 → 96 → 128 */
.section {
  padding-block: var(--s-8); /* мобильный: 64px */
}
@media (min-width: 48em) {
  .section { padding-block: var(--s-9); } /* планшет: 96px */
}
@media (min-width: 64em) {
  .section { padding-block: var(--s-10); } /* десктоп: 128px */
}
/* Секция задаёт отступ через padding — обнуляем внешние вертикальные
   margin у крайних детей, чтобы не было двойных «дырок». */
.section > :first-child,
.section > .container > :first-child { margin-block-start: 0; }
.section > :last-child,
.section > .container > :last-child { margin-block-end: 0; }

/* ── Утилиты ── */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* Надзаголовок секции — акцентный, задаёт верхний уровень иерархии.
   На единственной тёмной теме лайм по контрасту проходит. */
.section-label,
.eyebrow,
.section-eyebrow {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--label-gap);
}

/* Расстояние до заголовка держит только правило выше. Собственный верхний
   отступ у заголовка, идущего следом, обнуляем: именно из-за него блоки
   расходились (24px на контактах и хабе услуг, 16px на страницах услуг).
   :is() поднимает вес до двух классов — иначе локальные правила в pages.css
   и service.css перебивали бы этот сброс порядком подключения. */
:is(.section-label, .eyebrow, .section-eyebrow) + :is(h1, h2, h3, h4, p) {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════
   ТИПОГРАФИЧЕСКАЯ СИСТЕМА — роли (единый источник размеров/начертаний)
   Значения сняты с эталона services.html. Один шрифт — var(--font-base).
   Веса только 400 и 500. Применяется классами на всех страницах, чтобы
   первые экраны и одинаковые блоки совпадали по типографике везде.
   ══════════════════════════════════════════════════════════ */

/* Заголовок первого экрана — ЕДИНЫЙ на всех страницах */
/* Интерлиньяж 1.06, а не 0.97: заголовок набран прописными, а в них нет
   выносных элементов, которые в строчном наборе прорезают просвет между
   строками. Каждая строка капслока — ровный плотный блок, и при значении,
   годном для строчных, многострочный заголовок слипается по вертикали.
   Без единиц — масштабируется вместе с clamp() на всех ширинах. */
.hero-title {
  font-family: var(--font-base);
  font-size: var(--h1-page); /* clamp(2.5rem, 6vw, 8rem) */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
}

/* Подзаголовок первого экрана */
.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 50ch;
}

/* H2 секции */
.section-title {
  font-family: var(--font-base);
  font-size: clamp(2.1375rem, 5vw, 3.375rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text);
}

/* Подзаголовок секции */
.section-subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Основной текст */
.body {
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-muted);
}

/* Подписи, теги */
.caption {
  font-size: var(--small);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
}

/* Подзаголовок под H2 */
.lead {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Шкала на десктопе: то, что у ролей задано числом, а не токеном, —
   интерлиньяжи, h3 и лид. Кегли H1, H2 и текста приходят через токены. */
@media (min-width: 64em) {
  /* Заголовки в макете — Medium, кроме H1 кейсов и списков (там свои правила) */
  h1 { line-height: var(--lh-h1); }
  h2 { line-height: var(--lh-h2); font-weight: 500; }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .section-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .hero-subtitle,
  .lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--text-muted);
  }
  /* Капс H1 в макете без разрядки и с интерлиньяжем 100/96 — просвет между
     строками там уже заложен, правило про «капсу шире» выше выполняется. */
  .hero-title { letter-spacing: 0; line-height: var(--lh-h1); }

  /* Надзаголовок макета: 28/28, Regular, капс без трекинга */
  .section-label,
  .eyebrow,
  .section-eyebrow {
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: var(--ls-label);
    font-weight: 400;
  }
}

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

/* Содержимое, которое в мобильном и десктопном макетах разное (подписи
   полей, состав формы на контактах). Граница — 64em: до неё сайт живёт по
   мобильным макетам. display: none убирает и из дерева доступности, так
   что скринридер читает только видимый вариант. */
@media (max-width: 63.99em) {
  .desktop-only { display: none !important; }
}
@media (min-width: 64em) {
  .mobile-only { display: none !important; }
}

/* ── Кнопки ── */
/* Тап-зона: 50px на мобильном, 46px на планшете и на десктопе. Порог 64em
   сохранён, хотя число на нём теперь то же, что на планшете: на нём же
   база уходит с 111.11% на 100%, и кнопка на десктопе всё равно
   мельче — за счёт кегля подписи, а не высоты. Ниже 46px не опускаемся:
   на десктопе кнопки читались узкими.

   Высоту задаёт именно min-height, а не padding: содержимое во всех размерах
   укладывается в порог (на десктопе 22–24px против 46px порога), поэтому
   вертикальные поля кнопку не растягивают и правка padding на её виде не
   сказалась бы. Контент центрируется флексом — прибавка к порогу ложится
   симметрично, поровну сверху и снизу.

   line-height здесь свой, а не унаследованный от body: 1.65 рассчитан на
   абзац, где строки идут подряд, а в кнопке строка одна и этот интервал
   просто раздувал её изнутри. Из-за него min-height ниже не работал —
   высоту диктовало содержимое (у крупного CTA выходило 46px при пороге
   40px). С 1.25 содержимое во всех размерах укладывается в порог, и
   значения ниже наконец задают высоту на самом деле. Не 1.2: подпись
   иногда переносится на две строки (узкий мобильный), и им нужен воздух
   между собой. */
.btn,
.btn-primary,
.btn-outline {
  min-height: 50px;
  line-height: 1.25;
}
@media (min-width: 48em) {
  .btn,
  .btn-primary,
  .btn-outline {
    min-height: 46px;
  }
}
@media (min-width: 64em) {
  .btn,
  .btn-primary,
  .btn-outline {
    min-height: 46px;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s-2) var(--s-5);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-ctrl);
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: var(--font-base);
  font-weight: 500;
}
.btn-primary:hover { opacity: 0.85; color: var(--accent-ink); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 0.5px solid var(--border);
  padding: var(--s-2) var(--s-5);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-ctrl);
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--font-base);
  font-weight: 400;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--text); color: var(--text); }

/* Тактильный отклик на тач-устройствах (ховера там нет) */
.btn:active,
.btn-primary:active,
.btn-outline:active { transform: scale(0.98); }

/* Совместимость с калькулятором */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--s-2) var(--s-5);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0.5px solid transparent;
  border-radius: var(--radius-ctrl);
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), opacity var(--transition);
  cursor: pointer;
  font-family: var(--font-base);
}

.btn--primary {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 500;
}
.btn--primary:hover { opacity: 0.85; color: var(--accent-ink); }

.btn--ghost {
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--text); }

/* Увеличенный размер (CTA на первом экране). Крупнее базовой кнопки он кеглем
   и горизонтальными полями, а не высотой: вертикаль та же, что у всех
   остальных. Раньше здесь стояло 16px, и кнопка вырастала до 62px на
   десктопе — она тянула на себя больше внимания, чем заголовок над ней. */
.btn--lg {
  padding: var(--s-2) var(--s-6);
  font-size: 1.06875rem;
}

/* ── Кнопки на десктопе — по макету ──
   Базовая: 70 единиц высотой, подпись 24/28 капсом без трекинга («Отправить
   заявку»). Крупная --lg — CTA первого экрана: 85 единиц, подпись 32/36.
   Высота задана min-height, как и выше; пол в 46px не даёт кнопке стать
   мельче тап-зоны на 1024. */
@media (min-width: 64em) {
  .btn,
  .btn-primary,
  .btn-outline {
    min-height: max(46px, calc(70 * var(--u)));
    padding: 0 calc(80 * var(--u));
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.1667;
    letter-spacing: 0;
  }
  .btn--lg {
    min-height: max(52px, calc(85 * var(--u)));
    padding: 0 calc(80 * var(--u));
    font-size: max(17px, calc(32 * var(--u)));
    line-height: 1.125;
  }
  /* Обводочная — акцентная рамка в 1px и лаймовая подпись */
  .btn--ghost {
    border: 1px solid var(--accent);
    color: var(--accent-text);
  }
  .btn--ghost:hover { border-color: var(--text); color: var(--text); }
}

/* ── Мобильный вид кнопок (<768px) ──
   Подпись строчными, а не капсом: прописные требуют разрядки, занимают на
   треть больше места при том же кегле и на 390px роняли надпись во вторую
   строку. Вместе с капсом снимаем и трекинг — 0.08em набраны под прописные,
   на строчных они читаются как разреженный текст.
   Кегль: базовая кнопка 16px, крупный CTA 17px (был 19px капсом — с ним
   «Рассчитать стоимость» не держала строку на 320px).
   Высота: 44px. Требование задачи — от 36px, но при 16–17px содержимое
   укладывается в любой порог, поэтому берём порог зоны нажатия, а не
   минимально допустимый. Ряд кнопок выравнивается по одному min-height,
   поэтому высоты в ряду совпадают. */
@media (max-width: 47.99em) {
  .btn,
  .btn-primary,
  .btn-outline {
    min-height: 44px;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
  }

  .btn--lg { font-size: 17px; }
}

/* ── Ссылка-акцент ── */
/* Лайм как текст на светлом фоне не читается — держим текст цветом --text,
   а акцент выносим в подчёркивание (проходит по контрасту в обеих темах). */
.link-accent {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.link-accent:hover { text-decoration-color: var(--text); }

/* ── Сетка карточек ── */
.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ ПО МАКЕТУ (до 64em)
   Мобильные макеты в Figma нарисованы на ширине 393px. Значения — в px:
   до 64em база документа ещё 111.11%, и rem здесь не совпали бы с макетом.
   Шкала: H1 40/44 (600), H2 28/36, H3 24/30, лид 18/26, текст 16/22,
   мелкий 14/20, надзаголовок 14/20 капсом. Кнопки 45px, радиус 6,
   подпись 18/28 строчными. Планшет живёт по этим же правилам — своего
   макета у него нет.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 63.99em) {
  :root {
    --m-h1: 40px;     --m-lh-h1: 1.1;
    --m-h2: 28px;     --m-lh-h2: 1.2857;
    --m-h3: 24px;     --m-lh-h3: 1.25;
    --m-lead: 18px;   --m-lh-lead: 1.4444;
    --m-text: 16px;   --m-lh-text: 1.375;
    --m-small: 14px;  --m-lh-small: 1.4286;
    --radius-card: 6px;
    --radius-ctrl: 6px;
    --label-gap: 10px;
  }

  body {
    font-size: var(--m-text);
    line-height: var(--m-lh-text);
  }

  .section-label,
  .eyebrow,
  .section-eyebrow {
    font-size: var(--m-small);
    line-height: var(--m-lh-small);
    font-weight: 400;
    letter-spacing: 0;
  }

  .hero-title {
    font-size: var(--m-h1);
    font-weight: 600;
    line-height: var(--m-lh-h1);
    letter-spacing: 0;
  }

  h2,
  .section-title {
    font-size: var(--m-h2);
    font-weight: 500;
    line-height: var(--m-lh-h2);
    color: rgba(255, 255, 255, 0.9);
  }

  .hero-subtitle,
  .lead {
    font-size: var(--m-lead);
    line-height: var(--m-lh-lead);
    color: var(--text-muted);
  }

  .btn,
  .btn-primary,
  .btn-outline {
    min-height: 45px;
    padding: 0 var(--s-5);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5556;
    letter-spacing: 0;
    text-transform: none;
  }
  .btn--lg { font-size: 18px; }
  .btn--ghost {
    border: 1px solid var(--border);
    color: rgba(255, 255, 255, 0.9);
  }
}