/* ============================================================
   ITERANS 2.0 · ОБЩИЕ СТИЛИ САЙТА
   Цвета и шрифты — только через токены из tokens.css
   ============================================================ */

*{box-sizing:border-box}
/* НИКАКОГО scroll-behavior:smooth. Ни на одной странице.

   Первая причина, старая: вместе с Lenis это два сглаживания друг
   на друге. Lenis пишет позицию каждый кадр, а браузер, видя smooth,
   каждую запись проглатывает и переанимирует сам. Замерено: при smooth
   присвоение scrollTop сдвигает страницу за тот же кадр на 0 px, при
   auto — на все 500. Отсюда «медленная зависающая прокрутка», которую
   не лечит никакая настройка lerp.

   Вторая причина, из-за которой правило снято совсем: плавность
   применяется и к прокрутке, которую делает БРАУЗЕР, когда переводит
   фокус по Tab. Замерено на /contact/: после .focus() на ссылке подвала
   scrollY остаётся нулём на отметках 200, 500, 1000 и 2000 мс и доезжает
   только между 2000 и 4000. Шесть остановок Tab подряд выглядят как
   «ничего не происходит» — навигация с клавиатуры ломается.

   Лечить селектором нельзя: CSS не отличает прокрутку по клику
   от прокрутки за фокусом. Поэтому плавность даёт скрипт в footer.php
   и только на переходы по якорю, которые начал человек. */
/* Lenis требует естественной высоты документа. */
html.lenis, html.lenis body{height:auto}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* scroll-behavior здесь больше не нужен: плавности в CSS нет вовсе,
   а скрипт плавных якорей сам проверяет prefers-reduced-motion. */
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-family:var(--f-head); font-weight:600; letter-spacing:-.015em; margin:0; text-wrap:balance}
p{margin:0 0 18px}
a{color:var(--accent-ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:3px
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:60; background:var(--surface); padding:10px 16px; border-radius:var(--r-sm)}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.col{max-width:64ch}
.rule{border:0; border-top:1px solid var(--line-light); margin:0}

/* ---------------- навигация ---------------- */
.nav{position:sticky; top:0; z-index:30; background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-light)}
.nav-in{display:flex; align-items:center; gap:26px; height:64px}
.brand{font-family:var(--f-head); font-weight:600; font-size:18px; letter-spacing:.08em; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:12px; flex:none}
/* Знак-бабочка. Брендбук Viktor Zakharov §4: мин. 24px,
   чистое поле ≥ высоты одного крыла (≈12px при 24px знака). */
.mark{width:24px; height:23px; flex:none}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links > a{color:var(--text-body); text-decoration:none; font-size:14.5px; transition:color .15s; white-space:nowrap}
.nav-links > a:hover,.nav-links > a[aria-current]{color:var(--accent-ink)}
.lang{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); border-left:1px solid var(--border); padding-left:18px; white-space:nowrap}
.lang b{color:var(--text); font-weight:500}
.lang a{text-decoration:none}

/* выпадающее меню услуг */
.has-sub{position:relative}
.sub-btn{background:none; border:0; font:inherit; font-size:14.5px; color:var(--text-body); cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:5px}
.sub-btn:hover{color:var(--accent-ink)}
.sub-btn svg{width:9px; height:9px; transition:transform .18s}
.has-sub[data-open="true"] .sub-btn svg{transform:rotate(180deg)}
.sub{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:10px; min-width:270px;
  display:grid; gap:2px
}
.sub[hidden]{display:none}
.sub a{display:block; padding:8px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--text-body); font-size:14.5px; line-height:1.45}
.sub a:hover{background:var(--accent-weak); color:var(--accent-ink)}
.sub a small{display:block; color:var(--muted); font-size:12.5px}
@media(max-width:940px){ .nav-links{display:none} }

/* ---------------- кнопки ---------------- */
/* Фрагмент знака на кнопке. Знак взят настолько крупно, что в кнопку
   попадает часть крыла, а не бабочка целиком: целый мелкий мотив
   читался бы иконкой. Подпись лежит слоем выше — контраст 5,73,
   который мы правили, текстура не трогает. */
.btn{position:relative; overflow:hidden; display:inline-block; background:var(--accent-ink); color:var(--on-accent); font-family:var(--f-body); font-weight:500; font-size:16px; padding:15px 28px; border-radius:var(--r-sm); text-decoration:none; border:0; cursor:pointer; transition:background .16s}
.btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--wing); background-repeat:no-repeat;
  background-size:auto 290%; background-position:right -78px center;
  opacity:.3;
}
.btn > *{position:relative; z-index:1}
/* Второй в паре — зеркально: фрагменты смотрят навстречу
   и две кнопки читаются одной группой. */
.btn-row .btn + .btn::before,
.btn.mirror::before{background-position:left -78px center}
.btn:hover{background:var(--accent-h)}
.btn-row{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.btn-ghost{position:relative; color:var(--text-body); text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--accent-25); padding-bottom:2px}
.btn-ghost:hover{color:var(--accent-ink); border-color:var(--accent-ink)}

/* ---------------- hero ----------------
   Высота следует ТИПУ страницы (STANDARD-HERO.md).
   Замер 29.09: на главной герой 648px + шапка 64px = 712 > 700 вьюпорта
   ноутбука — под сгибом не оставалось ничего, экран выглядел законченным.
   Нормы: витрина ≤580 · услуга ≤500 · хаб ≤420 · единица ≤380 ·
   доверие ≤520 · действие ≤300. */
.hero{padding:68px 0 46px}
.hero h1{font-size:clamp(38px,5.6vw,66px); line-height:1.06; margin:0 0 26px; max-width:17ch}
.hero .lede{font-size:clamp(17.5px,1.9vw,20px); line-height:1.6; color:var(--text-body); max-width:56ch; margin:0 0 36px}
.hero.page{padding:80px 0 56px}
.hero.page h1{font-size:clamp(32px,4.4vw,50px); max-width:20ch}

/* хаб — списку надо показаться скорее */
.hero--hub{padding:36px 0 24px}
.hero--hub h1{font-size:clamp(29px,3.8vw,42px)}
.hero--hub .lede,.hero--unit .lede{font-size:17px; margin-bottom:22px; max-width:62ch}
/* единица контента — человек пришёл читать */
.hero--unit{padding:32px 0 20px}
.hero--unit h1{font-size:clamp(28px,3.6vw,40px)}
/* доверие */
.hero--trust{padding:62px 0 40px}
/* действие — форма должна быть на первом экране */
.hero--action{padding:28px 0 16px}
.hero--action h1{font-size:clamp(28px,3.4vw,38px)}
.hero--action .lede{margin-bottom:0}

/* карта набора вместо кнопки на хабе */
.hero-set{display:flex; gap:26px; flex-wrap:wrap; margin:0; font-size:14.5px; color:var(--muted)}
.hero-set b{font-family:var(--f-head); font-size:19px; font-weight:600; color:var(--text); margin-right:6px}

