/* ============================================================
   identity-v5.css · Стрелов — четыре дизайн-кода на одной разметке
   08.09.2026. Вердикт донора по 4.0: «шрифт говно, сама раскладка ещё куда ни
   шло, надо полностью другой дизайн-код — современный хай-тек».
   Раскладка (кадр во весь экран, текст слева, служебная полоса по низу) остаётся;
   меняется всё остальное: шрифтовая пара, земля, акцент, линии, ритм, детали.

   Т1 · ТЕРМИНАЛ    — Geologica + JetBrains Mono, чёрная земля, циан, сетка-миллиметровка,
                      данные строками, всё острое. Родня: Linear, Vercel, Vanta.
   Т2 · ИНДУСТРИАЛ  — Unbounded капсом + Inter Tight, графит, сигнальный оранж,
                      гигантские номера, жёсткая горизонталь. Родня: Polestar, Nothing.
   Т3 · ОПТИКА      — Onest + Martian Mono, светлая земля, электрик-синий, воздух
                      и тонкие линии. Родня: Apple, Sminex. Единственный светлый.
   Т4 · СТЕКЛО      — Manrope + JetBrains Mono, тёмная земля со свечением,
                      полупрозрачные слои с блюром. Родня: Vision Pro, SaaS-лендинги.

   Шрифты — свободные (SIL OFL) с родной кириллицей, пул в fonts-tech.css.
   Лицензии не ограничивают: решение донора 08.09 — «на платность шрифтов положил».
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* X3 · ОДИН АДРЕС ПРОТИВ ЛИШНИХ СТУПЕНЕЙ. Корневой кегль задаёт [data-id] ниже,
   и там кламп --fs-text считается от начальных 16px (даёт 20px). Внутри страницы
   тот же токен считается уже от 20px и даёт 24,3px — поэтому любой элемент БЕЗ
   своего font-size наследовал 20px и заводил ступень из ничего (лид секции,
   пункты списков, вердикт узла, строки норм). Одна строка на body снимает весь
   класс: тело документа встаёт на ту же ступень, что и весь остальной текст. */
