/* ═══════════════════════════════════════════════════════════════════════════
   IRONEX — дизайн-система v2 «Цех как чертёж»
   Контракт и правила: ironex-factory/design/DESIGN-SYSTEM.md

   Один файл на весь сайт. Страницы своих цветов, шрифтов, радиусов и теней
   не заводят: нужен новый компонент — он появляется здесь.

   Приём, который держит всю систему: язык конструкторской документации.
   Миллиметровая сетка, выносные и размерные линии, метки-обозначения. Он
   выбран не «для красоты» — на сайте, где заказ начинается с чертежа, это
   единственная графика, которая что-то значит.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Цвет */
  --ink: #0A0701;
  --ink-2: #3A3F44;
  --muted: #6B7076;
  --teal: #0E373D;
  --teal-700: #14474E;
  --teal-tint: #E8F0F0;
  --signal: #FF5061;
  --paper: #FFFFFF;
  --paper-2: #F4F4F9;
  --line: #E3E3EA;
  --line-strong: #C9C9D3;

  /* Форма. Одна форма — одна роль, поэтому радиусов ровно три. */
  --r-card: 14px;
  --r-field: 8px;
  --r-pill: 999px;

  /* Единственная разрешённая тень: для того, что реально висит над контентом */
  --shadow-float: 0 1px 2px rgba(10, 7, 1, .05), 0 12px 32px rgba(10, 7, 1, .08);

  /* Ритм */
  --gutter: 24px;
  --container: 1200px;
  --measure: 720px;
  --rail: 260px;
  --section-y: clamp(56px, 7vw, 104px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Видимый фокус обязателен: без него сайтом нельзя пользоваться с клавиатуры. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px;
  padding: 10px 16px; color: var(--paper); background: var(--teal);
  border-radius: var(--r-field); text-decoration: none;
  transform: translateY(-150%); transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--paper-2); }

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

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 18px; }

.lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.005em;
}

/* Метка — техническая подпись системы. Заменяет моношрифт старой версии. */
.label {
  display: inline-block;
  color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.2;
}
.label--signal { color: var(--signal); }


