/* ============================================================
   KEYWAY — листовочный лендинг
   Все значения взяты из tokens.md (снято с keyway.online).
   Мобильная вёрстка первична, десктоп — прогрессивное расширение.
   ============================================================ */

/* ---------- Шрифт ---------- */
/* Manrope, SIL Open Font License 1.1 — самостоятельный хостинг разрешён.
   Файлы — вариативные (ось wght 200…800), один файл на подмножество. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.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;
}

/* ---------- Токены ---------- */

:root {
  /* Палитра */
  --bg:            #020508;   /* фон всех секций */
  --fg:            #ffffff;   /* основной текст */
  --line:          #3f3f3f;   /* разделители FAQ, дорожка прогресса */
  --border-input:  #7b7b7b;   /* рамка полей формы */
  --muted:         #7b7b7b;   /* вторичные подписи */
  --hover-link:    #efefef;   /* ховер ссылок */
  --hover-text:    #b4b4b4;   /* ховер текстовых кнопок */
  --error:         #ff6b6b;   /* ошибка формы */
  --plate:         rgba(255, 255, 255, .21);  /* плашка-бейдж */

  /* Цена со скидкой. Палитра монохромная, поэтому скидка показана не цветом,
     а весом: старая цена уходит в полупрозрачный серый, новая садится
     на подсвеченную плашку. */
  --price-was:     rgba(255, 255, 255, .45);  /* зачёркнутая старая цена */
  /* Плашка новой цены — приглушённый шалфейный зелёный: читается как
     «выгодно», но не кричит, как кислотная скидочная наклейка. Заливка
     полупрозрачная, поэтому на тёмной карточке выходит затемнённой. */
  --price-fill:    linear-gradient(180deg, rgba(122, 196, 148, .30) 0%, rgba(78, 150, 106, .22) 100%);
  --price-edge:    rgba(150, 214, 172, .42);  /* обводка плашки */
  --price-gloss:   rgba(214, 255, 226, .20);  /* внутренняя подсветка сверху */
  --price-ink:     #effaf2;                   /* цифры новой цены */

  /* Радиусы */
  --r-btn:    30px;
  --r-input:  50px;
  --r-plate:  60px;
  --r-price:  9px;

  /* Единица масштаба для блоков, перенесённых с артборда Tilda (карточки
     моделей, плашка доставки в подвале). Оригинал свёрстан на ширине 320 px
     и растягивается под экран целиком — calc(20 * var(--u)) даёт ровно то же:
     20 px на 320, 23,4 px на 375, 25,9 px на 414. Потолок 1,5 px (ширина 480)
     — дальше Tilda переключается на другой артборд, у нас — десктоп. */
  --u: clamp(1px, 100vw / 320, 1.5px);

  /* Ритм */
  --pad-x:      16px;
  --sec-gap:    48px;
  --wrap-max:  1200px;

  --speed: .2s;
}

/* ---------- Сброс ---------- */

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

/* touch-action: manipulation убирает зум по двойному тапу на всей странице.
   Пинч-зум при этом остаётся — в отличие от user-scalable=no, который ломает
   доступность. Значение наследуется вниз по дереву, поэтому хватает html. */
html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  scroll-behavior: smooth;   /* якоря подвала доезжают плавно, без JS */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; transition: color var(--speed) ease-in-out; }
a:hover { color: var(--hover-link); }

button, input { font: inherit; color: inherit; }

/* Фокус виден всегда и на тёмном фоне */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Слово с дефисом, которое нельзя рвать: браузер переносит по дефису,
   и выходило «HD-» в конце строки, «экран» — в начале следующей */
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-200%);
  z-index: 100;
  padding: 12px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus { transform: none; color: var(--bg); }

/* ---------- Каркас ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Tilda масштабирует мобильный артборд 320 px под ширину экрана, поэтому на
   реальном телефоне её текст крупнее номинала из tokens.md примерно в 1.2 раза.
   Фиксированные px этого не делают — размеры ниже подняты до того же кегля,
   в котором блоки читаются на оригинале. */

.section-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 26px;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--speed) ease-in-out,
              color var(--speed) ease-in-out,
              border-color var(--speed) ease-in-out;
}

.btn--solid {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn--solid:hover { background: var(--hover-link); color: var(--bg); }

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

/* ---------- 1. Шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
}

.header__logo img { width: 138px; height: auto; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Круглая кнопка вызова */
/* Корзина стоит слева от трубки и повторяет её кружок.
   position: relative нужен счётчику, он висит на углу. */
.header__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  /* Та же задержка на появление, что у трубки: возвращаясь, корзина ждёт,
     пока догаснет шторка меню, иначе проступает поверх неё и мигает. */
  transition: background-color var(--speed) ease-in-out,
              opacity .16s ease-out .18s,
              transform .16s ease-out .18s;
}
.header__cart:hover { background: rgba(255, 255, 255, .22); }
.header__cart img { width: 24px; height: 24px; }

/* Обязательное правило: display: flex выше перебивает браузерное
   [hidden] { display: none }, и корзина оставалась бы видимой на пустой. */
.header__cart[hidden] { display: none; }

/* Счётчик товаров. Белый кружок с чёрной цифрой — единственное место,
   где на тёмной шапке появляется инверсия, поэтому его видно сразу. */