body { margin: 0; background: #08090A; font-size: var(--fs-text); }
[data-id] { display: block; min-height: 100vh; background: var(--bg); color: var(--fg);
            font: var(--w-text) var(--fs-text)/var(--lh) var(--font-text);
            transition: background .2s ease, color .2s ease; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ═══════════════ Т1 · ТЕРМИНАЛ ═══════════════ */
[data-id="t1"] {
  --bg: #08090A;  --bg2: #0E1013;  --bg3: #14171B;
  --fg: #E8EBEE;  --fg2: rgba(232,235,238,.62); --fg3: rgba(232,235,238,.34);
  --acc: #4DE1FF; --acc2: #16323C; --on-acc: #04121A;
  --line: rgba(232,235,238,.10); --line2: rgba(232,235,238,.22);
  --font-display: 'Geologica', system-ui, sans-serif;
  --font-text: 'Geologica', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --w-display: 700; --w-text: 400; --w-mono: 400;
  --fs-h1: clamp(2.5rem, 1rem + 4.2vw, 7.5rem);
  --fs-h2: clamp(1.75rem, 1rem + 2vw, 3.25rem);
  --fs-text: clamp(1rem, .95rem + .25vw, 1.1875rem);
  --fs-mono: .75rem;
  --lh: 1.6; --lh-display: 1.0;
  --track-h1: -.03em; --track-mono: .04em;
  --radius: 2px; --caps: none; --btn-caps: none;
  --scrim: linear-gradient(90deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.78) 34%, rgba(8,9,10,.24) 64%, transparent 86%),
           linear-gradient(180deg, transparent 40%, rgba(8,9,10,.72) 100%);
}
/* миллиметровка терминала — единственная земля с фактурой */
[data-id="t1"] .hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(77,225,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(77,225,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-id="t1"] .rubric::before { content: "// "; }
[data-id="t1"] .tile { border: 1px solid var(--line); padding: 0 0 var(--s5); }
[data-id="t1"] .tile__body { padding: 0 var(--s5); }
[data-id="t1"] .tile:hover { border-color: var(--acc); background: var(--bg2); }

/* ═══════════════ Т2 · ИНДУСТРИАЛ ═══════════════ */
[data-id="t2"] {
  --bg: #101113;  --bg2: #17191C;  --bg3: #1F2226;
  --fg: #F2F3F5;  --fg2: rgba(242,243,245,.66); --fg3: rgba(242,243,245,.38);
  --acc: #FF4D12; --acc2: #3A1408; --on-acc: #FFFFFF;
  --line: rgba(242,243,245,.12); --line2: rgba(242,243,245,.28);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'Inter Tight', system-ui, sans-serif;
  --w-display: 700; --w-text: 400; --w-mono: 700;
  --fs-h1: clamp(2.125rem, .8rem + 3.6vw, 5.5rem);
  --fs-h2: clamp(1.5rem, .9rem + 1.7vw, 2.75rem);
  --fs-text: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-mono: .6875rem;
  --lh: 1.55; --lh-display: 1.06;
  --track-h1: -.02em; --track-mono: .18em;
  --radius: 0px; --caps: uppercase; --btn-caps: uppercase;
  --scrim: linear-gradient(90deg, rgba(16,17,19,.92) 0%, rgba(16,17,19,.72) 38%, rgba(16,17,19,.18) 68%, transparent 88%),
           linear-gradient(180deg, transparent 44%, rgba(16,17,19,.78) 100%);
}
[data-id="t2"] .h1 { text-transform: uppercase; }
[data-id="t2"] .tile { border-top: 3px solid var(--acc); padding-top: var(--s4); }
[data-id="t2"] .tile__n { display: block; font-family: var(--font-display); font-weight: 700;
                          font-size: 2.5rem; line-height: 1; color: var(--acc); margin-bottom: var(--s4); }
[data-id="t2"] .btn { clip-path: polygon(0 0, 100% 0, 100% 68%, calc(100% - 14px) 100%, 0 100%); }

/* ═══════════════ Т3 · ОПТИКА (светлый) ═══════════════ */
[data-id="t3"] {
  --bg: #F4F5F7;  --bg2: #FFFFFF;  --bg3: #EAECEF;
  --fg: #0A0B0D;  --fg2: rgba(10,11,13,.64); --fg3: rgba(10,11,13,.42);
  --acc: #1B4DFF; --acc2: #E4EAFF; --on-acc: #FFFFFF;
  --line: rgba(10,11,13,.12); --line2: rgba(10,11,13,.24);
  --font-display: 'Onest', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, monospace;
  --w-display: 600; --w-text: 400; --w-mono: 400;
  --fs-h1: clamp(2.5rem, 1rem + 4.4vw, 7.75rem);
  --fs-h2: clamp(1.75rem, 1rem + 2.1vw, 3.5rem);
  --fs-text: clamp(1.0625rem, 1rem + .3vw, 1.3125rem);
  --fs-mono: .6875rem;
  --lh: 1.62; --lh-display: .98;
  --track-h1: -.035em; --track-mono: .02em;
  --radius: 0px; --caps: none; --btn-caps: none;
  --scrim: none;
}
[data-id="t3"] .hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,50%); }
[data-id="t3"] .hero__media { position: relative; grid-column: 2; grid-row: 1; }
[data-id="t3"] .hero__body { grid-column: 1; grid-row: 1; margin: 0; max-width: none;
                             padding: var(--s9) var(--gutter); }
[data-id="t3"] .hero__col { max-width: 34rem; margin-left: auto; }
[data-id="t3"] .head { color: var(--fg); }
[data-id="t3"] .strip { grid-column: 1 / -1; background: var(--bg); }
@media (max-width: 63.99rem) {
  [data-id="t3"] .hero { display: block; }
  [data-id="t3"] .hero__media { position: absolute; inset: 0; }
  [data-id="t3"] .hero__col { margin-left: 0; }
}
[data-id="t3"] .strip { color: var(--fg3); }
[data-id="t3"] .tile { border-bottom: 1px solid var(--line); padding-bottom: var(--s5); }
[data-id="t3"] .tile:hover .tile__go { color: var(--acc); }

