/* Сгенерировано build.py из build/style.css и build/style-wp.css — руками не править. */
/* Активные машины — оформление v4 «Ночная смена».
   Базовый режим тёмный; .sec--white — светлая секция на тёплой бумаге.
   Цвета компонентов берутся из переменных секции (--fg, --fg2, --ln, --ac,
   --card), поэтому светлый и тёмный варианты не требуют парных правил. */
#am {
  --deep: #070B14;
  --base: #0B1220;
  --surface: #141D2E;
  --ink: #E6EAF0;
  --muted: #94A3B8;
  --dim: #70819B;
  --line: #1E293B;
  --line-hi: #334155;
  --paper: #F1EFE9;
  --paper-ink: #0E1317;
  --paper-muted: #43474B;
  --paper-line: #D9D6CD;
  --amber: #F59E0B;
  --amber-d: #B45309;
  --cyan: #21D6A8;
  --cyan-deep: #0F9F7C;
  --alarm: #FF5A4E;
  /* Акценты сред из пакета бренда: карьер — дневное небо, подземка — свет фонаря.
     Мастер-марка их не берёт, они принадлежат средам и подразделениям. */
  --pit: #22D3EE;
  --ug: #F59E0B;
  --pit-ink: #0E7490;
  --ug-ink: #B45309;
  --shell: min(1320px, calc(100vw - 56px));
  /* Без запасного веб-шрифта: любое семейство, стоящее вторым, браузер тянет
     на время загрузки первого. Дальше сразу системные. */
  --font: "Golos Text", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#am *, #am *::before, #am *::after { box-sizing: border-box; }
#am img, #am svg { display: block; max-width: 100%; height: auto; }
#am a { color: inherit; }
#am h1, #am h2, #am h3, #am h4, #am p, #am ul, #am ol { margin-top: 0; }
#am h1, #am h2, #am h3, #am h4 { font-weight: 800; letter-spacing: -.032em; text-wrap: balance; }
#am p { text-wrap: pretty; }
#am figure { margin: 0; position: relative; }

#am .in { width: var(--shell); margin-inline: auto; }

/* Секция и её переменные: один набор компонентов, две темы */
#am .sec {
  --bg: var(--base); --fg: var(--ink); --fg2: var(--muted); --ln: var(--line);
  --ac: var(--amber); --card: var(--surface); --code: var(--cyan);
  padding: clamp(72px, 7vw, 116px) 0;
  background: var(--bg); color: var(--fg);
}
#am .sec--tight { padding: clamp(52px, 5vw, 76px) 0; }
#am .sec--deep { --bg: var(--deep); }
#am .sec--white {
  --bg: var(--paper); --fg: var(--paper-ink); --fg2: var(--paper-muted);
  --ln: var(--paper-line); --ac: #8A6A17; --card: #FBFAF7; --code: #0B7C60;
}

/* Шапка */
#am .nav { position: sticky; top: 0; z-index: 20; background: rgba(8,11,15,.9); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
#am .nav-in { width: var(--shell); margin-inline: auto; min-height: 72px; display: flex; align-items: center; gap: 8px; }
/* Мастер-блок бренда: знак и название прописными с трекингом 0,2em.
   Знак берёт цвет от блока через currentColor и не красится отдельно. */
#am .brand { display: inline-flex; align-items: center; gap: 14px; margin-right: auto; color: var(--ink); text-decoration: none; }
#am .brand .mark { flex: none; color: currentColor; }
#am .brand .wm { font-size: 13.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.06; }
#am .foot .brand { align-items: flex-start; gap: 18px; }
#am .foot .brand .wm { font-size: 16px; }
#am .foot .brand .wm b { display: block; margin-top: 8px; font-size: .5em; font-weight: 600; letter-spacing: .3em; color: var(--dim); }
#am .nav-l { display: flex; gap: 2px; }
#am .nav-l a { padding: 25px 14px 22px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .18s, border-color .18s; }
#am .nav-l a:hover, #am .nav-l a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }

/* Кнопки */
/* Действие набрано бумагой, а не янтарём. По системе бренда акцент принадлежит
   среде: карьер и подземка. Мастер-марка цвета не берёт, поэтому главная кнопка
   светлая с чернильным текстом, а янтарь остаётся меткам и вниманию. */
