/* ============================================================================
   TAMINOTA · САЙТ V3 · ДС «СЦЕПКА» (ПИЛОТ ДО ШТАМПА КАНОНА)
   Токены подключаются файлами из assets/css/tokens/ — ДОСЛОВНЫЕ копии
   из TAMINOTA-DS-Sczepka/tokens/. Литералы цвета здесь не перепечатываются:
   каждый цвет — var(--…). Единственные пилотные добавки помечены «ПИЛОТ».
   Правила системы: границы 1px · без blur · без градиентов · тени только
   перекрывающим слоям · движение затухание+сдвиг 4/8 · кривая одна.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   БАЗА · сброс и корневые правила страницы.
   Отвечает за: единый box-sizing, фон/цвет страницы из токенов, плавную
   прокрутку к якорям и запрет горизонтального скролла.
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.gsap { scroll-behavior: auto; } /* при ScrollSmoother второе сглаживание не нужно */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background: var(--surface-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* CN-страница: тот же каркас, китайский текст — Noto Sans SC (токен --font-cjk) */
html[lang="zh-CN"] body { font-family: var(--font-cjk); }
html[lang="zh-CN"] .mono, html[lang="zh-CN"] .btn { font-family: var(--font-mono); }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   ТИПОГРАФИКА · роли текста.
   Отвечает за: заголовки Unbounded 400 (жирных нет физически), текст Onest,
   всё исчислимое — JetBrains Mono. Интерлиньяжи кратны 4 (шкала токенов).
   --------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { font-family: var(--font-cjk); font-weight: var(--weight-medium); }
.display { font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); line-height: 1.04; }
h2 { font-size: clamp(var(--text-2xl), 4.6vw, var(--text-4xl)); line-height: 1.12; }
/* В узкой доле 4 колонок крупный h2 не помещается — ступень ниже */
.sec__head.span-4 h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); line-height: var(--leading-3xl); }
h3 { font-size: var(--text-xl); line-height: var(--leading-xl); }
.lead { font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl)); line-height: var(--leading-xl); color: var(--text-secondary); max-width: 56ch; }
.mono { font-family: var(--font-mono); }
/* Оверлайн — mono-ярлык секции капсом: единственное место капса в системе */
.overline {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-brand);
  display: flex; align-items: center; gap: var(--space-12);
}
/* Штрих-ритм 12/4 из разрыва знака — линия перед оверлайном */
.overline::before {
  content: ""; width: 48px; height: 1px; flex: none;
  background: repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 16px);
}

/* ---------------------------------------------------------------------------
   СЕТКА · контейнер 1200, межколонник 24, доли 8/4.
   Отвечает за: горизонтальные поля страницы и стандартные раскладки секций.
   --------------------------------------------------------------------------- */
.container { max-width: calc(var(--width-page) + 2 * var(--space-24)); margin: 0 auto; padding: 0 var(--space-24); }
.grid { display: grid; gap: var(--space-24); }
.grid--split { grid-template-columns: repeat(12, 1fr); }        /* доли 8/4 внутри */
.span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; } .span-12 { grid-column: span 12; }
@media (max-width: 900px) { .span-8, .span-4, .span-6 { grid-column: span 12; } }

/* Секция: вертикальный ярус 168 (токен), на планшете 96, на телефоне 64 */
.sec { padding: var(--space-section) 0; }
@media (max-width: 1200px) { .sec { padding: var(--space-96) 0; } }
@media (max-width: 600px)  { .sec { padding: var(--space-64) 0; } }
.sec__head { display: grid; gap: var(--space-16); margin-bottom: var(--space-64); max-width: 720px; position: relative; z-index: 0; } /* свой стекинг-контекст: призрак с z:-1 остаётся над фоном секции */
/* КОМПОЗИЦИОННАЯ СЕТКА (уровень 3): гигантский призрачный номер секции
   в якорном узле — драматургия номерных бордов «Сцепки». Штрихом, не
   заливкой — по-чертёжному; на тёмных кадрах штрих инверсный */
main { counter-reset: tmnsec; }
.sec__head { counter-increment: tmnsec; }
.sec__head::before {
  content: counter(tmnsec, decimal-leading-zero);
  position: absolute; top: -0.32em; left: -0.04em; z-index: -1;
  font-family: var(--font-mono); font-weight: var(--weight-regular);
  font-size: clamp(calc(var(--grid-cell) * 2), 15vw, calc(var(--grid-cell) * 4.5)); line-height: 1; /* 2–4,5 ячейки модульной сетки */
  color: var(--gray-100); /* сплошная заливка — контуры сняты решением владельца 01.08 */
  pointer-events: none;
}
.sec--dark .sec__head::before { color: var(--border-inverse); }
[data-theme="dark"] .sec__head::before { color: rgba(255,255,255,.08); }
@media (max-width: 600px) { .sec__head::before { display: none; } } /* на телефоне номер съедал бы поля */
@media (max-width: 600px) { .sec__head { margin-bottom: var(--space-40); } }

/* Утопленная зона — фон второго плана.
   МОДУЛЬНАЯ СЕТКА (уровень 1 из трёх): миллиметровка ячейкой 48 — чертёжная
   бумага на светлом, двойник blueprint-сетки тёмных кадров */
.sec--sunken {
  background-color: var(--surface-sunken);
  background-image:
    linear-gradient(90deg, var(--gray-100) 1px, transparent 1px),
    linear-gradient(0deg,  var(--gray-100) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
[data-theme="dark"] .sec--sunken {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,255,255,.05) 1px, transparent 1px);
}

/* ---------------------------------------------------------------------------
   ТЁМНАЯ СЕКЦИЯ · кадры на blue-950 (хиро, контроль, футер).
   Отвечает за: локальную переокраску семантических токенов внутри тёмного
   кадра, чтобы компоненты работали без спец-классов. Лазурит на тёмном —
   только заливка с обводкой; текст и ссылки — лазурит-свет (правило токенов).
   --------------------------------------------------------------------------- */
.sec--dark {
  background: var(--surface-dark);
  --text-primary: #FFFFFF;
  --text-secondary: var(--text-inverse-secondary);
  --text-brand: var(--blue-400);
  --border-default: var(--border-inverse);
  --border-strong: rgba(255,255,255,.28);
  --surface-card: var(--blue-900);
  --surface-sunken: rgba(255,255,255,.04);
  color: var(--text-primary);
}
/* В тёмной теме страницы тёмные кадры не меняются — они уже на blue-950 */

/* Чертёжная сетка фоном тёмного кадра: линии 1px через ячейку 48 (модульная сетка) */
.blueprint {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--border-inverse) 1px, transparent 1px),
    linear-gradient(0deg,  var(--border-inverse) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: .35;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 70% 30%, #000 40%, transparent 100%);
}

/* ---------------------------------------------------------------------------
   ШАПКА · плавающая капсула (референс Terminal, форма — из капсулы кнопок).
   Отвечает за: навигацию, переключатели языка и темы, CTA. Без blur —
   капсула несёт сплошную поверхность и линию 1px.
   --------------------------------------------------------------------------- */