/* ═══════════════ Т4 · СТЕКЛО ═══════════════ */
[data-id="t4"] {
  --bg: #0B0D10;  --bg2: rgba(255,255,255,.06); --bg3: rgba(255,255,255,.10);
  --fg: #F0F3F7;  --fg2: rgba(240,243,247,.68); --fg3: rgba(240,243,247,.40);
  --acc: #7FB2FF; --acc2: rgba(127,178,255,.16); --on-acc: #06121F;
  --line: rgba(255,255,255,.14); --line2: rgba(255,255,255,.28);
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-text: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --w-display: 700; --w-text: 500; --w-mono: 400;
  --fs-h1: clamp(2.375rem, 1rem + 4vw, 6.75rem);
  --fs-h2: clamp(1.625rem, 1rem + 1.9vw, 3rem);
  --fs-text: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  --fs-mono: .75rem;
  --lh: 1.6; --lh-display: 1.02;
  --track-h1: -.028em; --track-mono: .06em;
  --radius: 14px; --caps: none; --btn-caps: none;
  --scrim: radial-gradient(120% 90% at 12% 60%, rgba(11,13,16,.95) 0%, rgba(11,13,16,.72) 38%, rgba(11,13,16,.1) 70%, transparent 100%);
}
[data-id="t4"] .hero__col {
  padding: var(--s7); border-radius: var(--radius);
  background: rgba(255,255,255,.055); border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
[data-id="t4"] .tile { padding: var(--s5); border-radius: var(--radius);
  background: var(--bg2); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-id="t4"] .tile:hover { border-color: var(--line2); background: var(--bg3); }
[data-id="t4"] .btn { border-radius: 999px; }
[data-id="t4"] .strip { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(11,13,16,.62); }

/* ═══════════════ Общее: шкала и компоненты ═══════════════ */
:root, [data-id] {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --container: 1320px; --gutter: clamp(20px, 4vw, 56px);
}

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* X4 · рубрика перестаёт быть оранжевой строкой и получает оранжевый маркер.
   Акцент — указание, а не рубрика: цвет достаётся тому, на что можно нажать,
   что отмечает место в строке или несёт настоящее состояние. Приём донора ose —
   квадратик 6–8px перед служебной подписью, сама подпись серая. */
.rubric {
  margin: 0 0 var(--s5); display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg2);
}
.rubric::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--acc); }
.h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-h1);
  text-wrap: balance;
}
.sub { margin: var(--s5) 0 0; max-width: 36ch; font-size: var(--fs-text);
       line-height: 1.42; color: var(--fg2); }
.note { margin: var(--s4) 0 0; font-family: var(--font-mono); font-weight: var(--w-mono);
        font-size: var(--fs-mono); letter-spacing: var(--track-mono);
        text-transform: uppercase; color: var(--fg3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 var(--s6); border: 0; border-radius: var(--radius);
  background: var(--acc); color: var(--on-acc); text-decoration: none; cursor: pointer;
  font-family: var(--font-mono); font-weight: var(--w-mono);
  /* X1 · кегль кнопки. Белое по #FF4D12 даёт 3,32:1 — для мелкого текста это
     ниже нормы 4,5, для крупного (≥18,66px при весе ≥700) норма 3:1, и кнопка
     её проходит. Цвет кнопки принят донором и не меняется — меняется порог.
     Число со стенда boost.css:88. */
  font-size: 19px;
  letter-spacing: .12em; text-transform: var(--btn-caps);
  transition: filter .15s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line2); }
.btn--ghost:hover { background: var(--acc2); border-color: var(--acc); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }

/* --- первый экран --- */
.hero { position: relative; min-height: 100svh; overflow: clip; background: var(--bg); }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--scrim); }
.hero__body { position: relative; min-height: 100svh; display: grid; align-content: center;
              justify-items: start; max-width: var(--container); margin-inline: auto;
              padding: var(--s9) var(--gutter) calc(var(--s8) + 52px); }
.hero__col { max-width: 40rem; }

.head { position: absolute; z-index: 4; inset: 0 0 auto 0; display: flex; align-items: center;
        justify-content: space-between; gap: var(--s5); padding: var(--s5) var(--gutter);
        font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
        letter-spacing: var(--track-mono); text-transform: uppercase; }
.head a { color: var(--fg2); text-decoration: none; }
.head a:hover { color: var(--fg); }
.head__brand { color: var(--fg); }
.head__nav { display: flex; gap: var(--s5); flex-wrap: wrap; }

.strip { position: absolute; z-index: 3; inset: auto 0 0 0; display: flex; flex-wrap: wrap;
         gap: var(--s2) var(--s6); padding: var(--s3) var(--gutter);
         background: var(--bg); border-top: 1px solid var(--line);
         font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
         letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg2); }
.strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0; padding: 0; }
.strip li { display: flex; align-items: baseline; gap: var(--s2); }
.strip li::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--acc); }
.strip .end { margin-left: auto; color: var(--fg3); }

/* --- секция услуг --- */
.sec { padding-block: var(--s9); border-top: 1px solid var(--line); }
.sec__h { margin: 0 0 var(--s5); max-width: 24ch; font-family: var(--font-display);
          font-weight: var(--w-display); font-size: var(--fs-h2); line-height: 1.06;
          letter-spacing: var(--track-h1); text-transform: var(--caps); text-wrap: balance; }
/* X3: лид не имел своего кегля и наследовал корень (20px), тогда как весь
   остальной текст стоит на --fs-text (24,3px) — ступень возникала из ничего. */
.sec__lead { margin: 0; max-width: 60ch; color: var(--fg2); font-size: var(--fs-text); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
         gap: var(--s5); margin-top: var(--s7); }
.tile { display: flex; flex-direction: column; text-decoration: none;
        background: transparent; transition: background .15s ease, border-color .15s ease; }
