/* ============================================================================
   Стили сайта сферические-дома.рф
   Вынесены из index.html 27.08.2026. Один файл на все страницы —
   иначе с появлением второй страницы токены начнут расходиться.
   Правится только здесь.
   ========================================================================= */

/* Шрифты размещены на своём сервере: обращения к fonts.googleapis.com
   и fonts.gstatic.com из России отдаются нестабильно, и страница
   периодически показывалась системным шрифтом. Подмножества —
   кириллица и латиница; браузер качает только то, что нужно тексту. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/manrope-400-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: 400;
  font-display: swap;
  src: url('./fonts/manrope-400-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: 500;
  font-display: swap;
  src: url('./fonts/manrope-500-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: 500;
  font-display: swap;
  src: url('./fonts/manrope-500-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: 600;
  font-display: swap;
  src: url('./fonts/manrope-600-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: 600;
  font-display: swap;
  src: url('./fonts/manrope-600-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: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/unbounded-300-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/unbounded-300-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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/unbounded-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/unbounded-400-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;
}

/* ============================================================================
   ДИЗАЙН-СИСТЕМА · сферические-дома
   Основа — вертикальный ритм на мягкой сетке 8pt
   (habr.com/ru/company/edison/blog/340670/, Elliot Dahl).

   Правила:
   1. Отступы — только кратные 8px. Шаг 4px (--space-half) — микро-UI.
   2. Web меряет line box, а не базовую линию: у текстовых ролей
      line-height задан в px и кратен 8 → блоки текста сами ложатся в ритм.
   3. Крупные заголовки держат оптический unitless line-height (0.90–1.06).
   4. В разметке нет сырых px и hex — только токены и классы компонентов.

   Слои: 1 примитивы → 2 семантика → 3 компоненты → 4 адаптив
   ========================================================================= */

/* --- 1. ПРИМИТИВЫ ------------------------------------------------------- */
:root {
  /* 1.1 Цвет: базовые каналы (rgb-тройки, чтобы задавать прозрачность) */
  --rgb-bg: 16, 15, 14;
  --rgb-ink: 242, 238, 231;
  --rgb-accent: 211, 129, 79;

  --c-ink-950: #100F0E;   /* фон страницы */
  --c-ink-900: #181614;   /* поверхность карточки */
  --c-ink-880: #191614;   /* подсветка климат-блока */
  --c-ink-860: #1C1917;   /* карточка под курсором */
  --c-ink-840: #1E1B18;   /* приподнятая карточка */
  --c-sand-050: #F2EEE7;
  --c-sand-200: #CFC8BE;
  --c-sand-400: #A39C92;
  --c-sand-500: #8F877D;
  --c-clay-500: #D3814F;
  --c-clay-300: #F0B183;
  --c-white: #FFFFFF;

  /* Светлая ветка палитры — для бежевых секций.
     Контраст проверен: всё от 4.7:1 на фоне блока и от 5.4:1 на карточке. */
  --rgb-espresso: 28, 23, 20;
  --rgb-clay-700: 150, 78, 32;
  --rgb-cream: 251, 248, 242;

  /* Зелёная ветка палитры. Оттенки выведены из #0D1C12 подмешиванием белого,
     поэтому ховеры остаются в зелёном, а не уходят в чёрный. */
  --rgb-forest: 13, 28, 18;
  --c-forest-900: #0D1C12;  /* полоса */
  --c-forest-800: #19271E;  /* поверхность на полосе */
  --c-forest-700: #202E25;  /* тинт полосы: ховер климат-блока */
  --c-forest-600: #303D34;  /* ховер поверхности */
  --c-forest-500: #39453E;  /* приподнятая поверхность */
  --c-forest-cta: #10231C;  /* карточка контактов */
  --c-card-light: #EEE7DB;  /* светлая карточка на тёмной полосе */
  --c-card-light-hi: #F7F4EF;
  --c-card-light-up: #FBF9F6;
  --c-cream-050: #FBF8F2;   /* белая полоса (тёплый белый) */
  --c-cream-100: #F4EFE5;   /* поверхность на белой полосе */
  --c-beige-200: #E3DACB;   /* низ градиента фона */
  --c-beige-100: #E8E0D2;   /* фон блока */
  --c-beige-075: #EFE8DC;   /* верх градиента фона */
  --c-beige-050: #F4EFE5;   /* поверхность карточки */
  --c-espresso-900: #1C1714; /* заголовки и значения */
  --c-espresso-700: #5C4F45; /* основной текст */
  --c-espresso-600: #6B5D51; /* капс-подписи */
  --c-clay-700: #964E20;     /* акцент на светлом */
  --c-clay-800: #7E3F17;     /* акцент под курсором */

  /* 1.2 Шкала отступов — мягкая сетка 8pt. --space-N = N × 8px */
  --space-half: 4px;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-16: 128px;

  /* 1.3 Гарнитуры */
  --font-display: 'Unbounded', sans-serif;
  --font-text: 'Manrope', system-ui, sans-serif;

  /* 1.4 Текстовые роли: размер + line box, кратный 8 */
  --text-label: 11px;   --text-label-lh: 16px;   /* капс-подписи */
  --text-xs:    13px;   --text-xs-lh:    24px;   /* мета, сноски, меню */
  --text-sm:    14px;   --text-sm-lh:    24px;   /* UI, кнопки, таблица */
  --text-base:  16px;   --text-base-lh:  24px;   /* основной текст */
  --text-lg:    18px;   --text-lg-lh:    32px;   /* лид, телефоны */
  --text-value: 20px;   --text-value-lh: 24px;   /* числовые значения */
  --text-xl:    22px;   --text-xl-lh:    32px;   /* факты в первом экране */
  --text-2xl:   32px;   --text-2xl-lh:   40px;   /* название модели */

  /* 1.5 Дисплейные роли: оптический unitless line-height */
  --display-hero: clamp(46px, 8.4vw, 148px);  --display-hero-lh: 0.90;
  --display-1:    clamp(32px, 4.4vw, 64px);   --display-1-lh:    1.02;
  --display-2:    clamp(30px, 3.6vw, 52px);   --display-2-lh:    1.06;
  --display-3:    clamp(28px, 3vw, 42px);     --display-3-lh:    1.06;
  --display-num:  clamp(44px, 5vw, 72px);     --display-num-lh:  1;
  --display-hero-sm: clamp(40px, 16vw, 72px); /* заголовок на телефоне */
  --display-nav-sm:  clamp(36px, 11vw, 56px); /* пункт меню на телефоне */
  --display-nav-sub-sm: clamp(18px, 5vw, 24px); /* пункт подменю на телефоне */

  /* 1.6 Межбуквенное */
  --track-tight: -0.03em;
  --track-snug: -0.02em;
  --track-nav: 0.06em;
  --track-label: 0.16em;
  --track-label-wide: 0.22em;
  --track-eyebrow: 0.30em;

  /* 1.7 Радиусы, тени, движение */
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;

  --shadow-card: 0 24px 64px rgba(0, 0, 0, 0.50);
  --shadow-raised: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 16px 40px rgba(var(--rgb-accent), 0.34);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .3s;
  --dur: .5s;
  --dur-mid: .7s;
  --dur-slow: .9s;
  --dur-slower: 1.2s;
  --dur-reveal: 1.1s;
  --dur-reveal-mask: 1.3s;
  --dur-reveal-slot: 1.8s;
}