.header { position: fixed; inset: var(--space-16) 0 auto; z-index: 50; }
.header__bar {
  display: flex; align-items: center; gap: var(--space-24);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-24);
  box-shadow: var(--shadow-2); /* перекрывающий слой — тень разрешена */
}
[data-theme="dark"] .header__bar { background: var(--blue-900); }
.header__logo { display: flex; align-items: center; gap: var(--space-12); color: var(--text-primary); }
.header__logo:hover { text-decoration: none; }
.header__logo svg { width: 32px; height: 32px; }
.wordmark {
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wordmark); text-transform: uppercase;
}
html[lang="zh-CN"] .wordmark { font-family: var(--font-display); } /* леттеринг всегда латиницей */
.header__nav { display: flex; gap: var(--space-4); margin-left: auto; }
.header__nav a {
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary);
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill);
  transition: color var(--duration-1) var(--ease), background var(--duration-1) var(--ease);
}
.header__nav a:hover { color: var(--text-primary); background: var(--surface-sunken); text-decoration: none; }
/* Пункт «Заявка» живёт только в мобильном меню — на десктопе дублирует CTA */
.header__nav .nav-request { display: none; }
@media (max-width: 1023px) { .header__nav .nav-request { display: block; color: var(--text-brand); font-weight: var(--weight-medium); } }
/* Переключатель языка: mono-код текущего языка, раскрывает список */
.lang { position: relative; }
.lang__btn {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-secondary); background: none;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-12); cursor: pointer; min-height: 36px;
}
.lang__btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.lang__list {
  position: absolute; top: calc(100% + var(--space-8)); right: 0; min-width: 148px;
  background: var(--surface-card); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-8); box-shadow: var(--shadow-2); padding: var(--space-4);
  display: none; z-index: 60;
}
.lang.open .lang__list { display: block; }
.lang__list a {
  display: flex; justify-content: space-between; gap: var(--space-12);
  font-size: var(--text-sm); color: var(--text-primary);
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-4);
}
.lang__list a:hover { background: var(--surface-sunken); text-decoration: none; }
.lang__list a[aria-current] { color: var(--text-brand); font-weight: var(--weight-medium); }
.lang__list .mono { color: var(--text-secondary); font-size: var(--text-xs); }
/* Переключатель темы: капсула с двумя положениями */
.theme {
  width: 56px; min-height: 32px; border-radius: var(--radius-pill); cursor: pointer;
  border: var(--border-w) solid var(--border-default); background: var(--surface-sunken);
  position: relative; flex: none;
}
.theme::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--color-brand);
  transition: transform var(--duration-2) var(--ease);
}
[data-theme="dark"] .theme::after { transform: translateX(24px); background: var(--blue-400); }
.theme:focus-visible, .lang__btn:focus-visible, .burger:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}
/* Бургер — только мобайл */
.burger { display: none; background: none; border: 0; cursor: pointer; padding: var(--space-8); }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--text-primary); margin: 5px 0; transition: transform var(--duration-2) var(--ease), opacity var(--duration-2) var(--ease); }
@media (max-width: 1023px) {
  .header__nav {
    display: none; position: absolute; top: calc(100% + var(--space-8)); left: 0; right: 0;
    background: var(--surface-card); border: var(--border-w) solid var(--border-default);
    border-radius: var(--radius-8); box-shadow: var(--shadow-2);
    flex-direction: column; padding: var(--space-8);
  }
  .header.nav-open .header__nav { display: flex; }
  .header.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .header.nav-open .burger span:nth-child(2) { opacity: 0; }
  .header.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .burger { display: block; margin-left: auto; }
  .header__nav { margin-left: 0; }
  /* Заявка достижима с любого экрана: компактный CTA остаётся в шапке */
  .header__cta { display: inline-flex; min-height: 36px; padding: var(--space-8) var(--space-16); }
  .theme { width: 44px; }
}

/* ---------------------------------------------------------------------------
   КНОПКИ · капсула, набор JetBrains Mono капсом 12/16 (кнопка — элемент
   спецификации). Hover: снизу вверх за 320мс поднимается СЕРДОЛИК 600 —
   единый цвет отклика; набор переворачивается в белый. Press: сердолик 700,
   сдвиг 1px. У CTA стрелка → сдвигается на 4px.
   --------------------------------------------------------------------------- */