.tile__frame { aspect-ratio: 4 / 3; overflow: clip; background: var(--bg3); border-radius: var(--radius); }
.tile__frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: filter .2s ease; }
.tile:hover .tile__frame img { filter: brightness(1); }
.tile__h { margin: var(--s4) 0 var(--s2); font-family: var(--font-display); font-weight: var(--w-display);
           font-size: var(--fs-h4); letter-spacing: var(--track-h1); text-transform: var(--caps); }
.tile__p { margin: 0; color: var(--fg2); font-size: var(--fs-text); }
.tile__go { margin: var(--s4) 0 0; font-family: var(--font-mono); font-weight: var(--w-mono);
            font-size: var(--fs-mono); letter-spacing: var(--track-mono);
            text-transform: uppercase; color: var(--acc); }

/* --- карточка конфигурации: тот же блок в каждом коде --- */
.cfg { margin-top: var(--s7); display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s5); }
.cfg__card { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
/* X4: артикул состава — служебная строка, а не действие. */
.cfg__code { margin: 0 0 var(--s2); font-family: var(--font-mono); font-weight: var(--w-mono);
             font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--fg3); }
.cfg__h { margin: 0 0 var(--s3); font-family: var(--font-display); font-weight: var(--w-display);
          font-size: var(--fs-h4); letter-spacing: var(--track-h1); text-transform: var(--caps); }
.cfg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2);
             font-size: var(--fs-text); color: var(--fg2); }
.cfg__list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: var(--s2); }
.cfg__list li::before { content: "+"; color: var(--acc); font-family: var(--font-mono); }
.cfg__list--no li::before { content: "−"; color: var(--fg3); }