/* --- 2. СЕМАНТИКА ------------------------------------------------------- */
:root {
  /* 2.1 Роли цвета */
  --bg: var(--c-ink-950);
  --surface: var(--c-ink-900);
  --surface-hover: var(--c-ink-860);
  --surface-raised: var(--c-ink-840);
  --surface-tint: var(--c-ink-880);
  --ink: var(--c-sand-050);
  --soft: var(--c-sand-200);
  --muted: var(--c-sand-400);
  --dim: var(--c-sand-500);
  --accent: var(--c-clay-500);
  --accent-2: var(--c-clay-300);

  /* 2.2 Линии и заливки поверх фона */
  --wash: rgba(var(--rgb-ink), 0.05);
  --line-weak: rgba(var(--rgb-ink), 0.08);
  --line: rgba(var(--rgb-ink), 0.10);
  --line-mid: rgba(var(--rgb-ink), 0.12);
  --line-hi: rgba(var(--rgb-ink), 0.14);
  --line-strong: rgba(var(--rgb-ink), 0.35);
  --accent-line: rgba(var(--rgb-accent), 0.40);
  --accent-line-hi: rgba(var(--rgb-accent), 0.55);

  /* 2.3 Ритм страницы */
  --gutter: 5vw;
  --section-py: var(--space-14);
  --section-py-sm: var(--space-10);
  --section-gap: var(--space-7);

  /* 2.4 Длина строки и высота медиа */
  --measure-lead: 720px;
  --measure-side: 400px;
  --measure-text: 72ch;
  --h-card-media: 336px;
  --h-use-media: 304px;
  --h-cta-media: 336px;
  --h-showcase: 86vh;       /* было 78vh, +10% по просьбе 27.08.2026 */
  --h-showcase-min: 576px;  /* было 520px; 576 = 72 × 8, остаётся в сетке */
  --h-hero-min: 680px;
}

/* --- БАЗА --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--bg); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Прозрачный перехватчик поверх фотографий.
   Яндекс.Браузер вешает свою панель «поиск по картинке» на наведение
   поверх <img>; слой забирает наведение на себя, и панель не появляется.
   Собственные ховер-эффекты живут на родителе, поэтому не ломаются. */
.card-media::after,
.use-photo::after,
.cta-media::after,
.showcase-media::after,
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1; pointer-events: auto;
}
[hidden] { display: none !important; }
.page { width: 100%; background: var(--bg); overflow-x: hidden; }

/* --- ТИПОГРАФИЧЕСКИЕ РОЛИ ----------------------------------------------- */
.t-label {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dim);
}
.t-eyebrow {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent);
}
.t-xs { font-size: var(--text-xs); line-height: var(--text-xs-lh); }
.t-sm { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.t-base { font-size: var(--text-base); line-height: var(--text-base-lh); }
.t-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-value); line-height: var(--text-value-lh);
}
.t-muted { color: var(--muted); }
.t-dim { color: var(--dim); }
.t-accent { color: var(--accent); }

/* --- РАСКЛАДКА СЕКЦИЙ --------------------------------------------------- */
.section {
  padding: var(--section-py) var(--gutter);
  display: flex; flex-direction: column; gap: var(--section-gap);
}
.section--models { padding-bottom: var(--section-py); }
.section--prices { padding-top: var(--section-py-sm); padding-bottom: var(--space-5); gap: var(--space-5); }
.section--uses { gap: var(--space-6); padding-bottom: calc(var(--section-py) + var(--space-6)); }
/* Обе секции стали самостоятельными цветными полосами,
   поэтому получают обычный верхний отступ секции, а не нулевой. */
.section--process { padding-top: var(--section-py); }
.section--contact { padding-bottom: var(--space-5); }

.section-head {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  align-items: flex-end; justify-content: space-between;
}
.section-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-1); line-height: var(--display-1-lh);
  letter-spacing: var(--track-snug);
}
/* Акцентная часть заголовка всегда с новой строки: перенос совпадает с
   границей цвета независимо от метрик шрифта и ширины экрана.
   Подбирать max-width под ширину слов ненадёжно — ch у Unbounded «плавает». */