.btn {
  --_rise: var(--copper-700);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium);
  min-height: 44px; padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-pill); border: var(--border-w) solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color var(--duration-3) var(--ease), border-color var(--duration-3) var(--ease);
}
.btn::before { /* поднимающийся сердолик */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--_rise); transform: translateY(101%);
  transition: transform var(--duration-3) var(--ease);
}
.btn:hover { color: #FFFFFF; text-decoration: none; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }
.btn:active::before { background: var(--copper-800); }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn .arr { display: inline-block; transition: transform var(--duration-3) var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary { background: var(--color-brand); color: #FFFFFF; }
.sec--dark .btn--primary { border-color: var(--border-inverse); } /* лазурит на тёмном — заливка с обводкой */
.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-brand); }
.btn--lg { min-height: 52px; padding: var(--space-16) var(--space-32); }

/* ---------------------------------------------------------------------------
   ХИРО · тёмный кадр на всю высоту окна: этап 1 воронки.
   Отвечает за: заголовок-факт, строку обещаний числами, два CTA и
   знак-чертёж с размерными линиями (геометрия знака: R8 · штрих 4 · шаг 12).
   --------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-24); align-items: center; flex: 1; padding-top: 104px; padding-bottom: var(--space-32); }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: var(--space-24); }
.hero__draft { grid-column: 8 / span 5; position: relative; }
@media (max-width: 900px) {
  .hero .container { padding-top: 104px; }
  .hero__copy { grid-column: span 12; }
  .hero__draft { grid-column: span 12; max-width: 420px; margin: 0 auto; }
}
.hero__promise { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
.hero__promise span {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary);
}
.hero__promise b { color: var(--text-brand); font-weight: var(--weight-medium); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; }
/* Знак-чертёж: SVG с выносными и размерными линиями рисуется в разметке;
   здесь — медленная дорисовка контура колец при загрузке */
.hero__draft svg { width: 100%; height: auto; }
.draft-ring { stroke-dasharray: 12 4; }
.draft-dim { opacity: 0; animation: draft-in var(--duration-3) var(--ease) forwards; }
.draft-dim:nth-of-type(2) { animation-delay: 200ms; }
.draft-dim:nth-of-type(3) { animation-delay: 400ms; }
@keyframes draft-in { from { opacity: 0; transform: translateY(var(--shift-2)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .draft-dim { animation: none; opacity: 1; } }

/* ---------------------------------------------------------------------------
   ЛЕНТА-ДАТАЛАЙН · бегущая строка позиций-образцов внизу хиро: этап 1→2.
   Отвечает за: язык артикулов с первой секунды. Помечена «ОБРАЗЕЦ» — лоты
   не выдаются за живые. Бег — линейный, слева направо запуск справа.
   --------------------------------------------------------------------------- */
.ticker { position: relative; z-index: 2; border-top: var(--border-w) solid var(--border-default); overflow: hidden; padding: var(--space-16) 0; }
.ticker__track { display: flex; gap: var(--space-64); width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
}
.ticker b { color: var(--text-brand); font-weight: var(--weight-regular); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------------------------------------------------------------------------
   ПРОЦЕСС 01–04 · четыре шага глаголами процесса: этап 2 воронки.
   Отвечает за: прозрачность работы бюро. Номера — mono, линия между шагами —
   штрих-ритм 12/4 из разрыва знака.
   --------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--space-24); display: grid; gap: var(--space-12); align-content: start; }
.step::before { /* линия этапа — штрих 12/4 */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 12px, transparent 12px 16px);
}
.step__num {
  font-family: var(--font-mono); font-size: clamp(var(--text-2xl), 3.4vw, var(--text-3xl)); line-height: var(--leading-3xl);
  color: var(--text-brand);
}
.step h3 { font-size: var(--text-lg); line-height: var(--leading-lg); }
.step p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ---------------------------------------------------------------------------
   КАРТОЧКИ-РАМКИ · вариант frame: чертёжные уголки 12×1 вместо контура,
   радиус 0, hover — сердолик (правило карточек системы). Этап 2→3: линии
   продукта P1/P2/P3 и отрасли.
   --------------------------------------------------------------------------- */
.frame { position: relative; padding: var(--space-32); background: transparent; overflow: hidden; }
/* Гигант-цифра карточки (композиционная сетка): штриховой номер по нижней
   кромке, на ховере вспыхивает сердоликом вместе с уголками */
.grid--split { counter-reset: tmnfr; }
.frame { counter-increment: tmnfr; }
.frame::before {
  content: counter(tmnfr, decimal-leading-zero);
  position: absolute; right: var(--space-8); bottom: -0.18em; z-index: 0;
  font-family: var(--font-mono); font-size: calc(var(--grid-cell) * 2); line-height: 1; /* 2 ячейки модульной сетки */
  color: var(--gray-100); /* сплошная заливка — контуры сняты решением владельца 01.08 */
  pointer-events: none; transition: color var(--duration-2) var(--ease);
}
.frame:hover::before { color: var(--copper-300); }
.sec--dark .frame::before { color: var(--border-inverse); }
.frame > * { position: relative; z-index: 1; }
.frame i.c { z-index: 2; }
.frame i.c { position: absolute; width: 12px; height: 12px; border: 0 solid var(--border-strong); transition: border-color var(--duration-2) var(--ease); pointer-events: none; }
.frame i.c1 { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame i.c2 { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i.c3 { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame i.c4 { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.frame:hover i.c { border-color: var(--color-accent); }
.frame__tag {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand);
}
.frame h3 { margin: var(--space-12) 0; }
.frame p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.frame .mono-line { margin-top: var(--space-16); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-secondary); font-family: var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   ТАБЛИЦА-СПЕЦИФИКАЦИЯ · контент строится как спецификация: чек инспекции
   и данные в тёмном кадре «Контроль». Радиус таблиц — 0, линии 1px.
   --------------------------------------------------------------------------- */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: var(--space-12) var(--space-16); border-bottom: var(--border-w) solid var(--border-default); vertical-align: top; }
.spec th {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.spec td { font-size: var(--text-sm); line-height: var(--leading-sm); }
.spec .num { font-family: var(--font-mono); color: var(--text-brand); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   КОНТРОЛЬ-СЦЕНА · композиция по референсу владельца (wembi.ai): слева
   кадр во весь рост, справа крупный mono-номер шага, две линии, заголовок
   точки на лазуритовой плашке (заливка с обводкой — правило лазурита на
   тёмном), короткий текст. Скролл листает шаги 01→04, подменяя кадр,
   номер, плашку и текст. Сцену строит site.js из строк таблицы; шапка
   секции и таблица в режиме сцены скрыты, таблица — запасной путь.
   --------------------------------------------------------------------------- */
.ctrl2 { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-48); align-items: center; }
.ctrl2__photo { border-radius: var(--radius-8); overflow: hidden; border: var(--border-w) solid var(--border-default); margin: 0; }
.ctrl2__photo img { width: 100%; height: 100%; max-height: 64vh; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ctrl2__body { display: grid; gap: var(--space-16); align-content: center; }
/* Номер шага: крупный mono, размер от ячейки модульной сетки (2–3 ячейки) */
.ctrl2__num {
  font-family: var(--font-mono); line-height: 1; color: var(--text-primary);
  font-size: clamp(calc(var(--grid-cell) * 2), 10vw, calc(var(--grid-cell) * 3));
}
/* Заголовок точки: между двумя линиями, на лазуритовой плашке */
.ctrl2__title { border-top: var(--border-w) solid var(--border-default); border-bottom: var(--border-w) solid var(--border-default); padding: var(--space-16) 0; }
.ctrl2__title span {
  display: inline; font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(var(--text-2xl), 3.6vw, var(--text-4xl)); line-height: 1.24;
  background: var(--blue-500); border: var(--border-w) solid var(--border-inverse);
  color: #FFFFFF; padding: 0 var(--space-16);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ctrl2__text { font-size: var(--text-xl); line-height: var(--leading-xl); color: var(--text-secondary); max-width: 44ch; }
@media (max-width: 1023px) { .ctrl2 { display: none; } } /* сцена — только десктоп */

/* ---------------------------------------------------------------------------
   ЧИСЛА-ОБЕЩАНИЯ · Stat: 48 ч · 5 дней · 24 ч. Этап 3 воронки.
   Отвечает за: обещания сервиса числами. Числа — mono, счётчик оживает
   при входе в кадр (JS), подпись — тихим текстом.
   --------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); position: relative; }
/* Призрак знака фоном (композиционная сетка): два кольца-контура по правой
   кромке; цвет в data-URI — литерал gray-200 #DBE0E9 из палитры токенов */
.stats::before, .footer .container::before {
  content: ""; position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: 40%; aspect-ratio: 2 / 1; z-index: 0; pointer-events: none; opacity: .3;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><g fill="none" stroke="%23DBE0E9" stroke-width="3"><circle cx="26" cy="16" r="8"/><circle cx="38" cy="16" r="8"/></g></svg>') no-repeat center / contain;
}
.stats > * { position: relative; z-index: 1; }
.footer .container { position: relative; }
.footer .container::before {
  opacity: .35; width: 36%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><g fill="none" stroke="rgba(255,255,255,0.14)" stroke-width="3"><circle cx="26" cy="16" r="8"/><circle cx="38" cy="16" r="8"/></g></svg>');
}
.footer .container > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .stats::before, .footer .container::before { display: none; } }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: var(--space-32); border-left: var(--border-w) solid var(--border-default); display: grid; gap: var(--space-8); align-content: start; }
.stat__num { font-family: var(--font-mono); font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); line-height: 1; color: var(--text-brand); display: flex; align-items: baseline; gap: var(--space-8); }
.stat__num small { font-size: var(--text-lg); color: var(--text-secondary); font-family: var(--font-mono); }
.stat__label { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); max-width: 32ch; }

/* ---------------------------------------------------------------------------
   ГАРАНТИЯ · тёмный кадр: снятие страха предоплаты (этап 4).
   Отвечает за: два факта гарантии крупно, без прилагательных.
   --------------------------------------------------------------------------- */
.guarantee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
@media (max-width: 900px) { .guarantee { grid-template-columns: 1fr; } }
.guarantee .frame { padding: var(--space-40) var(--space-32); }
.guarantee h3 { font-size: var(--text-lg); line-height: var(--leading-lg); margin: var(--space-16) 0 var(--space-8); }

/* ---------------------------------------------------------------------------
   ФОРМА ЗАЯВКИ · захват: артикул/фото/чертёж + контакт. Этапы 1 и 3.
   Отвечает за: минимальные поля, фокус «линия чертежа» (дорисовка 2px снизу
   за 320мс + кольцо blue-100), отправку в собственный приёмник ПУЛЬТ.
   --------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-24); }
.field { display: grid; gap: var(--space-8); position: relative; }
.field label { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--text-primary); background: var(--surface-card);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-4);
  padding: var(--space-12) var(--space-16); min-height: 48px; width: 100%;
}
.field textarea { min-height: 112px; resize: vertical; }
/* Фокус поля: второго outline нет — линия чертежа + кольцо */
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; box-shadow: 0 0 0 3px var(--blue-100);
}
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field textarea:focus { box-shadow: 0 0 0 3px var(--blue-800); }
.field .draw { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-brand); transition: transform var(--duration-3) var(--ease); pointer-events: none; }
.field:focus-within .draw { transform: scaleX(1); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.check { display: flex; gap: var(--space-12); align-items: flex-start; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-brand); flex: none; }
/* Ответ формы: номер заявки или фоллбэк-контакты */
.form__done { display: none; padding: var(--space-24); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-8); }
/* Ошибка — гранатом, не шёпотом; успех остаётся нейтральным */
.form__done.error { border-color: var(--red-200); background: var(--red-50); color: var(--red-700); }
[data-theme="dark"] .form__done.error { background: rgba(255,255,255,.04); border-color: var(--red-500); color: var(--red-200); }
.field.err input, .field.err textarea { border-color: var(--red-500); }
.field.err label { color: var(--red-600); }
[data-theme="dark"] .field.err label { color: var(--red-200); }
.form__done.show { display: block; }
.form__done .num { font-family: var(--font-mono); color: var(--text-brand); }
/* Спиннер-сцепка: кольцо dasharray 12/4, вращение 0.8s linear — механика статуса */
.spinner { width: 16px; height: 16px; flex: none; display: none; }
.btn.busy .spinner { display: block; }
.btn.busy .arr { display: none; }
.spinner circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 12 4; }
.spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ФУТЕР · тёмный кадр blue-950: реквизиты, языки, каналы. Этап 2 (живая
   компания). Знак на тёмном — белая версия (правило борда 5.0).
   --------------------------------------------------------------------------- */