/* --- 390 --- */
@media (max-width: 47.99rem) {
  .hero__body { align-content: end; padding: var(--s8) var(--gutter) calc(var(--s7) + 52px); }
  .hero__col { max-width: none; }
  [data-id="t3"] .hero__scrim { background: linear-gradient(180deg, rgba(244,245,247,.2) 0%, rgba(244,245,247,.86) 46%, var(--bg) 78%); }
  [data-id="t1"] .hero__scrim,
  [data-id="t2"] .hero__scrim { background: linear-gradient(180deg, transparent 22%, rgba(8,9,10,.72) 58%, rgba(8,9,10,.94) 100%); }
  [data-id="t4"] .hero__scrim { background: linear-gradient(180deg, transparent 18%, rgba(11,13,16,.7) 55%, rgba(11,13,16,.94) 100%); }
  [data-id="t4"] .hero__col { padding: var(--s5); }
  .sub { max-width: none; }
  .btn { width: 100%; }
  .btn--ghost { width: auto; }
  .head__nav { display: none; }
  .strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .strip ul { flex-wrap: nowrap; }
  .strip li, .strip .end { white-space: nowrap; }
  .strip .end { margin-left: var(--s6); }
  .sec { padding-block: var(--s8); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ═══════════════ Т2+ · ИНДУСТРИАЛ, ПРОКАЧАННЫЙ ═══════════════
   Донор выбрал Т2 08.09 и попросил прокачать. Что здесь добавлено против Т2:
   · рубрики сверхузким конденсом (Sofia Sans Extra Condensed 900) — вертикальный
     ритм, которого не давал Inter Tight;
   · земля двумя ступенями, секции чередуются — ритм актов вместо плоского фона;
   · зерно 2,5 % поверх всего — тёмный CSS без него читается как CSS, а не как материал;
   · срез угла (chamfer) стал системой: кнопка, кадры, карточки, шильдики;
   · технические уголки-скобки по углам кадра — деталь бренда, не украшение;
   · шильдик-маркировка прямо на кадре и таблица-«шильдик» в данных;
   · кадр уведён в холодную сталь, чтобы оранж резал его, а не спорил с ним;
   · заголовок входит «печатью» — clip слева направо, одно движение на экран.        */

[data-id="t2p"] {
  --bg: #0E0F11;  --bg2: #16181B;  --bg3: #1E2126;
  /* X1 · ряд нейтрали каналами вместо глубины альфой (VSPEC-BOOST-2 §3 X1).
     Альфу нельзя было просто поднять: приглушённый слой сравнялся бы с основным
     и иерархия схлопнулась. Ряд проверен стендом boost.css:38–49 — переносится
     байт в байт. --bg/--bg2/--bg3 остаются своими именами: они равны
     --n-900/800/700, а переименование тронуло бы 68 правил трёх файлов. */
  --n-900: #0E0F11; --n-800: #16181B; --n-700: #1E2126; --n-600: #2A2E34; --n-500: #3C4149;
  --n-400: #5A6069; --n-300: #8A8D91; --n-200: #B4B7BB; --n-100: #D8DADD; --n-50: #F1F2F4;
  /* X2 · земля ЦЕХа. Чёрная #0E0F11 (L* 4) и прежняя #16181B (L* 8) глазом не
     различались — получалась одна тёмная земля, которая била в бумагу L* 95
     встык. Графит L* 19 — та самая ступень между ними (донор enerblock: 0 / 29 / 86). */
  --ground-ceh: var(--n-600);

  --fg: #F4F5F7;  --fg2: #C9CCCF; --fg3: var(--n-300);
  --acc: #FF4D12; --acc-cold: #7A3418; --acc2: #3A1408; --on-acc: #FFFFFF;
  /* линии остаются альфой: порога читаемости у них нет, а прозрачность нужна,
     чтобы одна и та же линия одинаково ложилась на три земли */
  --line: rgba(244,245,247,.13); --line2: rgba(244,245,247,.30);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'Sofia Sans Extra Condensed', 'Inter Tight', sans-serif;
  --w-display: 700; --w-text: 400; --w-mono: 900;
  /* X3 · семь ступеней вместо четырнадцати. Дисплей — событие: верх 88px против
     прежних 68, провал ×2 до заголовка секции, дальше плавный ряд. Потолок
     задан НЕ экраном, а копирайтом: «СТАНОВИТСЯ» при 120px требует 1039px
     и режется (замер стенда boost.css:108). Множители .86–1.24, разбросанные
     по трём файлам, сводятся к --fs-h3/--fs-h4/--fs-mono-s.
     ВНИМАНИЕ: rem здесь считается от ТЕКУЧЕГО корня — его задаёт [data-id]
     этим же --fs-text (20px на 1440, 17px на узком), поэтому ступени держатся
     на множителях от --fs-text, а не на собственных клампах: иначе текучесть
     множится на текучесть. */
  --fs-h1: clamp(2.375rem, 1rem + 5vw, 5.5rem);
  --fs-h1-inner: calc(var(--fs-h1) * .8);
  --fs-h2: clamp(1.5rem, .9rem + 1.8vw, 2.875rem);
  --fs-h3: calc(var(--fs-text) * 1.36);
  --fs-h4: calc(var(--fs-text) * 1.12);
  --fs-text: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-mono: .8125rem;
  --fs-mono-s: .625rem;
  --lh: 1.55; --lh-display: .92;
  --track-h1: -.03em; --track-mono: .16em;
  --radius: 0px; --caps: uppercase; --btn-caps: uppercase;
  --chamfer: 14px;
  --scrim: linear-gradient(90deg, rgba(14,15,17,.94) 0%, rgba(14,15,17,.74) 36%, rgba(14,15,17,.16) 68%, transparent 88%),
           linear-gradient(180deg, transparent 46%, rgba(14,15,17,.80) 100%);
}

/* --- зерно: одна текстура на весь документ, поверх всего, кликам не мешает --- */
[data-id="t2p"]::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- кадр: холодная сталь, чтобы оранж резал, а не спорил --- */
[data-id="t2p"] .hero__media video,
[data-id="t2p"] .hero__media img,
[data-id="t2p"] .tile__frame img { filter: contrast(1.08) saturate(.82) brightness(.94); }
[data-id="t2p"] .tile:hover .tile__frame img { filter: contrast(1.08) saturate(.92) brightness(1.04); }

/* --- срез угла системой --- */
[data-id="t2p"] .btn,
[data-id="t2p"] .tile__frame,
[data-id="t2p"] .cfg__card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}

/* --- уголки-скобки по кадру: деталь бренда --- */
[data-id="t2p"] .hero__media { --br: 22px; }
[data-id="t2p"] .hero__media::before,
[data-id="t2p"] .hero__media::after {
  content: ""; position: absolute; width: var(--br); height: var(--br); z-index: 2; pointer-events: none;
  border: 2px solid var(--acc);
}
[data-id="t2p"] .hero__media::before { top: 74px; left: var(--gutter); border-right: 0; border-bottom: 0; }
[data-id="t2p"] .hero__media::after { top: 74px; right: var(--gutter); border-left: 0; border-bottom: 0; }

/* --- шильдик-маркировка прямо на кадре --- */
[data-id="t2p"] .plate {
  position: absolute; z-index: 3; right: var(--gutter); bottom: calc(var(--s7) + 40px);
  display: grid; gap: 2px; padding: var(--s3) var(--s4);
  background: rgba(14,15,17,.82); border-left: 3px solid var(--acc);
  font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg2);
}
[data-id="t2p"] .plate b { color: var(--fg); font-weight: var(--w-mono); }
[data-id="t2p"] .plate span { color: var(--fg3); }

/* --- H1 входит печатью, а не растворением --- */
@keyframes stamp-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-id="t2p"] .h1 { text-transform: uppercase; animation: stamp-in .42s cubic-bezier(.2,.7,.2,1) both; }
[data-id="t2p"] .rubric { animation: stamp-in .3s cubic-bezier(.2,.7,.2,1) both; }