.header__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 10px;
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

/* При открытом меню корзина уезжает вместе с трубкой: поверх шторки
   ей делать нечего. Исчезает сразу по нажатию на бургер, без задержки. */
body.is-menu-open .header__cart {
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition-delay: 0s;
}

.header__call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  /* Задержка на появление: возвращаясь, трубка ждёт, пока догаснет шторка меню,
     иначе она проступает поверх ещё видимого меню и мигает. */
  transition: background-color var(--speed) ease-in-out,
              opacity .16s ease-out .18s,
              transform .16s ease-out .18s;
}
.header__call:hover { background: rgba(255, 255, 255, .22); }
.header__call img { width: 24px; height: 24px; }

/* При открытом меню трубка сверху не нужна — номер есть в самом меню.
   Исчезает сразу по нажатию на бургер, без задержки. */
body.is-menu-open .header__call {
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition-delay: 0s;
}

/* Бургер.
   Полоски позиционируются абсолютно, а не флексом: при флексе схлопнутая
   средняя полоска продолжала занимать место в потоке и крестик не сходился
   ровно в центре. С абсолютными координатами верхняя и нижняя приезжают
   строго в одну точку, а средняя гасится и по ширине, и по прозрачности. */
.burger {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.burger__line {
  position: absolute;
  left: 8px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
  transform-origin: center;
  transition: transform var(--speed) ease-in-out,
              opacity .14s ease-in-out;
}

.burger__line:nth-child(1) { top: 14px; }
.burger__line:nth-child(2) { top: 21px; }
.burger__line:nth-child(3) { top: 28px; }

/* Средняя полоска короче и прижата вправо — укорочение съедает левый край */
.burger__line:nth-child(2) {
  left: auto;
  right: 8px;
  width: 20px;
  transform-origin: right center;
}

/* Три полоски складываются в крестик, средняя исчезает */
body.is-menu-open .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-menu-open .burger__line:nth-child(2) { transform: scaleX(0); opacity: 0; }
body.is-menu-open .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Меню ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 88px var(--pad-x) 48px;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .28s ease-out;
}
.menu[hidden] { display: none; }
.menu.is-visible { opacity: 1; }

.menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.menu__list a {
  display: inline-block;
  padding: 4px 8px;
  font-size: 20px;
  line-height: 1.3;
}

/* Пункты не появляются разом: каждый следующий чуть позже и снизу вверх.
   Меню открывается как последовательность, а не как мгновенная чёрная заливка. */
.menu__list li,
.menu__phone {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease-out, transform .32s ease-out;
}
.menu.is-visible .menu__list li,
.menu.is-visible .menu__phone {
  opacity: 1;
  transform: none;
}
.menu.is-visible .menu__list li:nth-child(1) { transition-delay: .06s; }
.menu.is-visible .menu__list li:nth-child(2) { transition-delay: .10s; }
.menu.is-visible .menu__list li:nth-child(3) { transition-delay: .14s; }
.menu.is-visible .menu__list li:nth-child(4) { transition-delay: .18s; }
.menu.is-visible .menu__list li:nth-child(5) { transition-delay: .22s; }
.menu.is-visible .menu__phone { transition-delay: .28s; }

.menu__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .21);
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color var(--speed) ease-in-out;
}
.menu__phone:hover { background: rgba(255, 255, 255, .32); color: var(--fg); }

/* Пока меню открыто, страница под ним не скроллится. Делается это в app.js
   (scrollLock), а НЕ через overflow: hidden на body: в iOS Safari
   переключение overflow разворачивает и сворачивает панель браузера,
   и при каждом нажатии на бургер дёргалась вся страница. */

/* ---------- Внутренняя страница (гарантия) ---------- */

.page { padding: 32px 0 var(--sec-gap); }

.page__title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 28px;
}

.page__subtitle {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 14px;
}

.page__section { margin-bottom: 36px; }

.page__section p {
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.55;
}
.page__section p + p,
.page__section ul + p,
.page__section p + ul,
.page__section ol + p,
.page__section p + ol { margin-top: 14px; }

.page__section strong { color: var(--fg); font-weight: 600; }

/* Подводка к перечню — белая и жирная, чтобы отбивалась от самого списка */
.page__section p.page__lead {
  color: var(--fg);
  font-weight: 700;
}

/* Перечни на странице гарантии нумерованные. Форма номера различает
   два соседних списка в условиях гарантии: «1.» — когда обязательства
   действуют, «1)» — на что они не распространяются. */