#am .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 2px; background: var(--paper); color: var(--paper-ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
#am .btn:hover { background: #FFFFFF; color: var(--paper-ink); transform: translateY(-2px); }
#am .btn--ghost { background: transparent; border-color: var(--line-hi); color: var(--fg, var(--ink)); }
#am .btn--ghost:hover { background: transparent; border-color: var(--fg, var(--ink)); box-shadow: none; transform: none; }
#am .sec--white .btn { background: var(--paper-ink); color: var(--paper); }
#am .sec--white .btn:hover { background: #23303F; color: var(--paper); }
#am .sec--white .btn--ghost { background: transparent; border-color: #C6C2B8; color: var(--paper-ink); }
#am .sec--white .btn--ghost:hover { border-color: var(--paper-ink); }
#am .btn--dark { background: #12161A; color: #fff; }
#am .btn--dark:hover { background: #232B33; color: #fff; }
#am .nav-l + .btn { min-height: 40px; margin-left: 10px; padding: 0 16px; font-size: 13.5px; }
#am .btn .sm { display: none; }

/* Метки и заголовки */
#am .kick { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--ac, var(--amber)); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
/* Модуль бренда: клин из знака, верхняя грань под 29°. Пропорция 36×40
   взята из выреза am-mark.svg, поэтому угол совпадает с логотипом. */
#am .dot { width: 9px; height: 10px; border-radius: 0; background: var(--ac, var(--amber));
  clip-path: polygon(0 0, 100% 50%, 0 100%); box-shadow: none; }
#am h1 { max-width: 17ch; margin-bottom: 24px; font-size: clamp(38px, 4.6vw, 72px); line-height: 1; }
#am h2 { max-width: 20ch; margin-bottom: 20px; font-size: clamp(29px, 3.2vw, 48px); line-height: 1.02; }
#am h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.16; letter-spacing: -.02em; }
#am .lead { max-width: 58ch; color: var(--fg2, var(--muted)); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
#am .crumb { margin-bottom: 20px; color: var(--fg2, var(--muted)); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
#am .crumb a { text-decoration: none; border-bottom: 1px solid var(--ln, var(--line)); }

/* Первый экран */
#am .hero { padding: clamp(56px, 5vw, 84px) 0 clamp(60px, 5vw, 90px); }
#am .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: 56px; align-items: center; }
#am .hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

/* Первый экран главной: снимок во весь кадр */
#am .hero--cover { position: relative; min-height: 88svh; display: flex; align-items: flex-end; padding: 0; overflow: hidden; background: var(--deep); }
#am .hero--cover .cover { position: absolute; inset: 0; z-index: 0; }
#am .hero--cover .cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05) brightness(.95); }
#am .hero--cover .cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,12,.8) 0%, rgba(7,9,12,.2) 26%, rgba(7,9,12,.58) 62%, rgba(7,9,12,.96) 100%),
              linear-gradient(96deg, rgba(7,9,12,.9) 0%, rgba(7,9,12,.35) 52%, rgba(7,9,12,0) 78%); }
#am .hero--cover .in { position: relative; z-index: 2; padding: 130px 0 clamp(34px, 4vw, 56px); }
#am .hero--cover h1 { max-width: 15ch; font-size: clamp(40px, 5.6vw, 88px); }
#am .hero--cover .lead { max-width: 52ch; }
#am .scrolln { display: flex; align-items: center; gap: 12px; margin-top: clamp(32px, 4vw, 56px); color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
#am .scrolln i { display: block; width: 62px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); position: relative; overflow: hidden; }
#am .scrolln i::after { content: ""; position: absolute; inset: 0; width: 20px; background: var(--amber); animation: am-sweep 2.4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes am-sweep { 0% { transform: translateX(-22px) } 100% { transform: translateX(64px) } }

/* Полоса состава системы под первым экраном */
#am .rail { background: var(--deep); border-bottom: 1px solid var(--line); }
#am .rail-in { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
#am .rail-i { padding: 22px 0 22px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
#am .rail-i:first-child { border-left: 0; padding-left: 0; }
#am .rail-v { font-family: var(--mono); font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
#am .rail-v em { font-style: normal; color: var(--cyan); }
#am .rail-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* Снимки */
/* Пометка «Визуализация». Часть изображений сайта — рендеры, а не съёмка
   реальной машины. Значок стоит на самой картинке, а не в подписи: подпись
   при пересказе теряется, а картинка уходит в мессенджер как есть. */
/* Значок в правом верхнем углу: снизу у большинства фигур стоит подпись,
   и там он оказывался под ней. */
