/*
 * КОНТУР - база: токены, типографика, сетка, шапка, подвал, кнопки, попап.
 * Постраничные секции лежат в pages.css.
 *
 * Всё завёрнуто в @layer kontur по требованию спецификации: слой объявлен
 * один и последним, поэтому внутренняя специфичность перестаёт быть
 * предметом спора - порядок правил решает всё.
 */

@layer kontur {

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

:root {
    color-scheme: dark;

    /* примитивы: единственное место, где живёт HEX */
    --graphite-950: #0B0D0E;
    --graphite-900: #121618;
    --graphite-850: #1A1F22;
    --graphite-800: #232A2E;
    --graphite-750: #272E32;
    --graphite-650: #39434A;
    --graphite-500: #626E75;
    --graphite-300: #8A949A;
    --graphite-200: #A6B0B6;
    --graphite-050: #E9EDEF;
    --amber-500: #F2A93B;
    --amber-400: #FFBB5C;
    --amber-600: #D18F26;
    --green-500: #5CC08F;
    --red-500: #E4573D;

    /* семантика: вёрстка обращается только сюда */
    --surface-0: var(--graphite-950);
    --surface-1: var(--graphite-900);
    --surface-2: var(--graphite-850);
    --surface-3: var(--graphite-800);
    --rule: var(--graphite-750);
    --rule-strong: var(--graphite-650);
    --control-line: var(--graphite-500);
    --ink-1: var(--graphite-050);
    --ink-2: var(--graphite-200);
    --ink-3: var(--graphite-300);
    --signal: var(--amber-500);
    --signal-hi: var(--amber-400);
    --signal-deep: var(--amber-600);
    --status-ok: var(--green-500);
    --status-alarm: var(--red-500);

    /* компонентные: не смотрят в примитив напрямую */
    --btn-primary-bg: var(--signal);
    --btn-primary-ink: var(--surface-0);
    --field-line: var(--control-line);
    --field-line-focus: var(--signal);
    --ch-fill: var(--surface-2);

    /* шкала отступов */
    --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 224px;

    /* сетка */
    --pad: 20px;
    --gap: 16px;
    --cols: 4;
    --hdr-h: 60px;

    /* мера строки: за этими значениями кириллица перестаёт читаться потоком */
    --measure-body: 62ch;
    --measure-lead: 46ch;
}

@media (min-width: 600px) { :root { --pad: 24px; --gap: 20px; --cols: 8; } }
@media (min-width: 900px) { :root { --pad: 40px; --gap: 24px; --cols: 8; --hdr-h: 72px; } }
@media (min-width: 1200px){ :root { --pad: 56px; --gap: 24px; --cols: 12; } }

/* ═══ Сброс ════════════════════════════════════════════════════════════ */

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

html {
    /* Липкая шапка перекрывает якорь и элемент, получивший фокус по Tab. */
    scroll-padding-top: 76px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) { html { scroll-padding-top: 88px; } }

body {
    margin: 0;
    background: var(--surface-0);
    color: var(--ink-2);
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 380, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    font-size: 17px;
    line-height: 1.65;
    /* Скруглений в проекте нет вовсе - форма бренда это фаска. */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ink-1);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--signal);
    color: var(--surface-0);
}
.skip-link:focus { left: 0; }

/* ═══ Типографика ══════════════════════════════════════════════════════ */

/*
 * Вес всегда внутри font-variation-settings. Свойство font-weight в проекте
 * не используется нигде, кроме @font-face: SHRP - незарегистрированная ось,
 * и смешивание двух способов задать вес даёт непредсказуемое начертание.
 */
.t-sharp { font-family: Geologica, system-ui, sans-serif; font-variation-settings: 'wght' 560, 'SHRP' 100, 'CRSV' 0, 'slnt' 0; }
.t-soft  { font-family: Geologica, system-ui, sans-serif; font-variation-settings: 'wght' 380, 'SHRP' 0, 'CRSV' 0, 'slnt' 0; }
.t-mono, .mono-label, .mono-data {
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-variation-settings: normal;
    font-feature-settings: 'tnum' 1;
}
.t-soft strong, .t-soft b, p strong, p b { font-variation-settings: 'wght' 600, 'SHRP' 0, 'CRSV' 0, 'slnt' 0; }