.section-title .t-accent { display: block; }
.section-title--models,
.section-title--prices,
.section-title--tech,
.section-title--uses { max-width: 20ch; }
.section-note {
  margin: 0; max-width: var(--measure-side);
  font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--muted);
}

/* --- АНИМАЦИИ ----------------------------------------------------------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
@keyframes heroMask { from { clip-path: inset(0 0 100% 0); transform: translateY(18px) } to { clip-path: inset(0 0 -12% 0); transform: none } }
@keyframes slotIn { from { opacity: 0; transform: scale(1.14) } to { opacity: 1; transform: scale(1.12) } }
@keyframes lineGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes revealMask { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(16px) } to { opacity: 1; clip-path: inset(0 0 -12% 0); transform: none } }
@keyframes navReveal { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(22px); filter: blur(6px) } to { opacity: 1; clip-path: inset(0 0 -12% 0); transform: none; filter: none } }

[data-reveal] { opacity: 0; will-change: opacity, transform, filter, clip-path; }
[data-reveal="up"] { transform: translateY(28px); filter: blur(6px) }
[data-reveal="mask"] { opacity: 0; transform: translateY(18px) }
[data-reveal="slot"] { opacity: 1; transform: scale(1.14) }
[data-reveal].is-in { animation: heroIn var(--dur-reveal) var(--ease) both; animation-delay: var(--reveal-delay, 0s) }
[data-reveal="mask"].is-in { animation-name: revealMask; animation-duration: var(--dur-reveal-mask) }
[data-reveal="slot"].is-in { animation-name: slotIn; animation-duration: var(--dur-reveal-slot) }
[data-reveal].is-shown {
  opacity: 1; transform: none; filter: none; clip-path: none;
  animation: none; will-change: auto;
}
.models .card:nth-child(2),
.uses .use-card:nth-child(2) { --reveal-delay: .12s }
.models .card:nth-child(3) { --reveal-delay: .24s }
.uses .use-card:nth-child(3) { --reveal-delay: .24s }
.climates .climate:nth-child(2),
.props .prop:nth-child(2),
.process .step:nth-child(3) { --reveal-delay: .1s }
.climates .climate:nth-child(3),
.props .prop:nth-child(3),
.process .step:nth-child(4) { --reveal-delay: .2s }
.props .prop:nth-child(4),
.process .step:nth-child(5) { --reveal-delay: .3s }

/* --- 3. КОМПОНЕНТЫ ------------------------------------------------------ */

/* 3.1 Шапка и меню */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--gutter) var(--space-3);
  mix-blend-mode: difference;
}
.logo {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-base); line-height: var(--text-base-lh);
  letter-spacing: var(--track-snug); color: var(--ink);
  position: relative; z-index: 42; transition: color var(--dur-fast) ease;
}
.site-nav {
  display: flex; gap: var(--space-4);
  font-size: var(--text-xs); line-height: var(--text-xs-lh);
  letter-spacing: var(--track-nav); color: var(--ink);
}
.nav-link {
  display: inline-flex; align-items: center;
  padding-bottom: var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) ease, letter-spacing var(--dur) ease;
}
.nav-link:hover, .nav-link:focus-visible { background-size: 100% 1px; color: var(--ink); }

/* Пункт меню с выпадающим списком */
.nav-group { position: relative; display: inline-flex; }
.nav-sub-toggle {
  font: inherit; letter-spacing: inherit; color: inherit;
  border: 0; background-color: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-half);
  padding: 0 0 var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) ease;
}
.nav-group:hover .nav-sub-toggle,
.nav-group.is-open .nav-sub-toggle,
.nav-sub-toggle:focus-visible { background-size: 100% 1px; }
.nav-caret {
  width: 6px; height: 6px; margin-left: var(--space-half);
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.nav-group:hover .nav-caret,
.nav-group.is-open .nav-caret { transform: translateY(1px) rotate(225deg); }

.nav-sub {
  position: absolute; top: 100%; left: calc(var(--space-3) * -1);
  min-width: 288px; margin-top: var(--space-2); padding: var(--space-1);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-weak);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease),
              visibility 0s linear var(--dur-fast);
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub,
.nav-group.is-open .nav-sub {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-sub-link {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); border-radius: var(--radius-md);
  transition: background var(--dur-fast) ease;
}
.nav-sub-link:hover, .nav-sub-link:focus-visible { background: var(--wash); color: var(--ink); }
.nav-sub-title {
  font-size: var(--text-sm); line-height: var(--text-sm-lh); letter-spacing: 0;
}
.nav-sub-note {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: 0; color: var(--dim);
}
/* Панель непрозрачная — режим наложения шапки на время открытия снимаем,
   иначе она инвертируется на фоне фотографии */
.site-header:has(.nav-group:hover),
.site-header:has(.nav-group.is-open) { mix-blend-mode: normal; }

.header-phone {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  letter-spacing: var(--track-snug); white-space: nowrap;
  margin-left: var(--space-4);
  padding-bottom: var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) ease;
}
.header-phone:hover, .header-phone:focus-visible { background-size: 100% 1px; color: var(--ink); }
.nav-phone { display: none; }

.burger {
  display: none; position: relative; z-index: 42;
  width: var(--space-6); height: var(--space-6); margin-left: auto; margin-right: calc(var(--space-1) * -1);
  border: 0; background: transparent; cursor: pointer; color: var(--ink);
}
.burger span {
  display: block; width: var(--space-3); height: 1px; margin: 0 auto; background: currentColor;
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) ease;
}
.burger span + span { margin-top: var(--space-1); }
.site-header.is-open .burger span:first-child { transform: translateY(var(--space-half)) rotate(45deg); }
.site-header.is-open .burger span:last-child { transform: translateY(calc(var(--space-half) * -1)) rotate(-45deg); }