.footer { padding: var(--space-96) 0 var(--space-48); }
.footer__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-24); margin-bottom: var(--space-64); }
.footer__brand { grid-column: span 5; display: grid; gap: var(--space-24); align-content: start; }
.footer__col { grid-column: span 2; display: grid; gap: var(--space-12); align-content: start; }
.footer__col--wide { grid-column: span 3; }
@media (max-width: 900px) { .footer__brand, .footer__col, .footer__col--wide { grid-column: span 12; } }
.footer__col .overline::before { display: none; }
.footer a { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.footer a:hover { color: var(--text-primary); }
.footer .mono-fact { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.footer__bottom { border-top: var(--border-w) solid var(--border-default); padding-top: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: space-between; align-items: center; }

/* ---------------------------------------------------------------------------
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ · затухание + сдвиг 8px, каскад 40мс (хореография
   бордов системы). Без масштабирования и bounce. reduced-motion — всё видно.
   --------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(var(--shift-2)); transition: opacity var(--duration-3) var(--ease), transform var(--duration-3) var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
/* При активном GSAP (html.gsap) CSS-переход отключается — иначе анимация двоится */
html.gsap .rv { transition: none; }

/* ---------------------------------------------------------------------------
   ПАТТЕРН «УЗЕЛ» · круглые точки пересечения колец, фон второго плана
   в утопленных зонах. Низкий контраст, в интерфейсе не используется.
   --------------------------------------------------------------------------- */
.dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--gray-200) 1.5px, transparent 1.5px);
  background-size: 48px 48px;
}
.sec--dark .dots { background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); }

/* ---------------------------------------------------------------------------
   ФОТОБЛОК · бенто-галерея среды производства: доминанта 8 колонок + два
   спутника по 4. Кадры генеративные — подпись-даталайн честно помечает
   «среда», не отчёт инспекции (правило канона). Радиус кадров 8.
   Композиция сверена с галереями 21st.dev, собрана на токенах «Сцепки».
   --------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-24); }
.gallery__item { position: relative; border-radius: var(--radius-8); overflow: hidden; background: var(--surface-sunken); }
.gallery__item--main { grid-column: span 8; grid-row: span 2; }
.gallery__item--side { grid-column: span 4; }
@media (max-width: 900px) {
  .gallery__item--main { grid-column: span 12; }
  .gallery__item--side { grid-column: span 6; }
}
@media (max-width: 600px) { .gallery__item--side { grid-column: span 12; } }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item--main img { aspect-ratio: 16 / 10; }
.gallery__item--side img { aspect-ratio: 16 / 9.6; }
/* Подпись кадра: mono капсом на графитовой плашке по нижней кромке */
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #FFFFFF;
  background: var(--overlay); padding: var(--space-8) var(--space-16);
}
/* Строка честности под галереей: кадры — среда, не пруф */
.gallery-note {
  margin-top: var(--space-16);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   МАРШРУТ · таймлайн пути груза по канонической цепочке статусов
   (размещён → инспекция → отгрузка → таможня → склад, TMN-MKT-01 §01).
   Пять узлов: фото сверху, узел-кольцо на штрих-линии, статус mono капсом.
   Композиция сверена с order-tracking таймлайнами 21st.dev.
   --------------------------------------------------------------------------- */
.route { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-24); }
@media (max-width: 1200px) { .route { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .route { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .route { grid-template-columns: 1fr; } }
.route__stage { display: grid; gap: var(--space-12); align-content: start; }
.route__photo { border-radius: var(--radius-8); overflow: hidden; background: var(--surface-sunken); }
.route__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Узел на линии: кольцо из знака (разрыв ¼) + штрих-линия 12/4 через весь ряд */
.route__node { position: relative; height: 24px; display: flex; align-items: center; }
.route__node::before {
  content: ""; position: absolute; left: 0; right: calc(-1 * var(--space-24)); top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 12px, transparent 12px 16px);
}
.route__stage:last-child .route__node::before { right: 0; }
.route__node svg { position: relative; background: var(--surface-page); border-radius: 50%; }
.route__status {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand);
}
.route__stage p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   ПАРТНЁРЫ · сетка профилей заводов 4×2 в чертёжной манере: линии 1px через
   gap-приём (зазор 1px, фон — цвет линии), «+» на внутренних узлах сетки —
   как центры на знаке-чертеже. Имён нет: состав партнёрств не публикуется
   (гриф TMN-BP-02), карточка ведёт на страницу профиля направления.
   Композиция — logo-cloud 21st.dev, код свой на токенах «Сцепки».
   Ховер = кликабельность: фон, сердолик, подпись «Профиль →» поднимается.
   --------------------------------------------------------------------------- */