.d1 {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 600, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(38px, 8.5vw, 88px);
    line-height: .96;
    letter-spacing: -.025em;
    color: var(--ink-1);
    text-wrap: balance;
}
.d2 {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 560, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(30px, 5.2vw, 68px);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--ink-1);
    text-wrap: balance;
}
.h2 {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 560, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(25px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink-1);
    text-wrap: balance;
}
.h3 {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 520, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink-1);
}
.h4 {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 520, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    font-size: 19px;
    line-height: 1.35;
    color: var(--ink-1);
}
.lead {
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 380, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.55;
    max-width: var(--measure-lead);
    color: var(--ink-2);
    text-wrap: pretty;
}
.body { font-size: 17px; line-height: 1.65; max-width: var(--measure-body); color: var(--ink-2); }
.body-s { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.caption { font-size: 13px; line-height: 1.45; letter-spacing: .01em; color: var(--ink-3); }
.mono-label {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mono-data { font-size: 14px; line-height: 1.45; letter-spacing: .02em; color: var(--ink-1); }
.num-xl {
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-variation-settings: normal;
    font-feature-settings: 'tnum' 1;
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink-1);
}
/*
 * num-xl намеренно тонкий: крупная цифра жирным весом читается как реклама,
 * тонким - как показание прибора. У моно вес фиксирован, поэтому «тонкость»
 * достигается размером и разрядкой, а не осью.
 */

/* Абзацы в узких колонках переносим по слогам: иначе рваный правый край. */
.hyph { hyphens: auto; }

/* ═══ Сетка и ритм ═════════════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--pad);
}
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }

.sec { padding-block: 64px; position: relative; }
.sec--dense { padding-block: 56px; }
.sec--pause { padding-block: 96px; }
.sec--node  { padding-block: 64px; background: var(--surface-1); --ch-fill: var(--surface-1); }
.sec--flush { padding-block: 0; }

@media (min-width: 600px) {
    .sec { padding-block: 80px; }
    .sec--dense { padding-block: 64px; }
    .sec--pause { padding-block: 120px; }
    .sec--node { padding-block: 80px; }
}
@media (min-width: 900px) {
    .sec { padding-block: 96px; }
    .sec--dense { padding-block: 80px; }
    .sec--pause { padding-block: 160px; }
    .sec--node { padding-block: 96px; }
}
@media (min-width: 1200px) {
    .sec { padding-block: 128px; }
    .sec--dense { padding-block: 96px; }
    .sec--pause { padding-block: 224px; }
    .sec--node { padding-block: 112px; }
}

/* Разделитель секций там, где нужен явный рез. */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ═══ Левый рельс ══════════════════════════════════════════════════════ */

/*
 * Рельс не декор: на нём стоят засечки секций, активная подсвечивается.
 * До 900px рельса нет совсем - в узкой колонке он съедает поле и мешает.
 */
.main { position: relative; }

@media (min-width: 900px) {
    .main::before {
        content: '';
        position: absolute;
        inset-block: 0;
        left: calc((100vw - min(100vw, 1440px)) / 2 + var(--pad) - 24px);
        width: 1px;
        background: var(--rule);
        pointer-events: none;
    }
}

.tick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--s-5);
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    position: relative;
}
.tick__num { color: var(--ink-2); }
.tick::before {
    content: '';
    position: absolute;
    left: -24px;
    width: 12px;
    height: 1px;
    background: var(--rule-strong);
    transition: width .2s ease-out, background-color .2s ease-out;
}
@media (max-width: 899px) { .tick::before { display: none; } }
.tick.is-active::before { width: 20px; background: var(--signal); }
.tick.is-active .tick__num { color: var(--signal); }

/* ═══ Фаска ════════════════════════════════════════════════════════════ */

/*
 * Фон и срез рисуют псевдоэлементы, а не clip-path на самом элементе:
 * clip-path съел бы outline при обходе с клавиатуры.
 */
.chamfer { position: relative; --ch: 8px; }
.chamfer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rule);
    clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.chamfer::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--ch-fill);
    clip-path: polygon(calc(var(--ch) - 1px) 0, 100% 0, 100% calc(100% - var(--ch) + 1px), calc(100% - var(--ch) + 1px) 100%, 0 100%, 0 calc(var(--ch) - 1px));
}
.chamfer > * { position: relative; z-index: 1; }