/* Размерная линия: разделяет смысловые части длинной страницы */
.dim {
  position: relative; height: 1px; margin-block: var(--section-y);
  background: var(--line); border: 0;
}
.dim::before, .dim::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--line-strong);
}
.dim::before { left: 0; }
.dim::after { right: 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  font: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
/* Пилюля закреплена за основной кнопкой и только за ней. */
.btn--primary { color: var(--paper); background: var(--teal); border-radius: var(--r-pill); }
.btn--primary:hover { background: var(--teal-700); }
.btn--ghost {
  color: var(--ink); background: transparent;
  border-color: var(--line-strong); border-radius: var(--r-field);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--on-dark { color: var(--teal); background: var(--paper); border-radius: var(--r-pill); }
.btn--on-dark:hover { background: var(--teal-tint); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── Поверхности ──────────────────────────────────────────────────────────── */

.panel { padding: clamp(20px, 3vw, 32px); background: var(--paper-2); border-radius: var(--r-card); }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .15s;
}
.card:hover { border-color: var(--ink); }
.card__body { padding: clamp(18px, 2vw, 24px); }

/* Блок-высказывание. На странице он ОДИН — иначе акцента нет ни у кого. */
.statement { color: var(--paper); background: var(--teal); }
.statement h2, .statement h3 { color: var(--paper); }
.statement p { color: #C4D3D4; }
.statement .label { color: #7FA3A6; }
/* Миллиметровка: видна только на тёмном, поэтому живёт здесь, а не в body */
.statement--grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Врезка-уточнение внутри текста */
.callout {
  margin: 28px 0; padding: 20px 24px;
  background: var(--teal-tint); border-radius: var(--r-card);
}
.callout > :last-child { margin-bottom: 0; }

/* ── Изображение как чертёж ───────────────────────────────────────────────── */
/* Рамка с координатной сеткой: кадр читается как иллюстрация к материалу,
   а не как фотодокумент с производства. Это не украшение, а честность. */
/* Иллюстрация — вспомогательный материал, а не герой блока. По умолчанию она
   заметно уже колонки: схема на всю ширину контейнера забирает экран у текста,
   ради которого человек пришёл. Шире — только осознанно, через .figure--wide. */
.figure--draft { max-width: 560px; margin: 28px 0; }
.figure--wide { max-width: 900px; }
.figure--draft.is-centered { margin-inline: auto; }
.figure--draft > img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-card);
}
.figure--draft figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  margin-top: 12px; color: var(--muted); font-size: 13px;
}

/* ── Таблица параметров ───────────────────────────────────────────────────── */

.spec-table { width: 100%; overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); }
.spec-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec-table th {
  padding: 14px 16px; color: var(--paper); background: var(--teal);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
.spec-table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.spec-table tbody tr:nth-child(even) { background: var(--paper-2); }
.spec-table .num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Сигнальный цвет = «требует уточнения», и рядом всегда слово, не только цвет */
.spec-table .warn { color: var(--signal); font-weight: 600; }
.spec-table caption { caption-side: bottom; padding: 10px 2px 0; color: var(--muted); font-size: 14px; text-align: left; }

/* ── Аккордеон вопросов ───────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--signal); font-size: 22px; font-weight: 600; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq__a { padding-bottom: 20px; color: var(--ink-2); }
.faq__a > :last-child { margin-bottom: 0; }

/* ── Шапка ────────────────────────────────────────────────────────────────── */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.logo { flex: none; color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.logo span { color: var(--teal); }
.nav { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nav a { color: var(--ink-2); font-size: 16px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); font-weight: 600; }
.site-header__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.site-header__phone { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--ink); }

/* ── Хлебные крошки ───────────────────────────────────────────────────────── */

.crumbs { padding-block: 16px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal); text-decoration: underline; }
.crumbs span[aria-hidden] { padding: 0 8px; color: var(--line-strong); }

/* ── Колонка чтения и рельс ───────────────────────────────────────────────── */

.reading { display: grid; grid-template-columns: var(--rail) minmax(0, var(--measure)); justify-content: center; gap: clamp(40px, 6vw, 80px); }
.rail { position: sticky; top: 96px; align-self: start; }
.rail__card { margin-top: 28px; padding: 22px; color: var(--paper); background: var(--teal); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
.rail__card p { color: #C4D3D4; font-size: 15px; }
.rail__card .btn { width: 100%; }

.toc { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding-block: 8px; color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 600; }
.toc a.is-active::before { color: var(--signal); }

/* ── Тело материала ───────────────────────────────────────────────────────── */

.prose { font-size: 18px; color: var(--ink-2); }
.prose > h2 { margin: 64px 0 18px; color: var(--ink); }
.prose > h3 { margin: 36px 0 12px; color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--teal); }
.prose > table { display: block; max-width: 100%; margin: 28px 0; overflow-x: auto; }
.prose blockquote { margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--teal); color: var(--ink); font-weight: 500; }
.prose__lede { color: var(--ink); font-size: clamp(19px, 1.8vw, 21px); font-weight: 500; line-height: 1.55; }