.partners {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--border-w);
  background: var(--border-default);
  border: var(--border-w) solid var(--border-default);
}
@media (max-width: 900px) { .partners { grid-template-columns: repeat(2, 1fr); } }
.partner {
  position: relative; display: grid; gap: var(--space-8); align-content: start;
  background: var(--surface-page); padding: var(--space-24);
  min-height: 132px; color: var(--text-primary);
}
/* Живая карта завода: доминанта 2×2, ховер — буквально кнопочный:
   сердолик поднимается снизу заливкой за 320мс, весь текст переворачивается
   в белый (решение владельца 31.07: «заметный, как у кнопок») */
.partner--live {
  grid-column: span 2; grid-row: span 2; cursor: pointer;
  align-content: space-between; overflow: hidden; isolation: isolate;
  transition: color var(--duration-3) var(--ease);
}
.partner--live::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--copper-700); transform: translateY(101%);
  transition: transform var(--duration-3) var(--ease);
}
.partner--live:hover, .partner--live:focus-visible { color: #FFFFFF; text-decoration: none; }
.partner--live:hover::before, .partner--live:focus-visible::before { transform: translateY(0); }
.partner--live:hover .partner__num, .partner--live:hover .partner__sub, .partner--live:hover .partner__go,
.partner--live:focus-visible .partner__num, .partner--live:focus-visible .partner__sub, .partner--live:focus-visible .partner__go { color: #FFFFFF; }
.partner--live:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
@media (max-width: 900px) { .partner--live { grid-column: span 2; grid-row: auto; } }
/* Словмарк завода: набор нашей типографикой до получения фирменного файла */
.partner__mark {
  font-family: var(--font-display); font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
  line-height: var(--leading-2xl); letter-spacing: var(--tracking-wordmark); text-transform: uppercase;
}
.partner__sub { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); transition: color var(--duration-3) var(--ease); max-width: 40ch; }
/* Слот «завод на переговорах»: приглушён, некликабелен */
.partner--slot { color: var(--text-secondary); cursor: default; }
.partner--slot .partner__name { font-weight: var(--weight-regular); color: var(--text-secondary); }
.partner__num {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); color: var(--text-secondary);
  transition: color var(--duration-3) var(--ease);
}
.partner__name { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
/* Подпись действия на живой карте: всегда видна, mono капсом со стрелкой */
.partner__go {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent);
  transition: color var(--duration-3) var(--ease);
}
.partner__go .arr { display: inline-block; transition: transform var(--duration-3) var(--ease); }
.partner--live:hover .partner__go .arr { transform: translateX(4px); }
/* «+» на внутренних узлах сетки: у ячеек 1–3 на десктопе, 1·3·5 на мобиле */
.partner::after {
  content: "+"; position: absolute; right: -7px; bottom: -13px; z-index: 2;
  font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1;
  color: var(--text-secondary); background: var(--surface-page);
  padding: 2px; pointer-events: none; display: none;
  transition: color var(--duration-2) var(--ease);
}
.partner:hover::after { color: var(--text-accent); }
/* Узел «+» — на единственном четырёхстороннем пересечении внутренних линий:
   правый нижний угол первого слота (и на десктопе 4×2, и на мобиле 2×N) */
.partners .partner:nth-child(2)::after { display: block; }

/* ---------------------------------------------------------------------------
   FAQ · аккордеон в доле 4/8: вопросы — этап «решает» воронки (страхи
   предоплаты, брака, цены). Номер mono, глиф «+» поворачивается в «×»,
   панель раскрывается за 320мс. Композиция — двухколонный FAQ 21st.dev.
   --------------------------------------------------------------------------- */
.faq { border-top: var(--border-w) solid var(--border-default); }
.faq__item { border-bottom: var(--border-w) solid var(--border-default); position: relative; }
/* Лазуритовая линия-индикатор открытого пункта: рисуется сверху вниз (GSAP) */
.faq__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-16)); top: var(--space-16); bottom: var(--space-16);
  width: 2px; background: var(--color-brand); transform: scaleY(0); transform-origin: top;
}
.faq__item.open::before { transform: scaleY(1); transition: transform var(--duration-3) var(--ease); }
/* Ховер вопроса: сдвиг 4px (дистанция ДС) и сердоликовый номер */
.faq__q > span:nth-child(2) { transition: transform var(--duration-2) var(--ease); }
.faq__q:hover > span:nth-child(2) { transform: translateX(var(--shift-1)); }
.faq__q:hover .faq__num { color: var(--text-accent); }
.faq__num { transition: color var(--duration-2) var(--ease); }
.faq__q {
  width: 100%; display: flex; align-items: baseline; gap: var(--space-16);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-lg);
  font-weight: var(--weight-medium); color: var(--text-primary);
  padding: var(--space-24) 0;
}
.faq__q:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.faq__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-brand); flex: none; }
/* Глиф «+»: две линии 1.5px, поворот в «×» при открытии */
.faq__x { margin-left: auto; flex: none; width: 16px; height: 16px; position: relative; align-self: center; transition: transform var(--duration-3) var(--ease); }
.faq__x::before, .faq__x::after { content: ""; position: absolute; background: var(--text-secondary); }
.faq__x::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.faq__x::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.faq__item.open .faq__x { transform: rotate(45deg); }
/* Панель ответа: высота анимируется grid-строкой 0fr→1fr — без перекладки
   макета (max-height дёргал reflow каждый кадр), замер высоты не нужен */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-3) var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }
.faq__a p { overflow: hidden; min-height: 0; color: var(--text-secondary); padding: 0 var(--space-32) 0 0; max-width: 68ch; margin-left: calc(var(--space-16) + 24px); }
.faq__item.open .faq__a p { padding-bottom: var(--space-24); }
@media (max-width: 600px) { .faq__a p { margin-left: 0; } }

/* ---------------------------------------------------------------------------
   КАТАЛОГ · два направления с фильтрами (структура перенесена со старого
   прода taminota.com: поиск + фасеты + «соберите список — запросите цену»).
   Раскладка 3+9: узкая колонка фильтров слева, сетка позиций справа.
   Данные — assets/data/catalog.json (заменит ПУЛЬТ этапом 2).
   --------------------------------------------------------------------------- */