/* 3.2 Кнопки */
.btn-gold, .btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
}
.btn-gold {
  color: var(--bg); font-weight: 600; letter-spacing: 0.02em;
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 45%, var(--accent) 100%);
  background-size: 240% 100%; background-position: 100% 0;
  transition: background-position var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur-mid) ease, letter-spacing var(--dur) ease;
}
.btn-gold:hover {
  background-position: 0% 0; transform: translateY(-3px);
  box-shadow: var(--shadow-gold); letter-spacing: var(--track-nav); color: var(--bg);
}
.btn-ghost {
  border: 1px solid var(--line-strong); font-weight: 500; color: var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size var(--dur-fast) var(--ease), color .12s ease .22s,
              border-color var(--dur-fast) ease, transform var(--dur) var(--ease);
}
.btn-ghost:hover { background-size: 100% 100%; color: var(--bg); border-color: var(--ink); transform: translateY(-3px); }
/* Целевые кнопки в блоках: в карточке — во всю ширину (крупнее цель нажатия),
   в остальных местах прижаты к левому краю, чтобы не растягивались флексом. */
.card-body .btn-ghost { width: 100%; justify-content: center; }
.intro-cta, .step .btn-ghost, .cta-copy .btn-gold { align-self: flex-start; }
.step .btn-ghost { margin-top: var(--space-2); }

/* 3.3 Первый экран */
.hero {
  position: relative; height: 100vh; min-height: var(--h-hero-min); width: 100%;
  overflow: hidden; display: flex; flex-direction: column;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-media { position: absolute; inset: -6%; animation: slotIn var(--dur-reveal-slot) var(--ease) both; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--rgb-bg), 0.72) 0%, rgba(var(--rgb-bg), 0.50) 34%,
    rgba(var(--rgb-bg), 0.82) 66%, rgba(var(--rgb-bg), 0.94) 100%);
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background: radial-gradient(120% 80% at 15% 100%, rgba(var(--rgb-bg), 0.95) 0%, rgba(var(--rgb-bg), 0) 65%);
}
.hero-fold {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-copy {
  padding: 0 var(--gutter) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  pointer-events: none;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); line-height: var(--text-xs-lh); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-white);
  text-shadow: 0 1px 2px rgba(var(--rgb-bg), 0.9), 0 2px 18px rgba(var(--rgb-bg), 0.7);
  animation: heroIn 1s var(--ease) .15s both;
}
.hero-rule {
  display: block; width: var(--space-6); height: 1px; background: var(--c-white);
  transform-origin: left; animation: lineGrow var(--dur-reveal) var(--ease) .5s both;
}
.hero-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-hero); line-height: var(--display-hero-lh);
  letter-spacing: var(--track-tight); text-wrap: balance;
}
.hero-title span { display: block; animation: heroMask var(--dur-reveal-mask) var(--ease) .3s both; }
.hero-lead {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
  animation: heroIn var(--dur-reveal) var(--ease) .7s both;
}
.hero-text {
  margin: 0; max-width: var(--measure-lead);
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  color: var(--soft); text-wrap: pretty;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) 0; pointer-events: auto;
}
.hero-facts-row { display: grid; grid-template-columns: 1fr 1fr; }
.hero-facts {
  z-index: 2; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-hi);
  backdrop-filter: blur(6px); background: rgba(var(--rgb-bg), 0.35);
}
.hero-facts-primary, .hero-facts-more { width: auto; position: static; }
.fact {
  padding: var(--space-3) var(--gutter) var(--space-3) var(--space-3);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: background var(--dur-fast) ease;
}
.fact:hover { background: var(--wash); }
.hero-facts-primary .fact:nth-child(1) { animation: heroIn var(--dur-slow) var(--ease) .95s both; }
.hero-facts-primary .fact:nth-child(2) { animation: heroIn var(--dur-slow) var(--ease) 1.05s both; }
.fact-value {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: var(--text-xl-lh);
}

/* 3.0 Светлая тема полосами.
   Переключается переопределением семантики на секции — компоненты внутри
   не знают, что сменился фон, и не правятся. Две полосы чередуются:
   --cream (тёплый белый) и --beige. Тёмным остаётся только первый экран. */
.theme-light {
  --surface-hover: var(--c-white);
  --surface-raised: var(--c-white);
  --ink: var(--c-espresso-900);
  --soft: var(--c-espresso-700);
  --muted: var(--c-espresso-700);
  --dim: var(--c-espresso-600);
  --accent: var(--c-clay-700);
  --accent-2: var(--c-clay-800);
  --wash: rgba(var(--rgb-espresso), 0.05);
  --line-weak: rgba(var(--rgb-espresso), 0.10);
  --line: rgba(var(--rgb-espresso), 0.14);
  --line-mid: rgba(var(--rgb-espresso), 0.16);
  --line-hi: rgba(var(--rgb-espresso), 0.18);
  --line-strong: rgba(var(--rgb-espresso), 0.35);
  --accent-line: rgba(var(--rgb-clay-700), 0.45);
  --accent-line-hi: rgba(var(--rgb-clay-700), 0.60);
  --shadow-card: 0 24px 64px rgba(var(--rgb-espresso), 0.18);
  --shadow-raised: 0 16px 48px rgba(var(--rgb-espresso), 0.14);
  color: var(--ink);
  background: var(--bg);
}
.theme-light--cream {
  --bg: var(--c-cream-050);
  --surface: var(--c-cream-100);
  --surface-tint: var(--c-cream-100);
}
.theme-light--beige {
  --bg: var(--c-beige-100);
  --surface: var(--c-beige-050);
  --surface-tint: var(--c-beige-075);
  background: linear-gradient(180deg,
    var(--c-beige-075) 0%, var(--c-beige-100) 55%, var(--c-beige-200) 100%);
}
/* Зелёная полоса: текст остаётся светлым (корневые токены),
   меняются только фон и поверхности. */
.theme-forest {
  --bg: var(--c-forest-900);
  --surface: var(--c-forest-800);
  --surface-tint: var(--c-forest-700);
  --surface-hover: var(--c-forest-600);
  --surface-raised: var(--c-forest-500);
  background: var(--bg);
  color: var(--ink);
}

/* Инверсия для элементов: светлые карточки внутри тёмной полосы.
   Полоса решает цвет своего текста, карточка — своего. Без этого
   светлый текст полосы попадал бы на светлую карточку. */
.surface-light .card,
.surface-light .kit,
.surface-light .prop,
.surface-light .cta {
  --ink: var(--c-espresso-900);
  --soft: var(--c-espresso-700);
  --muted: var(--c-espresso-700);
  --dim: var(--c-espresso-600);
  --accent: var(--c-clay-700);
  --accent-2: var(--c-clay-800);
  --wash: rgba(var(--rgb-espresso), 0.05);
  --line-weak: rgba(var(--rgb-espresso), 0.10);
  --line: rgba(var(--rgb-espresso), 0.14);
  --line-mid: rgba(var(--rgb-espresso), 0.16);
  --line-strong: rgba(var(--rgb-espresso), 0.35);
  --accent-line: rgba(var(--rgb-clay-700), 0.45);
  --accent-line-hi: rgba(var(--rgb-clay-700), 0.60);
  color: var(--ink);
}

/* Обратный случай: тёмная карточка на светлой полосе */
.surface-dark .card,
.surface-dark .kit,
.surface-dark .prop,
.surface-dark .cta {
  --ink: var(--c-sand-050);
  --soft: var(--c-sand-200);
  --muted: var(--c-sand-400);
  --dim: var(--c-sand-500);
  --accent: var(--c-clay-500);
  --accent-2: var(--c-clay-300);
  --wash: rgba(var(--rgb-ink), 0.05);
  --line-weak: rgba(var(--rgb-ink), 0.08);
  --line: rgba(var(--rgb-ink), 0.10);
  --line-mid: rgba(var(--rgb-ink), 0.12);
  --accent-line: rgba(var(--rgb-accent), 0.40);
  --accent-line-hi: rgba(var(--rgb-accent), 0.55);
  color: var(--ink);
}

/* Плашка климата лежит поверх фотографии — остаётся светлой на тёмном */
.theme-light .tier,
.surface-light .tier { color: var(--c-sand-050); }
.theme-light .card:hover .tier,
.surface-light .card:hover .tier { color: var(--c-white); }

/* Поверхности отдельных секций (идут после тем, поэтому перекрывают их) */
.section--models {
  --surface: var(--c-card-light);
  --surface-hover: var(--c-card-light-hi);
  --surface-raised: var(--c-card-light-up);
}
.section--contact {
  --surface: var(--c-forest-cta);
  --surface-hover: #283933;
}

/* 3.4 Карточка модели */
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); }
.card {
  background: var(--surface); border: 1px solid var(--line-weak);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-slow) var(--ease), border-color var(--dur-mid) ease,
              box-shadow var(--dur-slow) ease, background var(--dur-mid) ease;
}
.card:hover {
  transform: translateY(-8px); border-color: var(--accent-line);
  background: var(--surface-hover); box-shadow: var(--shadow-card);
}
.card:hover .card-img { transform: scale(1.05); }
.card:hover .tier { background: var(--accent); color: var(--bg); }
.card-media { position: relative; height: var(--h-card-media); overflow: hidden; }
.card-img { transition: transform var(--dur-slower) var(--ease); }
.tier {
  position: absolute; z-index: 2; top: var(--space-3); left: var(--space-3); pointer-events: none;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: rgba(var(--rgb-bg), 0.6); backdrop-filter: blur(4px);
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.card-body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); flex: 1;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.card-name {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: -0.01em;
}
.card-price { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--dim); }
.card-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3); row-gap: 1px; }
.card-text { margin: 0; font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--muted); text-wrap: pretty; }
.spec {
  /* фон даёт карточка — со своим ячейки не следовали бы за её hover */
  background: transparent; padding: var(--space-2) var(--space-1) var(--space-2) 0;
  border-top: 1px solid var(--line-weak);
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: border-color var(--dur-fast) ease, transform var(--dur) var(--ease);
}
.spec:hover { border-color: var(--accent-line-hi); transform: translateY(-2px); }
.spec-label {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.ask {
  margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1);
  align-self: flex-start; font-size: var(--text-sm); line-height: var(--text-sm-lh);
  font-weight: 600; color: var(--accent); padding-bottom: var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 38% 1px;
  transition: background-size var(--dur-mid) var(--ease), letter-spacing var(--dur) ease, color var(--dur-fast) ease;
}
.ask:hover { background-size: 100% 1px; letter-spacing: 0.03em; color: var(--accent-2); }

/* 3.5 Комплектации и прайс */
.kits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.kit {
  background: var(--surface); padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.kit-num {
  font-family: var(--font-display);
  font-size: var(--text-xs); line-height: var(--text-xs-lh);
  color: var(--accent); letter-spacing: 0.08em;
}
.kit-name { font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: 600; }
.kit-text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); }
/* Кегль подобран так, чтобы «от 1 780 000 ₽» помещалось в одну строку
   даже в самой узкой карточке сетки (minmax 180px). */
.kit-price {
  margin-top: auto; padding-top: var(--space-2);
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-base); line-height: var(--text-base-lh);
  letter-spacing: var(--track-snug); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-note {
  margin: 0; max-width: var(--measure-text);
  font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--dim);
}

/* 3.6 Климат и свойства */
.climates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.climate {
  background: var(--bg); padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: background var(--dur-mid) ease, color var(--dur-mid) ease, padding-left var(--dur-mid) var(--ease);
}
.climate:hover { background: var(--surface-tint); color: var(--accent-2); padding-left: var(--space-6); }
.climate-label {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--accent);
}
.climate-value {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-num); line-height: var(--display-num-lh); letter-spacing: var(--track-tight);
}
.climate-text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); }
.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.prop {
  padding: var(--space-3); background: var(--surface); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: transform var(--dur-mid) var(--ease), background var(--dur-mid) ease, box-shadow var(--dur-mid) ease;
}
.prop:hover { transform: translateY(-8px); background: var(--surface-raised); box-shadow: var(--shadow-raised); }
.prop-title { font-family: var(--font-display); font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: 400; }
.prop-text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); }

/* 3.7 Витрина интерьера */
.showcase { position: relative; height: var(--h-showcase); min-height: var(--h-showcase-min); overflow: hidden; }
.showcase-media { position: absolute; inset: -8%; }
.showcase-slot { height: 100%; }
.showcase-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--rgb-bg), 0.88) 0%, rgba(var(--rgb-bg), 0.25) 55%, rgba(var(--rgb-bg), 0.10) 100%);
}
/* Светлый вариант: под текстом фото уводится почти в крем,
   чтобы тёмный текст читался поверх любой фотографии */
.showcase.theme-light { --bg: var(--c-cream-050); }
.showcase.theme-light .showcase-scrim {
  background: linear-gradient(90deg,
    rgba(var(--rgb-cream), 0.97) 0%, rgba(var(--rgb-cream), 0.85) 40%, rgba(var(--rgb-cream), 0.15) 100%);
}
.showcase-copy {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  max-width: 480px; display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none;
}
.showcase-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--track-snug);
}
.showcase-text { margin: 0; font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--soft); text-wrap: pretty; }

/* 3.8 Применение */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.use-card { display: flex; flex-direction: column; gap: var(--space-3); }
.use-photo {
  position: relative; height: var(--h-use-media); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-radius var(--dur-mid) var(--ease);
}
.use-photo:hover { border-radius: var(--radius-xl); }
.use-photo img { transition: transform var(--dur-slower) var(--ease); }
.use-photo:hover img { transform: scale(1.06); }
.use-body { display: flex; flex-direction: column; gap: var(--space-1); }
.use-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-value); line-height: var(--text-value-lh);
  align-self: flex-start; padding-bottom: var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--dur-mid) var(--ease), color var(--dur-fast) ease;
}
.use-card:hover .use-title { background-size: 100% 1px; color: var(--accent-2); }
.use-text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); text-wrap: pretty; }

/* 3.9 Процесс */
.process {
  border-top: 1px solid var(--line); padding-top: var(--space-8);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5);
}
.process-head { display: flex; flex-direction: column; gap: var(--space-2); }
.process-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-3); line-height: var(--display-3-lh); letter-spacing: var(--track-snug);
}
.step {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-left: var(--space-3); border-left: 1px solid var(--line-mid);
  transition: border-color var(--dur) ease, transform var(--dur-mid) var(--ease), padding-left var(--dur-mid) var(--ease);
}
.step:hover { border-color: var(--accent); transform: translateY(-3px); padding-left: var(--space-4); }
.step-num {
  font-family: var(--font-display);
  font-size: var(--text-xs); line-height: var(--text-xs-lh);
  color: var(--accent); letter-spacing: 0.1em;
}
.step-name { font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: 600; }
.step-text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); }

/* 3.10 Контакты */
.cta {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--surface); padding: clamp(40px, 6vw, 88px);
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy media" "action media";
  gap: var(--space-7); align-items: center;
}
.cta-copy { grid-area: copy; }
.cta-media { grid-area: media; }
.cta-action { grid-area: action; align-self: start; justify-self: start; }
.cta-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--track-snug);
}
.cta-text {
  margin: 0; max-width: var(--measure-side);
  font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--muted); text-wrap: pretty;
}
.cta-media { position: relative; height: var(--h-cta-media); border-radius: var(--radius-lg); overflow: hidden; }
.phone-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.phone-row a {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-lg); line-height: var(--text-lg-lh); letter-spacing: var(--track-snug);
}
.contact-alt { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* 3.12 Текстовые блоки: вводный, домокомплект, сравнение, вопросы */
/* Вводный блок: одна колонка прозы + схема.
   Многоколоночная сетка здесь не годится — текст читался бы поперёк. */
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: center;
}
.intro-copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: 54ch; }
.intro-copy p {
  margin: 0; font-size: var(--text-base); line-height: var(--text-base-lh);
  color: var(--muted); text-wrap: pretty;
}
.intro-copy p strong { color: var(--ink); font-weight: 600; }
.intro-lead { font-size: var(--text-lg) !important; line-height: var(--text-lg-lh) !important; color: var(--soft) !important; }
.intro-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Ролик снят вертикально (540×672). Кадрируем его в горизонтальную рамку —
   так он не задаёт высоту секции и уходит лишнее небо снизу и сверху. */
.intro-figure video {
  width: 100%; height: auto; display: block;
  aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--surface);
}
.intro-figure figcaption {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dim);
}

.promo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5); align-items: center;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-weak);
}
.promo-body { display: flex; flex-direction: column; gap: var(--space-2); }
.promo-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: -0.01em;
}
.promo-text { margin: 0; font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--muted); }
.promo-price {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-num); line-height: var(--display-num-lh);
  letter-spacing: var(--track-tight);
}
.promo-price small {
  display: block; font-family: var(--font-text); font-weight: 400;
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dim);
}


.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-base); line-height: var(--text-base-lh);
  transition: color var(--dur-fast) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq summary:focus-visible { color: var(--accent-2); }
.faq summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: var(--space-1);
  width: 8px; height: 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq-answer {
  padding: 0 0 var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: var(--measure-text);
}
.faq-answer p { margin: 0; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); }

/* 3.13 Модальное окно с заявкой */
.modal {
  width: min(480px, calc(100vw - var(--space-5)));
  padding: 0; border: 0; border-radius: var(--radius-xl);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.modal::backdrop { background: rgba(var(--rgb-bg), 0.72); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.modal-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: -0.01em;
}
.modal-note {
  margin: 0 0 var(--space-1); font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted);
}
.modal-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: var(--space-5); height: var(--space-5);
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.modal-close:hover, .modal-close:focus-visible { color: var(--ink); }
.modal-close span {
  position: absolute; left: 25%; top: 50%; width: 50%; height: 1px; background: currentColor;
}
.modal-close span:first-child { transform: rotate(45deg); }
.modal-close span:last-child { transform: rotate(-45deg); }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label {
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dim);
}
.field-label em { font-style: normal; color: var(--accent); }
.field-input {
  width: 100%; padding: var(--space-2); border-radius: var(--radius-md);
  border: 1px solid var(--line-mid); background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--text-base); line-height: var(--text-base-lh);
  transition: border-color var(--dur-fast) ease;
}
.field-input::placeholder { color: var(--dim); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input:user-invalid { border-color: var(--accent-2); }
.field-area { resize: vertical; min-height: var(--space-8); }
.field-error {
  font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--accent-2);
  min-height: var(--text-xs-lh);
}
/* Ловушка для ботов: убрана с экрана, но не display:none — иначе часть
   ботов её игнорирует. От клавиатуры и скринридеров скрыта отдельно. */
.field-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.modal-submit { margin-top: var(--space-1); justify-content: center; }
.modal-legal { margin: 0; font-size: var(--text-label); line-height: var(--text-label-lh); color: var(--dim); }
.modal-status {
  margin: 0; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--accent-2);
}
.modal-status.is-ok { color: var(--accent); }
.modal[data-sent] .field, .modal[data-sent] .modal-submit,
.modal[data-sent] .modal-legal, .modal[data-sent] .modal-note { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: heroIn var(--dur) var(--ease) both; }
}

/* 3.11 Подвал */
.site-footer {
  margin: 0;
  padding: var(--space-8) var(--gutter) var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-weak);
  font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--dim);
}
.foot-logo {
  font-family: var(--font-display); font-weight: 300; letter-spacing: var(--track-snug);
  color: var(--ink); font-size: var(--text-base); line-height: var(--text-base-lh);
  transition: color var(--dur-fast) ease;
}
.foot-link { color: inherit; }
a.tp-credit {
  color: #c44dff;
  font-weight: 600;
  text-decoration: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  a.tp-credit {
    background-image: linear-gradient(90deg, #1ad4ff 0%, #6b4dff 32%, #c44dff 58%, #1ad4ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: tp-credit-shimmer 3s linear infinite;
    filter: drop-shadow(0 0 8px rgba(107, 77, 255, 0.45));
  }
  a.tp-credit:hover {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes tp-credit-shimmer {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  a.tp-credit { animation: none; background-position: 35% center; }
}

/* --- 4. АДАПТИВ --------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --section-py: var(--space-10);
    --section-gap: var(--space-6);
    --h-card-media: 240px;
  }
  .site-header, .site-header.is-open { mix-blend-mode: normal; }
  .burger { display: block; }
  .logo { font-size: var(--text-xs); max-width: calc(100% - var(--space-7)); }
  .site-nav {
    position: fixed; inset: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: 0; padding: 0 var(--gutter) max(var(--space-6), env(safe-area-inset-bottom));
    background: var(--bg);
    font-size: var(--display-nav-sm);
    font-family: var(--font-display); font-weight: 300;
    letter-spacing: var(--track-tight); line-height: 1.05;
    clip-path: inset(0 0 100% 0); pointer-events: none;
    transition: clip-path 1.05s var(--ease);
  }
  .site-header.is-open .site-nav { clip-path: inset(0 0 -8% 0); pointer-events: auto; }
  .nav-link, .nav-sub-toggle {
    display: block; width: 100%;
    padding: var(--space-2) 0 var(--space-1);
    border-top: 1px solid var(--line);
    background-size: 0% 1px; background-position: 0 100%;
  }
  /* Появление по очереди: считаем прямых детей меню, а не ссылки,
     иначе группа с подменю сбивает нумерацию */
  .site-nav > .nav-link, .site-nav > .nav-group {
    opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0);
  }
  .site-header.is-open .site-nav > * { animation: navReveal 1.15s var(--ease) both; }
  .site-header.is-open .site-nav > *:nth-child(1) { animation-delay: .22s }
  .site-header.is-open .site-nav > *:nth-child(2) { animation-delay: .34s }
  .site-header.is-open .site-nav > *:nth-child(3) { animation-delay: .46s }
  .site-header.is-open .site-nav > *:nth-child(4) { animation-delay: .58s }
  .site-header.is-open .site-nav > *:nth-child(5) { animation-delay: .58s }
  .site-header.is-open .site-nav > *:nth-child(6) { animation-delay: .64s }
  .site-header.is-open .site-nav > *:nth-child(7) { animation-delay: .7s }
  .nav-link:hover, .nav-link:focus-visible { background-size: 100% 1px; color: var(--accent-2); letter-spacing: 0.02em; }

  /* Подменю на телефоне — вложенный список, а не всплывающая панель */
  .nav-group { display: block; width: 100%; }
  .nav-sub-toggle {
    display: flex; align-items: center; justify-content: space-between;
    text-align: left;
  }
  .nav-sub {
    position: static; min-width: 0; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease);
  }
  .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { max-height: 0; }
  .nav-group.is-open .nav-sub { max-height: 320px; }
  .nav-sub-link {
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-radius: 0; gap: 0;
  }
  .nav-sub-title {
    font-size: var(--display-nav-sub-sm); line-height: 1.3;
    letter-spacing: var(--track-snug);
  }
  .nav-sub-note { display: none; }
  .header-phone { display: none; }
  .nav-phone {
    display: block; width: 100%;
    margin-top: var(--space-3); padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 300;
    font-size: var(--display-nav-sub-sm); line-height: 1.3;
    letter-spacing: var(--track-snug); color: var(--accent-2);
  }

  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero-bg { height: 100svh; bottom: auto; }
  .hero-fold { height: 100svh; flex: none; display: flex; flex-direction: column; justify-content: flex-start; overflow: visible; }
  .hero-copy {
    flex: 1; min-height: 0; justify-content: center; gap: var(--space-2);
    padding: calc(var(--space-10) + env(safe-area-inset-top)) var(--gutter) var(--space-3);
  }
  .hero-lead { gap: var(--space-4); }
  .hero-title { font-size: var(--display-hero-sm); }
  .hero-text { font-size: var(--text-base); line-height: var(--text-base-lh); }
  .hero-actions {
    flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    width: auto; gap: var(--space-3); padding: 0;
  }
  .hero-actions .btn-gold, .hero-actions .btn-ghost {
    flex: 0 1 auto; justify-content: center;
    padding: var(--space-2); font-size: var(--text-xs); white-space: nowrap;
  }
  .hero-facts-row { display: block; flex-shrink: 0; }
  .hero-facts-primary { width: 100%; }
  .hero-facts-more { position: absolute; top: 100%; left: 0; width: 100%; padding-bottom: env(safe-area-inset-bottom); }
  .fact { padding: var(--space-2); }
  .section--models {
    padding-top: calc(var(--section-py) + var(--space-12) + env(safe-area-inset-bottom));
  }

  .models, .uses, .climates, .kits, .props { grid-template-columns: 1fr; }
  .cta-grid, .process { grid-template-columns: 1fr; }
  /* на телефоне кнопка уходит под фотографию */
  .cta-grid { grid-template-areas: "copy" "media" "action"; }
  .intro-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .intro-copy { max-width: none; }
  .intro-figure video { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
  .site-nav { clip-path: none !important; }
  .nav-link { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; }
}

/* --- Страница 404 -----------------------------------------------------------
   Всё под .page-error: в общем файле нельзя стилизовать голые main/h1/footer,
   они заденут остальные страницы. */
.page-error {
  min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--font-text);
  font-size: var(--text-base); line-height: var(--text-base-lh);
  color: var(--ink); background: var(--bg);
}
.page-error main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--gutter); gap: var(--space-3);
}
.page-error h1 {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 14vw, 148px); line-height: var(--display-hero-lh);
  letter-spacing: var(--track-tight);
}
.page-error h2 {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-3); line-height: var(--display-3-lh);
  letter-spacing: var(--track-snug); max-width: 20ch;
}
.page-error p { margin: 0; max-width: 56ch; color: var(--muted); }
.page-error .err-links {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.page-error .err-links a {
  padding-bottom: var(--space-half);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) ease;
}
.page-error .err-links a:hover { background-size: 100% 1px; color: var(--accent-2); }
.page-error footer {
  padding: var(--space-3) var(--gutter) var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--dim);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
}
.page-error .err-phone {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  letter-spacing: var(--track-snug); color: var(--ink);
}

/* --- Компоненты внутренних страниц ------------------------------------------
   На одностраничнике их не было: там роль заголовка играл первый экран
   на всю высоту, а крошки и сравнение были не нужны. */

/* Шапка страницы. Отступ сверху рассчитан так, чтобы уйти из-под site-header:
   та лежит абсолютом и занимает примерно 80px. */
.page-head {
  padding: var(--space-16) var(--gutter) var(--section-py);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.page-head-title {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: var(--display-1); line-height: var(--display-1-lh);
  letter-spacing: var(--track-snug); max-width: 18ch;
}
.page-head-lead {
  margin: 0; max-width: var(--measure-lead);
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  color: var(--soft); text-wrap: pretty;
}
.page-head-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-2);
}
.page-head-meta div { display: flex; flex-direction: column; gap: var(--space-half); }
.page-head-meta b {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: var(--text-xl-lh);
}

/* Хлебные крошки */
.crumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li {
  font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--dim);
}
.crumbs li + li::before {
  content: "/"; margin: 0 var(--space-1); color: var(--line-strong);
}
.crumbs a { color: var(--dim); transition: color var(--dur-fast) ease; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--muted); }

/* Сравнение исполнений модели */
.compare-models-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.compare-models { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare-models th, .compare-models td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line-weak);
  text-align: right; vertical-align: top;
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
}
.compare-models thead th {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-base); line-height: var(--text-base-lh);
  letter-spacing: var(--track-snug); color: var(--accent-2); border-top: 0;
}
.compare-models th:first-child, .compare-models td:first-child {
  text-align: left; width: 40%;
}
.compare-models tbody th {
  font-weight: 400; color: var(--dim);
  font-size: var(--text-label); line-height: var(--text-label-lh);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.compare-models tbody td {
  font-family: var(--font-display); font-weight: 300;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.compare-models tbody tr:hover th, .compare-models tbody tr:hover td { background: var(--wash); }
.compare-models .row-price td { font-size: var(--text-value); line-height: var(--text-value-lh); }
.compare-models .cell-same { color: var(--dim); }

@media (max-width: 860px) {
  .page-head { padding-top: var(--space-14); }
}

/* Пиксель Метрики для случая без JS: уводим с экрана, не скрывая совсем */
.ym-pixel { position: absolute; left: -9999px; }