/* ═══ X5 · ПОЯВЛЕНИЕ = ДОЧИТЫВАНИЕ ═══════════════════════════════════════════
   Один жест на сайт: текст открывается слева направо тем же клипом, что уже
   был у H1 и рубрики при загрузке (stamp-in выше) — прокрутка просто заменяет
   таймер. Блоки берут яркость, а не сдвиг: лейаут неподвижен, CLS ноль.
   Ворота — класс html.p, который ставит p.js. Нет скрипта или стоит «уменьшить
   движение» — ни одно правило ниже не применяется, страница целиком.
   Градиент по глифам (приём донора terminal) не берём: второй приём в словаре
   и риск Safari на узком экране; клип уже боевой. */
html.p [data-p="in"] { --p: 0; }
html.p .sec__h[data-p="in"],
html.p .sec__lead[data-p="in"],
html.p .mg[data-p="in"],
html.p .h4-air__b p[data-p="in"] { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
html.p .tile[data-p="in"],
html.p .cfg__card[data-p="in"],
html.p .sm[data-p="in"],
html.p .h4-check li[data-p="in"],
html.p .h4-rules > div[data-p="in"],
html.p .h4-metr__r[data-p="in"],
html.p .h4-house[data-p="in"],
html.p .qa__row[data-p="in"],
html.p .p-shot[data-p="in"],
html.p .h4-two[data-p="in"] { opacity: calc(.12 + .88 * var(--p)); }
/* Страховка на случай, если скрипт поставил класс, но не успел посчитать. */
@media (prefers-reduced-motion: reduce) { [data-p] { --p: 1 !important; } }
@media (prefers-reduced-motion: reduce) { [data-id="t2p"] .h1, [data-id="t2p"] .rubric { animation: none; } }

/* --- секции чередуются ступенями земли, между ними маркировочная лента --- */
[data-id="t2p"] .sec:nth-of-type(odd) { background: var(--bg2); }
[data-id="t2p"] .sec { position: relative; border-top: 0; }
[data-id="t2p"] .sec::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: repeating-linear-gradient(135deg, var(--acc) 0 10px, transparent 10px 22px);
  opacity: .5;
}

/* --- плитки: номер крупно, тонкая нижняя линия, ховер уводит в оранж --- */
[data-id="t2p"] .tile { border-top: 2px solid var(--line2); padding-top: var(--s4);
                        transition: border-color .15s ease; }
[data-id="t2p"] .tile:hover { border-top-color: var(--acc); }
/* X4: номер плитки — порядковый знак, не действие. */
[data-id="t2p"] .tile__n { display: block; font-family: var(--font-display); font-weight: 700;
                           font-size: var(--fs-h2); line-height: 1; color: var(--fg2); margin-bottom: var(--s4); }
[data-id="t2p"] .tile__go { color: var(--fg3); }
[data-id="t2p"] .tile:hover .tile__go { color: var(--acc); }

/* --- карточки конфигураций: шильдик оборудования --- */
[data-id="t2p"] .cfg__card { background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--acc); }
[data-id="t2p"] .cfg__code { color: var(--fg3); }
/* Перенос в имени состава. «ПРОДОЛЖЕНИЕ КОМНАТЫ» в Unbounded 700 капсом требует
   257px, а карточка при четырёх колонках даёт 234px — слово вылезало за рамку.
   Дефект был не виден, пока четвёртая карточка уходила сиротой в широкую строку;
   починка порядка стилей 12.09 его открыла. Переносим по слогам, а не режем:
   hyphens срабатывает только на слове, которое не влезло. */
[data-id="t2p"] .cfg__h { font-family: var(--font-display); hyphens: auto; overflow-wrap: break-word; }

/* --- шкала процесса: индустриальный прогресс 01→06 --- */
.scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
         margin-top: var(--s7); background: var(--line); border: 1px solid var(--line); }
.scale__step { background: var(--bg); padding: var(--s4) var(--s4) var(--s5); }
/* X4: шесть горячих номеров читались как «все узлы идут сейчас». Номер серый;
   оранжевым горит только тот, что действительно сейчас (.is-now ниже). */
.scale__n { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--fg2); }
.scale__t { display: block; margin-top: var(--s3); font-family: var(--font-mono); font-weight: var(--w-mono);
            font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg); }
.scale__d { display: block; margin-top: var(--s2); font-size: var(--fs-text); color: var(--fg2); }
@media (max-width: 63.99rem) { .scale { grid-auto-flow: row; } }

/* --- таблица-шильдик: то, что реально продаёт в этом коде --- */
.spec { width: 100%; border-collapse: collapse; margin-top: var(--s5); }
.spec th, .spec td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line);
                     text-align: left; vertical-align: top; }