#am .viz { position: absolute; right: 12px; top: 12px; z-index: 3;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  background: rgba(7,11,20,.9); border: 1px solid var(--line); padding: 6px 11px;
  backdrop-filter: blur(6px); pointer-events: none; }
#am .shot--fit .viz, #am .scheme--paper .viz { color: #43474B;
  background: rgba(255,255,255,.93); border-color: #CFCCC4; }
/* Значок живёт в колонке содержимого, поэтому отсчитывается от неё: держим его
   над подсказкой прокрутки, а не встык к нижней границе первого экрана. */
#am .hero--cover .viz { right: 0; top: auto; bottom: 92px; }


#am .shot { position: relative; overflow: hidden; border-radius: 2px; background: var(--deep); border: 1px solid var(--ln, var(--line)); }
#am .shot img { width: 100%; }
#am .shot--fit { background: #E9E7E1; }
#am .shot--fit img { object-fit: contain; padding: clamp(14px, 1.6vw, 30px); }
#am .cap { padding: 14px 18px; background: var(--deep); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
#am .cap b { display: block; margin-bottom: 4px; color: var(--amber); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
/* Широкий чертёж с выносками. На узком экране он сжимался до 290px и выноски
   переставали читаться, а прокрутка не работала из-за width:100%. Даём тот же
   минимум 620px, что и у SVG-схем: чертёж листается пальцем. */
#am .zoom { overflow-x: auto; }
#am .zoom img { width: 100%; }
@media (max-width: 620px) { #am .zoom img { width: auto; min-width: 620px; max-width: none; } }
#am .pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }

/* Вступление к секции */
#am .head { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(28px, 4vw, 72px); margin-bottom: clamp(38px, 4vw, 64px); }
#am .head > p { max-width: 48ch; margin-bottom: 0; color: var(--fg2); font-size: clamp(16px, 1.3vw, 19px); }
#am .head h2 { margin-bottom: 0; }

/* Плитки */
#am .tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); }
#am .tiles--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
#am .tile { display: flex; flex-direction: column; padding: clamp(28px, 2.4vw, 40px); background: var(--bg); text-decoration: none; transition: background .3s; }
#am .tile > h3:first-child { margin-top: clamp(20px, 2vw, 34px); }
#am .tile:hover { background: var(--card); }
#am .tile p { margin-bottom: 0; color: var(--fg2); font-size: 15.5px; }
#am .tile .num { display: block; margin-bottom: clamp(38px, 4vw, 68px); color: var(--ac); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
#am .tile .go { margin-top: auto; padding-top: 22px; color: var(--ac); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#am a.tile:hover h3 { color: var(--ac); }

/* Среда говорит акцентом: карьер — дневное небо, подземка — свет фонаря.
   Ставится на блок, а не на знак: мастер-марка остаётся без цвета. */
#am .env--pit { --ac: var(--pit); }
#am .env--ug { --ac: var(--ug); }
#am .sec--white .env--pit { --ac: var(--pit-ink); }
#am .sec--white .env--ug { --ac: var(--ug-ink); }

/* Схема на всю ширину */
/* Палитра схем. Четыре роли, а не набор случайных цветов:
   accent — метки и нумерация, flow — поток данных вперёд, flow-back — обратный
   поток и подтверждения, alarm — останов. Значения разные для тёмной плиты и
   для бумажной: жадеит #21D6A8 на бумаге даёт 1,6:1 и линию просто не видно. */
#am .scheme { margin: 0; padding: clamp(22px, 2.4vw, 38px); border: 1px solid var(--ln); background: var(--card); color: var(--fg2);
  --dia-accent: var(--ac); --dia-flow: var(--cyan); --dia-flow-back: var(--dim); --dia-alarm: var(--alarm); --dia-halo: var(--card); }
#am .scheme--paper { background: var(--paper); border-color: var(--paper-line); color: var(--paper-muted);
  --dia-accent: #8A6A17; --dia-flow: #0B6B52; --dia-flow-back: #5A6673; --dia-alarm: #C24132; --dia-halo: var(--paper); }
#am .scheme svg { width: 100%; height: auto; }
#am .scheme figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ln); color: var(--fg2); font-size: 13.5px; }
#am .scheme--paper figcaption { border-top-color: var(--paper-line); color: var(--paper-muted); }
#am .scheme-scroll { overflow-x: auto; }
#am .scheme-scroll > svg { min-width: 620px; }


