/* =========================================================
   SEGMENTIX — main.css
   Главный стиль сайта. Здесь дизайн-токены (цвета, шрифты,
   отступы) и базовая типографика. Стили для конкретных
   секций пойдут в отдельные файлы или ниже по мере роста.
   ========================================================= */

/* Шрифт Tektur (заменитель Zen Dots) удалён — отказались от Zen Dots по
   изменённому бренд-гайду. Display-заголовки идут основным Roboto. */

/* ============================================================
   ЛОКАЛЬНЫЕ ШРИФТЫ (окт. 2026)

   Раньше грузились с fonts.googleapis.com. Убрано по двум причинам:
   трансграничная передача данных посетителя, которой Политика на /privacy
   обещает не делать, и зависимость от зарубежного CDN — из России он
   отвечает за секунды или не отвечает вовсе, и страница успевает
   отрисоваться системным шрифтом, а потом «прыгает».

   Файлы ВАРИАТИВНЫЕ: один содержит все начертания от 100 до 900, поэтому
   вместо 14 файлов (411 КБ) их четыре (115 КБ).
   unicode-range оставлен — кириллица и латиница качаются раздельно
   и только та, что реально встретилась на странице.
   ============================================================ */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/roboto/roboto-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/roboto/roboto-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: 'Roboto Mono';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-mono/roboto-mono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-mono/roboto-mono-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;
}