.spec th { width: 13rem; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
           letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg3); }
.spec td { color: var(--fg2); font-size: var(--fs-text); }


/* ═══ СЛОИ Т2+ · ред. 09.09 ═══════════════════════════════════════════════
   Донор 09.09: «база есть, но всё слишком однородное и скучное; нужна
   многослойная структура и своя айдентика как квинтэссенция рефов».
   Приняты три ставки (разбор — BRAND-DISCOVERY §10, стенд — stands/layers-v1.html):
     A · голос мастера сквозным слоем поверх документа;
     B · три полотна и запрет на два соседних акта одного регистра;
     C · клеймо приёмки на узлах вместо логотипа в шапке.
   Плюс оснастка: температура одного цвета и шкала конструкции.          */

/* --- B · ТРИ ПОЛОТНА ------------------------------------------------------
   Однородность лечится не декором, а полотнами разной природы: ВОЗДУХ (кадр
   и три слова), ЦЕХ (плотная сетка данных), СВЕТ (длинный текст на светлом).
   Правило приёмки: два соседних .sec не могут нести один модификатор.
   Модификатор бьёт чередование nth-of-type — поэтому двойной класс.        */
[data-id="t2p"] .sec.sec--vozduh { background: var(--bg); }
/* X2 · ЦЕХ переезжает на графит. --bg/--bg2/--bg3 внутри НЕ переопределяются:
   панели остаются чёрной сталью на графите — это и есть три тёмные ступени
   направления (панель · земля · кадр). Служебная краска берёт свою ступень:
   --n-300 на графите даёт только 4,1:1, --n-200 — 6,8:1. */
[data-id="t2p"] .sec.sec--ceh    { background: var(--ground-ceh); --fg3: var(--n-200); }
[data-id="t2p"] .sec.sec--svet {
  /* тот же код: те же шрифты, тот же акцент, тот же срез угла, ноль теней.
     Меняются только земля и чернила — переменными, а не отдельным стилем.
     Лечит главный риск тёмной земли: абзац в 12 строк на графите не читается. */
  --bg: #F1F2F4; --bg2: #E6E8EB; --bg3: #FFFFFF;
  /* X1: --fg2 остаётся альфой — она даёт ≈9:1, дефекта нет. --fg3 уходит на
     плоскую ступень: .45 чёрного давала 3,04:1 на светлой земле. */
  --fg: #101214; --fg2: rgba(16,18,20,.72); --fg3: #55585C;
  --line: rgba(16,18,20,.14); --line2: rgba(16,18,20,.28);
  --scrim: linear-gradient(90deg, rgba(241,242,244,.94) 0%, rgba(241,242,244,.72) 38%, transparent 86%);
  background: var(--bg); color: var(--fg);
}
[data-id="t2p"] .sec.sec--svet .h2,
[data-id="t2p"] .sec.sec--svet .rubric { color: var(--fg); }

/* --- A · ГОЛОС МАСТЕРА СКВОЗНЫМ СЛОЕМ -------------------------------------
   Не секция «о мастере», а второй слой поверх документа: короткая реплика
   от первого лица на полях, как пометка карандашом на чертеже. Кромка — та же
   3 px акцентом, что у шильдика: слой узнаётся как часть системы.
   Лечит единственный смертельный риск D4: индустриальный код безличен,
   а локального подрядчика покупают за «своего мастера» (D-industrial §7).   */
.mg { display: grid; grid-template-columns: 3px minmax(0,1fr); gap: var(--s3);
      margin: var(--s5) 0 var(--s6); max-width: 46ch; }
.mg::before { content: ""; display: block; background: var(--acc); }
.mg__t { color: var(--fg2); font-size: var(--fs-text); }
.mg__s { display: block; margin-top: var(--s2); font-family: var(--font-mono);
         font-weight: var(--w-mono); font-size: var(--fs-mono);
         letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg3); }

/* --- C · КЛЕЙМО ПРИЁМКИ ---------------------------------------------------
   Знак не висит в шапке — он штампует узел, как клеймо на металле.
   Сплав трёх доноров: Blåkläder (шильдик) + RIMOWA (узнают по форме,
   не по имени) + gehry-getty (провенанс подписи).
   Клеймо несёт ТОЛЬКО настоящие данные узла — иначе это косплей, а
   larp-lexicon-badges уже отвергнут банком вкуса.                          */
.stamp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 5px;
         border: 1px solid var(--acc); color: var(--acc);
         font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono-s);
         letter-spacing: var(--track-mono); text-transform: uppercase; white-space: nowrap;
         clip-path: polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); }