.page__list {
  counter-reset: page-num;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.page__list li {
  position: relative;
  padding-left: 26px;
  counter-increment: page-num;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.55;
}
.page__list li + li { margin-top: 10px; }
.page__list li::before {
  content: counter(page-num) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
}

.page__contact a { text-decoration: none; color: var(--fg); }
.page__muted { color: rgba(255, 255, 255, .5); }

@media (min-width: 768px) {
  .page { padding: 48px 0 var(--sec-gap); }
  .page__title { font-size: 48px; }
  .page__subtitle { font-size: 28px; }
  .page__section { max-width: 780px; }
}

/* ---------- 2. Первый экран ---------- */

/* Высота первого экрана — по содержимому, как в оригинале: блок обрезан
   почти сразу под способами разблокировки (нижний отступ 54u — это зазор
   от подписей второго ряда до края артборда в Tilda, 516 − 462).
   Кадр фото тоже взят из оригинала: ширина картинки 348.52% ширины экрана,
   привязка 73.349% по горизонтали и к верхнему краю. Размер считается от
   ширины, поэтому на любом телефоне замок стоит в кадре одинаково. */
.hero {
  position: relative;
  padding: 88px 0 calc(54 * var(--u));
  background: var(--bg) url('assets/img/hero-door.avif') no-repeat 73.349% 0;
  background-size: 348.52% auto;
}

/* Затемнение, чтобы текст читался поверх фото двери.
   Плотное только слева под текстом и узкой полосой у самого низа —
   в остальном фотография остаётся видимой, как в оригинале. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 8, .82) 0%, rgba(2, 5, 8, .34) 55%, rgba(2, 5, 8, .04) 100%),
    linear-gradient(180deg, rgba(2, 5, 8, .12) 0%, rgba(2, 5, 8, .06) 45%, rgba(2, 5, 8, .35) 88%, rgba(2, 5, 8, .92) 100%);
}

.hero .wrap { position: relative; }

.hero__sub {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.hero__title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 44px;
}

.hero__cta {
  display: flex;
  width: 100%;
  margin-top: 44px;
}

/* ---------- Способы разблокировки ----------
   Семь плиток под кнопкой первого экрана. Четыре в ряду, как в оригинале:
   последний ряд остаётся неполным — это нормально, подписи разной длины
   и подгонять их под ровную сетку значило бы менять тексты. */
/* minmax(0, 1fr), а не просто 1fr: иначе длинная подпись раздувает свою
   колонку за счёт соседних и на узком экране вылезает за край. */
.unlock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 8px;
  /* 61u — расстояние от низа кнопки до иконок в оригинале (309 − 248) */
  margin-top: calc(61 * var(--u));
}

/* Иконка и подпись по центру колонки, подпись — без переносов по слогам.
   Кегель поэтому плавающий: на четыре колонки приходится около 80 px, а самое
   длинное слово («распознавание») в кегле 12 px занимает под 90 и не влезает.
   clamp держит его в границах колонки на любой ширине, от 320 px и выше. */
.unlock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: clamp(10px, 2.75vw, 13px);
  line-height: 1.35;
  hyphens: manual;
  overflow-wrap: normal;
}

/* На 320 px в четыре колонки приходится по 66 px — «распознавание» не влезает
   туда ни в каком читаемом кегле. Переходим на три колонки: ячейка
   становится 90 px, и подпись помещается целиком. */
@media (max-width: 359px) {
  .unlock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unlock__item { font-size: 11px; }
}

.unlock__item img {
  width: 44px;
  height: 44px;
  /* Глифы приходят белыми на прозрачном фоне, подложки внутри файла нет */
  opacity: .92;
}

/* ---------- Видеополоса под первым экраном ----------
   Декоративная петля во всю ширину. Высота идёт от самого кадра,
   чтобы не появлялось чёрных полей по краям. */
.filmstrip {
  display: block;
  font-size: 0;          /* съедает зазор под inline-элементом */
  background: var(--bg);
}

.filmstrip__video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Карточка товара (всплывающая) ---------- */

.modal {
  width: min(100%, 900px);
  max-width: 100%;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(0, 0, 0, .75); }

/* ---------- Корзина ----------
   Тот же нативный <dialog>, что и у карточки товара. */

/* Корзина открывается на весь экран. Браузерные max-width/max-height
   у <dialog> оставляют поля по краям — снимаем их явно. Прокручивается
   сама корзина, страница под ней заблокирована (scrollLock в app.js). */
.cart {
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cart::backdrop { background: rgba(0, 0, 0, .75); }

/* На широком экране содержимое корзины не растягивается: колонка 560 по центру */
.cart__inner { max-width: 560px; margin: 0 auto; padding: 20px var(--pad-x) 40px; }

.cart__close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--plate);
  color: var(--fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.cart__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 22px;
}

.cart__empty {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  padding: 12px 0 8px;
}

/* Строка товара. Название и крестик в одной линии, под ними счётчик
   и цена — как в корзине оригинала. */
.cart__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px 12px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.cart__list > .cart__item:first-child { border-top: 0; padding-top: 0; }

.cart__item-name {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

/* justify-self: end — иначе крестик прижимается к левому краю второй
   колонки, а её ширину задаёт цена под ним, и он висит посреди строки */
.cart__remove {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--speed) ease-in-out, border-color var(--speed) ease-in-out;
}
.cart__remove:hover { color: var(--fg); border-color: var(--fg); }

.cart__qty {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cart__step {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--fg);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--speed) ease-in-out, background-color var(--speed) ease-in-out;
}
.cart__step:hover { border-color: var(--fg); background: rgba(255, 255, 255, .08); }

.cart__count {
  min-width: 16px;
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.cart__price {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 10px;
  text-align: right;
}
.cart__price-was {
  font-size: 14px;
  color: var(--price-was);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--price-was);
}
.cart__price-now {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.cart__total {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.35;
  text-align: right;
}
.cart__total b { font-size: 22px; font-weight: 700; }

/* Итог перед кнопкой — второй раз, как в оригинале: человек видит сумму
   и наверху списка, и прямо над «Заказать», не прокручивая назад. */
.cart__total--form { margin-top: 28px; }

.cart__form { margin-top: 32px; }

.cart__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 22px;
}

.cart__submit { display: flex; width: 100%; margin-top: 20px; }

.modal__inner { padding: 20px var(--pad-x) 40px; }

.modal__close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--plate);
  color: var(--fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: rgba(255, 255, 255, .32); }

.modal__badge {
  display: inline-block;
  padding: 7px 22px;
  border-radius: var(--r-plate);
  background: var(--plate);
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.modal__title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 14px;
}

/* В карточке товара места больше, плашка не нужна — хватает разницы
   кегля и цвета. Выравнивание по базовой линии, а не по центру:
   цифры разного размера должны стоять на одной строке. */
.modal__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 4px;
}

.modal__price-was {
  font-size: 19px;
  line-height: 1.2;
  color: var(--price-was);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--price-was);
}

.modal__price-now {
  font-size: 29px;
  line-height: 1.2;
  font-weight: 600;
}

.modal__stock {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 22px;
}

.modal__cta { display: flex; width: 100%; height: 60px; font-size: 19px; }
.modal__cta--bottom { margin-top: 32px; }

/* Описание модели — вторичный текст, тот же серый, что у ответов FAQ */
.modal__text {
  font-size: 17px;
  line-height: 1.55;
  color: #b1b1b1;
  margin-top: 16px;
}

.modal__subtitle {
  font-size: 23px;
  line-height: 1.15;
  font-weight: 600;
  margin: 34px 0 16px;
}

/* ---------- Галерея карточки ----------
   Лента съезжает целиком, а не подменяет картинку: слайды лежат в одном треке,
   по краям — клоны крайних кадров, поэтому петля не видна. */

.gallery { margin: 28px 0 8px; }

.gallery__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #f0f0f0;
  touch-action: pan-y;          /* вертикальный скролл страницы не перехватываем */
}

.gallery__track {
  display: flex;
  will-change: transform;
}

.gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.gallery__slide img {
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;         /* тащим сам трек, а не картинку */
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 5, 8, .55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--speed) ease-in-out;
}
.gallery__nav:hover { background: rgba(2, 5, 8, .8); }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__nav { z-index: 2; }

.gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.gallery__thumb {
  flex: 0 0 84px;
  width: 84px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
  transition: border-color var(--speed) ease-in-out;
}
.gallery__thumb.is-active { border-color: var(--fg); }
.gallery__thumb img { width: 100%; }

/* Характеристики */
.specs { margin: 0; }
.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.specs dt { flex: 1 1 auto; font-size: 14px; line-height: 1.35; color: var(--muted); }
.specs dd { flex: 0 1 auto; margin: 0; font-size: 14px; line-height: 1.35; text-align: right; }

/* Комплектация — тоже вторичный текст */
.kit li {
  position: relative;
  padding-left: 18px;
  color: #b1b1b1;
  font-size: 16px;
  line-height: 1.55;
}
.kit li + li { margin-top: 8px; }
.kit li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

@media (min-width: 768px) {
  .modal { border-radius: 24px; max-height: 92dvh; }
  .modal__inner { padding: 24px 40px 48px; }
  .modal__title { font-size: 34px; }
  .modal__price-was { font-size: 21px; }
  .modal__price-now { font-size: 32px; }
  .modal__cta { width: 320px; }
  .gallery__thumb { flex-basis: 104px; width: 104px; }
}

/* ---------- Фото на весь экран ----------
   Отдельный <dialog> поверх карточки товара: жесты, зум и петля живут здесь,
   карточка под ним остаётся нетронутой. */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: #000; }

.lightbox__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;           /* жесты полностью на нас */
}

.lightbox__track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.lightbox__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
/* will-change: transform здесь быть не должно: он запирает картинку в отдельный
   слой, растеризованный один раз в исходном размере, и зум растягивает готовый
   битмап вместо перерисовки — фотография мылится независимо от качества файла.
   Резкость даёт запекание масштаба в width/height, см. bakeZoom() в app.js. */
.lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Счётчик кадров */
.lightbox__badge {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  font-size: 15px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* Стрелок в полноэкранном просмотре нет — листание пальцем и клавишами */

/* ---------- 5. Модели ---------- */

.models { padding: var(--sec-gap) 0 0; }

.model + .model { margin-top: 40px; }

/* В оригинале фото замка — это фон карточки: тёмная скруглённая плашка,
   замок прижат к правому краю, весь текст лежит поверх неё.

   ВСЕ РАЗМЕРЫ ВНУТРИ КАРТОЧКИ ЗАДАНЫ В --u (см. :root). Это повторяет
   поведение Tilda: оригинал свёрстан на артборде 320 px и масштабируется
   под ширину экрана целиком, поэтому на 414 px там всё в 1,29 раза крупнее.
   Значения ниже — те самые координаты артборда 320 из копии оригинала:
   бейдж 16, заголовок 20, пункты 14, иконка 42, ширины текстовых блоков.
   Раз шрифт и ширины растут вместе, переносы слов одинаковые на любом
   телефоне — и совпадают с оригиналом. */
.model__card {
  position: relative;
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)) calc(20 * var(--u));
  /* Не ниже пропорции самого фото (1400×1946): тогда замок виден целиком
     и сверху не срезается. Если текст окажется выше — карточка вырастет,
     фото масштабируется по высоте и подрежется слева, где только фон. */
  aspect-ratio: 1400 / 1946;
  /* overflow: hidden здесь нельзя: с ним aspect-ratio держит высоту жёстко
     и последний пункт обрезается, а не растягивает карточку. Фон скругление
     уважает и без него. */
  border-radius: 24px;
  /* Фото — в геометрии оригинала: в Tilda картинка шириной 339 из 320
     и начинается на 19 левее экрана, то есть она в 1,148 раза шире нашей
     карточки и сдвинута влево на 0,106 её ширины (71.6% при такой ширине
     фона дают ровно этот сдвиг). Размер считается от ширины, а не cover:
     с cover карточка, ставшая выше пропорции фото, растягивала картинку
     по высоте, и замок уезжал под текст. Пункты, как и в оригинале,
     немного заходят на тёмный низ замка; заголовок и цена уменьшены,
     чтобы не лезть на светлый экран замка.
     Цвет подложки — цвет края самого файла (1, 2, 2), шва не видно. */
  background-color: #010202;
  background-repeat: no-repeat;
  background-position: 71.6% 0;
  background-size: 114.8% auto;
}
.model__card--sl300 { background-image: url('assets/img/lock-sl300.avif'); }
.model__card--sl500 { background-image: url('assets/img/lock-sl500.avif'); }

.model__badge {
  display: inline-block;
  padding: calc(8 * var(--u)) calc(22 * var(--u));
  border-radius: var(--r-plate);
  background: var(--plate);
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: calc(16 * var(--u));
}

/* Перенос как в оригинале: «Взломостойкий / умный замок» и
   «Умный замок / премиум-класса». В Tilda ширина 215 при кегле 20;
   кегль у нас 18, поэтому и ширина ужата — иначе первая строка
   забирала «премиум-». */
.model__title {
  max-width: calc(175 * var(--u));
  font-size: calc(18 * var(--u));   /* в оригинале 20 — уменьшен, чтобы не заходить на замок */
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: calc(16 * var(--u));
}

/* Цена: сначала старая — зачёркнутая и уведённая в серый, следом новая
   на плашке. Порядок и контраст делают всю работу, процент нигде не пишем. */
.model__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(10 * var(--u));
  margin-bottom: calc(40 * var(--u));
}

.model__price-was {
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: var(--price-was);
  /* Тонкая линия: жирная перечёркивает цифры и превращает цену в кашу */
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--price-was);
}

/* Плашка новой цены собрана слоями: обводка-волосок, зелёная заливка
   и внутренний блик по верхней грани. Плоская рамка в 1 px рядом
   с зачёркнутой ценой читалась бы как поле ввода, а не как цена. */
.model__price-now {
  display: inline-block;
  padding: calc(7 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--price-edge);
  border-radius: var(--r-price);
  background: var(--price-fill);
  box-shadow: inset 0 1px 0 var(--price-gloss);
  color: var(--price-ink);
  font-size: calc(15 * var(--u));
  line-height: 1;
  font-weight: 600;
}

/* Цена всплывает, когда карточка входит в экран. Начальное состояние
   включает JS (класс на <html>): без скрипта и при «уменьшить движение»
   цена просто стоит на месте, а не остаётся невидимой.
   Анимируются только transform и opacity — раскладка не пересчитывается. */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.js-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   .7s cubic-bezier(.32, .72, 0, 1),
    transform .7s cubic-bezier(.32, .72, 0, 1);
}

/* Ширина текста у каждого пункта своя, как в оригинале: --w в разметке
   (140, 156, 167, 191 — значения из копии). Именно она решает, где
   строка переломится. 51 = иконка 42 + отступ 9. */
.model__features li {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  max-width: calc((51 + var(--w, 191)) * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.3;
}
.model__features li + li { margin-top: calc(20 * var(--u)); }

/* Плашка под иконкой уже вшита в сам файл иконки (rect opacity .4),
   поэтому своей подложки здесь быть не должно — иначе получается двойная. */
.model__ico {
  flex: 0 0 calc(42 * var(--u));
  display: block;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
}
.model__ico img { width: 100%; height: 100%; }

.model__btn {
  display: flex;
  width: 100%;
  margin-top: 22px;
}

/* «Купить» под «Подробнее». Отступ меньше, чем у «Подробнее» от карточки:
   две кнопки читаются парой, а не двумя отдельными блоками. */
.model__buy {
  display: flex;
  width: 100%;
  margin-top: 12px;
}

/* ---------- 7. Форма ---------- */

/* Липкая шапка не должна накрывать заголовок секции, к которой пришли по якорю */
.lead, .models, .about, .messengers { scroll-margin-top: 80px; }

.lead { padding: var(--sec-gap) 0 0; }

/* ---------- Зернистая плашка ---------- */
/* В оригинале это PNG на 800 КБ; здесь то же самое собрано из градиентов и шума
   (SVG feTurbulence в data-URI, пара сотен байт) — выглядит так же, тянется
   на любую высоту и не добавляет ни одного запроса.
   Одна и та же подложка под формой, карточками преимуществ и плашкой
   доставки в подвале. */
.lead__panel,
.advantage,
.footer__panel {
  position: relative;
  overflow: hidden;
  background-color: #0a0d10;
  background-image:
    radial-gradient(120% 90% at 8% 0%,    rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(110% 80% at 100% 4%,  rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%);
}

/* Само зерно */
.lead__panel::before,
.advantage::before,
.footer__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: screen;
}

.lead__panel > *,
.advantage > *,
.footer__panel > * { position: relative; }

/* Плашка доставки в подвале растворяется в чёрный, как в оригинале:
   сверху зерно и подсветка, к карте — уже почти фон страницы.
   Проценты — от высоты плашки; она вся в --u, поэтому на любом телефоне
   переход идёт от телефона (≈36%) к началу карты (≈55%). Тот же переход
   маской гасит и зерно, иначе оно светилось бы на чёрном. */
.footer__panel {
  background-image:
    linear-gradient(180deg, rgba(2, 5, 8, 0) 34%, rgba(2, 5, 8, .94) 56%, rgba(2, 5, 8, .94) 100%),
    radial-gradient(120% 90% at 8% 0%,    rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(110% 80% at 100% 4%,  rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 50%);
}
.footer__panel::before {
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 58%);
          mask-image: linear-gradient(180deg, #000 34%, transparent 58%);
}

.lead__panel {
  padding: 32px 20px 36px;
  border-radius: 26px;
}

/* В оригинале подзаголовок формы — белый с прозрачностью 0.6 */
.lead__sub {
  color: rgba(255, 255, 255, .6);
  font-size: 17px;
  line-height: 1.5;
  margin: -14px 0 26px;
}

.field { margin-bottom: 18px; }

.field__input {
  width: 100%;
  height: 62px;
  padding: 0 24px;
  background: transparent;
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  font-size: 17px;
  line-height: 1.55;
  transition: border-color var(--speed) ease-in-out,
              box-shadow var(--speed) ease-in-out;
}
/* Подписи полей живут внутри самих полей, бледным — как в оригинале */
.field__input::placeholder { color: rgba(255, 255, 255, .45); opacity: 1; }

.field__input[aria-invalid='true'] {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .3);
}

.field__error {
  margin-top: 6px;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--error);
}

.form__submit {
  width: 100%;
  height: 64px;
  margin-top: 12px;
  font-size: 21px;
}
.form__submit[disabled] { opacity: .6; cursor: default; }

.form__result {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.55;
}
.form__result.is-error { color: var(--error); }

/* В оригинале сноска — белая с прозрачностью 0.4 */
.form__note {
  margin-top: 18px;
  color: rgba(255, 255, 255, .4);
  font-size: 15px;
  line-height: 1.5;
}
.form__note a { text-decoration: underline; }

/* ---------- 8. Гарантия и поддержка ---------- */

/* ---------- Созданы для России ---------- */

/* Размеры в --u, как в карточках моделей: в оригинале блок свёрстан на
   артборде 320 px и растягивается под экран. Кружок 55u, глиф 28u, текст 14u
   с межстрочным 1.55, отступ текста от кружка 23u, шаг строк ≈75u.
   Ширина подписи (--w) взята из оригинала по каждой строке — поэтому каждая
   делится на две строки ровно там же, где в Tilda. */
.russia { padding: var(--sec-gap) 0 0; }

.russia__list {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

.russia__item {
  display: flex;
  align-items: center;
  gap: calc(23 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.55;
}

.russia__text { max-width: calc(var(--w, 170) * var(--u)); }

/* Кружок-подложка: в оригинале это белая заливка на 14% непрозрачности */
.russia__ico {
  flex: 0 0 calc(55 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(55 * var(--u));
  height: calc(55 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.russia__ico img {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  opacity: .8;
}

/* «RU» — не картинка, а текст: в оригинале это тоже текстовый элемент.
   Насыщенность 400, а не 600: иконки рядом — тонкие контурные, и жирные
   буквы выбивались из ряда толщиной штриха. */
.russia__ico--text {
  font-size: calc(20 * var(--u));
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
}

.advantages { padding: var(--sec-gap) 0 0; }

/* Плашка карточки — та же зернистая подложка, что под формой */
.advantage {
  padding: 24px 20px 28px;
  border-radius: 20px;
}

.advantage + .advantage { margin-top: 16px; }

.advantage__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.advantage__head img { width: 52px; height: 52px; flex: 0 0 52px; }

.advantage__title {
  font-size: 23px;
  line-height: 1.15;
  font-weight: 600;
}

/* В оригинале пояснение — белое с прозрачностью 0.7, заголовок остаётся белым */
.advantage__text {
  color: rgba(255, 255, 255, .7);
  font-size: 17px;
  line-height: 1.5;
}

/* ---------- 9. О нас ---------- */

.about { padding: var(--sec-gap) 0 0; }

/* В оригинале текст блока идёт с прозрачностью 0.6 — заметно бледнее заголовка */
.about__text { opacity: .6; font-size: 18px; line-height: 1.5; }
.about__text p + p { margin-top: 18px; }

.about__video {
  display: block;
  width: 100%;
  margin-top: 28px;
  border-radius: 14px;
  background: #0a0d10;
}

/* ---------- 10. FAQ ---------- */

.faq { padding: var(--sec-gap) 0 0; }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-of-type { border-bottom: 1px solid var(--line); }

.faq__q {
  position: relative;
  display: block;
  padding: 22px 52px 22px 0;
  color: #e4e4e4;          /* цвет вопросов в оригинале */
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/* Иконка «плюс → крестик»: плюс целиком доворачивается влево на 45°,
   при закрытии тем же путём возвращается вправо. Кружок-подложка
   проявляется на раскрытом пункте. */
.faq__icon {
  position: absolute;
  right: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  transform: rotate(0deg);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              background-color .22s ease-in-out;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1px;
  background: #c8c8c8;
}
.faq__icon::before { transform: translate(-50%, -50%); }
.faq__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item[open] .faq__icon {
  background: #626262;
  transform: rotate(-45deg);
}

/* Пока ответ схлопывается, атрибут [open] ещё стоит: без этого правила крестик
   разворачивался бы обратно только в самом конце анимации. Класс вешается по
   клику, поэтому иконка и высота идут одним движением. */
.faq__item.is-closing .faq__icon {
  background: transparent;
  transform: rotate(0deg);
}


/* Ответы в оригинале заметно бледнее вопросов.
   Отступ снизу — на последнем потомке, а не на самом блоке: при height:0
   собственный padding никуда не делся бы и раскрытие начиналось бы рывком. */
.faq__a {
  padding: 0;
  color: #b1b1b1;
  font-size: 17px;
  line-height: 1.55;
  overflow: hidden;   /* нужно, чтобы анимировать высоту */
}
.faq__a > *:last-child { margin-bottom: 20px; }

/* Подвопрос внутри группы — заметно светлее ответа, иначе не отбивается */
.faq__sub,
.faq__lead {
  color: #f2f2f2;
  font-weight: 700;
}
.faq__a p + .faq__sub { margin-top: 20px; }
.faq__a p + p,
.faq__a ul + p, .faq__a p + ul,
.faq__a ol + p, .faq__a p + ol { margin-top: 12px; }
.faq__a ul li {
  position: relative;
  padding-left: 18px;
}
.faq__a ul li + li { margin-top: 8px; }
.faq__a ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Нумерованные списки в FAQ. Два соседних перечня в «Условиях гарантии»
   различаются формой номера: обязательства действуют — «1.»,
   не распространяются — «1)». */
.faq__ol {
  counter-reset: faq-num;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq__ol li {
  position: relative;
  padding-left: 26px;
  counter-increment: faq-num;
}
.faq__ol li + li { margin-top: 8px; }
.faq__ol li::before {
  content: counter(faq-num) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. Мессенджеры ---------- */

/* В оригинале блок мессенджеров лежит на том же фото двери, что и первый экран */
.messengers {
  position: relative;
  padding: var(--sec-gap) 0 40px;
  background: var(--bg) url('assets/img/hero-door.avif') no-repeat 30% center;
  background-size: cover;
}
.messengers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(2, 5, 8, .6) 40%, rgba(2, 5, 8, .8) 100%);
}
.messengers .wrap { position: relative; }
.messengers__title { text-align: center; }

.messengers__buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.messengers__or { text-align: center; font-size: 16px; }

/* ---------- 12. Подвал ---------- */

.footer {
  margin-top: var(--sec-gap);
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
}

/* Тёмная плашка с доставкой, контактами, картой и навигацией — как
   в оригинале. Там это PNG на 180 КБ, здесь собрана на CSS; фон и зерно
   задаются вместе с .lead__panel выше, здесь только геометрия.

   Размеры — в --u, с артборда 320 оригинала: заголовки 22, строки 16,
   телефон и почта 22, навигация 16. На телефоне шрифт растёт вместе
   с шириной экрана, как в Tilda. */
/* Плашка шире общей колонки страницы: в оригинале от края экрана до неё
   10 из 320, а текст начинается в 9 от её края. С нашими 16 px полей и
   20 внутри «Доставка по всей России» и почта в 22-м кегле не влезали
   в строку. Отрицательные поля возвращают оригинальную геометрию. */
.footer__panel {
  /* Край плашки — в 10 единицах от края экрана при любой ширине:
     поле страницы фиксированное (16 px), поэтому вычитаем его. */
  margin: 0 calc(10 * var(--u) - var(--pad-x)) calc(14 * var(--u));
  padding: calc(23 * var(--u)) calc(9 * var(--u)) calc(26 * var(--u));
  border-radius: 26px;
}

.footer__title {
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: calc(18 * var(--u));
}

/* Пары «способ доставки → цена». Порядок сверен по оригиналу и путать его
   нельзя: ПВЗ — это СДЭК за 500 ₽, курьер — от 900 ₽. */
.footer__delivery {
  margin: 0 0 calc(36 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.5;
}
.footer__delivery dt {
  color: var(--muted);
}
.footer__delivery dd {
  margin: 0 0 calc(25 * var(--u));
}
.footer__delivery dd:last-child { margin-bottom: 0; }

/* Обычное начертание, как в оригинале: полужирным строка в 22-м кегле
   не влезает в ширину плашки и рвётся на две. */
.footer__pickup {
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  font-weight: 400;
}

.footer__phone {
  display: block;
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  font-weight: 700;
}

.footer__muted {
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: calc(40 * var(--u));
}

/* Подчёркиваний в подвале нет ни у почты, ни у политики */
.footer__link {
  display: inline-block;
  text-decoration: none;
}

.footer__link--mail {
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  font-weight: 700;
}

/* Карта вытянута до краёв плашки. max-width: none обязателен — в сбросе
   у всех картинок стоит 100%, и без него карта не вылезет за паддинги. */
.footer__map {
  display: block;
  width: calc(100% + 18 * var(--u));
  max-width: none;
  height: auto;
  margin: calc(4 * var(--u)) calc(-9 * var(--u)) calc(10 * var(--u));
}

.footer__logo {
  display: inline-block;
  width: calc(136 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.footer__logo img { width: 100%; height: auto; }

/* Разделы сайта — внутри плашки, под логотипом, как в оригинале */
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
}
.footer__nav a {
  font-size: calc(16 * var(--u));
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}
.footer__nav a:hover { color: var(--fg); }

.footer__social {
  display: flex;
  gap: calc(12 * var(--u));
  margin-bottom: calc(60 * var(--u));
}
.footer__social img { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }

/* Политика и копирайт — одного серого цвета и кегля: в оригинале обе
   строки вторичные, белой политика выбивалась бы из подвала. */
.footer__legal,
.footer__copy {
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  color: var(--muted);
}
.footer__legal { display: inline-block; margin-bottom: calc(12 * var(--u)); }
.footer__legal:hover { color: var(--hover-text); }

/* ============================================================
   Десктоп — минимальная адаптация.
   По брифу приоритет мобильный; полноценный десктоп — отдельная задача.
   ============================================================ */

@media (min-width: 768px) {
  :root { --pad-x: 40px; --sec-gap: 75px; }

  .hero {
    min-height: calc(100svh - 72px);
    padding: 90px 0 75px;
    background-position: center center;
    background-size: cover;
  }
  .hero__title { font-size: 54px; }
  .hero__sub { font-size: 18px; }
  .hero__cta { display: inline-flex; width: auto; min-width: 245px; font-size: 20px; }

  /* Семь способов встают в одну строку, как на десктопе оригинала */
  .unlock { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 16px; max-width: 900px; margin-top: 52px; }
  .unlock__item { font-size: 13px; }   /* колонка тут широкая, clamp не нужен */

  /* В оригинале ролик занимает 66% ширины, а не всю: на широком экране
     полоса во всю ширину вырастает до 720 px и забивает собой страницу. */
  .filmstrip__video { width: 66%; margin: 0 auto; }

  /* На десктопе --u = 1.5px — блок вышел бы в полтора раза крупнее телефона */
  .russia { --u: 1.25px; }
  .russia__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 24px; }

  .section-title { font-size: 40px; }

  .models .wrap { display: flex; gap: 40px; }
  .model { flex: 1 1 0; display: flex; flex-direction: column; }
  .model + .model { margin-top: 0; }
  /* На десктопе карточки стоят в два столбца и свёрстаны в обычных px:
     единица масштаба тут не нужна, пропорция фото — тоже (карточка вышла бы
     под 800 px высотой). */
  .models { --u: 1px; }
  .model__card { padding: 32px 44% 32px 32px; aspect-ratio: auto; background-color: #06090d; background-position: right center; background-size: cover; }
  .model__title { max-width: none; }
  .model__features li { max-width: none; }
  .model__title { font-size: 36px; }
  /* На планшете карточки встают в две колонки и текстовая колонка сужается
     примерно до 150 px — в строку обе цены там не помещаются физически.
     Ставим их в столбик осознанно, а не оставляем сваливаться переносом. */
  .model__price { flex-direction: column; align-items: flex-start; gap: 10px; }
  .model__price-was { font-size: 18px; }
  .model__price-now { padding: 9px 18px; font-size: 22px; }
  .model__badge { font-size: 22px; }
  .model__features { flex: 1 1 auto; }
  .model__features li { font-size: 16px; }
  .model__btn { width: auto; align-self: flex-start; min-width: 234px; font-size: 20px; }
  .model__buy { width: auto; align-self: flex-start; min-width: 234px; font-size: 20px; }

  .cart__inner { padding: 20px 32px 48px; }
  .cart__title { font-size: 30px; }
  .cart__submit { width: 100%; }


  .form { max-width: 560px; }
  .form__submit { width: 400px; max-width: 100%; }

  .advantages__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
  .advantage + .advantage { margin-top: 0; }

  .about__video { max-width: 640px; }

  .messengers__buttons { flex-direction: row; align-items: center; justify-content: flex-start; }
  .messengers__or { margin: 0 4px; }

  /* Плашка подвала и карта под неё */
  .footer__panel { max-width: 560px; margin-left: 0; margin-right: 0; }
}

/* Начиная примерно с 1200 px текстовая колонка карточки дорастает до 270 px —
   цены возвращаются в одну строку и укрупняются до десктопного кегля. */
@media (min-width: 1200px) {
  .model__price { flex-direction: row; align-items: center; gap: 16px; }
  .model__price-was { font-size: 22px; }
  .model__price-now { padding: 10px 22px; font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}