/* ---------- 1. ДИЗАЙН-ТОКЕНЫ ----------
   v3 — переработка по бренд-гайдлайну дизайнера (май 2026).
   Палитра гайда: пять нейтральных оттенков серого + чисто белый.
       #212121 / #3C3C3C / #BFBFBF / #E0E0E0 / #FFFFFF
   Расширили шкалу до 6 уровней фонов для UI, но всё в этом коридоре.
   Никаких ярких акцентов, никакого blue-cast — только нейтральный серый.
*/
:root {
    /* ---- Базовая шкала чёрного→белого. Холодная, с лёгким blue-cast. ---- */
    --ink-0:   #050507;   /* самый глубокий, для футера/глубоких слоёв */
    --ink-1:   #0A0A0C;   /* основной фон страницы */
    --ink-2:   #111114;   /* surface — карточки, секции */
    --ink-3:   #16161A;   /* elevated surface — карточки на surface */
    --ink-4:   #1C1C22;   /* hover state поверхностей */
    --ink-5:   #232329;   /* активное / выделенное состояние */

    /* ---- Границы ---- */
    --line-1:  #1F1F25;   /* самая тонкая, едва заметная */
    --line-2:  #2A2A33;   /* стандартная */
    --line-3:  #3A3A45;   /* акцентная (hover, фокус) */

    /* ---- Текст ---- */
    --ink-text:      #F0F0F4;   /* основной текст и заголовки */
    --ink-muted:     #A8A8B0;   /* вторичный текст */
    --ink-subtle:    #6E6E78;   /* подписи, метки */
    --ink-faint:     #4A4A52;   /* служебная информация, dimmed */

    /* ---- Подсветка для чертежей и тонких линий (холодная сталь). ---- */
    --tech-line:     #5A6F80;   /* основные линии чертежей */
    --tech-line-hi:  #8FA8B8;   /* активные/hover линии */
    --tech-glow:     rgba(143, 168, 184, 0.18);  /* мягкое свечение узлов */

    /* ---- Семантические алиасы ---- */
    --bg-page:     var(--ink-1);
    --bg-deep:     var(--ink-0);
    --bg-surface:  var(--ink-2);
    --bg-card:     var(--ink-3);
    --bg-hover:    var(--ink-4);
    --bg-active:   var(--ink-5);

    --border:        var(--line-2);
    --border-subtle: var(--line-1);
    --border-strong: var(--line-3);

    --text-primary: var(--ink-text);
    --text-muted:   var(--ink-muted);
    --text-subtle:  var(--ink-subtle);
    --text-faint:   var(--ink-faint);

    --accent:       var(--tech-line-hi);   /* единственный «акцентный» — холодная сталь */

    /* Совместимость со старыми именами (постепенно вычистим). */
    --bg-primary:   var(--bg-page);
    --bg-secondary: var(--bg-deep);
    --bg-elevated:  var(--bg-card);

    /* ---- Шрифты (май 2026, после отказа от Zen Dots). ----
       Roboto      — основной текст и ВСЕ заголовки (display тоже). Letter-spacing -3%.
       Roboto Mono — технические подписи (1×1×1, FIRST ORDER).
       --font-display оставлен как алиас на Roboto, чтобы не переписывать селекторы. */
    --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Roboto Mono', 'Consolas', 'Menlo', monospace;
    --font-serif:   Georgia, serif;  /* запас, не используется */

    /* ---- Типографическая иерархия (7 уровней). ---- */
    --fs-mono-xs:   11px;   /* мельчайшие технические подписи в чертежах */
    --fs-mono-sm:   12px;   /* eyebrow, метки разделов */
    --fs-xs:        12px;
    --fs-sm:        14px;
    --fs-base:      16px;
    --fs-md:        18px;
    --fs-lg:        22px;
    --fs-xl:        28px;   /* H4, sub-headlines */
    --fs-2xl:       36px;   /* H3, заголовки блоков */
    --fs-3xl:       44px;   /* H2, секции */
    --fs-4xl:       56px;   /* H1, hero внутренних страниц */
    --fs-display:   72px;   /* hero главной */
    --fs-metric:    64px;   /* числа метрик 3 / 1 / × */

    /* Высота строк */
    --lh-tight:   1.05;
    --lh-snug:    1.15;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    /* Трекинг */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.05em;
    --tracking-mono:   0.12em;   /* шире — для проектных подписей */

    /* Отступы — кратные 4 пикселям. */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   24px;
    --space-6:   32px;
    --space-7:   40px;
    --space-8:   48px;
    --space-10:  64px;
    --space-12:  96px;
    --space-14: 112px;
    --space-16: 128px;
    --space-20: 160px;

    /* Контейнер */
    --container-max: 1440px;
    --container-pad: 40px;

    /* Сетка модулей */
    --module: 80px;

    /* ---- Скругления — pill-кнопки, крупные карточки. ---- */
    --radius-none: 0;
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;       /* inputs */
    --radius-lg:   16px;       /* карточки */
    --radius-xl:   20px;       /* крупные блоки */
    --radius-2xl:  28px;       /* hero-плашки */
    --radius-pill: 9999px;     /* кнопки и теги */

    /* ---- Тени и подсветка для многослойности ---- */
    --shadow-sm:    0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Декоративные blur-сферы фона (cool tones для глубины). */
    --orb-cool:  radial-gradient(circle, rgba(90, 111, 128, 0.10) 0%, transparent 60%);
    --orb-warm:  radial-gradient(circle, rgba(143, 168, 184, 0.06) 0%, transparent 60%);

    /* Переходы */
    --transition-fast: 120ms ease;
    --transition-base: 240ms ease;
    --transition-slow: 480ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* На мобильных уменьшаем шкалу заголовков и поля контейнера. */
@media (max-width: 768px) {
    :root {
        --fs-display:  38px;
        --fs-metric:   40px;
        --fs-4xl:      32px;
        --fs-3xl:      26px;
        --fs-2xl:      22px;
        --fs-xl:       20px;
        --container-pad: 16px;
    }
    /* Заголовки на узких экранах: разрешаем перенос длинных слов. */
    h1, h2, h3, .h-hero, .h-display, .h-section, .h-block, .h-card {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }
}

/* ---------- 2. БАЗОВЫЙ RESET ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;          /* защита от случайного горизонтального скролла */
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

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

/* Ссылка внутри текста. Правило выше делает ссылки в абзацах невидимыми —
   они наследуют цвет и остаются без подчёркивания, — и «инструкций»,
   «раннему доступу», «напишите в Telegram» читались как обычные слова.
   Подчёркиваем только там, где ссылка стоит внутри текста: меню, кнопки
   и карточки-ссылки сюда не попадают, у них свои правила. */
.t-body a,
.t-lead a,
.t-caption a,
.legal__row dd a,
.matspec__row dd a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.t-body a:hover,
.t-lead a:hover,
.t-caption a:hover,
.legal__row dd a:hover,
.matspec__row dd a:hover {
    color: var(--text-primary);
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

/* ---------- 3. ТИПОГРАФИКА ----------
   Иерархия как в проектном документе. Без UPPERCASE на основных
   заголовках (это смягчает «лендинговую» агрессию). UPPERCASE
   остаётся только на mono-подписях — там это уместно.
*/
/* Display-заголовки на основном Roboto (после отказа от Zen Dots).
   Обычный регистр, плотный трекинг -3% — как было до правок 24 мая. */
.h-hero {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

.h-display {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

.h-section {
    font-size: var(--fs-3xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.h-block {
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.h-card {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.t-body {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    font-weight: 400;
}

.t-lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    font-weight: 300;
}

.t-caption {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-subtle);
}

/* Моноширинная подпись — для координат (1×1×1), номеров партии,
   технических меток. «Голос инженерного документа». */
.t-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

.t-mono--xs {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.t-mono--lg {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Число метрики — крупная цифра типа «3», «1», «×» в hero. */
.t-metric {
    font-family: var(--font-sans);
    font-size: var(--fs-metric);
    font-weight: 300;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

/* ---------- 4. КОНТЕЙНЕР И СЕТКА ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (max-width: 768px) {
    .section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
}

/* ---------- 5. КНОПКИ — pill, тихие, инженерные ----------
   В прототипе кнопки максимально скруглённые (pill) и без яркого
   фона. Это даёт «строгий и тихий» CTA, как в проектном документе.
*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    transition: all var(--transition-base);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.btn:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

.btn--primary {
    background: var(--ink-text);
    border-color: var(--ink-text);
    color: var(--ink-0);
}

.btn--primary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ink-0);
}

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

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

.btn--sm {
    padding: 10px var(--space-5);
    font-size: var(--fs-xs);
}

.btn__arrow {
    display: inline-block;
    transition: transform var(--transition-base);
    font-size: 1.1em;
}

.btn:hover .btn__arrow {
    transform: translateX(3px);
}

/* Pill-теги (use cases, метки). */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    line-height: 1.4;
}

/* Тег с пиктограммой. Рисунок линейный, той же обводкой, что инженерная
   графика сайта, — заливки у фигур нет, кроме сердечника катушки. */
.tag--icon {
    gap: 7px;
}

.tag__icon {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: var(--tech-line);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Дополнение к объекту — то, что можно доложить в заказ. Сейчас это
   беспроводная зарядка в панель. Плашка намеренно повторяет состав набора:
   тот же фон, та же рамка, тот же заголовок тегом и подпись справа, тот же
   кегль. Блок должен читаться как ещё одна строка документа, а не как
   рекламная врезка — врезку глаз пролистывает. */
.addon {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    /* Сверху небольшой зазор: на /system блок идёт сразу за таблицей
       материалов и без него слипался с ней в одну плашку. */
    margin-top: var(--space-3);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.addon__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* «В набор не входит» — той же подписью справа, что время сборки
   в составе набора. Умолчание на карточке товара читается как «включено». */
.addon__head .t-mono--xs {
    color: var(--tech-line-hi);
}

.addon__head .tag__icon {
    width: 13px;
    height: 13px;
    stroke: var(--tech-line-hi);
}

.addon__head .tag__icon circle {
    fill: var(--tech-line-hi);
    stroke: none;
}

.addon__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}


.tag--mono {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

/* ---------- 5b. SVG-ЧЕРТЕЖИ ----------
   Стили задаются через currentColor, чтобы менять оттенок в зависимости
   от состояния родителя (карточка, hero, активный товар).
*/
.scheme {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--tech-line);
    transition: color var(--transition-base);
}

.scheme__frame {
    stroke-linejoin: round;
}

.scheme__node {
    fill: var(--tech-line-hi);
}

/* Hover/active — узлы и линии подсвечиваются. */
.product-card:hover .scheme,
.scheme--hero {
    color: var(--tech-line-hi);
}

/* Вариант для hero: крупнее, ярче. */
.scheme--hero .scheme__nodes {
    stroke-width: 1.8;
}

/* Вариант для карточки. */
.scheme--card {
    padding: 8%;
}

/* Mini — для маленьких блоков, например в навигации. */
.scheme--mini {
    color: var(--text-subtle);
}

/* ---------- 6. УТИЛИТЫ ---------- */
/* Подзаголовок внутри крупного H1: «Серия 01» остаётся главным визуально,
   а слова категории попадают в заголовок ради поиска. */
.chapter__title-note {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    letter-spacing: 0;
    color: var(--text-muted);
    text-transform: none;
    max-width: 560px;
}

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

/* Сетка-линии (как на миллиметровке) — фоновый паттерн для секций,
   которые должны ощущаться «инженерно». Использовать дозированно. */
.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: var(--module) var(--module);
}

.no-scroll {
    overflow: hidden;
}

/* =========================================================
   7. ШАПКА САЙТА
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(26, 26, 28, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

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

.site-header__logo img {
    display: block;
    height: 32px;
    width: auto;
}

.site-nav {
    display: flex;
    gap: var(--space-8);
}

.site-nav__link {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.site-nav__link:hover {
    color: var(--accent);
}

.site-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
}

.site-header__burger span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--text-primary);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.site-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
    .site-header__burger {
        display: flex;
    }
    /* Стили site-nav для мобилки заданы дальше — в новой версии (v2). */
}

/* =========================================================
   8. CHAPTER + HERO (v2) — проектный документ
   ========================================================= */

/* Глава — это «полотно» секции с номером в углу и blur-сферами.
   Каждая chapter имеет свой data-chapter, который рендерится как marker. */
.chapter {
    position: relative;
    /* Было 96 сверху и 112 снизу — 208px пустоты между соседними главами
       при собственной высоте главы 500–700px. Треть раздела уходила в ничто,
       и короткие разделы читались как потерянные. Отступы симметричны:
       между главами идёт волосок-разделитель, и он должен стоять посередине
       пустоты, а не ближе к верхней главе. */
    padding: var(--space-10) 0;
    overflow: hidden;
    isolation: isolate;
}

.chapter + .chapter {
    border-top: 1px solid var(--border-subtle);
}

/* Первая глава страницы — особый случай. Большой отступ между главами
   нужен: он разделяет разделы документа. Но над самой первой строкой
   текста тот же отступ работает иначе — страница открывается пустым
   полем под шапкой, и человек сначала видит ничто. Поэтому у первой
   главы верхний отступ вдвое меньше; расстояния между главами
   не меняются. */
.site-main > .chapter:first-child { padding-top: var(--space-8); }
.site-main > .section:first-child { padding-top: var(--space-8); }

.chapter--hero {
    padding-top: var(--space-7);
    padding-bottom: var(--space-12);
    /* Раньше было min-height: calc(100vh - 80px) — это растягивало hero
       на всю высоту viewport, что на портретных экранах/скринах давало
       огромное пустое пространство. Сейчас — фиксированный комфорт. */
    min-height: 640px;
    display: flex;
    align-items: center;
}

/* ============================================================
   ФИРМЕННЫЙ X — fixed-подложка на весь сайт.
   Большой X из официального знака segmentix (без рамки), приколочен
   к viewport через position:fixed. При скролле остаётся на месте —
   работает как «фирменный фон бренда», сквозящий через все секции.
   ============================================================ */
.brand-x {
    /* Коэффициент масштаба. 1.0 = базовый размер (X вписан в экран под шапкой).
       Больше 1 — X крупнее и нижние арки уходят за пределы первого экрана. */
    --x-scale: 1.3;
    --x-height: calc((100vh - 120px) * var(--x-scale));

    position: absolute;                      /* прибит к верху страницы — при скролле уезжает вместе с контентом */
    top: 92px;                               /* отступ под шапку (sub-bar 28 + main 64) */
    left: 0;
    right: 0;
    height: calc(var(--x-height) + 40px);    /* контейнер чуть выше X, чтобы точно вместился */
    z-index: 0;                              /* за всем контентом, над фоном body */
    pointer-events: none;                    /* не перехватывает клики */
    background-image: url('/assets/img/ui/x-mark.svg');
    background-repeat: no-repeat;
    background-position: left top;           /* прижат к левому верхнему углу контейнера */
    background-size: auto var(--x-height);   /* высота X масштабируется через переменную */
    color: #FFFFFF;                          /* currentColor в SVG = белый */
    opacity: 0.14;                           /* контрастно, но не давит на контент */
}

@media (max-width: 768px) {
    /* На мобиле X пропорционально меньше, чтобы читался на узком экране. */
    .brand-x {
        --x-height: calc(55vh * var(--x-scale));
        opacity: 0.12;
    }
}

/* Контент должен быть выше подложки. */
.site-header,
.site-main,
.site-footer { position: relative; z-index: 1; }

/* Номер главы в правом верхнем углу. Большой, прозрачный, как штамп документа. */
.chapter__marker {
    position: absolute;
    top: 32px;
    right: 40px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--tracking-mono);
    color: var(--text-faint);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 768px) {
    .chapter__marker {
        top: 16px;
        right: 20px;
    }
}

/* Декоративные blur-сферы — дают глубину фону без явных элементов. */
.chapter__orb {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: var(--orb-cool);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

.chapter__orb--tl  { top: -360px; left: -200px; }
.chapter__orb--tr  { top: -300px; right: -260px; }
.chapter__orb--bl  { bottom: -300px; left: -260px; }
.chapter__orb--br  { bottom: -360px; right: -200px; background: var(--orb-warm); }

/* HERO — двухколоночный лейаут: текст слева, матрица справа. */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    width: 100%;
    /* Своего верхнего отступа у сетки нет: он складывался с отступом
       секции .chapter--hero и давал 88px пустоты над первой строкой. */
}

.hero__col--text { max-width: 620px; }

.hero__eyebrow {
    margin-bottom: var(--space-6);
}

.hero__title {
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.hero__title-accent {
    color: var(--text-muted);
    font-weight: 500;
}

.hero__lead {
    max-width: 540px;
    margin-bottom: var(--space-7);
}

.hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-7);
}

/* Метрики 3 / 1 / × — три блока с крупными цифрами и подписями. */
.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    /* Линия отделяет метрики от кнопок. Воздух под линией должен быть
       больше, чем над ней: иначе линия читается как подчёркивание цифр,
       а не как граница блока. */
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-subtle);
}

.hero-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hero-metric__value {
    color: var(--text-primary);
}

.hero-metric__label {
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    line-height: 1.4;
}

/* Правая колонка: матрица чертежей в крупной плашке. */
.hero-matrix {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md), var(--shadow-inset);
    position: relative;
}

.hero-matrix__head,
.hero-matrix__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.hero-matrix__head { margin-bottom: var(--space-6); }
.hero-matrix__foot {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.hero-matrix__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
    align-items: end;
}

.hero-matrix__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hero-matrix__scheme {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-matrix__item figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-matrix__item .h-card {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
}

@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; gap: var(--space-8); }
    .hero__col--text { max-width: 720px; }
}

@media (max-width: 600px) {
    .hero-matrix__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .hero__metrics { grid-template-columns: 1fr; gap: var(--space-4); }
    .hero__metrics .hero-metric { flex-direction: row; align-items: baseline; gap: var(--space-4); }
    .hero-metric__value { font-size: 40px; }
}

/* =========================================================
   9. МАНИФЕСТ — три принципа
   ========================================================= */
.manifest {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.manifest__eyebrow {
    margin-bottom: var(--space-5);
}

.manifest__heading {
    margin-bottom: var(--space-12);
    max-width: 800px;
}

.manifest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.manifest__item {
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color var(--transition-base);
}

.manifest__item:hover {
    border-color: var(--accent);
}

.manifest__item p.t-mono--xs {
    margin-bottom: var(--space-5);
    color: var(--accent);
}

.manifest__item h3 {
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

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

/* =========================================================
   10. КАТАЛОГ-ПРЕВЬЮ — карточки товаров на главной
   ========================================================= */
.catalog-preview__head {
    margin-bottom: var(--space-10);
}

.catalog-preview__head .t-mono {
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.catalog-preview__head h2 {
    margin-bottom: var(--space-5);
}

.catalog-preview__intro {
    max-width: 640px;
}

.catalog-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* Карточка товара (v2) — с SVG-чертежом вместо фото, как в прототипе. */
.product-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 80%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
    overflow: hidden;
    position: relative;
}

.product-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.product-card__link {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-5);
    height: 100%;
}

.product-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

/* Сцена — контейнер для чертежа и фото-попапа. */
.product-card__scene {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.04) 0%, transparent 70%),
        var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    isolation: isolate;
}