/* метаданные вместо кнопки на единице контента */
.hero-meta{
  display:flex; gap:10px 20px; flex-wrap:wrap; align-items:baseline; margin:0;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.hero-meta a{margin-left:auto; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:14.5px}

/* хлебные крошки */
.crumbs{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 22px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}

/* ---------------- секции ---------------- */
section{padding:92px 0}
section.tight{padding:64px 0}
.sec-head{margin-bottom:46px}
.sec-head h2{font-size:clamp(26px,3.3vw,38px); line-height:1.16; margin-bottom:14px}
.sec-head p{color:var(--text-body); max-width:58ch; margin:0}
.band{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

/* Нижний зов на страницах кейсов и лаборатории. Текст слева, кнопка
   справа: прежде кнопка стояла под текстом, правая половина полосы
   пустовала, и на три строки содержимого полоса вытягивалась на 417px.
   Отступы сверху и снизу теперь равны — у абзаца с кнопкой оставался
   нижний margin, и полоса читалась просевшей на 26px. */
.полоса-зов{padding:clamp(50px,5.4vw,74px) 0}
.полоса-зов .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,3.4vw,48px); align-items:center}
.полоса-зов h2{margin:0 0 10px}
.полоса-зов p{margin:0; max-width:52ch}
.полоса-зов .btn{justify-self:start; white-space:nowrap}
@media (max-width:760px){
  .полоса-зов .wrap{grid-template-columns:1fr; gap:20px}
}

/* ---------------- доказательство-врезка ---------------- */
.proof{border-left:3px solid var(--accent); padding:4px 0 4px 26px; max-width:62ch}
.proof .q{font-family:var(--f-head); font-size:clamp(19px,2.2vw,23px); line-height:1.45; font-weight:500; margin:0 0 16px}
.proof .src{font-size:14.5px; color:var(--muted); margin:0}
.proof .src a{color:var(--accent-ink)}

/* ---------------- шаги ---------------- */
.steps{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.step{background:var(--surface); padding:22px 26px; display:grid; grid-template-columns:50px 1fr; gap:20px; align-items:baseline}
.step .n{font-family:var(--f-mono); font-size:12.5px; color:var(--muted)}
.step h3{font-size:16.5px}
/* Ширина строки ограничена 03.10.2026. Шаги стоят во всю ширину
   полосы, и на 1440 строка доходила до 115 знаков при норме 75 —
   глаз теряет начало следующей строки. Замерено на пяти встречах
   программы мастермайнда, но правило общее: .steps стоит на восьми
   страницах. */
.step p{margin:5px 0 0; font-size:14.5px; color:var(--text-body); max-width:66ch}
@media(max-width:620px){ .step{grid-template-columns:38px 1fr; padding:20px} }

/* ---------------- направления ---------------- */
.dirs{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.dir{background:var(--surface); padding:26px 24px 28px; text-decoration:none; color:inherit; display:block; transition:background .16s}
.dir .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); display:flex; align-items:center; gap:8px; margin-bottom:13px}
.dir h3{font-size:17.5px; margin-bottom:9px}
/* max-width работает только там, где сетка схлопнулась в одну колонку:
   на десктопе колонка и так уже. Замерено 03.10.2026 на 768 —
   строка доходила до 91 знака при норме 75. */
.dir p{font-size:14.5px; color:var(--text-body); margin:0; line-height:1.55; max-width:68ch}

/* ---------------- плитки для сравнения ----------------
   Равнозначные пункты, которые человек сравнивает глазом.
   Акцентная линия поверху делает плитку заметной, метка сверху —
   ключевое слово, по которому и сравнивают.

   Тон «внимание» (охра) для пункта другого рода: предупреждение
   или честное исключение. Цвет несёт смысл — по нему видно, что
   пункт выбивается из ряда, ещё до чтения.

   Колонок ровно столько, сколько плиток: авто-сетка на четырёх
   давала три колонки и перенос четвёртой — ряд разваливался. */
.tiles{display:grid; gap:clamp(14px,1.6vw,20px); align-items:stretch}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); padding:26px 22px 22px;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tile::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); opacity:.55; transition:opacity .25s ease;
}
.tile:hover{border-color:var(--accent-line); box-shadow:var(--shadow); transform:translateY(-3px)}
.tile:hover::before{opacity:1}
.tile-метка{
  display:block; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:14px;
}
.tile h3{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(18px,2vw,21px); line-height:1.22;
  color:var(--text); margin:0 0 10px; letter-spacing:-.016em;
}
.tile p{margin:0; font-size:15px; line-height:1.6; color:var(--text-body); max-width:62ch}

/* Охра — статусный токен, она же помечает предупреждения в формах.
   Один язык цвета на весь сайт. */
.tile--внимание::before{background:var(--ochre); opacity:.75}
.tile--внимание .tile-метка{color:var(--ochre-ink)}
.tile--внимание:hover{border-color:var(--ochre)}

@media (max-width:1040px){ .tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .tiles--3{grid-template-columns:1fr} }
@media (max-width:620px){ .tiles--4{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .tile{transition:none} }

/* Подпись под числами: то, что числом не выражается. */
.nums-note{
  margin:26px 0 0; font-size:15px; line-height:1.6;
  color:var(--text-body); max-width:64ch;
}

/* ---------------- журнал ошибок ---------------- */
.live{border:1px solid var(--border); background:var(--surface); border-radius:var(--r-lg); padding:32px 34px; box-shadow:var(--shadow)}
.live-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--line-light); margin-bottom:26px}
.live-head h3{font-size:19px}
.stamp{margin-left:auto; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:24px 30px; margin-bottom:28px}
.metric .n{font-family:var(--f-head); font-size:42px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.025em; display:block; margin-bottom:7px}
.metric .t{font-size:13.5px; color:var(--muted); line-height:1.4}
.bars{display:grid; gap:9px}
.bar{display:grid; grid-template-columns:128px 1fr 32px; align-items:center; gap:14px; font-size:13.5px}
.bar .lbl{color:var(--text-body)}
.bar .track{height:7px; background:var(--accent-weak); border-radius:4px; overflow:hidden}
/* display:block обязателен. Раньше .fill был строчным элементом (<span>),
   а к строчным ширина и высота не применяются — поэтому все полосы
   рендерились в ноль пикселей, и график показывал пустые дорожки
   при верных числах в разметке. Ломалось на трёх страницах сразу. */
.bar .fill{display:block; height:100%; background:var(--accent); border-radius:4px}
.bar .v{font-family:var(--f-mono); font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.live-foot{margin:24px 0 0; padding-top:18px; border-top:1px solid var(--line-light); font-size:13.5px; color:var(--muted)}
@media(max-width:620px){ .bar{grid-template-columns:104px 1fr 28px} .live{padding:26px 22px} }

/* ---------------- кейсы ---------------- */
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:22px}
.case{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:26px 24px 28px; transition:border-color .16s; text-decoration:none; color:inherit; display:block}
.case:hover{border-color:var(--accent-line)}
.case .tag{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:13px}
.case h3{font-size:17px; margin-bottom:10px}
.case p{font-size:14.5px; color:var(--text-body); margin:0 0 16px; line-height:1.55}
.case .out{font-size:13.5px; color:var(--accent-ink); border-top:1px solid var(--line-light); padding-top:13px; margin:0}

/* ---------------- списки-факты ---------------- */
.facts{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.facts li{padding-left:26px; position:relative; color:var(--text-body); font-size:16px}
.facts li::before{content:""; position:absolute; left:0; top:11px; width:9px; height:1.5px; background:var(--accent)}
.facts b{color:var(--text); font-weight:500}

/* ---------------- форма ---------------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:660px; margin-top:34px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px; color:var(--muted)}
.field input,.field textarea{font-family:var(--f-body); font-size:15.5px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:12px 14px; width:100%}
.field textarea{min-height:104px; resize:vertical}
.form .btn{grid-column:1/-1; justify-self:start; margin-top:4px}
.form-note{font-size:13.5px; color:var(--muted); margin:16px 0 0; max-width:52ch}
/* Подпись и поле каждого столбца стоят на общих линиях сетки.
   Без этого достаточно одной подписи в две строки, чтобы соседнее поле
   уехало вниз: у каждого поля своя внутренняя колонка, и выравнивать
   их между собой нечему. Каждое поле занимает две строки сетки формы,
   а соседи эти строки делят. */
@supports (grid-template-rows:subgrid){
  .form > .field:not(.full){
    display:grid; grid-template-rows:subgrid; grid-row:span 2; gap:7px;
  }
}

@media(max-width:620px){ .form{grid-template-columns:1fr} }

/* ── телефон и планшет ────────────────────────────────────────────────
   Найдено обходом 11.10.2026: надписи-категории мельче 12px и ссылки
   в карточках с целью нажатия 25–26px. Вес селектора взят с запасом
   (`main .класс`) — сами надписи описаны в <style> страниц, а те идут
   ниже по документу и при равном весе перебивают общий файл. */
@media (max-width:1024px){
  main .к-кто,
  main .пк-что,
  main .у-скем,
  main .к-отрасль,
  main .к-сосед span,
  main .з-низ,
  main .кс-карта em,
  main .и-подпись span,
  main .д-подпись,
  main .hero-meta,
  main .ст-мета,
  main .live-head .stamp,
  main .case-full .tag,
  main .sheet-метка,
  main .mm-роль,
  main .tile-метка,
  main .лич-ник,
  main .у-главное-метка,
  main .у-подзаголовок,
  main .у-главное-цифры dt,
  main .case .tag,
  .crumbs span,
  .crumbs a{font-size:12px}

  /* Хлебные крошки: ссылки были 15px высотой. Палец в такую не метит. */
  .crumbs a{display:inline-block; padding:6px 0}
  /* Метка на рисунке проекта: 9.5px. Поднимаем умереннее остальных —
     она стоит внутри холста, и большой кегль ломает композицию. */
  main .пк-статус{font-size:11px}

  /* Запас отступом, а не высотой строки: вёрстка не сдвигается,
     верхний margin уменьшен ровно на столько, сколько добавил padding. */
  main .к-ссылка{padding:9px 0; margin-top:5px}
  main .у-подробно{padding:10px 0; margin-bottom:8px}
  main .з-ход a{padding-top:8px; padding-bottom:8px}
}

/* ---------------- футер ---------------- */
footer{padding:52px 0 60px; font-size:14.5px; color:var(--muted); border-top:1px solid var(--line-light)}
.foot-top{display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(auto-fit,minmax(150px,1fr)); gap:40px}
.foot-about p{margin:0 0 14px; color:var(--text-body); font-size:14.5px; max-width:38ch}
.foot-col{display:flex; flex-direction:column; gap:9px}
.foot-col b{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:2px}
.foot-col a{color:var(--text-body); text-decoration:none}
.foot-col a:hover{color:var(--accent-ink)}
.foot-bottom{margin-top:42px; padding-top:20px; border-top:1px solid var(--line-light); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px}

/* ---------------- два вектора запроса ---------------- */
.split-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px}
/* Три формата работы на главной. Жёсткие три колонки, а не auto-fit:
   auto-fit при minmax(300px) ставит две колонки и переносит третью —
   ряд разваливается, и третий формат читается как добавленный позже.
   Все три равнозначны, и выглядеть должны одинаково. */
.split-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.split-three .vec{display:flex; flex-direction:column}
.split-three .vec-go{margin-top:auto !important}
@media (max-width:900px){ .split-three{grid-template-columns:1fr} }
.vec{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:28px 26px 26px}
.vec-k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:14px}
.vec h3{font-size:19px; line-height:1.32; margin-bottom:12px}
.vec p{font-size:15px; color:var(--text-body); margin:0 0 14px; line-height:1.6}
.vec-go{font-size:14.5px; color:var(--muted)!important; border-top:1px solid var(--line-light); padding-top:14px; margin:0!important}

/* ---------------- команда ---------------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.tm{background:var(--surface); padding:24px 22px 26px}
.tm h3{font-size:16px; margin-bottom:8px}
.tm p{font-size:14.5px; color:var(--text-body); margin:0; line-height:1.55}
.team-note{margin:26px 0 0; font-size:14.5px; color:var(--muted); max-width:62ch}

/* ---------------- вопросы и ответы ---------------- */
.faq{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; max-width:none}
.qa{background:var(--surface)}
.qa summary{
  cursor:pointer; padding:18px 22px; font-family:var(--f-head); font-weight:500;
  font-size:16.5px; line-height:1.45; list-style:none; display:flex; gap:14px; align-items:flex-start;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+"; margin-left:auto; flex:none; font-family:var(--f-mono);
  font-size:17px; color:var(--accent-ink); line-height:1.3; transition:transform .18s
}
.qa[open] summary::after{content:"–"}
.qa summary:hover{color:var(--accent-ink)}
.qa-body{padding:0 22px 20px}
.qa-body p{margin:0; font-size:15.5px; color:var(--text-body); line-height:1.65; max-width:62ch}

/* ---------------- развёрнутый кейс ---------------- */
.case-full{padding:0 0 4px}
.case-sep{margin-top:44px; padding-top:44px; border-top:1px solid var(--line-light)}
.case-full > .tag{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:12px
}
.case-full h2{font-size:clamp(22px,2.7vw,30px); line-height:1.2; margin-bottom:24px}
.case-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:26px 36px; margin-bottom:24px}
.case-grid h3{font-size:14px; font-family:var(--f-mono); font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.case-grid p{margin:0; color:var(--text-body); font-size:15.5px; line-height:1.62}
.case-result{
  margin:0; padding:15px 20px; background:var(--accent-weak); border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:15.5px; color:var(--text); max-width:72ch
}

/* ============================================================
   УЗКИЕ ЭКРАНЫ
   Найдено аудитом: сетка футера minmax(260px,…) не помещалась
   в 390px и давала 103px горизонтального выезда на всех страницах.
   ============================================================ */
@media (max-width:760px){
  .wrap{padding:0 20px}

  /* футер в одну колонку — минимум 260px больше ничего не ломает */
  .foot-top{grid-template-columns:1fr; gap:30px}
  .foot-about p{max-width:none}

  /* цели нажатия: ссылки-списки должны быть удобны пальцем */
  .foot-col{gap:2px}
  .foot-col a{padding:9px 0; display:block}
  .nav-links > a,.sub a{padding:10px 0}

  /* Отдельно стоящая кнопка-ссылка — удобная цель пальцем.
     Инлайновые ссылки внутри текста НЕ трогаем: WCAG 2.5.8 их
     освобождает, а увеличение разорвало бы строку. */
  .btn-ghost{padding:10px 0 9px; display:inline-block}
  .btn-row{gap:14px; align-items:flex-start; flex-direction:column}
  .btn{width:100%; text-align:center}
  .lang{padding-left:14px}

  /* вертикальные отступы плотнее — на телефоне пустоты читаются как «конец» */
  section{padding:64px 0}
  section.tight{padding:44px 0}
  .hero{padding:64px 0 52px}
  .hero.page{padding:52px 0 40px}
  .sec-head{margin-bottom:32px}

  /* длинные адреса и код не должны распирать страницу */
  .repo,.mono,code{overflow-wrap:anywhere}
  .live{padding:22px 18px}
  .case-result{padding:14px 16px}
  .qa summary{padding:16px 18px}
  .qa-body{padding:0 18px 18px}
}

@media (max-width:420px){
  .metrics{grid-template-columns:1fr 1fr; gap:20px}
  .metric .n{font-size:34px}
  .bar{grid-template-columns:92px 1fr 26px; gap:10px; font-size:13px}
}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ
   Найдено аудитом: ниже 940px основная навигация скрывалась,
   а замены не было — с телефона сайт сводился к одной странице.
   ============================================================ */
.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:11px 10px; flex-direction:column;
  justify-content:space-between; align-items:stretch;
}
.burger span{display:block; height:1.5px; background:var(--text); border-radius:2px; transition:transform .2s, opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.mobile{
  position:fixed; inset:64px 0 0; z-index:25; overflow-y:auto;
  background:var(--bg); border-top:1px solid var(--line-light);
  padding:26px 0 48px;
}
.mobile[hidden]{display:none}
.mobile .m-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:26px 0 10px;
}
.mobile .m-label:first-child{margin-top:0}
.mobile a{
  display:block; padding:13px 0; text-decoration:none; color:var(--text);
  font-size:17px; border-bottom:1px solid var(--line-light); line-height:1.35;
}
.mobile a small{display:block; color:var(--muted); font-size:13.5px; margin-top:3px}
.mobile a:active{color:var(--accent-ink)}

@media(max-width:940px){
  .burger{display:flex}
}

/* Отдельно стоящая кнопка-ссылка — не ниже 24px и на десктопе (WCAG 2.5.8 AA). */
.btn-ghost{padding-bottom:4px; display:inline-block; min-height:24px}

/* ---------------- записи лаборатории ---------------- */
.entries{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.entry{
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  padding:24px 24px 26px; transition:border-color .2s, box-shadow .2s;
}
.entry > .tag{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink); display:flex; align-items:center; gap:7px; margin-bottom:12px;
}
.entry h2{font-size:18.5px; line-height:1.3; margin-bottom:11px}
.entry p{font-size:14.8px; color:var(--text-body); margin:0 0 12px; line-height:1.58}
.entry-why{
  font-size:14px!important; color:var(--muted)!important;
  border-top:1px solid var(--line-light); padding-top:12px; margin:0!important;
}
.entry-more{margin:14px 0 0!important; font-size:14.5px!important}

/* ============================================================
   ПАТТЕРНЫ И ГРАФИЧЕСКИЕ ЗАЦЕПКИ
   Брендбук Viktor Zakharov §6: «очень тонкие линии · геометрия ·
   сетки · карты · исследовательские схемы». Никаких заливок,
   градиентов и пятен — только чертёжная графика.
   Всё статично: по §26-бис движение должно что-то раскрывать.
   ============================================================ */

/* Чертёжная сетка на тёмных полосах — та же, что в первом экране.
   Даёт фактуру «кальки под чертежом», не отвлекая от текста. */
/* Подложка полосы. ОДНО правило на ::before — второе затирало бы первое,
   и мы на этом уже обожглись: добавленное зерно молча съело чертёжную сетку.
   Рисунок выбирается переменными ниже, а не новым правилом. */
.band{position:relative; overflow:hidden}
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--pattern);
  background-size:var(--pattern-size);
  background-position:var(--pattern-pos);
  background-repeat:no-repeat;      /* НЕ замощение: одна графика, обрезанная краем */
  opacity:var(--pattern-dens);
  /* Растворяется К ТЕКСТУ, а не книзу: рисунок держит правую часть блока,
     слева остаётся чисто. Маска решает спор с читаемостью механически. */
  mask-image:var(--pattern-mask);
  -webkit-mask-image:var(--pattern-mask);
}
.band > .wrap{position:relative; z-index:1}

/* Шкала у надзаголовка — короткий штрих, как деление на линейке.
   Отмечает начало смыслового блока. */
/* Чертёжные уголки на карточках направлений — только на верхнем
   левом и нижнем правом, чтобы не превращать карточку в рамку. */
/* ================= ЦЕЛИ НАЖАТИЯ НА ТЕЛЕФОНЕ =================
   Минимум 44×44 CSS-пикселя. Измерено до правки на 390 px: хлебные
   крошки 54×15, ссылки в карточках 170×17, «Пройти собеседование»
   в блоке мастермайнда 172×28, светлые кнопки 179×41, ссылки подвала
   350×43. Пятнадцать-восемнадцать пикселей по высоте — это промах
   через раз.

   Растим именно ВЫСОТУ: ширины везде хватает. Ссылки внутри сплошного
   текста абзаца не трогаем — там увеличенная цель разорвала бы строку,
   и правило WCAG для них делает исключение.
   ============================================================= */
@media (max-width:820px){
  .crumbs a,
  .brand,
  .pc-go a, .vec-go a, .case .out a, .proof .src a, .dir, .tm,
  .foot-col a, .foot-legal a,
  .btn, .btn-ghost, .strip-btn, .mmp-btn, .mmp-ghost{
    min-height:44px;
  }
  /* Для строчных ссылок высоту даёт внутренний отступ, иначе min-height
     к инлайну не применится. */
  .crumbs a, .pc-go a, .vec-go a, .case .out a, .proof .src a,
  .foot-col a, .foot-legal a{
    display:inline-flex; align-items:center; padding-block:12px;
  }
  .brand, .btn, .btn-ghost, .strip-btn, .mmp-btn, .mmp-ghost{
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Галочка согласия: сам input 17×17, и увеличивать его нельзя —
     поедет вёрстка. Растим кликабельную область вокруг него. */
  .field .check{min-height:44px; align-items:center}
  .field .check input{width:20px; height:20px}
}

/* ================= ЧИСЛО КОЛОНОК В РЯДУ =================
   Одинокая карточка во второй строке читается как «что-то сломалось»,
   а не как часть набора. Именно это давала auto-fit: при minmax(212px)
   в доступную ширину влезало ровно четыре колонки, и пятая переносилась.
   Измерено на 1440 и 1024: .dirs из пяти → 4+1, .cases из четырёх → 3+1,
   .team из пяти → 4+1.

   Грабля не новая: в .px-cards и в .mm-трио от auto-fit уже отказались
   и поставили жёсткое число. Здесь то же самое, но один раз на все сетки.

   Колонок ровно столько, сколько карточек. На средней ширине раскладываем
   так, чтобы НЕ оставался одиночка: пять → 3+2, четыре → 2+2.
   :has() здесь уместен — он уже используется в стандарте подсветки ниже.
   ======================================================== */
.dirs:has(> :nth-child(3):last-child),
.team:has(> :nth-child(3):last-child),
.cases:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.dirs:has(> :nth-child(4):last-child),
.team:has(> :nth-child(4):last-child),
.cases:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.dirs:has(> :nth-child(5):last-child),
.team:has(> :nth-child(5):last-child),
.cases:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}

@media (max-width:1180px){
  .dirs:has(> :nth-child(5):last-child),
  .team:has(> :nth-child(5):last-child),
  .cases:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .dirs:has(> :nth-child(4):last-child),
  .team:has(> :nth-child(4):last-child),
  .cases:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .dirs,.team,.cases{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  .dirs,.team,.cases{grid-template-columns:1fr !important}
}

/* ================= СТАНДАРТ ПОДСВЕТКИ =================
   Один приём наведения на все карточки сайта. Раньше он жил только
   у направлений (.dir), и соседние блоки — слои команды, форматы
   работы — на наведение не отвечали вовсе. Выглядело так, будто
   часть сайта живая, а часть забыли доделать.

   Приём состоит из двух частей, и они означают РАЗНОЕ:

     подложка (--accent-weak)  — «курсор здесь». Даётся всем
                                 карточкам, включая нечитаемые как
                                 ссылка: это обратная связь, а не
                                 обещание перехода;
     уголки (--accent-25)      — «сюда можно нажать». Даются ТОЛЬКО
                                 карточкам-ссылкам. На карточке без
                                 перехода уголки врут: человек ведёт
                                 к ним мышь и ничего не получает.

   Добавляешь новый вид карточки — впиши её селектор сюда, а не
   пиши ей отдельный :hover. Иначе приём снова расползётся.
   ======================================================= */
.dir,.tm,.vec{position:relative; transition:background-color .2s ease}
.dir:hover,.tm:hover,.vec:hover{background:var(--accent-weak)}

.dir::before,.dir::after,
.vec::before,.vec::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border-color:var(--accent-25); border-style:solid; border-width:0;
  opacity:0; transition:opacity .2s;
}
.dir::before,.vec::before{top:10px; left:10px;  border-top-width:1px; border-left-width:1px}
.dir::after, .vec::after {bottom:10px; right:10px; border-bottom-width:1px; border-right-width:1px}
/* Уголки — только там, где есть куда нажать: сама карточка ссылка
   либо ссылка лежит внутри неё. */
a.dir:hover::before,a.dir:hover::after{opacity:1}
.vec:hover:has(a)::before,.vec:hover:has(a)::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .dir,.tm,.vec{transition:none}
  .dir::before,.dir::after,.vec::before,.vec::after{transition:none}
}

/* Порядковые метки у шагов — моноширинный номер уже есть,
   добавляем вертикаль связи между ними: это последовательность. */
.steps{counter-reset:none}
.step{position:relative}
.step:not(:last-child)::after{
  content:""; position:absolute; left:37px; top:46px; bottom:-1px;
  width:1px; background:var(--line-light);
}

/* Завершающий блок. Водяной знак-бабочка отсюда убран: секция и так
   является .band и получает фирменный ряд. Два разных изображения
   одного и того же знака в одном блоке — это не акцент, а шум. */
.cta-mark > .wrap{position:relative; z-index:1}

/* группы в выпадающем меню услуг */
.sub-group{
  display:block; padding:10px 12px 5px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.sub-group:first-child{padding-top:4px}
.sub-sep{display:block; height:1px; background:var(--border); margin:8px 12px}


/* ---------- Юридические документы ----------
   Длинный сплошной текст, который люди читают по необходимости,
   а не по желанию. Поэтому: узкая колонка (68 знаков), увеличенная
   межстрочная, нумерация пунктов остаётся в самом тексте — она
   часть документа, на неё ссылаются. */
.doc{padding:0 0 92px}
.doc .wrap{max-width:820px}
.doc h2{
  font-size:clamp(19px,2.1vw,23px);
  margin:52px 0 18px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.doc h2:first-of-type{margin-top:8px}
.doc p{margin:0 0 15px; max-width:68ch; color:var(--text-body)}
.doc ul{margin:0 0 18px; padding-left:22px; max-width:68ch}
.doc li{margin-bottom:9px; color:var(--text-body); line-height:1.65}
.doc b{color:var(--text); font-weight:500}
.doc a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent-25)}
.doc a:hover{border-bottom-color:var(--accent-ink)}

/* Врезка «коротко о главном» перед юридическим текстом.
   Документ обязан быть полным, но человек имеет право сначала
   понять суть — это она. */
.doc-note{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:var(--r-sm);
  padding:18px 22px;
  margin:0 0 34px !important;
  font-size:15.5px;
  line-height:1.6;
}

/* Реквизиты в конце документа */
.doc-req{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--border);
  font-size:14.5px;
  line-height:1.6;
  color:var(--muted);
}
.doc-req p{margin:0 0 4px; color:var(--muted); font-size:14.5px}
.doc-req b{color:var(--text)}
.doc-req a{color:var(--muted); border-bottom:1px solid var(--accent-25); text-decoration:none}
.doc-req a:hover{color:var(--text)}

@media (max-width:640px){
  .doc h2{margin:38px 0 14px; padding-top:22px}
  .doc .wrap{padding:0 20px}
}

/* Юридическая строка футера: ссылки на документы и реквизиты владельца.
   Мелко и приглушённо — это обязательные сведения, а не навигация,
   но они обязаны быть читаемыми, а не спрятанными. */
.foot-legal{
  border-top:1px solid var(--border);
  margin-top:34px;
  padding-top:22px;
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
}
.foot-legal p{margin:0 0 6px}
.foot-legal a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.foot-legal a:hover{color:var(--text); border-bottom-color:var(--accent-25)}

/* ---------- Своя форма заявки ----------
   Заменила CRM-форму Битрикс24. Базовые .form / .field описаны выше,
   здесь — то, чего в них не было: выпадающий список, галочки согласия,
   ловушка для ботов и состояния после отправки. */

.field select{
  font-family:var(--f-body); font-size:15.5px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:7px;
  padding:12px 14px; width:100%; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field input:focus,.field textarea:focus,.field select:focus{
  /* Обводка настоящая, а не тень. Было: outline:none плюс
     box-shadow 0 0 0 2px var(--accent-soft) — кольцо на 10 %
     прозрачности, контраст к фону 1,12:1 при норме 3:1 для нетекстовых
     индикаторов. У всех прочих элементов сайта фокус заметный, и пропадал
     он ровно там, где нужнее всего, — в форме. */
  border-color:var(--accent-ink);
  outline:2px solid var(--accent); outline-offset:2px;
}
.field .req{color:var(--terracotta)}

/* Галочки согласия. Обе сняты: согласие — это действие человека,
   а не то, что он забыл отменить. */
.consent{gap:12px; margin-top:6px}
.check{display:flex; gap:11px; align-items:flex-start; cursor:pointer;
       font-size:14px; line-height:1.5; color:var(--text-body)}
.check input{width:17px; height:17px; margin:2px 0 0; flex:none;
             accent-color:var(--accent); cursor:pointer}
.check a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent-25)}
.check a:hover{border-bottom-color:var(--accent-ink)}

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

.form-err{
  grid-column:1/-1; margin:0;
  background:var(--surface); border:1px solid var(--border);
  border-left:2px solid var(--terracotta);
  border-radius:var(--r-sm); padding:13px 16px;
  font-size:14.5px; color:var(--text-body);
}

/* Состояние после успешной отправки. Занимает место формы,
   чтобы человек сразу видел результат, а не искал его глазами. */
.form-done{
  max-width:660px; margin-top:34px;
  background:var(--surface); border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:var(--r-md); padding:26px 28px;
}
.form-done .fd-title{
  font-family:var(--f-head); font-size:20px; font-weight:600;
  color:var(--text); margin:0 0 8px;
}
.form-done p{margin:0; color:var(--text-body); font-size:15.5px; line-height:1.6}

@media (max-width:620px){
  .form{grid-template-columns:1fr}
}

/* ---------- Иконки ----------
   Lucide, штрих 2px на сетке 24×24 — та же линия, что у рамок
   и разделителей, поэтому иконки читаются как часть системы,
   а не как наклейки из чужого набора.

   Ставятся только там, где РАЗЛИЧАЮТ элементы между собой.
   Сейчас это одно место: типы записей в Лаборатории, где в общей
   ленте перемешаны четыре вида материала. */
.ico{
  flex:none;
  vertical-align:-.14em;
  stroke:currentColor;          /* цвет наследуется от подписи */
  /* 1.5 — требование брендбука (Viktor_Zakharov/brand/visual-identity.md,
     раздел 5: «только line icons, 24px, толщина 1.5px»). У Lucide родные
     2px, я сперва поставил 1.75 на глаз — это было мимо. */
  stroke-width:1.5;
}

/* Замыкающая строка под схемой пути «задача → продукт».
   Сама схема собрана из .steps — отдельного визуального языка
   для неё не заводили. */
/* Строка идёт следом за секцией .steps и набирала бы её нижний отступ
   поверх своего — поднимаем обратно, чтобы читалась как часть схемы,
   а не как отдельная мысль. */
.flow-loop-wrap{margin-top:-58px}
.flow-loop{
  margin:26px 0 0; padding-top:18px;
  border-top:1px solid var(--line-light);
  font-size:14.5px; color:var(--muted);
  max-width:66ch;   /* длину строки ограничиваем шириной, а не .col:
                       .col центрируется и увёл бы строку от левого края */
}

/* ---------- Иконки ----------
   Lucide, штрих 2px на сетке 24×24 — та же линия, что у рамок
   и разделителей, поэтому иконки читаются как часть системы,
   а не как наклейки из чужого набора.

   Ставятся только там, где РАЗЛИЧАЮТ элементы между собой.
   Сейчас это одно место: типы записей в Лаборатории, где в общей
   ленте перемешаны четыре вида материала. */
.ico{
  flex:none;
  vertical-align:-.14em;
  stroke:currentColor;          /* цвет наследуется от подписи */
  /* 1.5 — требование брендбука (Viktor_Zakharov/brand/visual-identity.md,
     раздел 5: «только line icons, 24px, толщина 1.5px»). У Lucide родные
     2px, я сперва поставил 1.75 на глаз — это было мимо. */
  stroke-width:1.5;
}

/* Замыкающая строка под схемой пути «задача → продукт».
   Сама схема собрана из .steps — отдельного визуального языка
   для неё не заводили. */
/* Строка идёт следом за секцией .steps и набирала бы её нижний отступ
   поверх своего — поднимаем обратно, чтобы читалась как часть схемы,
   а не как отдельная мысль. */
.flow-loop-wrap{margin-top:-58px}
.flow-loop{
  margin:26px 0 0; padding-top:18px;
  border-top:1px solid var(--line-light);
  font-size:14.5px; color:var(--muted);
  max-width:66ch;   /* длину строки ограничиваем шириной, а не .col:
                       .col центрируется и увёл бы строку от левого края */
}


/* ---------- Акцентная полоса ----------
   Единственное тёмное пятно на светлой странице. Ровно поэтому
   работает: если тёмных блоков станет два, оба перестанут быть акцентом.

   Тон — графит с лёгким уклоном в бирюзу, а не чёрный: правило №1
   брендбука. Переход еле заметный и даёт глубину, а не свечение —
   свечение было языком неоновой версии сайта, от которой ушли. */
.strip{padding:0 0 12px}
.strip-in{
  position:relative; isolation:isolate; overflow:hidden;
  /* Плоская заливка, не градиент: брендбук запрещает градиенты
     (раздел 8 «Запреты», единственное исключение — favicon).
     Я поставил градиент по образцу старого сайта — там он был,
     но старый брендбук отменён. */
  background:#232E33;
  border-radius:var(--r-lg);
  padding:34px 38px;
  display:flex; align-items:center; gap:28px 40px; flex-wrap:wrap;
}
/* Знак на тёмной полосе — тот же файл, что на первом экране.
   Половина знака у правого края, за кнопкой. */
.strip-in::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--strip-mark);
  background-size:auto 300px;
  background-position:right -158px center;   /* половина ширины при высоте 300 */
  background-repeat:no-repeat;
  opacity:.5;
  mask-image:linear-gradient(to left, #000 0 34%, transparent 82%);
  -webkit-mask-image:linear-gradient(to left, #000 0 34%, transparent 82%);
}
.strip-text{
  flex:1 1 380px; margin:0;
  font-family:var(--f-head); font-weight:500;
  font-size:clamp(17px,2vw,20px); line-height:1.42;
  color:#F5F2EC;          /* лён по графиту — 12,4:1 */
  max-width:52ch; text-wrap:balance;
}
.strip-btn{
  flex:none; display:inline-block; text-decoration:none;
  background:#F5F2EC; color:#232E33;
  font-family:var(--f-body); font-weight:500; font-size:15.5px;
  padding:14px 26px; border-radius:var(--r-sm);
  transition:background .16s;
}
.strip-btn:hover{background:#FFFFFF}
.strip-btn:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px}

/* В тёмной теме блок не может быть «темнее фона» — поднимаем его
   над поверхностью, иначе он растворится и перестанет быть акцентом. */
:root:not([data-theme="light"]) .strip-in{background:#2C3A42}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .strip-in{background:#232E33}
}
:root[data-theme="dark"] .strip-in{background:#2C3A42}

@media (max-width:700px){
  .strip-in{padding:26px 24px; gap:20px}
  /* На узком экране линии упирались бы в текст: рисунок обязан
     уступать содержанию, а не наоборот. */
  .strip-art{opacity:.5}
  .strip-btn{width:100%; text-align:center}
}

/* ---------- Первый экран главной ----------
   Текст слева, фотография справа. Фотография — не украшение:
   продаётся личная работа с руководителем, и лицо снимает
   половину недоверия ещё до чтения. */
.hero--main{padding:52px 0 64px; overflow:visible}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 420px;
  gap:40px 64px; align-items:center;
}
.hero-text{max-width:none}
.hero--main h1{
  font-size:clamp(40px,6.2vw,74px); line-height:1.02;
  letter-spacing:-.032em; margin:0 0 20px; max-width:none;
}
.hero--main .lede{max-width:46ch; margin:0 0 30px}
.hero-note{
  font-size:13.8px; color:var(--muted); margin:20px 0 0;
  padding-left:14px; border-left:1px solid var(--accent-25);
}

/* Строка слов под заголовком главной снята: те же четыре шага
   переехали вправо и стали блоком «ступени первого экрана».
   Правила .hero-path удалены вместе с разметкой — мёртвый CSS
   переживает страницы и потом годами мешает искать. */

/* ---------- ступени первого экрана ----------
   Путь задачи справа от заголовка. Состояния ставит
   assets/px/herostage.js тем же прогрессом, что тянет рельс.

   Текст читаем ВСЕГДА, включая непройденные шаги: подсветка здесь
   акцент, а не проявление. Бледный нечитаемый шаг выглядит
   сломанным, а не будущим — эту ошибку я уже делал на смыслах
   мастермайнда и чинил после. */
.hs{position:relative; padding:4px 0 4px 2px}
.hs-шаги{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(22px,3.4vh,38px);
}
.hs-шаги li{
  position:relative; padding-left:34px;
  transition:opacity .35s ease;
}
/* Узел — тот же кружок, что маркеры списков и узлы в графике.
   Один значок на весь сайт. */
.hs-узел{
  position:absolute; left:0; top:.18em;
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--bg);
  box-sizing:border-box; z-index:1;
  transition:border-color .35s ease, background-color .35s ease, transform .35s ease;
}
.hs-шаги b{
  display:block; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
  transition:color .35s ease;
}
.hs-шаги p{
  margin:0; font-size:15.5px; line-height:1.45;
  /* 0,68 графита — 4,7:1 на льне. Ниже порога текст перестаёт
     читаться, и путь выглядит недогруженным. */
  color:rgba(42,45,47,.68); max-width:30ch;
  transition:color .35s ease;
}
.hs-шаги li.is-on b{color:var(--text-body)}
.hs-шаги li.is-on p{color:var(--text)}
.hs-шаги li.is-on .hs-узел{border-color:var(--accent-25)}
.hs-шаги li.is-now b{color:var(--accent-ink)}
.hs-шаги li.is-now .hs-узел{
  background:var(--accent); border-color:var(--accent); transform:scale(1.15);
}

/* Рельс соединяет узлы. Тянется от первого к последнему, а не на всю
   высоту колонки: иначе линия уходит ниже последнего кружка и повисает.
   Отсчёт сверху даёт scaleY с опорой в начале. */
.hs-рельс{
  position:absolute; left:6px; top:calc(.18em + 13px + 6px);
  bottom:calc(1.45em + 6px); width:1.5px; background:var(--border);
}
.hs-рельс i{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleY(0); transform-origin:top center;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hs-шаги p{color:rgba(245,242,236,.70)}
}
:root[data-theme="dark"] .hs-шаги p{color:rgba(245,242,236,.70)}

@media (max-width:760px){
  /* На телефоне путь идёт под текстом и жмётся: четыре шага
     по 38 px разрыва занимали бы пол-экрана. */
  .hs-шаги{gap:18px}
  .hs-шаги p{font-size:15px; max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hs-шаги li,.hs-узел,.hs-шаги b,.hs-шаги p{transition:none}
}

/* Знак на первом экране. Толщина линии задана через vector-effect:
   знак крупный, и без него 6.2 единицы viewBox дали бы заметно
   более жирную линию, чем 1.5 px в остальной графике. */
.hm{margin:0; position:relative; display:flex; flex-direction:column; align-items:center}
.hm-mark{
  display:block; width:100%; max-width:420px; height:auto;
  color:var(--accent); overflow:visible;
  /* 2 px, а не 1.5: правило полуторной линии — про иконки, а здесь
     крупный элемент первого экрана, и на 420 px полуторная теряется. */
  stroke-width:2; vector-effect:non-scaling-stroke;
}
.hm-cap{
  margin:16px 0 0; text-align:center; max-width:34ch;
  font-size:14px; color:var(--muted);
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 300px; gap:32px 40px}
}
@media (max-width:760px){
  .hero--main{padding:36px 0 44px}
  .hero-grid{grid-template-columns:1fr; gap:32px}
  /* Фотография уходит под текст и сужается: на телефоне сначала
     читают, а потом смотрят. */
  .hm-mark{max-width:260px}
  .hero--main h1{font-size:clamp(34px,10vw,46px)}
}

/* На главной визуальный центр — фотография. Фирменный знак здесь
   отключён: два изображения на одном экране делят внимание, и ни одно
   не выигрывает. На внутренних страницах фото нет, и знак работает. */
.hero--main::before{display:none}

/* ---------- риски самостоятельного внедрения ---------- */
/* Нумерованный список, но НЕ последовательность: номера здесь —
   ориентир для глаза. Порядок пунктов значения не имеет, поэтому
   ни ступенчатого появления, ни закрепления. */
.risks{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.risks li{
  display:grid; grid-template-columns:48px minmax(0,1fr);
  gap:0 20px; padding:22px 0; border-top:1px solid var(--border);
}
.risks li:last-child{border-bottom:1px solid var(--border)}
.r-n{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  color:var(--accent-ink); padding-top:5px;
}
.risks h3{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(17px,1.9vw,21px); line-height:1.25;
  color:var(--text); margin:0 0 8px; letter-spacing:-.015em;
}
.risks p{margin:0; font-size:15.5px; color:var(--text-body); max-width:62ch}
@media (max-width:600px){
  .risks li{grid-template-columns:1fr; gap:8px}
  .r-n{padding-top:0}
}

/* ---------- кейсы: карточка без ссылки и кнопка «все» ---------- */
/* Digital Architect закрытый — у его карточки нет href, значит это
   не ссылка. Делаем её визуально такой же, но без наведения:
   курсор-рука на том, что никуда не ведёт, — обман. */
.case--нет-ссылки{cursor:default}
.case--нет-ссылки:hover{transform:none; border-color:var(--border)}
.cases-all{margin:26px 0 0; text-align:center}

/* ---------- блок «обо мне» на главной ---------- */
.about-home{padding:clamp(56px,8vh,88px) 0}
.about-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(32px,4.5vw,64px); align-items:start;
}
.about-text h2{
  font-size:clamp(24px,3vw,32px); line-height:1.24; margin-bottom:24px; max-width:22ch;
}
.about-photo{margin:0}
.about-photo img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}

/* ---------- форма и личный контакт рядом ---------- */
.cta-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:clamp(28px,4vw,56px); align-items:start; margin-top:30px;
}
.cta-личный{
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); padding:24px 22px 22px; text-align:center;
}
.cta-личный img{
  width:120px; height:120px; object-fit:cover; object-position:50% 22%;
  border-radius:50%; display:block; margin:0 auto 16px;
}
.лич-зов{
  font-family:var(--f-head); font-weight:600; font-size:17px;
  color:var(--text); margin:0 0 8px; letter-spacing:-.012em;
}
.лич-текст{font-size:14.5px; color:var(--text-body); margin:0 0 18px; line-height:1.55; max-width:62ch}
.лич-ник{
  margin:12px 0 0; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; color:var(--muted);
}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; gap:28px}
  /* Фото после текста: на узком экране первым должен идти рассказ. */
  .about-photo{order:2; max-width:320px}
  .cta-grid{grid-template-columns:1fr; gap:26px}
  .cta-личный{max-width:420px}
}

/* ---------- блок мастермайнда на главной ---------- */
/* Тёмная карта со знаком у правого края — тот же приём, что у полосы.
   Два тёмных пятна на светлой странице допустимы, только если они
   далеко друг от друга: полоса стоит в первой трети, этот блок —
   в середине. Рядом они превратили бы страницу в полосатую. */
.mm-promo{padding:8px 0 12px}
.mmp-in{
  position:relative; isolation:isolate; overflow:hidden;
  background:#232E33; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px) clamp(24px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:28px 44px; align-items:center;
}
.mmp-in::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--strip-mark);
  background-size:auto 420px;
  background-position:right -221px center;   /* половина ширины при высоте 420 */
  background-repeat:no-repeat;
  opacity:.42;
  mask-image:linear-gradient(to left, #000 0 30%, transparent 80%);
  -webkit-mask-image:linear-gradient(to left, #000 0 30%, transparent 80%);
}
.mm-promo h2{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(24px,3.2vw,34px); line-height:1.12;
  letter-spacing:-.022em; color:#F5F2EC; margin:0 0 14px; max-width:18ch;
}
.mmp-лид{
  margin:0 0 20px; font-size:16px; line-height:1.6;
  color:rgba(245,242,236,.82); max-width:52ch;
}
/* Три факта в строку: даты, ритм, места. Разделитель — точка,
   нарисованная псевдоэлементом, чтобы не зависеть от шрифта. */
.mmp-строка{
  margin:0 0 24px; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(245,242,236,.62);
}
.mmp-строка span{position:relative; padding-left:16px}
.mmp-строка span::before{
  content:""; position:absolute; left:0; top:.42em;
  width:6px; height:6px; border-radius:50%;
  border:1.5px solid #8FD3CE; box-sizing:border-box;
}
.mmp-строка span:first-child{padding-left:0}
.mmp-строка span:first-child::before{display:none}

.mmp-кнопки{margin:0; display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center}
.mmp-btn{
  display:inline-block; text-decoration:none;
  background:#F5F2EC; color:#232E33;
  font-family:var(--f-body); font-weight:500; font-size:15.5px;
  padding:13px 24px; border-radius:var(--r-sm);
  transition:background .16s;
}
.mmp-btn:hover{background:#FFFFFF}
.mmp-btn:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px}
.mmp-ghost{
  color:#CFE9E6; text-decoration:none; font-size:15px;
  border-bottom:1px solid rgba(207,233,230,.42); padding-bottom:2px;
  transition:border-color .16s, color .16s;
}
.mmp-ghost:hover{color:#FFFFFF; border-color:#FFFFFF}

/* Отсчёт. Крупная цифра — единственное место на главной, где число
   работает как изображение: оно и есть срочность. */
.mmp-счёт{text-align:center; flex:none}
.мпс-ч{
  display:block; font-family:var(--f-head); font-weight:600;
  font-size:clamp(54px,7vw,82px); line-height:.92; color:#8FD3CE;
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.мпс-п{
  display:block; margin-top:10px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(245,242,236,.6);
}

@media (max-width:760px){
  .mmp-in{grid-template-columns:1fr; gap:22px}
  /* Отсчёт уходит наверх: на узком экране он читается как метка
     блока, а внизу повисал бы хвостом. */
  .mmp-счёт{order:-1; text-align:left}
  .mmp-in::before{opacity:.26}
}

/* ---------- блок заявки: человек слева, форма справа (п. 14) ----------
   Колонки поменялись местами и весом. Левая — живой человек и прямое
   приглашение написать; правая — форма, нарочно узкая: три поля
   и согласие, больше ей не нужно. */
.cta-выбор{margin:10px 0 0; font-size:15.5px; color:var(--text-body)}
/* Широкое место отдано форме, а не карточке. В 330px подписи полей
   переносились на вторую строку, соседние поля расходились по вертикали,
   а у карточки при этом оставалась половина экрана пустого места.
   Доля, а не фиксированные пиксели: на среднем экране карточка ужимается
   вместе с окном и не съедает форму. */
.cta-grid--лично{grid-template-columns:minmax(0,clamp(300px,34%,440px)) minmax(0,1fr)}

/* Форма и карточка начинаются с одной линии. Отступ сверху нужен форме,
   когда она стоит одна в колонке; в паре он опускал её ниже карточки. */
.cta-grid--лично .cta-form .form{margin-top:0}

.cta-личный.лич--главный{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,26px); row-gap:0;
  align-items:center; text-align:left;
  padding:clamp(20px,2.4vw,28px);
}
/* Дети карточки лежат плоским списком: фото и четыре строки текста.
   Без явной привязки сетка раскладывает их парами — фото оказывается
   рядом с заголовком, подпись рядом с кнопкой. Поэтому фото занимает
   первую колонку целиком, а текст уходит во вторую. */
.лич--главный img{
  width:112px; height:112px; margin:0;
  grid-column:1; grid-row:1 / -1; align-self:center;
}
.лич--главный > :not(img){grid-column:2}
.лич--главный .лич-зов{
  font-size:clamp(19px,2.2vw,23px); color:var(--accent-ink); margin-bottom:6px;
}
.лич--главный .лич-текст{margin-bottom:14px}
.лич--главный .лич-ник{margin-top:10px}

/* Перенос в одну колонку. Правило .cta-grid в медиазапросе выше стоит
   РАНЬШЕ по файлу и при равной специфичности проигрывает — без этой
   строки блок оставался двухколоночным на телефоне, и человек
   сжимался до сорока пикселей. */
@media (max-width:860px){
  .cta-grid--лично{grid-template-columns:1fr}
}

/* Телефон: фотография над текстом, иначе колонка с подписью ужимается
   до двух слов в строке. */
@media (max-width:560px){
  .cta-личный.лич--главный{grid-template-columns:1fr; text-align:center; row-gap:10px}
  /* Привязку к колонкам, заданную для широкого экрана, надо снять явно:
     иначе текст остаётся во второй колонке, а фото жмётся в первую
     нулевой ширины. */
  .лич--главный img{margin:0 auto; grid-column:1; grid-row:auto}
  .лич--главный > :not(img){grid-column:1}
}