/* Миниатюра и фото: срез только правого нижнего угла, 6px. */
.cut6 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }

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

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 600, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}
@media (min-width: 600px) { .btn { height: 48px; } }
.btn > * { position: relative; z-index: 1; }
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    transition: background-color .18s ease-out;
}
.btn__arrow { transition: transform .18s ease-out; font-size: 14px; }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

.btn--primary { color: var(--btn-primary-ink); }
.btn--primary::before { background: var(--btn-primary-bg); }
.btn--primary:hover::before {
    background: #FFBB5C;
    background: oklch(from var(--signal) calc(l + .05) calc(c - .011) h);
}
.btn--primary:active::before {
    background: #D18F26;
    background: oklch(from var(--signal) calc(l - .087) calc(c - .01) h);
}
.btn--primary:active { transform: translateY(1px); transition: transform .09s ease-out; }
.btn:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 3px; }
.btn[disabled] { cursor: not-allowed; color: var(--ink-3); }
.btn[disabled]::before { background: var(--rule-strong); }

.btn--ghost { color: var(--ink-1); }
.btn--ghost::before { background: var(--rule-strong); }
.btn--ghost::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--ch-fill);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.btn--ghost:hover { color: var(--signal); }
.btn--ghost:hover::before { background: var(--signal); }

.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--wide { width: 100%; }
.btn--tall { height: 56px; width: 100%; }

/* Кнопка в состоянии отправки: моно-точка вместо стрелки, без спиннера. */
.btn.is-busy .btn__arrow { animation: blink .9s linear infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ═══ Ссылка-действие ══════════════════════════════════════════════════ */

.alink {
    position: relative;
    display: inline-block;
    color: var(--ink-1);
    font-variation-settings: 'wght' 450, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    padding-bottom: 4px;
    white-space: nowrap;
}
.alink::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--rule);
}
.alink::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .18s ease-out;
}
.alink:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: .24s; }
.alink .btn__arrow { display: inline-block; font-size: 13px; transition: transform .18s ease-out; }
.alink:hover .btn__arrow { transform: translate(3px, -3px); }

/* Ссылка внутри абзаца: подчёркивание приглушено, цвет линии - сигнал. */
.body a:not(.alink):not(.btn),
.body-s a:not(.alink):not(.btn),
.caption a:not(.alink):not(.btn) {
    color: var(--ink-1);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--signal) 45%, transparent);
    transition: text-decoration-color .18s ease-out;
}
.body a:hover, .body-s a:hover, .caption a:hover { text-decoration-color: var(--signal); }

/* ═══ Шапка ════════════════════════════════════════════════════════════ */

.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .2s ease-out, border-color .2s ease-out;
}
.hdr.is-stuck { background: var(--surface-1); border-bottom-color: var(--rule); }

.hdr__in {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--hdr-h);
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--pad);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink-1); }
.brand__mark { display: block; width: 28px; height: 28px; color: var(--ink-1); }
.brand__word {
    font-size: 18px;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--ink-1);
}

.nav { margin-inline-end: auto; display: none; }
@media (min-width: 1100px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 28px; }
.nav__list a {
    position: relative;
    display: block;
    padding-block: 6px;
    font-size: 15px;
    font-variation-settings: 'wght' 450, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    color: var(--ink-2);
    transition: color .18s ease-out;
}
/*
 * Штрих слева, а не подчёркивание на всю ширину: короткая засечка читается
 * как деление приборной шкалы и рифмуется с левым рельсом.
 */
.nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 2px;
    background: var(--rule-strong);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease-out;
}
.nav__list a:hover { color: var(--ink-1); }
.nav__list a:hover::after { transform: scaleX(1); }
.nav__list .is-current > a { color: var(--ink-1); }
.nav__list .is-current > a::after { background: var(--signal); transform: scaleX(1); }
.nav__list a:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 4px; }

.hdr__tel { display: none; }
@media (min-width: 1200px) { .hdr__tel { display: block; color: var(--ink-1); } }
.hdr__btn { display: none; }
@media (min-width: 700px) { .hdr__btn { display: inline-flex; } }
.nav ~ .hdr__tel { margin-left: 0; }
@media (max-width: 1099px) { .brand { margin-inline-end: auto; } }