.product-card:hover .product-card__photo {
    transform: scale(1.04);
}

/* Фото — лицо карточки, видно сразу. Под ним раньше лежала 2D-схема,
   а снимок проявлялся при наведении; схемы больше нет, осталось лёгкое
   приближение на hover как признак того, что карточка кликабельна. */
.product-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    z-index: 2;
    pointer-events: none;
}

/* Затемнение снизу — для контраста подписей, которые лежат поверх фото.
   Проявляется только при наведении: на карточке каталога подписей над
   снимком нет, и постоянная тёмная полоса просто съедала низ кадра. */
.product-card__scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,12,0) 60%, rgba(10,10,12,0.45) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
    z-index: 3;
}

.product-card:hover .product-card__scene::after {
    opacity: 1;
}

/* ---- Инфо-теги (build / tools / manual) — спецификация карточки ---- */
.product-card__specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

/* Колонка подписи рассчитана на самую длинную русскую — «в комплекте».
   При 60px (хватало английским build/tools/manual) подпись налезала на значение. */
.spec-pill {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
}

.spec-pill__label {
    line-height: 1.35;
}

.spec-pill__label {
    color: var(--tech-line-hi);
}

.spec-pill__value {
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.product-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-card__title {
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.product-card__code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
}

.product-card__sub {
    color: var(--text-muted);
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
}

.product-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    transition: color var(--transition-base);
}

.product-card:hover .product-card__foot {
    color: var(--text-primary);
}

.product-card__arrow {
    font-size: var(--fs-lg);
    transition: transform var(--transition-base);
}

.product-card:hover .product-card__arrow {
    transform: translateX(4px);
    color: var(--tech-line-hi);
}