.stamp--now  { background: var(--acc); color: #0E0F11; border-color: var(--acc); }
.stamp--done { border-color: var(--acc-cold); color: var(--acc-cold); }

/* --- ТЕМПЕРАТУРА ОДНОГО ЦВЕТА ---------------------------------------------
   Второго акцента по-прежнему нет — есть один тон в двух температурах:
   горячий = идёт сейчас, остывший = сделано. Металл после сварки остывает,
   метафора совпадает с материалом направления. Шкала 01–06 начинает
   читаться физически, без подписи «текущий шаг».                           */
.scale__step.is-now .scale__n { color: var(--acc); }
.scale__step.is-done .scale__n { color: var(--acc-cold); }
.scale__step.is-done .scale__t { color: var(--fg2); }
.scale__step.is-now { background: var(--bg3); box-shadow: inset 0 2px 0 var(--acc); }

/* --- ШКАЛА КОНСТРУКЦИИ ----------------------------------------------------
   Сквозная колонка слева: не «шаги сайта», а слои узла — фасад · парапет ·
   остекление · утепление · электрика · отделка (состав из fact-lock F2).
   Скролл читается как движение внутрь конструкции. Скопировать нельзя,
   не зная состава работ, — поэтому это айдентика, а не украшение.
   Миллиметров пирога в локе нет: числа не выдумываем, вопрос в KC1.        */
.rail { position: sticky; top: var(--s6); align-self: start; }
.rail__t { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--fs-mono);
           letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg3);
           margin-bottom: var(--s4); }
.rail__i { display: grid; grid-template-columns: 10px 1fr; gap: var(--s3); align-items: start;
           padding: 7px 0; font-family: var(--font-mono); font-weight: var(--w-mono);
           font-size: var(--fs-mono); letter-spacing: var(--track-mono);
           text-transform: uppercase; color: var(--fg3); }
.rail__i::before { content: ""; display: block; width: 10px; height: 10px; margin-top: 2px;
                   border: 1px solid var(--line2); }
.rail__i.is-done { color: var(--fg2); }
.rail__i.is-done::before { background: var(--acc-cold); border-color: var(--acc-cold); }
.rail__i.is-now { color: var(--fg); }
.rail__i.is-now::before { background: var(--acc); border-color: var(--acc); }

/* --- ТИШИНА ---------------------------------------------------------------
   Ровно один экран на весь сайт без ничего, кроме одной строки. В этом коде
   пустота читается как пауза в цеху, а не как недоделка. Единственный приём,
   которому не нужны ни кадр, ни факт, ни ответ клиента.                    */
.hush { min-height: 58vh; display: grid; place-items: center; text-align: center;
        padding: var(--s7) var(--gutter); }
.hush p { max-width: 34ch; margin: 0; color: var(--fg3); font-family: var(--font-display);
          font-weight: var(--w-display); font-size: var(--fs-h2); line-height: 1.22;
          text-transform: uppercase; letter-spacing: -.01em; }

/* --- КОНТРОЛ КАДРА --------------------------------------------------------
   Ролик идёт сам, но зритель им управляет. Два независимых донора назвали
   это законом: primland (тумблер звука на всех 28 срезах) и RIMOWA (пауза
   и звук в углу ambient-хиро). Снимает половину претензий к автоплею.      */
.mediactl { position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: 3;
            display: flex; gap: 8px; }
.mediactl button { width: 34px; height: 34px; border: 1px solid var(--line2);
                   background: rgba(14,15,17,.7); color: var(--fg2); cursor: pointer;
                   font-size: 12px; line-height: 1; }
.mediactl button:hover { border-color: var(--acc); color: var(--fg); }

/* --- Т2+ на 390: шильдик и уголки-скобки уходят ---
   Замер 390 показал накладку: шильдик садился ровно на вторую кнопку. На узком
   экране маркировка кадра — украшение, а кнопка — работа, поэтому украшение уходит.
   Скобки сдвигаются под шапку, иначе висят в пустоте над текстом. */
@media (max-width: 47.99rem) {
  [data-id="t2p"] .plate { display: none; }
  [data-id="t2p"] .hero__media { --br: 16px; }
  [data-id="t2p"] .hero__media::before,
  [data-id="t2p"] .hero__media::after { top: 58px; }
  [data-id="t2p"] .scale { grid-auto-flow: row; }
  [data-id="t2p"] .sec::before { height: 4px; }
  .spec th { width: auto; display: block; padding-bottom: 2px; border: 0; }
  .spec td { display: block; padding-top: 0; }
  .spec tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  /* слои на 390: шкала конструкции уходит (колонки нет), реплика мастера остаётся —
     она и есть то, ради чего направление держится на узком экране */
  .rail { display: none; }
  .mg { max-width: none; }
  .mediactl { right: 16px; bottom: 16px; }
}