.burger {
    width: 44px;
    height: 44px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
}
@media (min-width: 1100px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink-1); }

/* ═══ Мобильное меню ═══════════════════════════════════════════════════ */

.mnav {
    width: min(420px, 100%);
    max-width: 100%;
    height: 100svh;
    max-height: 100svh;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--rule);
    background: var(--surface-1);
    color: var(--ink-2);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}
.mnav::backdrop { background: rgb(5 6 7 / .78); }
.js .mnav { transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .7, .2, 1); }
.js .mnav.is-open { transform: translateX(0); }

.mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--rule);
}
.mnav__close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer; color: var(--ink-3);
}
.mnav__close:hover { color: var(--ink-1); }

.mnav__list { padding-inline: 20px; }
.mnav__list li + li { border-top: 1px solid var(--rule); }
.mnav__list a {
    display: block;
    padding-block: 16px;
    font-size: 28px;
    font-variation-settings: 'wght' 520, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    letter-spacing: -.01em;
    color: var(--ink-1);
}
.js .mnav__list li { opacity: 0; transform: translateX(12px); transition: opacity .22s ease-out, transform .22s ease-out; }
.js .mnav.is-open .mnav__list li { opacity: 1; transform: none; }
.js .mnav.is-open .mnav__list li:nth-child(1) { transition-delay: 40ms; }
.js .mnav.is-open .mnav__list li:nth-child(2) { transition-delay: 80ms; }
.js .mnav.is-open .mnav__list li:nth-child(3) { transition-delay: 120ms; }
.js .mnav.is-open .mnav__list li:nth-child(4) { transition-delay: 160ms; }
.js .mnav.is-open .mnav__list li:nth-child(5) { transition-delay: 200ms; }
.js .mnav.is-open .mnav__list li:nth-child(6) { transition-delay: 240ms; }

.mnav__foot {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
    margin-top: 24px;
    border-top: 1px solid var(--rule);
}
.mnav__foot .btn { width: 100%; margin-top: 8px; }

/* ═══ Подвал ═══════════════════════════════════════════════════════════ */