.cat-layout { display: grid; grid-template-columns: 3fr 9fr; gap: var(--space-24); align-items: start; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } }
/* Колонка фильтров: группы-фасеты с mono-заголовками капсом */
.facets { display: grid; gap: var(--space-24); position: sticky; top: 96px; }
@media (max-width: 900px) { .facets { position: static; } }
.facet { border-top: var(--border-w) solid var(--border-default); padding-top: var(--space-16); display: grid; gap: var(--space-8); }
.facet__title {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary);
}
.facet .check { font-size: var(--text-sm); }
/* Поиск по артикулу: поле с линией чертежа, как в форме */
.cat-search { position: relative; }
.cat-search input {
  font: inherit; color: var(--text-primary); background: var(--surface-card);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-4);
  padding: var(--space-12) var(--space-16); min-height: 48px; width: 100%;
}
.cat-search input:focus { outline: none; box-shadow: 0 0 0 3px var(--blue-100); }
[data-theme="dark"] .cat-search input:focus { box-shadow: 0 0 0 3px var(--blue-800); }
/* Сетка позиций: интерактивные карточки — линия темнее и подъём 4px (канон) */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
@media (max-width: 1200px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }
.item {
  background: var(--surface-card); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-8); padding: 0; overflow: hidden;
  display: grid; align-content: start; position: relative;
  transition: border-color var(--duration-2) var(--ease), transform var(--duration-2) var(--ease);
}
.item:hover { border-color: var(--border-strong); transform: translateY(calc(-1 * var(--shift-1))); }
/* Кадр категории сверху карточки: 4:3, серия «среда» — не фото конкретного лота */
.item__photo { background: var(--surface-sunken); }
.item__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.item__body { padding: var(--space-24); display: grid; gap: var(--space-12); align-content: start; }
.item__spec {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand);
}
.item__name { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.item__meta { display: flex; flex-wrap: wrap; gap: var(--space-8); }
/* Метка наличия: малахит для склада, гранит для «под заказ» — статус фактом */
.chip {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border-radius: var(--radius-2); padding: 2px var(--space-8);
}
.chip--stock { color: var(--green-600); background: var(--green-50); }
.chip--order { color: var(--text-secondary); background: var(--surface-sunken); }
[data-theme="dark"] .chip--stock { color: var(--green-200); background: rgba(255,255,255,.06); }
/* Чекбокс «в список» на карточке */
.item .check { margin-top: var(--space-4); }
/* Счётчик результатов и пустое состояние */
.cat-count { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-16); }
.cat-empty { padding: var(--space-48); text-align: center; color: var(--text-secondary); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-8); grid-column: 1 / -1; }
/* Плавающая панель списка: появляется, когда отмечена хоть одна позиция */
.listbar {
  position: fixed; left: 50%; bottom: var(--space-24); transform: translateX(-50%) translateY(96px);
  display: flex; align-items: center; gap: var(--space-16); z-index: 40;
  background: var(--surface-card); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-24);
  box-shadow: var(--shadow-2); transition: transform var(--duration-3) var(--ease);
}
.listbar.show { transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .listbar { background: var(--blue-900); }
.listbar__count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); white-space: nowrap; }
/* Развилка каталога: две крупные карты направлений с кнопочным ховером */
.cat-fork { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
@media (max-width: 900px) { .cat-fork { grid-template-columns: 1fr; } }
.cat-fork .partner--live { grid-column: auto; grid-row: auto; min-height: 200px; border: var(--border-w) solid var(--border-default); }

/* ---------------------------------------------------------------------------
   ДОСТУПНОСТЬ · пропуск к содержимому и видимый фокус ссылок.
   --------------------------------------------------------------------------- */
.skip {
  position: absolute; left: var(--space-24); top: -48px; z-index: 100;
  background: var(--color-brand); color: #fff; padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-4); transition: top var(--duration-2) var(--ease);
}
.skip:focus { top: var(--space-8); }
a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-2); }

/* Печать: всегда светлая, служебное скрыто */
@media print {
  .header, .ticker, .theme, .lang, .skip { display: none; }
  .sec--dark { background: #fff; --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-brand: var(--blue-600); }
}

/* ---------------------------------------------------------------------------
   МАРШРУТ-ЧЕРТЁЖ · «живой чертёж пути» (решение владельца 31.07): при GSAP
   на десктопе сетка статусов заменяется пин-сценой — штрих-линия маршрута
   рисуется по скроллу (DrawSVG), по ней едет маркер-груз (MotionPath),
   узлы-кольца загораются лазуритом, справа живая карточка статуса.
   Узлы кликабельны. Сцену строит site.js из данных сетки — без GSAP
   и на мобильном остаётся обычная сетка.
   --------------------------------------------------------------------------- */
.routemap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-48); align-items: center; }
.routemap__svg { width: 100%; height: auto; overflow: visible; }
/* Линия-подложка: карандашный след будущего пути */
.rm-base { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 12 4; }
/* Прогресс: пройденная часть пути рисуется лазуритом */
.rm-prog { fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-dasharray: 12 4; }
/* Узел: кольцо на белой подложке, ядро загорается при прохождении */
.rm-node { cursor: pointer; }
.rm-node .rm-ring { fill: var(--surface-page); stroke: var(--border-strong); stroke-width: 1.5; transition: stroke var(--duration-2) var(--ease); }
.rm-node .rm-core { fill: transparent; transition: fill var(--duration-2) var(--ease); }
.rm-node.on .rm-ring { stroke: var(--color-brand); stroke-width: 2; }
.rm-node.on .rm-core { fill: var(--color-brand); }
.rm-node text {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps);
  fill: var(--text-secondary); text-transform: uppercase;
}
.rm-node.on text { fill: var(--text-brand); }
/* Маркер-груз: мини-кольцо знака едет по пути */
.rm-marker .rm-m-ring { fill: var(--surface-page); stroke: var(--color-brand); stroke-width: 4; stroke-dasharray: 12 4; }
.rm-marker .rm-m-dot { fill: var(--text-primary); }
/* Карточка активного статуса: фото + счётчик + статус + текст */
.routemap__card {
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-8);
  background: var(--surface-card); overflow: hidden; display: grid;
}
.routemap__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.routemap__body { padding: var(--space-24); display: grid; gap: var(--space-8); }
.routemap__idx { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); color: var(--text-secondary); }
.routemap__status { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.routemap__text { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-md); }
@media (max-width: 1023px) { .routemap { display: none; } } /* сцена — только десктоп */
/* Режим сцены: секция ужимается, чтобы весь чертёж помещался в пин-экран */
.route--map { padding: var(--space-120) 0 var(--space-48); }
.route--map .sec__head { margin-bottom: var(--space-24); }
.route--map .sec__head h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); }
.route--map .sec__head .lead { display: none; } /* карточка сцены говорит сама */
.routemap__svg { max-height: 56vh; }

/* ============================================================================
   АВВВАРДС-РЕФОРМА · распоряжение владельца 31.07.2026 (вечерний бриф):
   контейнер шире · типографика гигантом · вся палитра камней в работе ·
   свечения тёмных кадров · магнитные кнопки · наклон карточек · прожектор
   по курсору. Возражение исполнителя зафиксировано: свечения, магнит и
   наклон входят в запреты ДС — выполнено прямым распоряжением поверх
   канона. Литералов палитры нет: полутона — color-mix от токенов.
   ============================================================================ */

/* Контейнер: 1400 вместо 1200 — поле у кромки, содержимое работает на кадр */
:root { --width-page: 1400px; }
.container { max-width: calc(var(--width-page) + 2 * var(--space-24)); }

/* Выделение текста — лазурит: мелочь, по которой узнают собранный сайт */
::selection { background: var(--blue-500); color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   ТИПОГРАФИКА-ГИГАНТ · дисплей до 118, h2 до 64. Кегль сам держит вес —
   строки дисплея встают друг под другом, средняя — штрихом (контур).
   --------------------------------------------------------------------------- */
.display { font-size: clamp(34px, 5.7vw, 86px); line-height: 1.04; letter-spacing: -0.02em; }
.display > span { display: block; }
/* Акцентная строка заголовка: сплошной цвет бренда
   (контур снят решением владельца 01.08 — «важные тексты цветом бренда») */
.display .hl { color: var(--text-brand); }
h2 { font-size: clamp(var(--text-2xl), 4.4vw, 64px); line-height: 1.08; }
.lead { font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl)); }
/* Лента-даталайн укрупнена — на правах носителя, не сноски */
.ticker { padding: var(--space-24) 0; }
.ticker span { font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   ХИРО ВО ВСЮ ШИРИНУ · заголовок занимает все 12 колонок, знак-чертёж
   уходит фоновым слоем вправо — текст работает поверх него.
   --------------------------------------------------------------------------- */
.hero__copy { grid-column: 1 / -1; position: relative; z-index: 2; }
.hero__draft {
  position: absolute; right: 0; top: 50%; transform: translateY(-56%);
  width: 42%; max-width: 600px; opacity: .5; z-index: 1; pointer-events: none;
  grid-column: auto;
}
@media (max-width: 900px) { .hero__draft { display: none; } }

/* Обещания сервиса — mono-чипы с камнями палитры: каждый факт своим цветом */
.hero__promise { gap: var(--space-12); }
.hero__promise span {
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16);
}
.hero__promise span:nth-child(1) b { color: var(--blue-400); }
.hero__promise span:nth-child(2) b { color: var(--teal-200); }
.hero__promise span:nth-child(3) b { color: var(--copper-300); }
.hero__promise span:nth-child(4) b { color: var(--green-200); }

/* ---------------------------------------------------------------------------
   СВЕЧЕНИЯ ТЁМНЫХ КАДРОВ · лазуритовое дыхание сверху, сердоликовый отсвет
   снизу — полутона строятся color-mix от токенов, литералов нет.
   --------------------------------------------------------------------------- */
.sec--dark { position: relative; }
.sec--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 42% at 80% 8%, color-mix(in srgb, var(--blue-500) 30%, transparent), transparent 70%),
    radial-gradient(40% 36% at 6% 96%, color-mix(in srgb, var(--copper-500) 14%, transparent), transparent 72%);
}
.sec--dark > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   ПАЛИТРА КАМНЕЙ В РАБОТЕ · шаги, линии P1–P3, числа-обещания и статусы
   получают каждый свой минерал — не «синий сайт с серым текстом».
   --------------------------------------------------------------------------- */
/* Шаги процесса 01–04: лазурит → бирюза → сердолик → малахит */
.step:nth-child(1) .step__num { color: var(--blue-600); }
.step:nth-child(2) .step__num { color: var(--teal-600); }
.step:nth-child(3) .step__num { color: var(--copper-600); }
.step:nth-child(4) .step__num { color: var(--green-600); }
[data-theme="dark"] .step:nth-child(1) .step__num { color: var(--blue-400); }
[data-theme="dark"] .step:nth-child(2) .step__num { color: var(--teal-200); }
[data-theme="dark"] .step:nth-child(3) .step__num { color: var(--copper-300); }
[data-theme="dark"] .step:nth-child(4) .step__num { color: var(--green-200); }
.step:nth-child(1)::before { background: repeating-linear-gradient(90deg, var(--blue-300) 0 12px, transparent 12px 16px); }
.step:nth-child(2)::before { background: repeating-linear-gradient(90deg, var(--teal-200) 0 12px, transparent 12px 16px); }
.step:nth-child(3)::before { background: repeating-linear-gradient(90deg, var(--copper-200) 0 12px, transparent 12px 16px); }
.step:nth-child(4)::before { background: repeating-linear-gradient(90deg, var(--green-200) 0 12px, transparent 12px 16px); }
/* Три линии P1–P3: ярлык и уголки каждой — своим камнем */
#lines .frame:nth-child(1) .frame__tag { color: var(--blue-600); }
#lines .frame:nth-child(2) .frame__tag { color: var(--green-600); }
#lines .frame:nth-child(3) .frame__tag { color: var(--teal-700); }
[data-theme="dark"] #lines .frame:nth-child(1) .frame__tag { color: var(--blue-400); }
[data-theme="dark"] #lines .frame:nth-child(2) .frame__tag { color: var(--green-200); }
[data-theme="dark"] #lines .frame:nth-child(3) .frame__tag { color: var(--teal-200); }
/* Числа-обещания: каждый срок — своим камнем, линия слева в тон */
.stat:nth-child(1) { border-left: 2px solid var(--blue-500); }
.stat:nth-child(2) { border-left: 2px solid var(--teal-500); }
.stat:nth-child(3) { border-left: 2px solid var(--copper-500); }
.stat:nth-child(1) .stat__num { color: var(--blue-600); }
.stat:nth-child(2) .stat__num { color: var(--teal-600); }
.stat:nth-child(3) .stat__num { color: var(--copper-600); }
[data-theme="dark"] .stat:nth-child(1) .stat__num { color: var(--blue-400); }
[data-theme="dark"] .stat:nth-child(2) .stat__num { color: var(--teal-200); }
[data-theme="dark"] .stat:nth-child(3) .stat__num { color: var(--copper-300); }
/* Числа крупнее: обещание — главный факт экрана */
.stat__num { font-size: clamp(var(--text-4xl), 7vw, 96px); }
/* Слоты «на переговорах» — янтарная метка ожидания */
.partner--slot .partner__num { color: var(--amber-600); }
[data-theme="dark"] .partner--slot .partner__num { color: var(--amber-200); }

/* ---------------------------------------------------------------------------
   НАКЛОН И ПРОЖЕКТОР · карточки живут в перспективе, по курсору идёт
   сердоликовый прожектор (координаты --mx/--my пишет site.js).
   --------------------------------------------------------------------------- */
.steps, .grid--split, .gallery, .partners, .cat-grid, .guarantee, .cat-fork { perspective: 1100px; }
.frame, .item, .partner--live, .gallery__item { will-change: transform; }
.frame::after, .item::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--copper-500) 13%, transparent), transparent 72%);
  transition: opacity var(--duration-2) var(--ease);
}
.frame:hover::after, .item:hover::after { opacity: 1; }
/* Наклон рулит трансформом из JS — CSS-переход по transform снимается */
.item { transition: border-color var(--duration-2) var(--ease); }

/* ---------------------------------------------------------------------------
   ГИГАНТ-ЛЕТТЕРИНГ ФУТЕРА · контурное TAMINOTA во всю ширину нижнего кадра —
   той же штриховой манерой, что призрачные номера секций.
   --------------------------------------------------------------------------- */
.footer__giant {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(56px, 9.4vw, 176px); line-height: 1; text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark); text-align: center;
  color: var(--blue-900); /* сплошная заливка — контуры сняты решением владельца 01.08 */
  margin: var(--space-64) 0 var(--space-24); user-select: none; pointer-events: none;
}

/* ============================================================================
   КАРТОЧКА ТОВАРА ОКНОМ (решение владельца 01.08) и кнопки действий
   в сетке каталога: галочка «в список» заменена кнопкой «Добавить в запрос».
   ============================================================================ */
.item { cursor: pointer; transition: border-color var(--duration-1) var(--ease); }
.item:hover, .item:focus-visible { border-color: var(--border-strong); }
.item__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.item__actions .btn { min-height: 36px; }

.imodal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-24); }
.imodal__back { position: absolute; inset: 0; background: rgba(13, 17, 25, .48); }
.imodal__card {
  position: relative; z-index: 1; width: min(920px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface-card); border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-16); padding: var(--space-32);
}
.imodal__x {
  position: absolute; top: var(--space-12); right: var(--space-12); z-index: 2;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border-default); background: var(--surface-card);
  font-size: var(--text-xl); line-height: 1; color: var(--text-secondary); cursor: pointer;
}
.imodal__x:hover { background: var(--copper-600); color: #fff; border-color: transparent; }
.imodal__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-32); align-items: start; }
.imodal__photo img { width: 100%; border-radius: var(--radius-8); display: block; }
.imodal__spec { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.imodal__name { margin: var(--space-8) 0 var(--space-16); }
.imodal__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.imodal__descr { margin-bottom: var(--space-16); }
.imodal__table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-16); }
.imodal__table td, .imodal__table th { padding: var(--space-8) 0; border-bottom: var(--border-w) solid var(--border-default); text-align: left; vertical-align: top; font-size: var(--text-sm); }
.imodal__table td:first-child { color: var(--text-secondary); width: 42%; }
.imodal__table th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); padding-top: var(--space-16); }
.imodal__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
@media (max-width: 720px) {
  .imodal { padding: 0; }
  .imodal__card { max-height: 100vh; height: 100%; border-radius: 0; padding: var(--space-24); }
  .imodal__grid { grid-template-columns: 1fr; gap: var(--space-16); }
}

/* ============================================================================
   БЛОК КАТАЛОГА НА ГЛАВНОЙ: две двери направлений и лента ходовых позиций.
   Двери — крупные кликабельные кадры с живым счётчиком; наклон и свечение
   те же, что у карточек Awwwards-реформы.
   ============================================================================ */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.door {
  position: relative; display: grid; gap: var(--space-8); align-content: start;
  padding: var(--space-40); min-height: 320px; text-decoration: none; color: inherit;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-16);
  background: var(--surface-card); overflow: hidden;
  transition: border-color var(--duration-2) var(--ease), transform var(--duration-2) var(--ease);
}
.door::after {
  content: ''; position: absolute; inset: auto -20% -60% auto; width: 420px; height: 420px;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-brand) 22%, transparent), transparent 68%);
  opacity: 0; transition: opacity var(--duration-2) var(--ease); pointer-events: none;
}
.door:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.door:hover::after { opacity: 1; }
.door--parts::after { background: radial-gradient(circle, color-mix(in oklab, var(--copper-600) 20%, transparent), transparent 68%); }
.door__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.door__name { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
.door__sub { color: var(--text-secondary); max-width: 34ch; }
.door__count {
  font-family: var(--font-mono); font-size: clamp(40px, 6vw, 88px); line-height: 1;
  color: var(--text-secondary); margin-top: auto; align-self: end;
}
.door__go { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.strip { margin-top: var(--space-40); }
.strip__rail { display: flex; gap: var(--space-16); overflow-x: auto; padding-bottom: var(--space-8); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.strip__item {
  flex: 0 0 clamp(220px, 26vw, 280px); scroll-snap-align: start; text-decoration: none; color: inherit;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-8);
  padding: var(--space-16); display: grid; gap: var(--space-4); align-content: start;
  transition: border-color var(--duration-1) var(--ease);
}
.strip__item:hover { border-color: var(--border-strong); }
.strip__spec { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.strip__name { font-weight: var(--weight-medium); }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } .door { min-height: 240px; padding: var(--space-24); } }

/* ============================================================================
   ФИКСЫ АУДИТА 01.08: контраст мелкой подписи и зоны нажатия по WCAG 2.5.5
   (минимум 44×44 для интерактивного элемента на телефоне).
   ============================================================================ */
.frame__tag { color: var(--text-primary); } /* было 4,2:1 при норме 4,5 */
@media (max-width: 900px) {
  .burger, .lang__btn, .theme { min-width: 44px; min-height: 44px; }
  .footer__col a, .footer__links a { display: inline-block; padding: var(--space-8) 0; min-height: 44px; }
  .check { min-height: 44px; display: flex; align-items: center; gap: var(--space-8); }
  .check input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
  .skip { min-height: 44px; }
}
/* Контактные ссылки в строке mono-fact и логотипы — зона нажатия на телефоне */
@media (max-width: 900px) {
  .mono-fact a { display: inline-block; padding: var(--space-12) 0; min-height: 44px; }
  .header__logo, .footer__brand a { min-height: 44px; align-items: center; }
}

/* ============================================================================
   ФИКС АУДИТА 01.08 · КОНТРАСТ МЕЛКИХ ПОДПИСЕЙ НА ТЁМНОМ
   Замер: blue-400 на тёмном кадре даёт 4,37 (оверлайны, номера дверей)
   и 3,52 (подписи рамок) при норме 4,5 для текста 12–14px. Канон ДС
   разрешает на тёмном только светлые ступени лазурита — берём blue-300.
   ============================================================================ */
.sec--dark .overline,
.sec--dark .door__num,
.sec--dark .frame__tag,
.sec--dark .routemap__status,
[data-theme="dark"] .overline,
[data-theme="dark"] .door__num,
[data-theme="dark"] .frame__tag,
[data-theme="dark"] .routemap__status,
[data-theme="dark"] #lines .frame:nth-child(1) .frame__tag { color: var(--blue-300); }