/* Плита внутри бумажной секции — плита на плите. Чертёж ложится прямо на лист:
   рамка и фон снимаются, остаётся только линия под подписью. */
#am .sec--white .scheme--paper { background: transparent; border: 0; padding: 0; }
#am .sec--white .scheme--paper figcaption { margin-top: 24px; }

/* Став как маркер списка: тот же клин под 29°, что вырезан в знаке. */
#am .layer li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 8px; background: var(--ac); opacity: .85;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Уступы: подъём под 29° — тот же угол, что верхняя грань клина в знаке.
   Разделитель ставится на краю бумажной полосы, перед падением в темноту. */
#am .rule29 { height: 28px; border: 0; margin: 0; background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2228%22%20viewBox%3D%220%200%2096%2028%22%3E%3Cpath%20d%3D%22M0%2027H30L48%2017H66L84%207H96%22%20fill%3D%22none%22%20stroke%3D%22rgb%28201%2C197%2C186%29%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x; background-position: left bottom; }


/* Реестр */
#am .reg-wrap { overflow-x: auto; }
#am .reg { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
#am .reg th { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ac); color: var(--fg); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
#am .reg td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--ln); color: var(--fg2); vertical-align: top; }
#am .reg td:first-child { color: var(--fg); font-weight: 700; }
#am .reg code { font-family: var(--mono); font-size: 12.5px; color: var(--code); }
#am .reg .tech { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
#am .reg--kv { min-width: 0; }
#am .reg--kv th:first-child, #am .reg--kv td:first-child { width: 32%; }

/* Раскрытие сведений об организации */
#am .prose { max-width: 74ch; color: var(--fg2); font-size: 16.5px; }
#am .fine { max-width: 74ch; margin: 14px 0 0; color: var(--fg2); font-size: 13px; }
#am .reg a, #am .prose a, #am .lead a { color: var(--ac); text-decoration: none; border-bottom: 1px solid var(--ln); }
#am .reg a:hover, #am .prose a:hover, #am .lead a:hover { border-bottom-color: var(--ac); }

/* Шаги */
#am .steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
#am .steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--ln); counter-increment: s; }
#am .steps li:last-child { border-bottom: 1px solid var(--ln); }
#am .steps li::before { content: counter(s, decimal-leading-zero); color: var(--ac); font-family: var(--mono); font-size: 13px; font-weight: 700; }
#am .steps h3 { margin-bottom: 6px; font-size: 19px; }
#am .steps p { margin: 0; color: var(--fg2); font-size: 15.5px; }

/* Редакционная полка */
#am .shelf { border-top: 1px solid var(--ln); }
#am .row { display: grid; grid-template-columns: 160px 1fr 40px; gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--ln); text-decoration: none; transition: background .25s; }
#am .row:hover { background: var(--card); }
#am .row:hover h3 { color: var(--ac); }
#am .row .type { color: var(--ac); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#am .row h3 { margin: 0; font-size: 22px; transition: color .18s; }
#am .row p { margin: 5px 0 0; color: var(--fg2); font-size: 14.5px; }
/* Стрелка рисуется, а не набирается: символ U+2192 отсутствует в подмножествах
   Golos Text и ради трёх стрелок тянул на страницу целый Manrope. */
#am .row .arr { justify-self: end; color: var(--dim); display: flex; align-items: center; transition: color .2s, transform .2s; }
#am .row:hover .arr { color: var(--ac); transform: translateX(4px); }


/* Подписи к номерам на схеме. В самом рисунке только выноски с цифрами:
   названия живут в вёрстке, поэтому их можно править, переводить и читать
   с экрана читалкой, а картинку не надо перерисовывать ради опечатки. */
#am .legend { list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--ln); border: 1px solid var(--ln); }
#am .legend li { background: var(--bg); margin: 0; padding: 15px 18px 17px;
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
#am .legend li::before, #am .art-body .legend li::before { content: none; display: none; }
#am .legend .n { font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--ac); padding-top: 3px; }
#am .legend b { display: block; font-size: 15px; line-height: 1.2; margin-bottom: 4px; }
#am .legend span { display: block; color: var(--fg2); font-size: 13.5px; line-height: 1.4; }
#am .art-body .legend { max-width: none; font-size: inherit; }

/* Врезка */
#am .note { margin: 30px 0 0; padding: 6px 0 6px 22px; border-left: 2px solid var(--ac); max-width: 76ch; color: var(--fg2); font-size: 15.5px; }
#am .note b { display: block; margin-bottom: 6px; color: var(--fg); }

/* Двухколонник */
#am .split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(34px, 4vw, 64px); align-items: start; }
#am .split--rev { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
#am .stack { display: grid; gap: 20px; }

/* Статья */
/* min-width:0 обязателен: у грид-элемента по умолчанию min-width:auto, и широкий
   чертёж внутри .zoom распирал колонку вместо того, чтобы прокручиваться внутри. */
#am .art { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 68px; align-items: start; }
#am .art > * { min-width: 0; }
#am .art-body figure, #am .art-body .zoom { max-width: 100%; }
#am .art-body p { max-width: 68ch; font-size: 18px; color: var(--fg2); }
#am .art-body h2 { max-width: 30ch; margin-top: 52px; font-size: clamp(26px, 2.4vw, 34px); }
/* Списки статей размечены клином знака, а не типографской точкой. */
#am .art-body ul { max-width: 68ch; padding-left: 0; list-style: none; color: var(--fg2); font-size: 18px; }
#am .art-body li { position: relative; padding-left: 26px; }
#am .art-body li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 9px; background: var(--ac, var(--amber)); opacity: .8;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
#am .art-body li { margin-bottom: 9px; }
#am .art-body .scheme, #am .art-body .shot { margin: 36px 0; }
#am .aside { position: sticky; top: 96px; padding-top: 16px; border-top: 1px solid var(--amber); }
#am .aside .t { margin-bottom: 14px; color: var(--dim); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#am .aside a { display: block; margin-bottom: 11px; color: var(--fg2); font-size: 13.5px; text-decoration: none; }
#am .aside a:hover { color: var(--amber); }
#am .meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--ln); color: var(--fg2); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
#am .meta b { color: var(--fg); font-weight: 500; }


/* Разделитель разделов: полоса-снимок во всю ширину. Раньше разделы отличались
   только цветом фона, и длинная страница читалась как один поток. Полоса даёт
   паузу и заранее показывает, о чём следующий раздел. */
#am .band-img { position: relative; overflow: hidden; background: var(--deep);
  height: clamp(200px, 24vw, 360px); }
#am .band-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
#am .band-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.45) 46%, rgba(11,18,32,.12) 78%); }
#am .band-img .in { position: absolute; inset: 0; z-index: 2; display: flex;
  flex-direction: column; justify-content: center; }
#am .band-img .kick { margin-bottom: 10px; }
#am .band-img h2 { font-size: clamp(24px, 2.4vw, 38px); margin: 0; max-width: 18ch; }
#am .band-img .viz { top: 12px; }
@media (max-width: 620px) { #am .band-img { height: 190px; } }

/* Полоса заявки */
#am .band .btn { background: #12161A; color: #fff; }
#am .band .btn:hover { background: #23303F; color: #fff; }
#am .band { --bg: var(--amber); --fg: #12161A; --fg2: rgba(18,22,26,.78); --ln: rgba(18,22,26,.22); --ac: #12161A; --card: rgba(255,255,255,.18); }
#am .band-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
#am .band h2 { max-width: 24ch; margin-bottom: 10px; }
#am .band p { margin-bottom: 0; color: var(--fg2); font-size: 15.5px; }

/* Подвал */
#am .foot { padding: 60px 0 28px; background: var(--deep); color: var(--ink); border-top: 1px solid var(--line); }
#am .foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 46px; }
#am .foot .brand { color: var(--ink); }
#am .foot p { color: var(--dim); font-size: 14px; }
#am .foot .t { margin-bottom: 15px; color: var(--dim); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#am .foot .links { display: grid; gap: 0; }
/* Тач-цель 44px: ссылки подвала были высотой около 28px. */
#am .foot .links a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); font-size: 14.5px; text-decoration: none; }
#am .foot .links a:hover { color: var(--ink); }
#am .foot-bot { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }

/* Фильтр материалов */
#am .filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
#am .f { padding: 10px 16px; border: 1px solid var(--ln); border-radius: 2px; background: transparent; color: var(--fg2); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s, color .2s; }
#am .f:hover { border-color: var(--fg2); color: var(--fg); }
#am .f[aria-pressed="true"] { border-color: var(--amber); background: var(--amber); color: #12161A; }
#am .cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; border: 1px solid var(--ln); background: var(--ln); }
#am .card { display: flex; flex-direction: column; padding: clamp(24px, 2.2vw, 34px); background: var(--bg); text-decoration: none; transition: background .3s; }
#am .card:hover { background: var(--card); }
#am .card:hover h3 { color: var(--ac); }
#am .card .type { color: var(--ac); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
#am .card h3 { margin: 40px 0 10px; transition: color .18s; }
#am .card p { margin-bottom: 0; color: var(--fg2); font-size: 15px; }
#am .card .go { margin-top: auto; padding-top: 22px; color: var(--ac); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }


/* Движение схем. Стрелки потока прочерчиваются, когда схема попадает в кадр:
   читатель видит направление, а не готовую картинку. Слои подсвечиваются
   при наведении — это подсказка, что каждый слой самостоятелен. */
@keyframes am-draw { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Схема бывает и сама наблюдаемым блоком, и вложенной в него — учитываем оба случая. */
  #am.rv-on .rv:not(.shown) .scheme svg line[marker-end],
  #am.rv-on .scheme.rv:not(.shown) svg line[marker-end] { stroke-dasharray: 64; stroke-dashoffset: 64; }
  #am.rv-on .rv.shown .scheme svg line[marker-end],
  #am.rv-on .scheme.rv.shown svg line[marker-end] { stroke-dasharray: 64; animation: am-draw .65s cubic-bezier(.2,.7,.2,1) .15s forwards; }
  #am .scheme svg .tl-plate { transition: opacity .25s; }
  #am .scheme svg:hover .tl-plate { opacity: .55; }
  #am .scheme svg .tl-plate:hover { opacity: 1; }
}

/* Появление при прокрутке */
#am.rv-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
#am.rv-on .rv.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #am.rv-on .rv { opacity: 1; transform: none; transition: none; }
  #am .scrolln i::after { animation: none; }
}