.ftr {
    background: var(--surface-1);
    border-top: 1px solid var(--rule);
    padding-block: 64px 32px;
    --ch-fill: var(--surface-1);
}
@media (min-width: 900px) { .ftr { padding-block: 80px 32px; } }
.ftr__cols { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ftr__cols { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } }
.ftr__cap { margin-bottom: 18px; }
.ftr__list { display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.ftr__list a { transition: color .18s ease-out; }
.ftr__list a:hover { color: var(--ink-1); }
.ftr__note { color: var(--ink-3); font-size: 13px; }
.ftr__tg { margin-top: 20px; }
.ftr__tg a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.ftr__tg a:hover { color: var(--ink-1); }

/*
 * Маркировка: шильдик на корпусе. Цвет линии, не белый и не акцентный -
 * иначе слово начинает спорить с заголовками и превращается в баннер.
 */
.ftr__mark {
    margin-block: 56px 32px;
    font-family: Geologica, system-ui, sans-serif;
    font-variation-settings: 'wght' 300, 'SHRP' 100, 'CRSV' 0, 'slnt' 0;
    font-size: clamp(38px, 12.4vw, 190px);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--rule-strong);
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

.ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.ftr__bottom a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.ftr__bottom a:hover { text-decoration-color: var(--signal); }

/* ═══ Появление блоков (A3) ════════════════════════════════════════════ */

/*
 * Начальное состояние живёт только под .js. Без скриптов класс не появится,
 * и содержимое останется видимым - это единственный безопасный способ
 * прятать блоки до появления.
 */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ Приборное перекрестие (A10) ══════════════════════════════════════ */

.cross { position: relative; }
.cross__x, .cross__y, .cross__read { display: none; }

@media (hover: hover) and (min-width: 1200px) {
    .cross__x, .cross__y {
        display: block;
        position: absolute;
        background: var(--rule-strong);
        pointer-events: none;
        opacity: 0;
        z-index: 3;
    }
    .cross__x { left: 0; right: 0; height: 1px; top: 0; transform: translateY(var(--my, 0px)); }
    .cross__y { top: 0; bottom: 0; width: 1px; left: 0; transform: translateX(var(--mx, 0px)); }
    .cross__read {
        display: block;
        position: absolute;
        top: 12px;
        right: 16px;
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        color: var(--ink-3);
    }
    .cross.is-live .cross__x,
    .cross.is-live .cross__y,
    .cross.is-live .cross__read { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cross__x, .cross__y, .cross__read { display: none !important; }
}

/* ═══ Обмер (A5) ═══════════════════════════════════════════════════════ */

/*
 * Подпись сайта: при наведении по краям элемента прорисовываются выносные
 * линии с реальными числами объекта - ровно так их ставят на чертеже.
 */
.gauge { position: relative; }
.gauge__l { position: absolute; background: var(--signal); pointer-events: none; z-index: 3; }
.gauge__l--t { top: 14px; left: 14px; right: 14px; height: 1px; transform: scaleX(0); transition: transform .24s ease-out; }
.gauge__l--b { bottom: 14px; left: 14px; right: 14px; height: 1px; transform: scaleX(0); transition: transform .24s ease-out; }
.gauge__l--l { left: 14px; top: 14px; bottom: 14px; width: 1px; transform: scaleY(0); transition: transform .24s ease-out .06s; }
.gauge__l--r { right: 14px; top: 14px; bottom: 14px; width: 1px; transform: scaleY(0); transition: transform .24s ease-out .06s; }
.gauge__n {
    position: absolute;
    z-index: 4;
    padding: 2px 6px;
    background: var(--surface-0);
    color: var(--signal);
    opacity: 0;
    transition: opacity .16s ease-out .2s;
    pointer-events: none;
}
.gauge__n--t { top: 6px; left: 50%; transform: translateX(-50%); }
.gauge__n--l { left: 4px; top: 50%; transform: translateY(-50%); }
.gauge:hover .gauge__l--t, .gauge:hover .gauge__l--b { transform: scaleX(1); }
.gauge:hover .gauge__l--l, .gauge:hover .gauge__l--r { transform: scaleY(1); }
.gauge:hover .gauge__n { opacity: 1; }
@media (hover: none) { .gauge__l, .gauge__n { display: none; } }

/* ═══ Фото ═════════════════════════════════════════════════════════════ */

.ph { position: relative; overflow: hidden; background: var(--surface-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
/* Единственный градиент в проекте: затемнение под текстом поверх фото. */
.ph--shade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(11 13 14 / .92) 0%, rgb(11 13 14 / 0) 62%);
    pointer-events: none;
}
.ph__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--s-6); }

/* Возврат цвета (A13): цвет как награда за внимание, а не как состояние покоя. */
.ph--gray img { filter: grayscale(1) contrast(1.05); transition: filter .32s ease-out; }
.ph--gray:hover img { filter: grayscale(0) contrast(1); }

/* ═══ Полоса показателей: размерная цепочка ════════════════════════════ */

.dim { position: relative; }
.dim__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--rule);
}
@media (min-width: 900px) { .dim__row { grid-template-columns: repeat(var(--dim-n, 4), 1fr); } }
.dim__cell {
    position: relative;
    padding: 20px 16px 0 0;
    border-left: 1px solid var(--rule);
    padding-left: 16px;
}
.dim__cell:nth-child(-n+2) { border-top: 0; }
@media (max-width: 899px) {
    .dim__cell:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 20px; }
    .dim__cell:first-child, .dim__cell:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (min-width: 900px) {
    .dim__cell { border-left: 0; padding-left: 0; }
    /* Выносные штрихи вниз на каждой засечке - как размер на чертеже. */
    .dim__cell::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 8px;
        background: var(--rule-strong);
    }
    .dim__cell:first-child::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 8px;
        background: var(--rule-strong);
    }
    .dim__cell + .dim__cell { padding-left: 20px; }
    .dim__cell + .dim__cell::before { left: 0; }
}
.dim__num { display: block; }
.dim__cap { display: block; margin-top: 10px; }

/* ═══ Попап ════════════════════════════════════════════════════════════ */

.modal {
    width: 100%;
    max-width: 100%;
    max-height: 92svh;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    overflow: visible;
}
.modal::backdrop { background: rgb(5 6 7 / .78); opacity: 0; transition: opacity .2s ease-out; }
.modal.is-open::backdrop { opacity: 1; }