/* Предложение внутри текста */
.cta-inline,
.prose .cta.ui { margin: 40px 0; padding: 26px 28px; background: var(--paper-2); border-left: 3px solid var(--signal); border-radius: var(--r-card); }
.cta-inline__title,
.prose .cta__title { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.cta-inline p,
.prose .cta__sub { margin: 8px 0 18px; color: var(--muted); font-size: 15px; }

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

.site-footer { padding-block: clamp(48px, 6vw, 72px) 32px; color: #C4D3D4; background: var(--teal); }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.site-footer h3 { margin-bottom: 14px; color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }

/* ── Мобильная версия: отдельный сценарий, а не сжатый десктоп ───────────── */

@media (max-width: 1040px) {
  .reading { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rail { position: static; }
  .rail__card { margin-top: 20px; }
}

@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .burger { display: block; }
  .site-header__inner { gap: 16px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Меню на узком экране — выпадающий список под шапкой. Разметка та же, что и
     на десктопе: дублировать ссылки отдельным блоком нельзя, они разъедутся. */
  .site-header { position: relative; }
  /* Телефон на узком экране уезжает в выпадашку последним пунктом: в шапке
     рядом с кнопкой он не помещается, а прятать его совсем нельзя. */
  .nav, .site-header__phone { display: none; }
  .site-header.is-open .nav {
    display: flex;
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .site-header.is-open .nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .site-header.is-open .nav::after {
    content: attr(data-phone);
    padding: 16px 0 0;
    color: var(--ink);
    font-weight: 700;
  }
  .site-header__actions { margin-left: auto; }
  .site-header__actions .btn { padding: 10px 18px; font-size: 15px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .prose { font-size: 17px; }
  .site-footer__top { grid-template-columns: 1fr; }
  .cta-inline, .prose .cta.ui, .callout { padding: 20px; }
  .faq summary { font-size: 17px; }
  /* Липкая панель действия на мобильном — ровно одна кнопка */
  .mobile-bar { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
  .mobile-bar .btn { width: 100%; }
  body:has(.mobile-bar) { padding-bottom: 80px; }
}
@media (min-width: 561px) { .mobile-bar { display: none; } }

/* ═══ Материал: шапка статьи, байлайн, источники, похожие ═══════════════════
   Дописано при пересборке блога 10.09. Компоненты общие: тем же байлайном и
   теми же карточками пользуются страницы кейсов и любые будущие материалы. */

.article-hero { padding-block: clamp(36px, 5vw, 64px) 0; }
.article-hero h1 { max-width: 20ch; margin: 14px 0 20px; }
.article-hero .lede { margin: 0 0 32px; }

.byline {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.byline__who { display: flex; gap: 12px; align-items: center; }
.avatar {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  color: var(--paper); background: var(--teal); border-radius: 50%;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__name { display: block; font-weight: 700; line-height: 1.3; }
.byline__name a { color: var(--ink); text-decoration: none; }
.byline__name a:hover { text-decoration: underline; }
.byline__role { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; }
.byline__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; color: var(--muted); font-size: 14px; }
.byline__meta time { white-space: nowrap; }

.article-cover { max-width: 760px; margin: clamp(28px, 4vw, 44px) 0 0; }

.sources { margin: 0; padding: 0; list-style: none; }
.sources li { padding-block: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.5; }
.sources a { font-weight: 600; }

/* Карточки материалов: одна и та же сетка у «Читайте также» и у витрины блога.
   Колонок ровно столько, сколько карточек, — пустых ячеек не бывает. */
.mat-grid { display: grid; gap: 20px; }
.mat-grid--1 { grid-template-columns: minmax(0, 1fr); }
.mat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-card { overflow: hidden; }
.mat-card a { display: flex; height: 100%; flex-direction: column; color: var(--ink); text-decoration: none; }
.mat-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.mat-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.mat-card__title { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.mat-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }

@media (max-width: 980px) { .mat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mat-grid--2, .mat-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .byline__meta { margin-left: 0; width: 100%; }
}

/* ═══ Витрина блога ═════════════════════════════════════════════════════════ */

/* Фильтры по рубрикам — навигация, а не витрина товаров: тихие чипы,
   активный отмечен заливкой И жирностью, не одним цветом. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.filters a {
  padding: 9px 16px; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-field);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.filters a:hover { border-color: var(--ink); }
.filters a.is-active { color: var(--paper); background: var(--teal); border-color: var(--teal); font-weight: 600; }

.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; margin-top: 18px; color: var(--ink); text-decoration: none; }
.feature img { width: 100%; height: 100%; object-fit: cover; border-right: 1px solid var(--line); }
.feature__body { display: flex; flex-direction: column; gap: 12px; justify-content: center; padding: clamp(24px, 3vw, 40px); }
.feature__title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
.feature__lede { color: var(--ink-2); font-size: 16px; line-height: 1.55; }

.empty { margin-top: 24px; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pager a, .pager span {
  min-width: 44px; padding: 10px 14px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-field);
  color: var(--ink-2); font-size: 15px; text-decoration: none;
}
.pager a:hover { border-color: var(--ink); }
.pager [aria-current] { color: var(--paper); background: var(--teal); border-color: var(--teal); font-weight: 600; }

@media (max-width: 760px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature img { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ═══ Копирование почты ═════════════════════════════════════════════════════
   Перенесено из email-copy.css при переходе на единый файл стилей: палитра там
   была янтарная от прежнего оформления. Разметку и состояния кнопки задаёт
   email-copy.js — атрибут data-copy-state, его и красим. */

.email-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.email-contact-address { color: var(--teal); font-weight: 600; text-decoration: none; white-space: nowrap; }
.email-contact-address:hover { text-decoration: underline; }

.email-copy-button {
  appearance: none; min-height: 44px; padding: 10px 16px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.email-copy-button:hover { border-color: var(--ink); }
/* Состояние не передаётся одним цветом: текст кнопки меняет email-copy.js */
.email-copy-button[data-copy-state="success"] { color: var(--paper); background: var(--teal); border-color: var(--teal); }
.email-copy-button[data-copy-state="error"] { color: var(--signal); border-color: var(--signal); }

@media (max-width: 420px) {
  .email-contact-actions { align-items: stretch; flex-direction: column; }
  .email-copy-button { width: 100%; }
}

/* ═══ Дописано по заявкам сборки страниц ════════════════════════════════════
   Пять компонентов, которые агенты независимо друг от друга собирали руками из
   подручных классов. Раз их понадобилось всем — место им в системе, иначе на
   каждой странице будет своя версия одного и того же блока. */

/* Подпись под кнопкой: что приложить к письму. Клик по mailto — это ещё не
   письмо, и от понятности этой строки зависит, сколько писем дойдёт. */
.cta-note { max-width: 52ch; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.cta-note strong { color: var(--ink-2); font-weight: 600; }

/* Ссылка на тёмном блоке: --teal на --teal нечитаем */
.statement a:not(.btn) { color: var(--paper); text-decoration-color: rgba(255, 255, 255, .45); }
.statement a:not(.btn):hover { text-decoration-color: var(--paper); }

/* Шапка обычной страницы — тот же ритм, что и у материала */
.page-hero { padding-block: clamp(36px, 5vw, 64px) 0; }
.page-hero h1 { max-width: 20ch; margin: 14px 0 20px; }
.page-hero .lede { margin: 0 0 8px; }

/* Маршрут/этапы: нумерация нужна, кружков с иконками — нет */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 2px; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--signal); font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.7;
}
.steps strong { display: block; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* Характеристики внутри карточки: пары «что — сколько», а не строка через точку */
.specs { display: grid; gap: 6px; margin: 12px 0 0; font-size: 15px; }
.specs div { display: flex; gap: 12px; justify-content: space-between; }
.specs dt, .specs span:first-child { color: var(--muted); }
.specs dd, .specs span:last-child { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 560px) {
  .steps li { grid-template-columns: 32px 1fr; gap: 12px; }
}

/* ═══ Вертикальный ритм: что за чем ═════════════════════════════════════════
   Заголовки в системе идут с margin: 0 — иначе они схлопываются по-разному в
   разных контекстах. Плата за это: следующий за заголовком блок надо отбивать
   явно, иначе подводка липнет к заголовку вплотную (замер 10.09: зазор 0 px
   на всех коммерческих страницах). */

/* Метка над заголовком — пара, но не сросшаяся: 6 px читались как опечатка */
.label + h1, .label + h2, .label + h3 { margin-top: 12px; }


h1 + .lede, h2 + .lede, h3 + .lede,
h1 + p, h2 + p, h3 + p,
h1 + ul, h2 + ul, h3 + ul,
h1 + ol, h2 + ol, h3 + ol { margin-top: 14px; }

/* Внутри материала свой ритм задаёт .prose — там отступ уже есть в заголовке */
.prose > h2 + *, .prose > h3 + * { margin-top: 0; }

/* Блок и следующий за ним блок внутри одной секции: воздуха между ними должно
   хватать, чтобы читались как разные вещи, а не как одна длинная плашка */
.container > * + .spec-table,
.container > * + .panel,
.container > * + .mat-grid,
.container > * + .faq,
.container > * + .steps,
.container > * + .figure--draft { margin-top: 28px; }

.panel > * + *, .callout > * + *, .rail__card > * + * { margin-top: 12px; }
.statement h2 + p { margin-top: 16px; }

/* ═══ Идентичность v2.1 «Цех в кадре» ═══════════════════════════════════════
   Направление выбрано 10.09 по макету поблочной генерации (SAYT.md, фаза 4).
   Тёмный верх — шапка и первый экран, светлое тело, тёмный закрывающий блок.
   Тёмное сверху и снизу держит страницу как переплёт: между ними светлая
   середина читается легче, а первый экран получает контраст, которого не было. */

:root {
  --coal: #14191A;          /* земля тёмного верха */
  --coal-2: #1D2426;        /* блок внутри тёмного верха */
  --on-dark: #FFFFFF;
  --on-dark-2: #A9B4B5;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.site-header { background: var(--coal); border-bottom: 0; }
.site-header .logo { color: var(--on-dark); }
.site-header .logo span { color: var(--on-dark); }
.site-header .nav a { color: var(--on-dark-2); }
.site-header .nav a:hover, .site-header .nav a[aria-current] { color: var(--on-dark); }
.site-header__phone { color: var(--on-dark); }
.burger span { background: var(--on-dark); }
@media (max-width: 860px) {
  .site-header.is-open .nav { background: var(--coal); border-bottom-color: rgba(255,255,255,.12); }
  .site-header.is-open .nav a { border-bottom-color: rgba(255,255,255,.10); color: var(--on-dark); }
  .site-header.is-open .nav::after { color: var(--on-dark); }
}

/* ── Первый экран ──────────────────────────────────────────────────────── */
.hero { padding-block: 0 0; color: var(--on-dark); background: var(--coal); }
.hero__inner { padding-block: clamp(44px, 6vw, 84px) clamp(28px, 4vw, 44px); background: var(--coal-2); }
.hero h1 {
  max-width: 17ch; margin: 0 0 20px; color: var(--on-dark);
  font-size: clamp(38px, 6.2vw, 82px); font-weight: 800; line-height: 1.0; letter-spacing: -.04em;
}
.hero p { max-width: 54ch; margin: 0 0 28px; color: var(--on-dark-2); font-size: clamp(16px, 1.6vw, 19px); }
/* Сигнальная точка ставится в конце фразы про срок — метит ровно то, ради чего
   человек дочитал абзац, а не украшает угол. */
.hero p .dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--signal); vertical-align: middle; }
.hero .btn--primary { background: var(--teal); border-radius: var(--r-field); }
.hero .btn--primary:hover { background: #17545C; }

/* Полоса-кадр: сюда встаёт видео, до него — постер */
.band { display: block; width: 100%; margin: 0; background: var(--coal); }
.band img, .band video { display: block; width: 100%; height: clamp(220px, 30vw, 420px); object-fit: cover; }

/* Строка фактов под полосой: пары «подпись — значение» */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--coal); }
.facts > div { padding: 20px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts dt { color: var(--on-dark-2); font-size: 13px; }
.facts dd { margin: 4px 0 0; color: var(--on-dark); font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Три колонки самопроверки ──────────────────────────────────────────── */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 28px; }
.cols3 > div { padding: 0 28px; border-left: 1px solid var(--line); }
.cols3 > div:first-child { padding-left: 0; border-left: 0; }
.cols3 h3 { margin-bottom: 14px; font-size: 19px; }
.cols3 ul { margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 16px; }
.cols3 li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.cols3 li::before { position: absolute; top: 9px; left: 0; width: 6px; height: 6px; background: var(--teal); content: ""; }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.14); }
  .facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cols3 { grid-template-columns: minmax(0, 1fr); }
  .cols3 > div { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .cols3 > div:first-child { padding-top: 0; border-top: 0; }
}

/* ═══ v2.2 — по референсам Кости: RapidDirect (структура) + Hadrian (характер) ═══
   От RapidDirect: полоса цифр под первым экраном, карточки услуг с плотными
   характеристиками, «как с нами работать» тремя шагами.
   От Hadrian: тёмная земля, живая строка в шапке, срезанный угол как приём,
   бегущая строка, крупный дисплейный заголовок поверх видео.
   Движение здесь несёт смысл: часы показывают, работает ли приёмка прямо сейчас,
   бегущая строка перечисляет реальный сортамент. Декоративной анимации нет. */

/* ── Живая строка в шапке ─────────────────────────────────────────────────── */
.clockbar { display: flex; gap: 0; margin-left: 28px; border: 1px solid rgba(255,255,255,.22); }
.clockbar span { padding: 5px 10px; border-left: 1px solid rgba(255,255,255,.22); color: var(--on-dark-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.clockbar span:first-child { border-left: 0; }
.clockbar .is-open { color: #7FE3A1; }
.clockbar .is-closed { color: var(--on-dark-2); }

/* ── Срезанный угол: приём Hadrian, у нас метит рамку целевого действия ───── */
.notch {
  --n: 18px;
  border: 1px solid rgba(255,255,255,.28);
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n)));
}

/* ── Первый экран с видео ─────────────────────────────────────────────────── */
.hero--video { position: relative; overflow: hidden; background: var(--coal); }
.hero--video > video, .hero--video > img.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero--video::after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(90deg, rgba(10,15,16,.92) 0%, rgba(10,15,16,.78) 46%, rgba(10,15,16,.42) 100%);
}
.hero--video .container { position: relative; z-index: 1; padding-block: clamp(72px, 11vw, 168px); }
.hero--video h1 {
  max-width: 15ch; margin: 0 0 22px; color: var(--on-dark);
  font-size: clamp(40px, 7vw, 92px); font-weight: 800; line-height: .98; letter-spacing: -.045em;
}
.hero--video p { max-width: 48ch; margin: 0 0 30px; color: #C6D0D1; font-size: clamp(16px, 1.7vw, 20px); }
.hero__actions { display: inline-flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.hero__actions .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.34); }
.hero__actions .btn--ghost:hover { border-color: var(--on-dark); }

/* ── Полоса цифр под первым экраном ───────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.figures > div { padding: 26px 22px; border-left: 1px solid var(--line); }
.figures > div:first-child { border-left: 0; padding-left: 0; }
.figures dt { color: var(--muted); font-size: 13px; }
.figures dd { margin: 6px 0 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── Бегущая строка: реальный сортамент, а не декор ───────────────────────── */
.marquee { overflow: hidden; padding: 16px 0; color: var(--on-dark-2); background: var(--coal); border-block: 1px solid rgba(255,255,255,.12); }
.marquee__track { display: inline-flex; gap: 0; white-space: nowrap; animation: marquee 46s linear infinite; }
.marquee__track span { padding: 0 22px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.marquee__track span::after { margin-left: 22px; color: rgba(255,255,255,.28); content: "·"; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ── Плотная карточка услуги ──────────────────────────────────────────────── */
.svc { display: grid; gap: 0; }
.svc > article { padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 24px; align-items: start; }
.svc h3 { font-size: 20px; }
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a:hover { text-decoration: underline; }
.svc__spec { margin: 0; color: var(--ink-2); font-size: 15px; }
.svc__rate { white-space: nowrap; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.svc__rate small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }

/* ── Три шага ─────────────────────────────────────────────────────────────── */
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.howto > div { padding: 24px; background: var(--paper-2); border-radius: var(--r-card); }
.howto b { display: block; margin-bottom: 8px; color: var(--signal); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.howto h3 { margin-bottom: 8px; font-size: 19px; }
.howto p { color: var(--ink-2); font-size: 15px; }

/* ── Появление секций при прокрутке ───────────────────────────────────────── */
.reveal { transition: opacity .5s ease-out, transform .5s ease-out; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

@media (max-width: 900px) {
  .clockbar { display: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div { padding: 18px; border-top: 1px solid var(--line); }
  .figures > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .svc > article { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .howto { grid-template-columns: minmax(0, 1fr); }
  .hero--video::after { background: linear-gradient(180deg, rgba(10,15,16,.72) 0%, rgba(10,15,16,.92) 100%); }
}

/* ── Правки после первого просмотра сборки ────────────────────────────────── */
/* Кнопка в шапке рвалась на две строки и превращалась в огромный овал */
.site-header__actions .btn { white-space: nowrap; }
/* Ставки читаются столбиком справа, как в прайсе */
.svc__rate { text-align: right; }
/* Между тонированной и белой секцией набегало по 300+ px пустоты:
   сама смена фона уже отделяет блоки, столько воздуха не нужно */
.section--tint + .section, .section + .section--tint { padding-top: clamp(48px, 5vw, 72px); }

/* ── Тёмный первый экран внутренних страниц ───────────────────────────────
   Шапка на всех страницах угольная; светлый h1 сразу под ней рвал полосу
   надвое. Здесь тот же приём, что на главной, но без видео — внутренние
   страницы читают, а не смотрят. */
.hero--page { background: var(--coal); color: var(--on-dark); }
.hero--page .crumbs { padding-top: clamp(20px, 3vw, 30px); }
.hero--page .crumbs, .hero--page .crumbs a, .hero--page .crumbs span { color: var(--on-dark-2); }
.hero--page .crumbs a:hover { color: var(--on-dark); }
.hero--page .container > :where(h1, p) { color: inherit; }
.hero--page__body { padding-block: clamp(26px, 4vw, 44px) clamp(40px, 6vw, 68px); }
.hero--page h1 { max-width: 20ch; font-size: clamp(32px, 4.6vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
.hero--page .lede { max-width: 58ch; color: #C6D0D1; }
.hero--page .hint { color: var(--on-dark-2); font-size: 15px; }
.hero--page .crumbs { border-bottom: 0; }
.hero--page__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .8fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.hero__panel { --n: 16px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.24);
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n))); }
.hero__panel dl { display: grid; gap: 0; margin: 0; }
.hero__panel div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); }
.hero__panel div:first-child { padding-top: 0; border-top: 0; }
.hero__panel dt { color: var(--on-dark-2); font-size: 14px; }
.hero__panel dd { margin: 0; text-align: right; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .hero--page__body { grid-template-columns: minmax(0, 1fr); }
  .hero__panel { margin-top: 6px; }
}
/* Тёмный экран уже отделяет себя фоном — полный отступ секции сверху лишний */
.hero--page + .section { padding-top: clamp(40px, 5vw, 68px); }
.hero__panel dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Инициалы вместо портрета: реального фото Антона пока нет, а сгенерированное
   лицо рядом с настоящим именем — обман читателя. Вернём <img> в .avatar,
   когда придёт фотография. */
.avatar > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }