/* header.css — одна шапка на все вкладки сайта (2 сен 2026, задача Егора «верх страницы пляшет»).
 *
 * ПОВОД. Каждая страница держала собственную копию правил шапки, и за месяц правок они
 * разъехались: отступ 15 против 16 пикселей, промежуток между ссылками 16/20/22, размер
 * шрифта 14 против 13.5, на «Что внутри» кнопка кабинета была без рамки и снизу висела
 * оранжевая полоса, которой нет больше нигде. Хуже вида было поведение: переключатель
 * языка вставляется скриптом i18n.js прямо в .nav, а .nav на четырёх страницах стоял с
 * переносом (flex-wrap) — и язык уезжал на вторую строку, а меню на третью. Человек,
 * переходя по вкладкам, видел, как верх страницы прыгает.
 *
 * ПРАВИЛО. Разметка шапки одинаковая (её сторожит проверка-шапки.mjs), стили — здесь,
 * и только здесь. Селекторы намеренно начинаются с header: так они перекрывают остатки
 * старых правил на страницах, если где-то ещё найдутся.
 *
 * РАСКЛАДКА. Слева знак и название, дальше пункты меню, кнопка кабинета прижата к правому
 * краю меню, за ней — переключатель языка, который скрипт кладёт последним элементом .nav.
 * Переносов нет вовсе: на узком экране (до 900 px) меню прячется под гамбургер.
 */
/* Межстрочное расстояние задаём в самой шапке: у страниц оно разное (1,55 против 1,6),
   и из-за этого высота полосы отличалась на пиксель — при переходе по вкладкам верх дёргался. */
header{background:var(--graphite,#1f262b);color:#fff;padding:15px 0;border-bottom:0;line-height:1.5}
/* Ширина полосы шапки одна на всех вкладках. Контейнер .wrap у каждой страницы свой —
   от 760 до 1080 px под её содержимое, и трогать его нельзя: это вёрстка самой страницы.
   Но из-за него шапка на «Как внедряем» была уже на треть, и меню лезло в три строки,
   а название на «Что внутри» стояло на 70 px правее, чем на главной. Здесь переопределяем
   .wrap ТОЛЬКО внутри шапки. */
header .wrap{max-width:1200px;margin:0 auto;padding:0 26px}
header .nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}

header .brand{display:flex;align-items:center;gap:10px;flex:none;font-weight:800;font-size:18px;color:#fff;text-decoration:none}
header .brand:hover{color:#fff}
/* Знак нарисован треугольниками: на главной это <i>, на остальных <span> — держим оба. */
header .mark{display:flex;gap:3px}
header .mark i,header .mark span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--amber,#f0a028)}
header .mark i:nth-child(2),header .mark span:nth-child(2){opacity:.7}
header .mark i:nth-child(3),header .mark span:nth-child(3){opacity:.4}

header .navlinks{flex:1;display:flex;align-items:center;gap:20px;font-size:14px;flex-wrap:nowrap}
header .navlinks a{color:#c8d0d7;text-decoration:none;white-space:nowrap}
header .navlinks a:hover{color:#fff}
header .navlinks a.on{color:var(--amber,#f0a028)}
/* Кабинет — правый край меню, а не «ещё одна ссылка в ряду»: это выход в рабочее место. */
header .navlinks a.cab{margin-left:auto;border:1px solid #4a545c;border-radius:5px;padding:4px 12px;color:var(--amber,#f0a028)}

header .burger{display:none;background:none;border:1px solid #4a545c;border-radius:6px;padding:7px 9px;cursor:pointer;line-height:0;margin-left:auto}
header .burger i{display:block;width:19px;height:2px;background:#cdd5dc;margin:4px 0;border-radius:2px}

/* Промежуточная ширина: шесть пунктов ещё влезают, но впритык — сжимаем промежутки. */
@media(max-width:1120px){
  header .nav{gap:14px}
  header .navlinks{gap:14px;font-size:13.5px}
}

/* Гамбургер включается с 900 px, а не с 760: между ними меню наезжало на кнопку кабинета. */
@media(max-width:900px){
  header .burger{display:block}
  header .nav{position:relative;flex-wrap:nowrap}
  header .navlinks{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;flex:none;
    flex-direction:column;align-items:stretch;gap:0;font-size:15px;
    background:var(--graphite,#1f262b);border-top:1px solid #3a444c;padding:6px 18px 14px}
  header .navlinks.open{display:flex}
  header .navlinks a{padding:12px 0;border-bottom:1px solid #33404a}
  header .navlinks a:last-child{border-bottom:0}
  header .navlinks a.cab{margin:10px 0 0;display:inline-block;align-self:flex-start}
}

/* ── ШИРИНА ПОЛОСЫ (2 сен 2026, вторая часть той же задачи) ────────────────────────────
 * Выровняв шапку, увидели главное: прыгает не верх, а вся страница. Контейнер .wrap
 * у вкладок был разный — 1080 на главной, 900 на «Что умеем», 940 на «Модули и цены»,
 * 760 на «Как внедряем», 920 на «Что внутри». Левый край текста гулял на 160 пикселей:
 * человек переходит по меню, и страница каждый раз перескакивает.
 *
 * Полоса одна — 1080, как на главной. Но длинная строка читается плохо, поэтому
 * ограничиваем не полосу, а сами текстовые блоки: заголовочный абзац и пояснения
 * под заголовками разделов. Так «Как внедряем» не превращается в простыню, а карточки
 * и сетки получают ту же ширину, что на остальных вкладках.
 */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 26px}
/* Поля по краям на узком экране: 26 пикселей на телефоне съедают строку, 16 хватает. */
@media(max-width:900px){.wrap{padding:0 20px}}
@media(max-width:520px){.wrap{padding:0 16px}}
/* Длина строки задаётся в знаках, а не в пикселях: читается 45–75 знаков в строке,
   дальше глаз теряет начало следующей. На телефоне ограничение само отступает — там
   ширина экрана меньше, чем 60 знаков. */
.lead{max-width:60ch}
.sec .s{max-width:68ch}
.sec p{max-width:72ch}

/* ── ЕДИНЫЙ РИТМ ВКЛАДОК (2 сен 2026) ─────────────────────────────────────────────────
 * Четыре вкладки — «Что умеем», «Модули и цены», «Как внедряем», «Что внутри» — верстались
 * в разные дни, и типографика разъехалась мелко, но заметно: заголовок 36/35/34/33,
 * подзаголовок раздела 25/23/21/23, отступ верхнего блока 44/44/38 сверху и 48/46/42 снизу.
 * По отдельности незаметно, а при переходе по меню страница каждый раз слегка меняет ритм.
 *
 * Здесь одна шкала на все вкладки. Главная под неё НЕ подпадает намеренно: она витрина,
 * её крупный заголовок в 52 пикселя — осознанный приём, а не разнобой. Поэтому вкладки
 * помечены классом tab, а главная нет.
 */
.tab h1{font-size:36px;line-height:1.12;letter-spacing:-.8px}
.tab .lead{font-size:17px;line-height:1.55}
.tab .hero{padding:48px 0 52px;min-height:320px;display:flex;align-items:center}
/* Тёмный блок держит одну высоту: текста на вкладках разное количество, и без этого
   светлая часть страницы начиналась то выше, то ниже — при переходе по меню дёргалась. */
.tab .hero>.wrap{width:100%}
.tab .sec{padding:44px 0}
.tab .sec h2,.tab h2{font-size:26px;line-height:1.2;letter-spacing:-.4px}
.tab .sec .s{font-size:15px}
/* Плашка над заголовком: на трёх вкладках она была разного роста и цвета кромки. */
.tab .tag,.tab .eyebrow{font-size:11px;letter-spacing:.05em;text-transform:uppercase}

/* ── ЧИТАЕМОСТЬ ЦВЕТА (2 сен 2026, проверено расчётом контраста) ───────────────────────
 * Замер по методике WCAG показал: приглушённый текст #6f7984 на песочном фоне даёт
 * 3,37:1 при норме 4,5:1 для мелкого шрифта, а янтарный #d98a16 в ссылках и надписях —
 * 2,1:1, то есть на светлом фоне он почти не читается. Это не придирка: таким цветом
 * набраны пояснения под заголовками, сноски под расчётом и ссылки в тексте.
 *
 * Янтарь остаётся фирменным на тёмном фоне и в кнопках — там он яркий и контрастный.
 * Для текста на светлом заведён отдельный, притемнённый тон.
 */
:root{--muted:#5a636d;--amber-text:#7d4f06}
.sec a:not(.btn):not(.cab),.foot a,.more,.kicker,.tagtime{color:var(--amber-text)}
/* Подвал набран мелким шрифтом — ссылкам в нём нужен тот же притемнённый тон. */
/* Сноска в тёмной карточке расчёта: 4,0:1 — ниже нормы для 11,5 пикселей. */
.mcav{color:#9aa4ad}

/* Точечные пары, которые не покрылись общим правилом (проверены тем же расчётом). */
.cat li.more{color:var(--amber-text)}
.divider b{color:var(--amber-text)}
.step .tagtime{background:rgba(240,160,40,.22);color:#6b4405}
.step .tagfree{color:#1f6b3d}
.note b{color:var(--amber-text)}

/* Заголовок вкладки набран в два цвета: главная мысль белым, уточнение янтарным.
   Приём был на главной, «Что умеем» и «Модулях», а на «Как внедряем» и «Что внутри»
   заголовок оставался сплошным белым — вкладки выглядели из разных наборов (2 сен 2026). */
h1 .am{color:var(--amber,#f0a028)}

/* ── ДОСТУПНОСТЬ С КЛАВИАТУРЫ (2 сен 2026, аудит по правилам UX) ───────────────────────
 * На четырёх страницах в стилях стоит outline:none без замены — человек, идущий по сайту
 * с клавиатуры (а это и часть людей с ограничениями, и просто те, кто не любит мышь),
 * не видел, где находится. Возвращаем видимую рамку — только для клавиатуры, чтобы у
 * мышиных нажатий она не мигала.
 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amber,#f0a028);outline-offset:2px;border-radius:4px}

/* Ссылки подвала были высотой 15 пикселей — по правилу цель нажатия не меньше 24.
   Добавляем вертикальный запас, не трогая вид строки. */
.foot a{display:inline-block;padding:5px 0}

/* Почтовая ссылка в подвале «Что внутри» — та же история: 16 пикселей высоты мало. */
footer a{display:inline-block;padding:4px 0}

/* Уважение к системной настройке «меньше движения»: у части людей анимации вызывают
   тошноту и головокружение, и в системе стоит запрет. На главной он учитывался,
   на остальных вкладках — нет. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Госветка — отдельный лендинг со своим меню и более официальным тоном. Общий каркас
   ей нужен ради шапки, фокуса и размеров целей, а полосу она держит свою: 880 — это
   ширина под сплошной текст регламентов, на 1200 он расползается и читается хуже. */
body.gos .wrap{max-width:880px}
/* Возврат к разделу и почта в подвале госветки — те же 20–22 пикселя высоты. */
body.gos .back,body.gos footer a,body.gos .foot a{display:inline-block;padding:4px 0}
body.gos .contact a{display:inline-block;padding:4px 0}

/* Цветные цифры на светлом фоне: зелёный #3a9d5d и янтарный #d98a16 дают 3,2:1 —
   ниже нормы для мелкого шрифта. На дверях этим набраны суммы «снято/осталось»,
   в госветке — номера разделов и ссылки «Подробнее». */
.v.grn{color:#1f6b3d}
.v.amb{color:var(--amber-text)}
body.gos .num,body.gos .go{color:var(--amber-text)}