.modal__panel {
    position: relative;
    max-height: 92svh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--surface-2);
    /* Фаска только у левого верхнего угла: шторка снизу, нижние углы не видны. */
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.modal__grid { display: grid; }

.modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--rule);
}
.modal__ctx { display: flex; align-items: center; gap: 14px; }
.modal__close {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    margin-right: -12px;
    border: 0; background: none; cursor: pointer; color: var(--ink-3);
    transition: color .18s ease-out;
}
.modal__close:hover { color: var(--ink-1); }

.modal__main { padding: 24px 20px; }
.modal__side {
    padding: 20px;
    background: var(--surface-1);
    border-top: 1px solid var(--rule);
}
.modal__title { margin-bottom: 10px; }
.modal__sub { margin-bottom: 24px; }
.modal__sub a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--signal) 45%, transparent); }

.modal__side-full { display: none; }
.modal__side-short { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }

/* ═══ Поля формы ═══════════════════════════════════════════════════════ */

.form__rows { position: relative; display: grid; gap: 4px; }
.form__pair { display: grid; gap: 4px; }
@media (min-width: 700px) { .form__pair { grid-template-columns: 1fr 1fr; gap: 20px; } }

.field { position: relative; padding-bottom: 20px; }
.field__lab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color .14s ease-out;
}
.field__req { color: var(--signal); }
/* Каретка слева от подписи - признак «курсор здесь», а не декоративная точка. */
.field__caret { color: var(--signal); opacity: 0; transition: opacity .14s ease-out; }
.field input, .field textarea {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--field-line);
    background: none;
    color: var(--ink-1);
    /* 16px на мобильном обязателен: меньше - и iOS Safari зумит страницу. */
    font-size: 16px;
    font-variation-settings: 'wght' 380, 'SHRP' 0, 'CRSV' 0, 'slnt' 0;
    transition: border-color .14s ease-out;
    border-radius: 0;
}
@media (min-width: 900px) {
    .field input, .field textarea { height: 40px; font-size: 17px; }
}
.field textarea { height: auto; min-height: 76px; padding-bottom: 8px; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-width: 2px; border-bottom-color: var(--field-line-focus); }
.field:focus-within .field__lab { color: var(--signal); }
.field:focus-within .field__caret { opacity: 1; }
.field:focus-within:has(:focus-visible) { outline: 2px solid var(--ink-1); outline-offset: 4px; }

.field.is-ok input, .field.is-ok textarea { border-bottom-color: var(--ink-3); }
.field__ok {
    position: absolute;
    right: 0;
    bottom: 22px;
    font-size: 12px;
    color: var(--status-ok);
    opacity: 0;
    transition: opacity .14s ease-out;
}
.field.is-ok .field__ok { opacity: 1; }

.field.is-invalid input, .field.is-invalid textarea { border-bottom-width: 2px; border-bottom-color: var(--status-alarm); }
.field.is-invalid .field__lab { color: var(--status-alarm); }
/*
 * Место под сообщение зарезервировано всегда: текст появляется на готовой
 * строке, и макет не прыгает на 20px при первой же ошибке.
 */
.field__err {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--status-alarm);
}

.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check input {
    position: absolute;
    opacity: 0;
    width: 20px; height: 20px;
    margin: 0;
}
.check__box {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--control-line);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
    transition: background-color .14s ease-out;
}
.check__box svg { position: absolute; inset: 4px; opacity: 0; color: var(--surface-0); }
.check input:checked + .check__box { background: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink-1); outline-offset: 3px; }
.check__text { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.check__text a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }

.form__note { margin-top: 4px; }
.form__err { margin-bottom: 12px; color: var(--status-alarm); font-size: 14px; }

/* Honeypot: уводим за экран, но не display:none - часть ботов такие поля пропускает. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form.is-sending .field { opacity: .55; pointer-events: none; }

/* Экран благодарности */
.modal__ok { display: grid; gap: 14px; }
.modal__ok h3 { outline: none; }

/* Десктопная композиция окна */
@media (min-width: 900px) {
    .modal { max-width: 780px; margin: auto; }
    .modal__panel {
        max-height: min(92svh, 760px);
        /* 8px, срез левого верхнего и правого нижнего угла - как у плашки. */
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        background: var(--rule-strong);
        padding: 1px;
    }
    .modal__inner {
        background: var(--surface-2);
        clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    }
    .modal__grid { grid-template-columns: 1.35fr 1fr; }
    .modal__bar { grid-column: 1 / -1; padding-inline: 32px; }
    .modal__main { padding: 32px; }
    .modal__side { padding: 32px 28px; border-top: 0; border-left: 1px solid var(--rule); }
    .modal__side-full { display: grid; gap: 16px; }
    .modal__side-short { display: none; }
}

.modal__prt { width: 96px; }
.modal__prt img { filter: grayscale(1) contrast(1.05); }
.modal__steps { display: grid; gap: 8px; }
.modal__step { display: flex; gap: 10px; align-items: baseline; }
.modal__step b { color: var(--ink-1); font-variation-settings: normal; }

/* Появление окна (A11): сначала контур, потом наполнение. */
.js .modal__panel { opacity: 0; transform: translateY(100%); transition: opacity .16s ease-out, transform .28s cubic-bezier(.2, .7, .2, 1); }
.js .modal.is-open .modal__panel { opacity: 1; transform: none; }

@media (min-width: 900px) {
    .js .modal__panel { transform: none; opacity: 1; }
    /* Рамка рисуется двумя линиями, потом проступает заливка и содержимое. */
    .js .modal__panel::before,
    .js .modal__panel::after {
        content: '';
        position: absolute;
        z-index: 2;
        background: var(--rule-strong);
        pointer-events: none;
    }
    .js .modal__panel::before { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform .18s ease-out; }
    .js .modal__panel::after { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; transition: transform .18s ease-out .06s; }
    .js .modal.is-open .modal__panel::before { transform: scaleX(1); }
    .js .modal.is-open .modal__panel::after { transform: scaleY(1); }
    .js .modal__inner { opacity: 0; transition: opacity .14s ease-out .16s; }
    .js .modal.is-open .modal__inner { opacity: 1; }
    .js .modal__grid { opacity: 0; transform: translateY(8px); transition: opacity .22s ease-out .16s, transform .22s ease-out .16s; }
    .js .modal.is-open .modal__grid { opacity: 1; transform: none; }
    .js .modal.is-closing .modal__grid { opacity: 0; transition-delay: 0s; transition-duration: .12s; }
    .js .modal.is-closing .modal__panel { opacity: 0; transform: translateY(6px); transition: opacity .16s ease-out, transform .16s ease-out; }
}
.js .modal.is-closing::backdrop { opacity: 0; }
.js .modal.is-closing .modal__panel { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .js .modal__panel, .js .modal__inner, .js .modal__grid { transform: none !important; opacity: 1 !important; }
}

/* Кнопка отправки прилипает к низу шторки на мобильном. */
.modal__submit {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: var(--surface-2);
    border-top: 1px solid var(--rule);
    margin-top: 8px;
}
@media (min-width: 900px) { .modal__submit { position: static; border-top: 0; padding-bottom: 0; background: none; } }

/* ═══ Липкая полоса с кнопкой ══════════════════════════════════════════ */

.stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--surface-1);
    border-top: 1px solid var(--rule);
    --ch-fill: var(--surface-1);
    transform: translateY(100%);
    transition: transform .2s ease-out;
}
.stickybar.is-on { transform: none; }
@media (min-width: 900px) { .stickybar { display: none; } }

/* ═══ Блокировка фона при открытом окне ════════════════════════════════ */

html.is-locked { overflow: hidden; scrollbar-gutter: stable; }

/* ═══ Финальный узел ═══════════════════════════════════════════════════ */

.node { align-items: start; row-gap: 32px; }
.node__q { grid-column: 1 / -1; }
.node__act { grid-column: 1 / -1; display: grid; justify-items: start; gap: 16px; }
@media (min-width: 1200px) {
    .node__q { grid-column: 1 / 8; }
    .node__act { grid-column: 9 / -1; }
}
.node__contacts { display: grid; gap: 6px; }
.node__contacts a { color: var(--ink-1); }
.node__contacts a:hover { color: var(--signal); }
.node__note { margin-top: 4px; }

} /* @layer kontur */