@media (max-width: 1080px) {
  #am { --shell: min(1320px, calc(100vw - 36px)); }
  #am .head, #am .hero-grid, #am .split, #am .split--rev, #am .art { grid-template-columns: 1fr; gap: 32px; }
  #am .aside { position: static; }
  #am .tiles, #am .tiles--2, #am .cards, #am .pair { grid-template-columns: 1fr; }
  #am .rail-in { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #am .rail-i, #am .rail-i:first-child { padding-left: 18px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  #am .band-in { grid-template-columns: 1fr; }
  #am .row { grid-template-columns: 1fr; gap: 8px; }
  #am .row .arr { display: none; }
  #am .foot-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  /* В шапке остаётся короткая надпись на кнопке: длинная выталкивает имя
     компании на вторую строку и ломает высоту полосы. */
  #am .btn .lg { display: none; }
  #am .btn .sm { display: inline; }
  #am .nav-l + .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
  /* Шапка на телефоне. Надпись прописными с трекингом 0,2em шире, чем кажется:
     в одну строку она не влезала, флексбокс сжимал бургер с 44px до 22px и
     выталкивал кнопку за контейнер. Название встаёт в две строки — это штатная
     раскладка мастер-блока, а бургер и кнопка больше не сжимаются. */
  #am .brand { gap: 10px; min-width: 0; }
  #am .brand .mark { width: 32px; height: 32px; }
  #am .brand .wm { font-size: 11px; letter-spacing: .18em; white-space: normal; }
  #am .burger, #am .nav-l + .btn { flex: none; }
  /* На телефоне первый экран короткий, содержимое прижато к низу и подъезжает
     к любому углу. Значок выходит из абсолютного позиционирования и встаёт
     в поток над меткой: раскладка учитывает его, столкнуться уже не с чем. */
  #am .hero--cover .viz { position: static; display: inline-block;
    margin-bottom: 14px; backdrop-filter: none; }
  #am .hero--cover .in { padding-top: 108px; }
  #am .rail-in { grid-template-columns: 1fr; }
  #am .hero-cta .btn { flex: 1 1 100%; }
  #am .foot-in { grid-template-columns: 1fr; gap: 30px; }
  #am .foot-bot { flex-direction: column; gap: 8px; }
}

/* Слой WordPress: то, чего не было в блоке Tilda.
   Приклеивается к style.css при сборке цели wp. Правки, общие для двух
   сайтов, идут в style.css; сюда — только то, что нужно WordPress. */

/* Ссылка для клавиатуры */
#am .skip { position: absolute; left: -9999px; z-index: 50; padding: 12px 18px; background: var(--deep); color: #fff; font-weight: 700; text-decoration: none; }
#am .skip:focus { left: 12px; top: 12px; }