@media (max-width: 960px) {
    .catalog-preview__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .catalog-preview__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   11. УЗЕЛ X — центральная секция бренда
   ========================================================= */
.node-x {
    background: var(--bg-secondary);
}

.node-x__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.node-x__visual {
    aspect-ratio: 1 / 1;
    background: var(--color-graphite);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.node-x__symbol {
    font-family: var(--font-sans);
    font-size: 360px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.05em;
}

.node-x__text .t-mono {
    margin-bottom: var(--space-5);
    color: var(--accent);
}

.node-x__text h2 {
    margin-bottom: var(--space-6);
}

.node-x__text p + p {
    margin-top: var(--space-4);
}

@media (max-width: 960px) {
    .node-x__inner {
        grid-template-columns: 1fr;
    }
    .node-x__symbol {
        font-size: 200px;
    }
}

/* =========================================================
   12. СИСТЕМА-ПРЕВЬЮ
   ========================================================= */
.system-preview {
    text-align: center;
}

.system-preview .t-mono {
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.system-preview h2 {
    margin-bottom: var(--space-6);
}

.system-preview__lead {
    max-width: 720px;
    margin: 0 auto var(--space-8);
}

/* =========================================================
   13. B2B-ПРЕВЬЮ
   ========================================================= */
.b2b-preview {
    border-top: 1px solid var(--border);
}

.b2b-preview__inner {
    display: grid;
    grid-template-columns: 1.5fr auto;
    gap: var(--space-8);
    align-items: center;
}

.b2b-preview .t-mono {
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.b2b-preview h2 {
    margin-bottom: var(--space-5);
}

.b2b-preview p {
    max-width: 560px;
}

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

/* =========================================================
   14. ФУТЕР
   ========================================================= */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
    margin-top: var(--space-16);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
}

.site-footer__brand img {
    margin-bottom: var(--space-5);
}

.site-footer__brand p {
    max-width: 280px;
}

.site-footer__links,
.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__links a,
.site-footer__contacts a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__contacts a:hover {
    color: var(--accent);
}

.site-footer__links .t-mono--xs,
.site-footer__contacts .t-mono--xs {
    margin-bottom: var(--space-2);
}

.site-footer__copyright {
    grid-column: 1 / -1;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    /* Слоган слева, реквизиты ИП — справа напротив него. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-footer__copyright p {
    margin: 0;
}

/* Название бренда и слоганы набираются строчными — по брендбуку.
   Моно-утилиты (.t-mono, .t-mono--xs) по умолчанию поднимают текст в капс,
   здесь это отменяется. */
.site-footer__copyright p,
.site-footer__legal {
    text-transform: none;
}

@media (max-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .site-footer {
        margin-top: var(--space-10);
    }
}

/* =========================================================
   15. ФОРМА (на странице товара / контактов)
   ========================================================= */
.order-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 480px;
}

.order-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.order-form__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

.order-form__input,
.order-form__textarea {
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    transition: border-color var(--transition-fast);
}

.order-form__input:focus,
.order-form__textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.order-form__input.is-invalid,
.order-form__textarea.is-invalid {
    border-color: #ff4444;
}

.order-form__textarea {
    min-height: 120px;
    resize: vertical;
}

/* Honeypot — невидимое поле для отлова ботов. Раньше было left:-9999px,
   что создавало overflow на мобиле. Теперь полностью скрыто. */
.order-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.order-form__status {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    min-height: 20px;
}

.order-form__status[data-type="ok"] {
    color: var(--accent);
}

.order-form__status[data-type="error"] {
    color: #ff4444;
}

.order-form__status[data-type="pending"] {
    color: var(--text-muted);
}

/* =========================================================
   16. PAGE-HERO — шапка внутренней страницы
   ========================================================= */
.page-hero {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--border);
}

.page-hero__eyebrow {
    margin-bottom: var(--space-5);
    color: var(--accent);
}

.page-hero__title {
    margin-bottom: var(--space-6);
}

.page-hero__lead {
    max-width: 680px;
    font-size: var(--fs-md);
}

/* =========================================================
   17. СИСТЕМА — 4 принципа
   ========================================================= */
.system-principles__heading {
    margin-top: var(--space-4);
    margin-bottom: var(--space-12);
}

.system-principles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.system-principle {
    padding: var(--space-8);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color var(--transition-base);
}

.system-principle:hover {
    border-color: var(--accent);
}

.system-principle p.t-mono--xs {
    margin-bottom: var(--space-5);
    color: var(--accent);
}

.system-principle h3 {
    margin-bottom: var(--space-4);
}

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

/* =========================================================
   18. ЯЗЫК МОДУЛЕЙ
   ========================================================= */
.modules-vocab__intro {
    max-width: 720px;
    margin-top: var(--space-5);
    margin-bottom: var(--space-12);
}

.modules-vocab__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.vocab-item {
    padding: var(--space-6);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color var(--transition-base);
}

.vocab-item:hover {
    border-color: var(--accent);
}

.vocab-item p.t-mono--xs {
    margin-bottom: var(--space-3);
    color: var(--accent);
}

.vocab-item h3 {
    margin-bottom: var(--space-3);
}

@media (max-width: 960px) {
    .modules-vocab__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .modules-vocab__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   19. ЛОГИКА МАСШТАБИРОВАНИЯ
   ========================================================= */
.scale-logic {
    background: var(--bg-secondary);
}

.scale-logic__intro {
    max-width: 720px;
    margin-top: var(--space-5);
    margin-bottom: var(--space-12);
}

.scale-logic__examples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.scale-example {
    padding: var(--space-8) var(--space-5);
    border: 1px solid var(--border);
    background: var(--color-graphite);
    text-align: center;
}

.scale-example .t-mono {
    font-size: var(--fs-xl);
    color: var(--accent);
    margin-bottom: var(--space-4);
    letter-spacing: 0.02em;
}

@media (max-width: 960px) {
    .scale-logic__examples {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   20. CTA-БЛОК (внизу страниц)
   ========================================================= */
.cta-block {
    border-top: 1px solid var(--border);
    text-align: center;
}

.cta-block__inner {
    max-width: 720px;
    margin: 0 auto;
}

.cta-block__lead {
    max-width: 560px;
    margin: var(--space-5) auto var(--space-8);
}

.cta-block__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

/* =========================================================
   21. КАТАЛОГ — большие карточки
   ========================================================= */
.catalog-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.product-card--lg .product-card__short {
    margin-top: var(--space-3);
    color: var(--text-muted);
}

.batch-info {
    border-top: 1px solid var(--border);
}

.batch-info__inner {
    display: grid;
    grid-template-columns: 1.5fr auto;
    gap: var(--space-8);
    align-items: center;
}

.batch-info p.t-mono {
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.batch-info h2 {
    margin-bottom: var(--space-5);
}

@media (max-width: 960px) {
    .catalog-list__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .catalog-list__grid {
        grid-template-columns: 1fr;
    }
    .batch-info__inner {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   22. СТРАНИЦА ТОВАРА
   ========================================================= */
.breadcrumbs {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: var(--space-5) 0;
}

.breadcrumbs a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--accent);
}

.breadcrumbs__sep {
    color: var(--text-subtle);
}

.product-page {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-8);
    align-items: start;
    padding-top: var(--space-5);
    padding-bottom: var(--space-12);
}

/* Грид-элемент по умолчанию не ужимается уже своего min-content. Лента
   миниатюр в правой колонке — шесть кнопок по 64px — держала колонку
   на 474px, и на телефоне правый край страницы уезжал за экран, где его
   отрезал overflow-x: hidden у body: заголовок, текст и цена кончались
   на полуслове. С min-width: 0 колонка ужимается по экрану, а лента
   прокручивается внутри себя, как и задумано её overflow-x: auto. */
.product-page > * { min-width: 0; }

.product-page__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
    align-items: start;
    padding-top: var(--space-5);
}

/* На больших экранах 3D-стейдж — sticky, остаётся в поле зрения при скролле текста. */
.product-stage {
    position: sticky;
    top: calc(104px + 32px + var(--space-4));
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

.product-stage__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-stage__hint { color: var(--text-subtle); }

.product-stage__viewport {
    position: relative;
    /* Квадрат. При 4:5 правая колонка — фото, лента миниатюр и сценарий —
       уезжала на 110–140px ниже левой с описанием и характеристиками,
       и внизу страницы оставался висеть кусок пустоты. Квадрат снимает
       полторы сотни пикселей высоты, колонки заканчиваются вровень.
       Снимки галереи пересобраны под это окно (см. галереи.py). */
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 60%, rgba(143,168,184,0.08) 0%, transparent 65%),
        var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    isolation: isolate;            /* стабилизирует overflow-clipping с absolute детьми */
}

.product-stage__view {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);    /* явное скругление на каждом view */
    overflow: hidden;
}

.product-stage__view.is-active {
    opacity: 1;
    pointer-events: auto;
}

.product-stage__view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);    /* и на самом img — чтобы скругление держалось при любом стек-контексте */
    display: block;
}

/* В 3D view canvas-контейнер должен занимать всё пространство */
.product-stage__view .model-viewer__canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Табы — горизонтальная полоска под viewport */
.product-stage__tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 2px;
    margin: 0 -2px;
}