/* Видимый фокус: в блоке Tilda его не было, для клавиатуры он обязателен */
#am a:focus-visible, #am button:focus-visible, #am input:focus-visible, #am textarea:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 3px;
}
#am .band a:focus-visible, #am .band button:focus-visible { outline-color: #12161A; }

/* Бургер вместо горизонтального скроллера меню */
#am .burger { display: none; width: 44px; height: 44px; padding: 11px 10px; border: 1px solid var(--line-hi); border-radius: 2px; background: transparent; cursor: pointer; }
#am .burger span { display: block; height: 2px; margin: 4px 0; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; }
#am .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#am .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#am .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Форма заявки — её на Tilda не было вовсе */
#am .lead-form { display: grid; gap: 11px; width: min(100%, 430px); }
/* Подпись и звёздочка — одна строка сетки, иначе звёздочка съезжает под текст */
#am .lead-form label { display: grid; gap: 5px; color: #12161A; font-size: 13px; font-weight: 700; }
#am .lead-form .lb { display: block; }
#am .lead-form input, #am .lead-form textarea {
  padding: 13px 15px; border: 1px solid rgba(18,22,26,.35); border-radius: 2px;
  background: #FFFDF8; color: #12161A; font: inherit; font-size: 15px;
}
#am .lead-form textarea { min-height: 92px; resize: vertical; }
#am .lead-form .hp { position: absolute; left: -9999px; }
#am .lead-form .req { color: #8A1F14; }
#am .lead-form button { width: 100%; }
#am .lead-note { margin: 0; color: rgba(18,22,26,.78); font-size: 12.5px; line-height: 1.4; }
#am .lead-done { padding: 20px 22px; border-radius: 2px; background: #12161A; color: #fff; }
#am .lead-done b { display: block; margin-bottom: 6px; color: var(--amber); }
#am .lead-done a { color: var(--amber); }
#am .lead-error { margin: 0; padding: 10px 12px; border-radius: 6px; background: #7A1B1B; color: #fff; font-size: 13px; font-weight: 700; }

/* Полоса заявки теперь несёт форму, а не одну кнопку */
#am .band-in { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 56px; align-items: start; }
#am .band h2 { max-width: 26ch; margin-bottom: 14px; }
#am .band p { max-width: 46ch; font-size: 15.5px; }

/* Тёмная секция: добиваем только те абзацы, что наследовали --muted
   на почти чёрном фоне. Было 2.36:1 при норме 4.5:1.
   Схемы, врезки и таблицы style.css красит сам — трогать их нельзя:
   у белой карточки .scheme--paper внутри тёмной секции свой, тёмный текст,
   и подписи внутри SVG берут его через currentColor. */
#am .sec--deep .split > div > p,
#am .sec--deep .stack > p,
#am .sec--deep li { color: var(--fg2); }

/* <picture> вокруг картинок нужен только для webp и не должен участвовать
   в раскладке: иначе он становится flex-элементом вместо самого <img>. */
#am picture { display: contents; }

/* Ряд карточек оборудования: подписи на одном уровне.
   Было: три картинки разной высоты — три уровня подписей. */
#am .pair, #am .trio { align-items: stretch; }
#am .trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
#am .trio .shot, #am .pair .shot { display: flex; flex-direction: column; height: 100%; }
#am .trio .shot img, #am .pair .shot img { flex: 1 1 auto; object-fit: contain; }
#am .trio .cap, #am .pair .cap { margin-top: auto; }

/* Читаемость: строка заголовка короче, колонка текста статьи уже */
#am h1 { max-width: 17ch; }
#am .art-body { max-width: 68ch; }

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

@media (max-width: 620px) {
  #am .burger { display: block; margin-left: auto; }
  #am .nav { position: sticky; }
  #am .nav-in { position: relative; flex-wrap: nowrap; }
  #am .nav-l { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column;
    padding: 8px 16px 18px; background: var(--deep); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(0,0,0,.5); overflow: visible; }
  #am .nav-l.open { display: flex; }
  #am .nav-l a { padding: 14px 4px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; font-size: 15px; }
  #am .nav-l a[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--amber); }
  #am .nav-l + .btn { margin-left: 8px; }
  #am .band-in { display: block; }
  #am .lead-form { width: 100%; margin-top: 22px; }
}