.stage-tab {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 64px;
    height: 64px;
    padding: 6px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    overflow: hidden;
}

.stage-tab:hover {
    border-color: var(--border-strong);
}

.stage-tab.is-active {
    border-color: var(--tech-line-hi);
    background: var(--bg-hover);
}

.stage-tab .t-mono--xs {
    color: var(--tech-line-hi);
    font-size: 10px;
}

.stage-tab.is-active .t-mono--xs {
    color: var(--text-primary);
}

.stage-tab__label {
    font-size: 10px;
    color: var(--text-muted);
}

.stage-tab__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.stage-tab:has(.stage-tab__thumb) {
    padding: 2px;
}

@media (max-width: 960px) {
    .product-page { grid-template-columns: 1fr; }
    .product-stage {
        position: relative;
        top: auto;
    }
}

.product-gallery__main {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.product-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-3);
}

.product-gallery__thumb {
    aspect-ratio: 1 / 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active {
    border-color: var(--accent);
}

.product-info__title {
    /* Отступ был 12px, потому что под заголовком стояла строка
       «габариты · вес». Строку убрали (те же цифры есть в спецификации),
       и теперь за заголовком сразу идёт описание — нужен полноценный воздух. */
    margin-bottom: var(--space-5);
    color: var(--text-primary);
}

.product-info__description {
    margin-bottom: var(--space-6);
}

.product-info__scheme {
    aspect-ratio: 3 / 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.04) 0%, transparent 70%),
        var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    margin-bottom: var(--space-8);
}

.product-info__scheme .scheme {
    max-width: 240px;
    max-height: 100%;
}

/* =========================================================
   3D viewer — интерактивная CAD-модель на странице товара.
   ========================================================= */
.model-viewer {
    margin-bottom: var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-page);
}

.model-viewer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
}

.model-viewer__head .t-mono--xs {
    color: var(--text-subtle);
}

.model-viewer__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.05) 0%, transparent 60%),
        var(--bg-page);
    overflow: hidden;
}

.model-viewer__canvas canvas {
    display: block;
    cursor: grab;
}

.model-viewer__canvas canvas:active {
    cursor: grabbing;
}

.model-viewer__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

.model-viewer__canvas.is-loaded .model-viewer__status {
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Совместимость со старыми именами (если где-то ещё используются). */
.product-info__code,
.product-info__en {
    color: var(--text-subtle);
}

/* Спецификации — как в техкарте */
/* Заголовок таблицы характеристик — парный к «составу набора» выше,
   чтобы два блока читались как ответы на разные вопросы, а не как
   один длинный список свойств. */
.product-specs__head {
    margin-bottom: var(--space-4);
}

.product-specs {
    margin: 0 0 var(--space-8);
    border-top: 1px solid var(--border);
}

.product-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.product-specs__row dt {
    color: var(--text-subtle);
    min-width: 0;
    word-wrap: break-word;
}

.product-specs__row dd {
    margin: 0;
    color: var(--text-primary);
    min-width: 0;
    word-wrap: break-word;
}

/* Состав набора — мини-сборка между описанием и спецификациями. */
.product-kit {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-kit__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-kit__head .t-mono--xs {
    color: var(--tech-line-hi);
}

.product-kit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-kit__list li {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.product-kit__list li > span:last-child,
.product-kit__list li {
    min-width: 0;
    overflow-wrap: break-word;
}

.product-kit__list li .t-mono--xs {
    color: var(--tech-line-hi);
}

/* Блок-обёртка для формы заявки. На десктопе — отдельный «карточный» блок
   на всю ширину под товаром. На мобиле — естественный порядок: после 3D. */
.product-order-block {
    margin-top: var(--space-10);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

.product-order-block .product-order {
    border-top: none;
    padding-top: 0;
    max-width: 640px;
    margin: 0 auto;
}

.product-order__heading {
    margin-bottom: var(--space-4);
}

.product-order__intro {
    margin-bottom: var(--space-6);
}

@media (max-width: 960px) {
    .product-page__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   23. ПОХОЖИЕ ТОВАРЫ
   ========================================================= */
.related {
    border-top: 1px solid var(--border);
}

.related p.t-mono {
    margin-bottom: var(--space-4);
    color: var(--accent);
}

.related__heading {
    margin-bottom: var(--space-10);
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

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

/* =========================================================
   24. B2B-страница
   ========================================================= */
.b2b-cases__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.b2b-case {
    padding: var(--space-8);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color var(--transition-base);
}

.b2b-case:hover {
    border-color: var(--accent);
}

.b2b-case p.t-mono--xs {
    margin-bottom: var(--space-5);
    color: var(--accent);
}

.b2b-case h3 {
    margin-bottom: var(--space-4);
}

.b2b-benefits {
    background: var(--bg-secondary);
}

.b2b-benefits__list {
    margin-top: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.b2b-benefits__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.b2b-benefits__list li p.t-mono--xs {
    color: var(--accent);
    font-size: var(--fs-md);
    padding-top: 2px;
}

.b2b-benefits__list li p.t-body {
    font-size: var(--fs-md);
}

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

/* =========================================================
   25. КОНТАКТЫ
   ========================================================= */
.contacts-block__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
    align-items: start;
}

.contacts-channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.contacts-channel {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-6);
}

.contacts-channel p.t-mono--xs {
    margin-bottom: var(--space-3);
    color: var(--accent);
}

.contacts-channel h2 {
    margin-bottom: var(--space-4);
}

.contacts-channel__link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--accent);
    transition: color var(--transition-fast);
}

.contacts-channel__link:hover {
    color: var(--accent);
}

.contacts-form__heading {
    margin-bottom: var(--space-4);
}

.contacts-form__intro {
    margin-bottom: var(--space-8);
}

.contacts-form__direct {
    color: var(--accent);
    text-decoration: underline;
}

.contacts-form .order-form {
    max-width: none;
}

@media (max-width: 960px) {
    .contacts-block__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
}

/* =========================================================
   v2 — БЛОКИ ДЛЯ НОВОЙ ГЛАВНОЙ
   ========================================================= */

/* ---- Заголовок секции внутри chapter ---- */
.chapter__header {
    max-width: 720px;
    margin-bottom: var(--space-10);
}

.chapter__eyebrow {
    margin-bottom: var(--space-5);
}

.chapter__title {
    margin-bottom: var(--space-5);
}

.chapter__lead {
    color: var(--text-muted);
}

/* ---- SERIES GRID (карточки товаров на главной) ---- */
.series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

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

/* ---- SYSTEM GRID (Узел X + Скоро) ---- */
.system-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
}

.system-grid__col {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

.system-grid__col .tag--mono {
    align-self: flex-start;
    margin-bottom: var(--space-2);
}

.formula-card {
    margin-top: auto;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.formula-card__row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--space-5);
    align-items: baseline;
}

.formula-card__row .t-mono--xs {
    color: var(--tech-line-hi);
}

.coming-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
}

.system-grid__col--coming .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Колонка с деталью: картинка во всю ширину, подпись под ней.
   Фон у рендера тот же --bg-card, что у колонки, — шва не видно,
   деталь просто лежит в карточке. */
.system-grid__col--node {
    justify-content: center;
    gap: var(--space-4);
}

.node-figure { margin: 0; }

.node-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.node-figure figcaption {
    margin-top: var(--space-4);
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
    text-align: center;
}

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

/* ---- PROJECTS GRID ---- */
.projects-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
}

.projects-grid__col {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

/* Правая колонка — та же плашка, что левая, только со свечением в углу.
   Раньше под ней стоял --bg-deep: он темнее самой страницы, и колонка
   читалась не как карточка, а как чёрная дыра в конце главной. Отличать
   её от соседки должен акцент, а не провал по тону. */
.projects-grid__col--cta {
    background:
        radial-gradient(circle at 100% 0%, rgba(143,168,184,0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border-color: var(--border-strong);
}

.projects-cta__title {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    margin-top: var(--space-2);
    color: var(--text-primary);
}

.projects-grid__col--cta .btn {
    align-self: flex-start;
    margin-top: auto;
}

.use-cases {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
}

.projects-grid__col .hero__actions {
    margin-top: auto;
    margin-bottom: 0;
}

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

/* ---- Сброс маркеров у UL (метрики, теги). ----
   Намеренно не shorthand padding: 0. Браузер у <ul> задаёт только
   padding-inline-start, и его достаточно убрать. Shorthand гасил
   padding-top у .hero__metrics, заданный выше, — и линия над
   метриками ложилась вплотную к цифрам. */
.hero__metrics,
.coming-tags,
.use-cases,
.product-card__tags {
    list-style: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* ---- Двухэтажный header под v2.
       Этаж 1 — узкая статус-плашка. Этаж 2 — крупный логотип + nav. ---- */
.site-header {
    background: rgba(5, 5, 7, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Этаж 1: статус-бар */
.site-header__bar {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border-subtle);
}

.site-header__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    gap: var(--space-4);
}

.site-header__bar-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    line-height: 1;
}

.site-header__bar-item a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.site-header__bar-item a:hover {
    color: var(--text-primary);
}

/* Зелёная точка-индикатор (доступности) — едва различимая, как led-маркер. */
.site-header__bar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tech-line-hi);
    box-shadow: 0 0 6px rgba(143, 168, 184, 0.6);
    display: inline-block;
}

/* Этаж 2: основной хедер */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104px;             /* увеличена под крупный логотип */
}

.site-header__logo img {
    display: block;
    height: 60px;              /* такой же как в футере */
    width: auto;
}

.site-nav {
    display: flex;
    gap: var(--space-7);
}

.site-nav__link {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.site-nav__link:hover {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .site-header__bar-inner { height: 28px; }
    .site-header__bar-item:last-child { display: none; } /* на узких — скрываем второй блок */
    .site-header__inner { height: 64px; }
    .site-header__logo img { height: 32px; }
    /* Мобильное меню — выпадает поверх контента, когда нажат бургер.
       z-index выше шапки (101 > 100), чтобы перекрывать её. */
    .site-nav {
        display: flex;
        position: fixed;
        top: calc(28px + 64px);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: calc(100dvh - 92px);
        background: var(--bg-deep);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6) var(--container-pad);
        transform: translateY(-110%);
        transition: transform var(--transition-slow);
        z-index: 101;
        overflow-y: auto;
        border-bottom: 1px solid var(--border-subtle);
    }
    .site-nav.is-open {
        transform: translateY(0);
    }
    .site-nav__link {
        font-size: var(--fs-lg);
        padding: var(--space-3) 0;
        width: 100%;
        border-bottom: 1px solid var(--border-subtle);
    }
    .site-nav__link:last-child { border-bottom: none; }
}

/* ---- Обновления site-footer под v2 ---- */
.site-footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border-subtle);
    margin-top: 0;
    padding-top: var(--space-14);
}

.site-footer__brand img {
    height: 60px;
    width: auto;
    display: block;
    margin-bottom: var(--space-4);
}

/* Tagline под лого — выровнен по краям логотипа, не по левому краю колонки. */
.site-footer__tagline {
    max-width: 280px;
    /* Логотип основной — wordmark, имеет небольшой внутренний отступ слева у первой буквы.
       Подгоняем тэглайн примерно под начало надписи (s в "segmentix"). */
    padding-left: 2px;
}

/* ---- Hero actions: убрать дефолтный margin-bottom если используется в других контекстах ---- */
.projects-grid__col .hero__actions,
.cta-block__actions {
    margin-bottom: 0;
}

/* =========================================================
   /system — принципы, словарь, координаты (v2)
   ========================================================= */

/* HERO для system: одиночный чертёж справа */
.hero-matrix__single {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

/* HERO 3D-вьюер на /system: заменяет статичный символ X. */
.hero-matrix__viewer {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.08) 0%, transparent 60%),
        var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.hero-matrix__viewer .model-viewer__canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.hero-matrix__hint { color: var(--text-subtle); }

/* Принципы 2×2 */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.principle {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base);
}

.principle:hover { border-color: var(--border-strong); }

.principle .t-mono--xs { color: var(--tech-line-hi); }
.principle h3 { color: var(--text-primary); margin-top: var(--space-2); }

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

/* Словарь модулей 3×2 */
.vocab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.vocab-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base);
}

.vocab-card:hover { border-color: var(--tech-line-hi); }

.vocab-card__code {
    color: var(--tech-line-hi);
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
}

@media (max-width: 960px) { .vocab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vocab-grid { grid-template-columns: 1fr; } }

/* Координаты 4 карточек */
.coords-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.coord-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.coord-card__scheme {
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.04) 0%, transparent 70%),
        var(--bg-page);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* Окно фотографии в карточке координат. Фон тот же, что у студийного
   снимка (--bg-card): кадр собирался под карточку серии, и на более
   тёмном --bg-page он читался бы светлым прямоугольником внутри рамки. */
.coord-card__photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    overflow: hidden;
}

.coord-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coord-card__scheme--dashed {
    border-style: dashed;
    color: var(--text-faint);
}

.coord-card__code {
    color: var(--tech-line-hi);
}

.coord-card--future { opacity: 0.85; }
.coord-card--future .coord-card__code { color: var(--text-muted); }

@media (max-width: 1100px) { .coords-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .coords-grid { grid-template-columns: 1fr; } }

/* =========================================================
   BATCH-INFO (на /catalog странице — CTA блок)
   ========================================================= */
.batch-info {
    display: grid;
    grid-template-columns: 1.5fr auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

.batch-info__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.batch-info__col .tag--mono {
    align-self: flex-start;
}

@media (max-width: 768px) {
    .batch-info { grid-template-columns: 1fr; }
    .batch-info .btn { align-self: flex-start; }
}

/* =========================================================
   /b2b — преимущества (benefits-list)
   ========================================================= */
.benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.benefit {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-base);
}

.benefit:hover { border-color: var(--border-strong); }

.benefit__num {
    color: var(--tech-line-hi);
    font-size: var(--fs-md);
    line-height: 1.2;
    padding-top: 4px;
}

.benefit h3 { color: var(--text-primary); margin-bottom: var(--space-3); }

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

/* =========================================================
   /contacts — двухколоночный layout
   ========================================================= */
.contacts-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
    align-items: start;
}

.contacts-channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contacts-channel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base);
}

.contacts-channel:hover { border-color: var(--border-strong); }

/* Подсветка одного канала убрана: Telegram, WhatsApp и телефон теперь
   равноправны, и выделять один рамкой значит отправлять остальных
   во второй эшелон. */

/* Строка под карточками — ссылка на раздел для бизнеса. Не карточка,
   чтобы каналов визуально оставалось три. */
.contacts-channels__note {
    margin: 0;
    color: var(--text-subtle);
}

.contacts-channel__head .tag--mono {
    color: var(--tech-line-hi);
}

.contacts-channel__link {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    color: var(--text-primary);
    padding: 4px 0;
    border-bottom: 1px solid var(--tech-line-hi);
    margin: var(--space-2) 0 var(--space-3);
    transition: color var(--transition-fast);
}

.contacts-channel__link:hover { color: var(--tech-line-hi); }
.contacts-channel__link--sm { font-size: var(--fs-md); }

.contacts-form-block {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contacts-form__heading { margin: var(--space-3) 0 var(--space-2); }
.contacts-form__intro { color: var(--text-muted); }
.contacts-form__direct { color: var(--tech-line-hi); border-bottom: 1px solid var(--tech-line-hi); }
.contacts-form-block .order-form { max-width: none; }

@media (max-width: 960px) {
    .contacts-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* =========================================================
   USE CASES — сценарии применения (Chapter 04)
   ========================================================= */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

/* Карточка во всю ширину сетки. Нужна, когда сценариев нечётное число
   и последний — не ещё одно помещение, а другая аудитория. */
.usecase--wide { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .usecase--wide { grid-column: auto; }
}

.usecase {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.usecase:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.usecase__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.usecase__head .t-mono--xs {
    color: var(--tech-line-hi);
}

.usecase__title {
    color: var(--text-primary);
    margin-top: var(--space-2);
}

/* Сценарий под фотографией на странице объекта. Не отдельная карточка:
   это нижний этаж той же плашки, что держит фото, отбитый волоском. */
.stage-usecase {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.stage-usecase__title {
    color: var(--text-primary);
}

.usecase__tags {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

/* =========================================================
   /manuals — раздел инструкций и поддержки
   ========================================================= */
.manuals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.manual-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 80%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.manual-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.manual-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.manual-card__head .t-mono--xs {
    color: var(--tech-line-hi);
}

.manual-card__scheme {
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 50%, rgba(143,168,184,0.04) 0%, transparent 70%),
        var(--bg-page);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.manual-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.manual-card__steps {
    list-style: none;
    padding: var(--space-4) 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.manual-card__steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.manual-card__steps li .t-mono--xs {
    color: var(--tech-line-hi);
}

.manual-card__foot {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

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

/* Поддержка + FAQ */
.support-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
}

.support-grid__col {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

.support-grid__col--cta {
    background:
        radial-gradient(circle at 100% 0%, rgba(143,168,184,0.06) 0%, transparent 50%),
        var(--bg-deep);
}

.support-grid__col--cta .btn {
    align-self: flex-start;
    margin-top: auto;
}

.support-cta__title {
    color: var(--text-primary);
}

.support-cta__note {
    color: var(--text-faint);
    margin-top: var(--space-3);
}

/* FAQ — раскрываемые блоки */
.faq {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4) 0;
}

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { display: none; content: ''; }

.faq summary::after {
    content: '+';
    color: var(--tech-line-hi);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    transition: transform var(--transition-base);
}

.faq[open] summary::after {
    transform: rotate(45deg);
}

.faq summary:hover {
    color: var(--tech-line-hi);
}

.faq p {
    margin-top: var(--space-3);
    color: var(--text-muted);
}

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

/* ============================================================
   №1 — острые углы у крупных «окошек» на главной: ОТКЛОНЕНО.
   Проба по просьбе дизайнера (июнь 2026), скоуп был на .page--home.
   Сергей оценил на живом сайте 09.09.2026 — не понравилось, откатили.
   Скругления остаются везде. Правило удалено намеренно, не восстанавливать.
   ============================================================ */

/* №6 — неактивный бейдж «3D / скоро» на карточке товара: выглядит как
   вкладка, но не кликается (3D-конфигуратор появится позже). */
.stage-tab--soon {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* ============================================================
   СЛОГАН В HERO И ЛАТИНСКИЕ ДУБЛИ НАЗВАНИЙ (окт. 2026)
   По брифу: весь видимый текст — русский, латиница допустима только
   в названии бренда и рядом с русским названием объекта.
   ============================================================ */

/* Манифест бренда — завершающая строка того же абзаца, а не отдельный блок:
   живёт внутри .hero__lead и наследует его шрифт и кегль. Отдельным элементом
   (своим шрифтом или крупным отступом) фраза читалась как подпись сбоку,
   а не как вывод из сказанного выше. Светлее абзаца — чтобы мысль закрывалась
   на ней, а не растворялась. */
.hero__manifest {
    display: block;
    margin-top: var(--space-4);
    color: var(--text-primary);
}



/* ============================================================
   ГАЛОЧКА СОГЛАСИЯ И ПРАВОВАЯ СТРАНИЦА (окт. 2026)
   ============================================================ */

.order-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.order-form__checkbox {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--tech-line-hi);
}

/* Невалидное состояние прилетает из main.js по имени поля. У чекбокса нет
   рамки, поэтому подсвечиваем контуром. */
.order-form__checkbox.is-invalid {
    outline: 2px solid var(--tech-line-hi);
    outline-offset: 2px;
}

.order-form__consent a {
    color: var(--text-muted);
    text-decoration: underline;
}

.site-footer__legal {
    margin-top: 0;
    text-align: right;
}

@media (max-width: 768px) {
    .site-footer__legal {
        text-align: left;
    }
}

.site-footer__legal a {
    color: var(--text-subtle);
    text-decoration: none;
}

.site-footer__legal a:hover {
    color: var(--text-muted);
}

/* ---- Правовая страница ---- */

.legal {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.legal__block > * + * {
    margin-top: var(--space-4);
}

.legal__h3 {
    margin-top: var(--space-7);
    font-family: var(--font-display);
    font-size: var(--fs-lg, 18px);
    font-weight: 500;
    color: var(--text-primary);
}

.legal__list {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.legal__specs {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.legal__row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
}

.legal__row dd {
    margin: 0;
    color: var(--text-primary);
}

.legal__row a {
    color: var(--text-muted);
}

.legal__updated {
    margin-top: var(--space-7);
    color: var(--text-faint);
}

@media (max-width: 600px) {
    .legal__row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}


/* ============================================================
   ПРАВОВЫЕ СТРАНИЦЫ: СПИСОК ДОКУМЕНТОВ И ТАБЛИЦЫ (окт. 2026)
   ============================================================ */

.legal__back {
    color: inherit;
}

/* Кнопка, которая выглядит ссылкой: «настройки cookie» внутри текста. */
.legal__link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.legal__docs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.legal__doc {
    padding: var(--space-5);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.legal__doc > * + * {
    margin-top: var(--space-2);
}

.legal__doc-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
}

.legal__doc-link:hover {
    color: var(--tech-line-hi);
}

.legal__doc-arrow {
    color: var(--text-subtle);
}

/* Документ, которого ещё нет: видно, что он запланирован, но кликать нечего. */
.legal__doc--soon {
    opacity: 0.55;
}

/* Широкие таблицы (цели обработки, типы cookie) скроллятся внутри себя,
   чтобы страница не ехала вбок на телефоне. */
.legal__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.legal__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.legal__table th,
.legal__table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.legal__table th {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-subtle);
    font-weight: 400;
    white-space: nowrap;
}

.legal__table td {
    color: var(--text-muted);
}

.legal__table tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   COOKIE-БАННЕР
   ============================================================ */

/* Атрибут hidden должен побеждать display из классов ниже: без этого панель
   настроек и кнопка «Сохранить выбор» видны всегда. */
.cookie-banner [hidden] {
    display: none !important;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--ink-2);
    border-top: 1px solid var(--line-2);
}

.cookie-banner__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cookie-banner__text {
    margin: 0;
    max-width: 70ch;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.cookie-banner__text a {
    color: var(--text-primary);
}

.cookie-banner__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--ink-1);
    border: 1px solid var(--line-1);
    border-radius: var(--radius-md);
}

.cookie-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.cookie-opt input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--tech-line-hi);
}

.cookie-opt input:disabled {
    cursor: not-allowed;
}

.cookie-opt__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-primary);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.site-footer__cookie-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-subtle);
    text-decoration: underline;
    cursor: pointer;
}

.site-footer__cookie-btn:hover {
    color: var(--text-muted);
}

@media (min-width: 900px) {
    .cookie-banner__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-5) var(--space-6);
    }

    /* Панель настроек разворачивает баннер в колонку — иначе переключатели
       не помещаются рядом с кнопками. */
    .cookie-banner__inner:has(.cookie-banner__panel:not([hidden]))  {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions {
        flex-wrap: nowrap;
    }
}


/* ============================================================
   ЦЕНА И ГАБАРИТЫ В КАРТОЧКАХ (окт. 2026)
   ============================================================ */

/* Строка «40 × 37 × 37 см · 5 кг · сталь» под названием. */
.product-card__dims {
    color: var(--text-subtle);
}

/* Подвал карточки: цена слева, «Подробнее» справа. */
.product-card__price {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;      /* «27 000 ₽» не должно переноситься */
}

.product-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Цена на странице объекта — крупно, сразу под описанием. */
.product-info__price {
    margin: var(--space-5) 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-2xl, 32px);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Сантиметры в карточке координат — тише координат, но читаемо. */
.coord-card__cm {
    display: inline-block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    white-space: nowrap;
}


/* ============================================================
   АНГЛИЙСКОЕ НАЗВАНИЕ РЯДОМ С РУССКИМ (окт. 2026)
   Порядок на сайте: русское название, затем английское, затем код.
   Русское — основное: по нему ищут. Английское и код идут тише,
   как технические подписи.
   ============================================================ */
.product-card__en,
.product-info__en {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-subtle);
    white-space: nowrap;
}

.product-info__alt {
    display: inline-block;
    white-space: nowrap;
}

.product-info__en,
.product-info__code {
    font-size: 0.45em;
}

/* Код конфигурации в заголовке объекта. Светлее латиницы: это рабочее
   обозначение, по которому объект находят в серии, а не перевод названия. */
.product-info__code {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    white-space: nowrap;
}

/* В матрице на первом экране ячейки узкие — переносим подписи,
   чтобы длинное «Приставной столик» не ломало сетку. */
.hero-matrix figcaption .product-card__en,
.hero-matrix figcaption .product-card__code {
    display: inline-block;
}

/* Названия разной длины: «Этажерка Shelf 2×1×1» влезает в строку,
   «Журнальный столик Coffee Table 1×2×2» — нет. Без резерва высоты
   третья карточка съезжала вниз и ломала выравнивание спецификаций. */
.product-card__title {
    flex-wrap: wrap;
    min-height: 2.6em;
    align-content: flex-start;
}


/* Первый экран без правой колонки: на /system снят 3D-блок, и сетка
   из двух колонок оставляла пустое место. */
.hero--single {
    grid-template-columns: 1fr;
}

.hero--single .hero__col--text {
    max-width: 760px;
}


/* ============================================================
   МАТЕРИАЛЫ И ПОКРЫТИЕ на /system (окт. 2026)
   Цвет назван здесь один раз на всю серию вместо того, чтобы
   повторяться в характеристиках каждого объекта.
   ============================================================ */
.matspec {
    margin-top: var(--space-10, 64px);
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.matspec__title {
    margin: 0 0 var(--space-5);
}

.matspec__list {
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.matspec__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
}

.matspec__row dt {
    color: var(--tech-line-hi);
}

.matspec__row dd {
    margin: 0;
}

@media (max-width: 480px) {
    /* На узком экране подпись уходит над значением, иначе 110 px съедают строку. */
    .matspec__row { grid-template-columns: 1fr; gap: var(--space-1, 4px); }
}

/* ============================================================
   ФОТО-ПЛАШКА С ИНЖЕНЕРНОЙ РАЗМЕТКОЙ (окт. 2026)

   На главной в блоке «Серия 01» схемы объектов убраны: фото обтравлены
   и стоят на том же фоне, что страница, — чертёж поверх них был бы
   вторым изображением того же самого. Вместо него координаты и габарит
   подписаны прямо на снимке.

   В каталоге поведение прежнее: схема, а фото по наведению.
   ============================================================ */

.product-card__scene--plate .product-card__photo {
    opacity: 1;
    transform: none;
}

/* Фон кадра совпадает с фоном страницы, поэтому рамка сцены здесь лишняя:
   без неё снимок не выглядит вклеенным прямоугольником. */
.product-card__scene--plate {
    border-color: transparent;
    background: transparent;
}

.scene-marks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.scene-marks__corner {
    fill: none;
    stroke: var(--tech-line);
    stroke-width: 0.35;
    opacity: 0.5;
}

.scene-note {
    position: absolute;
    z-index: 4;
    color: var(--tech-line-hi);
    opacity: 0.8;
    pointer-events: none;
    white-space: nowrap;
}

.scene-note--code { top: 16px; left: 18px; }
.scene-note--dims { bottom: 16px; left: 18px; }

/* На наведении разметка подсвечивается — карточка остаётся кликабельной
   и отзывчивой, хотя переключать больше нечего. */
.product-card:hover .scene-marks__corner { opacity: 0.8; }
.product-card:hover .scene-note          { opacity: 1; }

@media (max-width: 520px) {
    /* На узкой карточке подписи налезали бы на объект. */
    .scene-note--code { top: 10px; left: 12px; }
    .scene-note--dims { bottom: 10px; left: 12px; }
}

/* =========================================================
   ПЕРВЫЙ ЭКРАН НА ФОТОГРАФИИ
   Кадр узла во всю ширину секции, текст поверх. Шторка слева
   впечатана в сам файл, а не нарисована градиентом поверх:
   так текст читается одинаково на любой ширине экрана, а кадр
   не приходится перекрывать второй раз в CSS.
   ========================================================= */
.chapter--hero-photo {
    background-image: url('/assets/img/ui/hero-node-zoom.webp');
    background-size: cover;
    background-position: 58% center;
    background-repeat: no-repeat;
    min-height: 720px;
}

/* Текстовая колонка держится левой части кадра, где затемнение. */
.chapter--hero-photo .hero {
    grid-template-columns: minmax(0, 620px) 1fr;
}

/* Blur-сферы главы на фотографии не нужны: они спорят со светом кадра. */
.chapter--hero-photo .chapter__orb { display: none; }

/* Текст лежит выше фотографии. */
.chapter--hero-photo > .container { position: relative; z-index: 1; }

@media (max-width: 960px) {
    /* Узкий экран обрезает кадр по бокам — сдвигаем вправо, чтобы
       в поле зрения оставался узел, а не пустая стена. */
    .chapter--hero-photo { background-position: 66% center; }

    /* Шторка в файле нарисована слева, а на узком экране видно правую
       часть кадра — текст оказывался на светлом. Здесь затемняем сверху
       вниз: заголовок и абзац встают на тёмное, узел внизу остаётся
       открытым. */
    .chapter--hero-photo::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(10, 10, 12, 0.92) 0%,
            rgba(10, 10, 12, 0.78) 45%,
            rgba(10, 10, 12, 0.35) 100%);
    }
}

@media (max-width: 600px) {
    .chapter--hero-photo { min-height: 560px; }
}

/* =========================================================
   ПОДПИСКА НА РАССЫЛКУ — /subscribe
   ========================================================= */
.subscribe-layout {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-8);
    align-items: start;
}

.subscribe-intro .chapter__header { margin-bottom: var(--space-8); }

.subscribe-facts {
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-page);
}

.subscribe-form-block {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-7);
    box-shadow: var(--shadow-md), var(--shadow-inset);
}

/* Выпадающий список набран как поле ввода, чтобы форма читалась одним
   столбцом, а не пестрила системным видом селекта. */
.order-form__select {
    appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-subtle) 50%),
        linear-gradient(135deg, var(--text-subtle) 50%, transparent 50%);
    background-position: right 20px center, right 14px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: var(--space-8);
}

.order-form__select option { background: var(--bg-card); color: var(--text-primary); }

/* Пометка у добровольного согласия: человек должен видеть, что эту
   галочку можно не ставить и подписка всё равно состоится. */
.subscribe-optional {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .subscribe-layout { grid-template-columns: 1fr; }
}