/* ============================================================================
   NOMOS — дизайн-система «завизированный документ»
   Источник: design.md (Claude Design). Токены → компоненты → секции → адаптив.
   Правило редактируемости: секции собираются из переиспользуемых классов ниже,
   а не из инлайн-стилей. Меняя структуру, работай классами.
   ============================================================================ */

@import url("fonts/fonts.css");

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  /* светлая тема (основная) */
  --paper:#F2F3F1;   --sheet:#FFFFFF;   --ink:#15181A;   --ink-soft:#4A4F52;
  --rule:#E1E4E0;    --visa:#26324D;    --visa-press:#1B2436;
  --ochre:#7A5D00;   --signal:#A6321F;
  /* тёмная тема (только подвал) */
  --paper-d:#101315; --sheet-d:#171B1E; --ink-d:#E9EBE8;  --ink-soft-d:#9AA19E;
  --rule-d:#262B2E;  --visa-d:#8E9DBF;  --ochre-d:#D8B25A; --signal-d:#E07A6B;

  --serif:'Piazzolla',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  /* моушн */
  --dur-hover:140ms; --dur-reveal:400ms; --dur-stroke:560ms; --dur-count:800ms;
  --ease-settle:cubic-bezier(.22,1,.36,1);
  --ease-stroke:cubic-bezier(.30,0,.20,1);
  --ease-soft:cubic-bezier(.40,0,.20,1);

  /* сетка */
  --maxw:1280px; --pad:48px; --gap:24px; --sec:128px;
}

/* ---------- 2. БАЗА ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* text-size-adjust: iOS не должен сам «раздувать» текст (жалоба «меняется масштаб»).
   scroll-behavior:smooth — только для мыши: на таче он мешает нативной инерции
   и восстановлению позиции скролла (якоря на таче ведёт JS scrollIntoView). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (hover:hover) and (pointer:fine){ html{scroll-behavior:smooth} }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
a{color:var(--visa);text-decoration:none;transition:color var(--dur-hover) ease}
a:hover{color:var(--visa-press)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:560;line-height:1.1;letter-spacing:-.01em}
img,svg{max-width:100%}
::selection{background:rgba(38,50,77,.14)}

/* ---------- 3. ЛЕЙАУТ ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{margin-top:var(--sec);scroll-margin-top:24px;position:relative}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}

/* документная ось: контент 1–8, служебное поле (rail) 10–12 (или 9–12 wide) */
.col-8{grid-column:1 / span 8}
.col-7{grid-column:1 / span 7}
.col-full{grid-column:1 / -1}
.col-span-2{grid-column:1 / span 2}
.rail{grid-column:10 / span 3;border-left:1px solid var(--rule);padding-left:var(--gap)}
.rail--wide{grid-column:9 / span 4}
.rail--mid{align-self:center}
.rail--start{align-self:start}

/* ============================================================================
   РЕДИЗАЙН-МАНИФЕСТ: тональные блоки-главы + гигантская типографика.
   Адаптация подачи manifestos.com в холодную документную айдентику NOMOS:
   полноширинные блоки чередуют фон (бумага / «кабинет вечером»), заявления
   центрированы и гигантские, рабочие секции — по левой оси 8+4.
   ============================================================================ */

/* --- Полноширинные тональные блоки (full-bleed фон) --- */
.band{position:relative;overflow:hidden;padding-block:clamp(88px,11vw,176px)}
.band__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.band--paper{background:var(--paper);color:var(--ink)}
.band--tight{padding-block:clamp(56px,7vw,104px)}
/* тёмный блок: переопределяем токены → все вложенные компоненты флипаются в тёмную тему */
.band--dark{
  background:var(--paper-d);color:var(--ink-d);
  --paper:var(--paper-d);--sheet:var(--sheet-d);--ink:var(--ink-d);
  --ink-soft:var(--ink-soft-d);--rule:var(--rule-d);
  --visa:var(--visa-d);--visa-press:var(--visa-d);--ochre:var(--ochre-d);--signal:var(--signal-d);
}
.band--dark .btn--primary{background:var(--visa-d);color:#101315}
.band--dark .btn--primary:hover{background:#A9B6D2;color:#101315}
.band--dark ::selection{background:rgba(142,157,191,.20)}

/* --- Гигантская дисплейная типографика (Piazzolla, крупно и плотно) --- */
.display{font-family:var(--serif);font-weight:600;line-height:1;letter-spacing:-.03em;
  text-wrap:balance;font-optical-sizing:auto;margin:0}
.display--hero{font-size:clamp(2.75rem,7vw,7rem);line-height:.98}
.display--statement{font-size:clamp(2rem,4.8vw,4.25rem);line-height:1.06;letter-spacing:-.025em}
.i{font-style:italic}
.on-visa{color:var(--visa)}

/* --- Центрированное заявление-манифест --- */
.statement{max-width:min(1040px,92%);margin-inline:auto;text-align:center}
.statement .lead{margin-inline:auto;max-width:640px}
.statement__meta{margin-top:36px;display:flex;gap:12px 28px;justify-content:center;flex-wrap:wrap;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink-soft)}
.statement__meta b{color:var(--ink);font-weight:500}
.cta-row{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* --- Подсказка скролла ↓ --- */
.scroll-cue{display:flex;justify-content:center;margin-top:clamp(44px,6vw,88px)}
.scroll-cue svg{width:20px;height:34px;stroke:var(--ink-soft);opacity:.7}
html.anim .scroll-cue svg{animation:cueBob 1.9s var(--ease-soft) infinite}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:.9}}

/* --- Гравюры-ассеты (тонколинейные SVG-мотивы; фоновые акценты глав) --- */
.engrave{position:absolute;pointer-events:none;user-select:none;z-index:0}
.engrave img{display:block;width:100%;height:auto}
/* Мобильная гравюра-в-потоке (manifest-паттерн: средняя, по центру, между
   заголовком и телом главы). На десктопе скрыта — роль ведёт абсолютная .engrave. */
.engrave-m{display:none}
/* Бургер и оверлей-меню — только мобилка; на десктопе скрыты (оверлей ещё и [hidden]). */
.nav-toggle{display:none}
.engrave--capital{top:6%;right:-5%;width:clamp(240px,32vw,460px);opacity:.5}
.engrave--stela{top:50%;left:50%;transform:translate(-50%,-52%);width:clamp(200px,25vw,360px);opacity:.42}
/* Гравюры-манифеста (AVIF). Ассеты монохромные на прозрачном фоне; тон правим
   через filter: invert переворачивает светлый↔тёмный, grayscale уводит сепию в холод. */
/* ФЕМИДА — крупная гравюра в hero. Ассет светлый → invert в тёмный ink на бумаге.
   Левый край растворяется градиент-маской, чтобы гравюра не сливалась с текстом. */
/* сдвинута левее (право-отступ положительный), чтобы весы не обрезались краем экрана */
.engrave--themis{top:50%;right:clamp(28px,4vw,96px);transform:translateY(-50%);
  height:min(84%,800px);width:auto;display:flex;align-items:center;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.75) 28%,#000 50%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.75) 28%,#000 50%)}
.engrave--themis img{height:100%;width:auto;filter:invert(1) grayscale(1) contrast(1.05)}
/* ВЕСЫ — крупная гравюра за §04 (тёмный ассет → invert в светлый на тёмной банде). */
.engrave--scales{top:50%;left:50%;transform:translate(-50%,-48%);
  height:min(86%,780px);width:auto;display:flex;align-items:center;opacity:.5}
.engrave--scales img{height:100%;width:auto;filter:invert(1) grayscale(1) brightness(1.1)}
/* КОЛОННА — за story-сценой §01: по центру, РАСТЁТ по прогрессу скролла (ведёт app.js). */
.engrave--column{top:50%;left:50%;transform:translate(-50%,-50%);
  height:min(96%,880px);width:auto;display:flex;align-items:center;justify-content:center;opacity:.16}
.engrave--column img{height:100%;width:auto;filter:invert(1) grayscale(1) contrast(1.05);will-change:transform}
/* КАПИТЕЛЬ — тихий фоновый акцент финального CTA (правый край). Тёмный штрих на светлом фоне → БЕЗ invert. */
.engrave--capitalm{top:50%;right:clamp(-70px,-3vw,0px);transform:translateY(-50%);
  height:min(78%,640px);width:auto;display:flex;align-items:center;opacity:.14}
.engrave--capitalm img{height:100%;width:auto;filter:grayscale(1) contrast(1.05)}
/* ШЕСТЕРЁНКИ — механизм работы, фоновый акцент §03 (правый край). Ассет тёмный на прозрачном. */
.engrave--gears{top:50%;right:clamp(-90px,-4vw,-8px);transform:translateY(-50%);
  height:min(82%,660px);width:auto;display:flex;align-items:center;opacity:.14}
.engrave--gears img{height:100%;width:auto;filter:invert(1) grayscale(1) contrast(1.05)}
/* ШАХМАТНЫЙ КОРОЛЬ — «ставки/цена ошибки», акцент §02 (тёмная банда; ассет светлый → БЕЗ invert). */
.engrave--chess{top:calc(50% + 36px);right:clamp(0px,4vw,120px);transform:translateY(-50%);
  height:min(80%,680px);width:auto;display:flex;align-items:center;opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.7) 34%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.7) 34%,#000 62%)}
.engrave--chess img{height:100%;width:auto;filter:grayscale(1) brightness(1.05)}

/* --- Гигантский финал-титул, слитый с тёмным подвалом --- */
/* ПЕРО — целиком видимое, по центру, НАД вордмарком (композиция финала манифеста). */
.final-quill{width:clamp(420px,54vw,860px);margin:0 auto clamp(4px,1.5vw,20px)}
.final-quill img{display:block;width:100%;height:auto;opacity:.85;
  filter:invert(1) grayscale(1) brightness(1.08)}
.final-title{position:relative;text-align:center;padding-block:0 clamp(24px,4vw,56px)}
.final-word{font-family:var(--serif);font-weight:600;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(3.75rem,18vw,16rem);color:var(--ink-d);position:relative;z-index:1;margin:0}
.final-maxim{position:relative;z-index:1;font-family:var(--mono);font-weight:500;
  font-size:clamp(12px,1.4vw,15px);letter-spacing:.14em;color:var(--ink-soft-d);
  text-transform:uppercase;margin-top:24px}

/* ---------- ГЛАВА-МАНИФЕСТ: крупный serif-номер как хребет + заголовок ---------- */
.chapter{margin-bottom:clamp(40px,5vw,72px);max-width:1040px}
.chapter__num{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,7vw,5.5rem);line-height:.85;letter-spacing:-.03em;
  color:var(--visa);opacity:.5;font-variant-numeric:tabular-nums;margin-bottom:16px}
/* на тёмной банде номер обязан читаться сразу (жалоба: «04» сливалась) */
.band--dark .chapter__num{color:var(--visa-d);opacity:.8}
.chapter__title{margin:0}
.chapter__lead{margin-top:24px;max-width:640px}
.chapter--center{text-align:center;margin-inline:auto}
.chapter--center .chapter__num,.chapter--center .chapter__lead{margin-inline:auto}

/* ---------- СЦЕНА-ПИН: секция = один экран, контент по центру; пинится в app.js ----------
   Верхний паддинг ≥ высоты sticky-шапки: при pin start:'top top' шапка лежит
   поверх секции — без отступа она режет номер главы (жалоба: «04 обрезана»). */
.scene__stage{position:relative}
.scene-pin{padding-block:0}
.scene-pin > .band__inner{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:clamp(88px,11vh,116px) clamp(20px,3vh,44px)}
.scene-pin .chapter{margin-bottom:clamp(12px,2vh,28px)}
.scene-pin .chapter__lead{margin-top:12px}
/* компактнее типографика внутри пин-сцен — весь кадр обязан влезать в экран */
.scene-pin .chapter__num{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:10px}
.scene-pin .chapter__title{font-size:clamp(1.8rem,3.9vw,3.4rem)}
.scene-pin .sheet--pad{padding:clamp(22px,2.8vh,32px)}
/* низкие ноутбуки: ещё плотнее, иначе §04 не влезает и пин отключается */
@media (min-width:1024px) and (max-height:820px){
  .scene-pin > .band__inner{padding-block:clamp(76px,10vh,92px) 20px}
  .scene-pin .chapter{margin-bottom:12px}
  .scene-pin .chapter__num{font-size:2.1rem;margin-bottom:8px}
  .scene-pin .chapter__title{font-size:clamp(1.5rem,2.9vw,2.4rem)}
  .scene-pin .chapter__lead{margin-top:8px;font-size:1.05rem}
  .scene-pin .sheet--pad{padding:16px 20px}
  .scene-pin .small{font-size:13.5px}
  .scene-pin .rows > div{padding:6px 0}
  .scene-pin .grif{margin-top:14px;padding-top:12px}
  .scene-pin .stamp{width:100px}
  .scene-pin .note{font-size:12px}
}

/* ---------- СЦЕНА-ИСТОРИЯ (§01): вопрос + сменяющиеся биты + растущая колонна ----------
   База (без JS / мобайл): биты статичны столбиком — контент виден всегда.
   Режим .story--pinned ставит app.js при постройке пина: биты в абсолютной
   сцене сменяют друг друга, колонну масштабирует таймлайн. */
.story .band__inner{text-align:center}
.story .chapter--center{margin-bottom:clamp(20px,3vh,40px);margin-bottom:clamp(20px,3svh,40px)}
.story__stage{position:relative;max-width:900px;margin-inline:auto}
.story__beat{font-family:var(--serif);font-weight:560;font-size:clamp(1.5rem,3.2vw,2.5rem);
  line-height:1.22;letter-spacing:-.015em;text-wrap:balance;margin:26px auto 0}
.story__beat--final{font-weight:600}
.story--pinned .story__stage{width:100%;min-height:clamp(220px,36vh,340px);
  min-height:clamp(220px,36svh,340px);display:flex;
  align-items:center;justify-content:center}
.story--pinned .story__beat{position:absolute;left:0;right:0;width:100%;margin:0 auto}
/* Запиненная story-сцена на планшете/мобиле — полный экран и центрирование
   (специфичность (0,3,0) перебивает unpin-правила адаптива ≤1023/≤640):
   пин §01 работает и на мобильном — хореография идентична десктопу.
   Заскоуплено ≤1023: на десктопе кадр держит базовый .scene-pin > .band__inner. */
@media (max-width:1023px){
  .story--pinned.scene-pin{padding-block:0}
  .story--pinned.scene-pin > .band__inner{min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(72px,10vh,96px) clamp(16px,3vh,32px);
    padding-block:clamp(72px,10svh,96px) clamp(16px,3svh,32px)}
}

/* ---------- HERO: заявление по левой оси + крупная Фемида справа ----------
   Один экран: band__inner растянут на вьюпорт минус шапка, текст по центру
   с лёгким смещением вверх (кнопка ВСЕГДА в кадре), скролл-подсказка у низа. */
.hero{padding-block:0}
.hero > .band__inner{min-height:calc(100svh - 72px);display:flex;flex-direction:column;
  justify-content:flex-start;padding-block:clamp(24px,3.5vh,52px) clamp(12px,2vh,28px);
  padding-block:clamp(24px,3.5svh,52px) clamp(12px,2svh,28px)}
.hero__statement{text-align:left;margin-inline:0;max-width:min(680px,58%)}
.hero__statement .lead{margin-inline:0;max-width:560px}
.hero .display--hero{font-size:clamp(2.5rem,5.5vw,5.25rem)}
.hero .cta-row{justify-content:flex-start;margin-inline:0}
.hero .scroll-cue{margin-top:auto;padding-top:clamp(20px,3vh,44px)}
/* низкие вьюпорты (ноутбук): поджать типографику, чтобы кнопка не резалась */
@media (min-width:1024px) and (max-height:780px){
  .hero .display--hero{font-size:clamp(2.2rem,4.8vw,4rem)}
  .hero__statement .lead{font-size:1.1rem}
  .hero .cta-row{margin-top:28px}
}

/* ---------- КЕЙСЫ (§05): крупные строки-дела (manifest firms), тёмная банда ---------- */
.case-list{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--rule)}
.case-row{display:grid;grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;
  border-bottom:1px solid var(--rule);padding:clamp(36px,5vw,64px) 0}
.case-row__art{position:relative;height:clamp(160px,20vw,240px);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
/* ассеты кейсов — все ТЁМНОШТРИХОВЫЕ исходники на тёмной банде → invert делает их светлыми */
.case-row__art img{max-height:100%;width:auto;opacity:.62;
  filter:invert(1) grayscale(1) brightness(1.08);
  transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft)}
.case-row:hover .case-row__art img{opacity:.72;transform:scale(1.03)}
/* чётные строки — гравюра справа (чередование, как у манифеста) */
.case-row:nth-child(even) .case-row__art{order:2}
/* судейский молоток (1-й кейс, ассет m-magnifier): рисунок кадрирован вплотную к краям холста — стойка упирается в левый край, рукоять в правый. Сдвиг невозможен (обрежет другую сторону) → чуть уменьшаем, появляются симметричные поля */
.case-row:nth-child(1) .case-row__art img{max-width:94%}
.case-row__cat{font-size:13px;color:var(--visa)}
.case-row__title{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.8vw,2.35rem);line-height:1.12;margin-top:14px;max-width:16ch}
.case-row__lead{margin-top:16px;max-width:560px;color:var(--ink-soft);
  font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.5}
.case-row__link{display:inline-flex;align-items:center;margin-top:22px;
  font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;
  transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.case-row__link:hover{color:var(--visa);border-bottom-color:var(--visa)}

/* ---------- ФИНАЛЬНЫЙ ПРИЗЫВ (манифест-outro): одно заявление + одна кнопка ---------- */
.final-cta > .band__inner{min-height:72vh;min-height:72svh;display:flex;flex-direction:column;justify-content:center}
.final-cta__inner{max-width:900px;position:relative;z-index:1}
.final-cta__title{margin:0}
.final-cta__lead{margin-top:24px;max-width:600px}
.final-cta__actions{margin-top:clamp(32px,4vw,48px);display:flex;align-items:center;
  gap:clamp(24px,4vw,44px);flex-wrap:wrap}

/* Компактный CTA страницы продуктов — плотнее и ближе к тарифам, без hero-высоты */
.prod-cta__inner{max-width:600px;margin-inline:auto;text-align:center}
.prod-cta__title{margin:0;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1}
.prod-cta__lead{margin-top:14px}
.prod-cta__btn{margin-top:clamp(22px,2.6vw,30px)}

/* ---------- СТРАНИЦА-ЗАЯВКА (request.html): заявление + Фемида + форма ---------- */
.request{padding-block:0}
.request > .band__inner{min-height:calc(100svh - 72px);display:flex;flex-direction:column;
  justify-content:flex-start;padding-block:clamp(20px,3vh,44px) clamp(48px,7vh,96px);
  padding-block:clamp(20px,3svh,44px) clamp(48px,7svh,96px)}
/* контент теперь по верхней оси → Фемиду тоже приподнимаем к заголовку (index не трогаем) */
.request .engrave--themis{top:46%}
.request__head{max-width:640px;position:relative;z-index:1}
.request__back{display:inline-flex;color:var(--ink-soft);margin-bottom:24px;letter-spacing:.08em}
.request__back:hover{color:var(--visa)}
.request__title{margin:0}
.request__lead{margin-top:24px;max-width:560px}
.request__form{position:relative;z-index:1;margin-top:clamp(36px,5vw,56px);
  max-width:820px;padding:clamp(28px,4vw,48px)}
.request__form .form-grid{margin-top:0}

/* подвал: ссылка на политику (человеческий тон, без капса) */
.foot__privacy{color:var(--visa-d);border-bottom:1px solid var(--visa-d);text-transform:none}
/* дисклеймер мелким шрифтом над копирайтом (как у манифеста — не отдельный слайд) */
.foot__disclaimer{margin-top:clamp(40px,5vw,64px);font-size:12px;line-height:1.6;
  color:var(--ink-soft-d);max-width:880px}

/* ---------- МЕТОД · закрытие «XII ТАБЛИЦ» (наследие римского права) ---------- */
.tabula-motif{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(40px,6vw,88px);align-items:center}
.tabula-motif__text{max-width:560px}
.tabula-motif__plate{position:relative}
.tabula-img{display:block;width:100%;height:auto;opacity:.95}
.tabula-cap{margin-top:20px;text-align:center;letter-spacing:.16em}
.engrave--stela-bg{top:50%;left:clamp(-60px,-3vw,0px);transform:translateY(-50%);
  width:clamp(280px,32vw,440px);opacity:.12}

/* ---------- 4. ТИПОГРАФИКА ---------- */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;
  color:var(--ink-soft);text-transform:uppercase;margin-bottom:24px}
.mono{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em}
.h1{font-weight:560;font-size:clamp(2.75rem,7vw,6rem);line-height:1.02;letter-spacing:-.01em}
.h2{font-weight:540;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06}
.h3{font-weight:560;font-size:clamp(1.6rem,3vw,2rem);line-height:1.15}
.h4{font-weight:600;font-size:1.375rem;line-height:1.3}
.lead{font-size:clamp(1.15rem,2.2vw,1.375rem);line-height:1.45}
.small{font-size:15px;line-height:1.5}
.note{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.u-soft{color:var(--ink-soft)}
.u-visa{color:var(--visa)}
.u-ochre{color:var(--ochre)}
.u-signal{color:var(--signal)}
.measure{max-width:660px}
.measure-tight{max-width:560px}

/* ---------- 5. КОМПОНЕНТЫ ---------- */

/* лист */
.sheet{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(21,24,26,.06)}
.sheet--pad{padding:40px}
/* карточка-лист с реагирующей верхней линейкой (кейсы) */
.card{background:var(--sheet);border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 var(--rule),0 1px 0 rgba(21,24,26,.06);
  padding:32px;transition:box-shadow var(--dur-hover) ease}
.card:hover{box-shadow:inset 0 2px 0 var(--visa),0 1px 0 rgba(21,24,26,.06)}
.card:hover .card__title{color:var(--visa)}
.card__title{transition:color var(--dur-hover) ease}

/* чипы-маркеры достоверности */
.chip{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;
  border-bottom:1px solid currentColor;white-space:nowrap}
.chip--fact{color:var(--ink)}
.chip--vyvod{color:var(--visa)}
.chip--pred{color:var(--ochre)}
.chip--verify{color:var(--signal)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:18px;
  padding:18px 36px;border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-hover) ease,color var(--dur-hover) ease}
.btn--primary{background:var(--visa);color:#fff}
.btn--primary:hover{background:var(--visa-press);color:#fff}
.btn--link{color:var(--ink);font-size:18px;border-bottom:1px solid var(--ink);
  padding:0 0 2px;border-radius:0;transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.btn--link:hover{color:var(--visa);border-bottom:2px solid var(--visa)}

/* поля формы */
.field{display:flex;flex-direction:column;gap:8px}
.field > label{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  background:var(--sheet);border:1px solid var(--rule);border-radius:2px;
  padding:14px 16px;font-family:var(--serif);font-size:18px;color:var(--ink);width:100%}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--visa);outline:none}

/* счётчик */
.counters-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,56px)}
.counter{font-family:var(--mono);font-weight:500;font-size:clamp(2.5rem,6vw,3.5rem);
  line-height:1;font-variant-numeric:tabular-nums}
.counter small{font-size:24px}
.counter + .mono{color:var(--ink-soft);margin-top:12px}

/* гриф верификации (знак заверения — печать + гриф, без росчерка) */
.grif{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:24px;padding-top:20px}

/* легенда/паспорт — строки моно */
.rows{display:flex;flex-direction:column;font-family:var(--mono);font-weight:500;
  font-size:13px;letter-spacing:.02em;line-height:1.4}
.rows > div{display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--rule);padding:10px 0}
.rows > div:last-child{border-bottom:1px solid var(--rule)}

/* маршрутный лист (процесс) */
.route__line{height:1px;background:var(--ink);transform-origin:left}
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:-5px}
.route__step{display:flex;flex-direction:column;gap:16px}
.route__dot{width:9px;height:9px;background:var(--ink)}
.route__dot--visa{width:11px;height:11px;background:var(--visa);border-radius:50%;margin-top:-1px}

/* ---------- 6. ШАПКА / НАВ ---------- */
.head{display:flex;justify-content:space-between;align-items:baseline;padding-top:32px;flex-wrap:wrap;gap:16px}
.logo{display:flex;align-items:baseline;gap:10px}
.logo b{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--ink)}
.logo span{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.02em;color:var(--ink-soft)}
.nav{display:flex;gap:32px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em}
.nav a{color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.nav a:hover{color:var(--visa);border-bottom:2px solid var(--visa)}
.nav a.is-cta{color:var(--visa);border-bottom:1px solid var(--visa)}

/* ---------- 7. HERO: строки заголовка каждая с новой строки ---------- */
.hero .display--hero span{display:block}
.rail-tag{margin-top:20px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em}

/* ---------- 8. БЛОК «БОЛЬ» (§02): документные строки ---------- */
.pains{display:flex;flex-direction:column}
.pain{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
  border-top:1px solid var(--rule);padding:28px 0}
.pain:last-child{border-bottom:1px solid var(--rule)}

/* Опоры доверия (гл. 04): без нумерации — тонкие линии-разделители, «термин / раскрытие» */
.trust{display:flex;flex-direction:column;width:100%;max-width:940px;margin-inline:auto}
.trust__item{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(24px,4vw,56px);
  align-items:baseline;border-top:1px solid var(--rule);
  padding:clamp(22px,3vh,32px) 0;padding:clamp(22px,3svh,32px) 0}
.trust__item:last-child{border-bottom:1px solid var(--rule)}
.trust__name{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.12}
.trust__text{color:var(--ink-soft);font-size:1rem;line-height:1.62;max-width:54ch}
@media (max-width:640px){
  .trust__item{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .trust__text{font-size:.98rem}
}

/* форма §06: базовая сетка 2 колонки */
.form-grid{grid-template-columns:1fr 1fr}

/* трио-колонки (§07) */
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}

/* ---------- 9. ТАРИФЫ (§06) ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tiers--3{grid-template-columns:repeat(3,1fr)}
.tier{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(21,24,26,.06);padding:28px}
.tier__price{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;
  border-top:1px solid var(--rule);margin-top:20px;padding-top:14px}

/* ---------- 10. ПОДВАЛ (тёмный, теперь часть финального band) ---------- */
.foot{margin-top:0}
.foot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.foot .logo b{color:var(--ink-d)}
.foot .logo span{color:var(--ink-soft-d)}
.foot p{color:var(--ink-soft-d)}
.foot__col{display:flex;flex-direction:column;gap:12px;font-family:var(--mono);
  font-weight:500;font-size:13px;letter-spacing:.02em}
.foot__col > span:first-child{color:var(--ink-soft-d)}
.foot__col a,.foot__col span{color:var(--ink-d)}
.foot__col a{border-bottom:1px solid transparent;align-self:flex-start;padding-bottom:1px;
  transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.foot__col a:hover{color:var(--visa-d);border-bottom:2px solid var(--visa-d)}
.foot__bottom{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  flex-wrap:wrap;border-top:1px solid var(--rule-d);margin-top:56px;padding-top:24px}
.foot__bottom .mono{color:var(--ink-soft-d)}

/* ---------- ШАПКА (sticky) ---------- */
.site-head{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .25s var(--ease-soft),border-color .25s ease,box-shadow .25s ease}
.site-head__inner{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px}
.site-head .logo{flex:0 0 auto}
.site-head .nav{margin-left:auto}
.site-head.is-stuck{background:var(--paper);border-bottom-color:var(--rule);box-shadow:0 1px 0 rgba(21,24,26,.05)}
.btn--sm{padding:12px 22px;font-size:15px}
.site-head__cta{white-space:nowrap;flex:0 0 auto}

/* ---------- Крупный номер главы (манифест-каркас 01…06) ---------- */
.chapter-num{font-family:var(--serif);font-weight:400;font-size:clamp(2.75rem,5vw,4rem);
  line-height:1;letter-spacing:-.01em;color:var(--ink-soft);opacity:.42;
  font-variant-numeric:tabular-nums;margin-bottom:20px;display:block}

/* ---------- Выгода времени (§03), крупным утверждением ---------- */
.benefit{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.25rem);
  line-height:1.22;max-width:900px;margin:0 0 64px}

/* ---------- Гравюра-ассет (ровно 3 точки; плейсхолдер под финальный PNG) ---------- */
.engraving{position:absolute;pointer-events:none;user-select:none;z-index:0}
.engraving img{display:block;width:100%;height:100%;object-fit:contain}
/* пустой плейсхолдер, пока нет PNG: тонкая рамка + моно-подпись */
.engraving--ph{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--rule);border-radius:2px}
.engraving--ph span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;
  color:var(--ink-soft);opacity:.6;max-width:80%;line-height:1.5;text-transform:uppercase}
/* §04 верификация — капитель, тихо сбоку (финальный PNG ставить на ~9% непрозрачности) */
.engraving--capital{top:8%;right:0;width:clamp(120px,16vw,220px);aspect-ratio:3/5;opacity:.7}

/* печать верификации (§04) — знак заверения, статичный оттиск */
.stamp{width:clamp(116px,14vw,156px);height:auto;flex:0 0 auto;pointer-events:none;transform:rotate(-7deg)}
/* Слайд «Верификация»: текст слева, крупная печать по центру правой колонки */
.verify-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,72px);align-items:center;width:100%}
.verify-grid__seal{display:flex;align-items:center;justify-content:center}
.stamp--feature{width:clamp(240px,27vw,380px);transform:rotate(-7deg)}
@media (max-width:760px){
  .verify-grid{grid-template-columns:1fr;gap:clamp(18px,5vw,28px)}
  .verify-grid__seal{order:-1;justify-content:center}
  .stamp--feature{width:clamp(150px,38vw,210px)}
}

/* ---------- Вторичные страницы (Продукты / Метод / О сервисе) ---------- */
.subhero{position:relative;padding:56px 0 0}
.subhero .lead{margin-top:24px}
/* гравюра Точка 3 — только в hero одной вторичной страницы (О сервисе) */
.engraving--hero{top:0;right:0;width:clamp(130px,18vw,260px);aspect-ratio:2/3}
/* активный пункт навигации на вторичной странице */
.nav a.is-active{color:var(--visa);border-bottom-color:var(--visa)}
/* мини-глава вторичной страницы: номер + заголовок + тело */
.entry{border-top:1px solid var(--rule);padding-top:28px;margin-top:0}
.entry + .entry{margin-top:56px}
.entry__num{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--visa)}
.spec{display:flex;flex-direction:column;font-family:var(--mono);font-weight:500;font-size:13px;
  letter-spacing:.02em;line-height:1.4;margin-top:20px}
.spec > div{display:grid;grid-template-columns:150px 1fr;gap:16px;
  border-top:1px solid var(--rule);padding:12px 0}
.spec > div:last-child{border-bottom:1px solid var(--rule)}
.spec dt,.spec .k{color:var(--ink-soft)}
.spec .v{color:var(--ink);font-family:var(--serif);font-size:15px;line-height:1.5}

/* ---------- SPLIT: заголовок слева + контент справа (заполняет ширину) ---------- */
.split{display:grid;grid-template-columns:4fr 7fr;gap:56px;align-items:start}
.split__head{position:sticky;top:96px}
.split__body{min-width:0}

/* ---------- ВКЛАДКА «ПРОДУКТЫ» — манифест: увертюра + 4 полноэкранные главы-формата ---------- */
.prod-hero{padding-block:0}
.prod-hero > .band__inner{min-height:clamp(460px,70vh,660px);min-height:clamp(460px,70svh,660px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding-block:clamp(40px,6vh,80px) clamp(48px,7vh,96px);
  padding-block:clamp(40px,6svh,80px) clamp(48px,7svh,96px)}
.prod-hero__lead{margin-top:clamp(20px,3vh,32px);margin-top:clamp(20px,3svh,32px);max-width:680px}
.prod-hero__meta{margin-top:clamp(32px,5vh,60px);margin-top:clamp(32px,5svh,60px);
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.05em;color:var(--ink-soft)}
.prod-hero__meta b{color:var(--ink);font-weight:600;margin-left:8px}
.prod-hero__meta .u-visa{color:var(--visa);margin-left:8px}

/* один формат = один экран: крупный номер+заголовок+спека и большая гравюра, чередование сторон */
.product{padding-block:0}
.product > .band__inner{min-height:calc(100svh - 72px);display:flex;align-items:center;
  padding-block:clamp(48px,8vh,104px);padding-block:clamp(48px,8svh,104px)}
.product__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px);
  align-items:center;width:100%}
.product__art{position:relative;height:min(60vh,540px);height:min(60svh,540px);
  display:flex;align-items:center;justify-content:center}
.product__art img{max-height:100%;max-width:100%;width:auto;height:auto;
  opacity:.85;filter:invert(1) grayscale(1) brightness(1.06)}          /* по умолчанию светлый рендер: тёмный штрих на тёмной банде / светлый штрих на бумаге */
.product__art--ink img{opacity:.8;filter:grayscale(1) brightness(.98)} /* тёмный штрих на СВЕТЛОЙ банде — без invert */
.product--flip .product__art{order:-1}                                 /* чередование: гравюра слева */
.product__body{max-width:560px}
.product__num{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6vw,5rem);
  line-height:.85;letter-spacing:-.03em;color:var(--visa);opacity:.5;
  font-variant-numeric:tabular-nums;margin-bottom:14px}
.band--dark .product__num{color:var(--visa-d);opacity:.85}
.product__kicker{display:block;font-family:var(--mono);font-weight:500;font-size:13px;
  letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:16px}
.product__title{font-size:clamp(1.9rem,3.4vw,3rem)}
.product__desc{margin-top:18px;max-width:520px;color:var(--ink-soft)}

/* закрывающая банда — общие правила + CTA */
.prod-rules__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:start}
.prod-rules__list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:560px}
.prod-rules__list li{position:relative;padding-left:30px;font-family:var(--serif);
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.45}
.prod-rules__list li::before{content:"§";position:absolute;left:0;top:0;color:var(--visa);font-weight:600}

/* ---------- ГРАВЮРЫ-АКЦЕНТЫ вторичных страниц (метод / о-сервисе) ---------- */
/* тонкий атмосферный акцент сбоку (класс идёт вместе с базовым .engrave) — фоном, текст остаётся широким */
.engrave--faint{top:50%;transform:translateY(-50%);height:min(94%,760px);max-width:54%;width:auto;
  opacity:.10;display:flex;align-items:center}
.engrave--faint.is-right{right:clamp(-24px,-1.5vw,40px);justify-content:flex-end}
.engrave--faint.is-left{left:clamp(-24px,-1.5vw,40px);justify-content:flex-start}
.engrave--faint img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1)}
.engrave--faint.inv img{filter:invert(1) grayscale(1)}    /* полярность по фону */
.band--dark .engrave--faint{opacity:.13}
/* крупная гравюра на hero вторичной страницы (маска слева, как Фемида на главной) */
.prod-hero__engrave{position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:min(44%,560px);height:min(84%,660px);opacity:.5;
  display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.prod-hero__engrave img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1)}
.prod-hero__engrave.inv img{filter:invert(1) grayscale(1)}
/* капители на hero «Продуктов» — крупнее (как на главной) и с выносом вбок за правый край */
/* капители «на полу»: якорь к низу, высота = высота hero → колонны стоят во весь экран,
   капители целиком вверху, ничего не летает и не обрублено в воздухе */
.prod-hero__engrave--capitals{top:auto;bottom:0;transform:none;align-items:flex-end;
  width:min(82%,1000px);height:min(100%,960px);opacity:.92;right:clamp(-170px,-9vw,-56px)}
/* капители читаемее: темнее и контрастнее самого штриха (не трогая hero др. вкладок) */
.prod-hero__engrave--capitals.inv img{filter:invert(1) grayscale(1) contrast(1.55) brightness(.62)}
/* hero ВСЕХ вторичных вкладок (продукты/метод/о-сервисе) — во весь экран и контент по центру:
   убираем нижнюю пустоту и «наезд» следующей секции на главный экран (десктоп) */
@media (min-width:901px){
  .prod-hero > .band__inner{min-height:calc(100svh - 72px);justify-content:center}
}
@media (max-width:900px){ .prod-hero__engrave,.engrave--faint{display:none} }

@media (max-width:900px){
  .product__grid,.prod-rules__grid{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .product--flip .product__art{order:0}          /* на мобилке гравюра всегда над текстом */
  .product__art{height:min(38vh,300px);height:min(38svh,300px)}
  .prod-hero > .band__inner,.product > .band__inner{min-height:auto}
  .product__body{max-width:none}
}

/* ---------- 11. REVEAL-СИСТЕМА (страховка: скрыто только в .anim) ---------- */
html.anim [data-reveal]{opacity:0;transform:translateY(14px)}
html.anim [data-hero]{opacity:0}          /* hero-элементы ведёт таймлайн в app.js */
html.anim [data-grow]{transform:scaleX(0);transform-origin:left}
html.anim [data-scene-item]{opacity:0;transform:translateY(40px)}  /* раскрывает сцена в app.js */
html.anim [data-beat]{opacity:0;transform:translateY(26px)}        /* биты story-сцены ведёт app.js */

/* ---------- 12. АДАПТИВ ---------- */
@media (max-width:1023px){
  :root{--sec:96px;--pad:32px}
  .col-8,.col-7,.rail,.rail--wide{grid-column:1 / -1}
  /* служебное поле → строка над контентом, линейка сверху вместо слева */
  .rail{order:-1;border-left:none;border-top:1px solid var(--rule);
    padding-left:0;padding-top:16px;margin-bottom:8px}
  .route{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr}
  .compare__sheet--muted{margin-top:0}
  .hero__meta{align-self:start}
  .split{grid-template-columns:1fr;gap:28px}
  .split__head{position:static}
  .foot__grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot__grid>*{grid-column:auto !important}
  .tabula-motif{grid-template-columns:1fr;gap:44px}
  /* пин отключаем на планшете/мобиле — секции в обычный поток */
  .scene-pin{padding-block:var(--sec)}
  .scene-pin > .band__inner{min-height:0;display:block;padding-block:0}
  .hero__statement{max-width:100%}
  .engrave--themis{opacity:.34}
  .engrave--scales{opacity:.3}
  .engrave--column{opacity:.1}
  .engrave--capitalm,.engrave--gears,.engrave--chess{display:none}
  .final-quill{width:min(520px,86%)}
  /* кейсы: гравюра — узкая полоса сверху, текст под ней */
  .case-row{grid-template-columns:1fr;gap:20px;padding:clamp(28px,5vw,44px) 0}
  .case-row__art{height:clamp(120px,22vw,180px);justify-content:flex-start}
  .case-row:nth-child(even) .case-row__art{order:0}
}
@media (max-width:640px){
  :root{--sec:72px;--pad:24px}
  body{font-size:17px}
  .nav{gap:18px;width:100%;flex-wrap:wrap}
  .site-head .nav{display:none}
  .site-head__inner{gap:16px}
  .site-head__cta{margin-left:auto}
  .hero{padding-top:40px}
  .chapter-num{font-size:clamp(2.5rem,12vw,3.25rem);margin-bottom:14px}
  .chapter__num{font-size:clamp(2.5rem,13vw,3.25rem);margin-bottom:12px}
  .engraving--capital{display:none}
  .engrave--themis{display:none}
  .final-quill{width:min(420px,92%)}
  .engrave--scales{opacity:.1;height:min(46%,340px)}
  .case-row__art{display:none}
  .case-row__title{font-size:clamp(1.4rem,7vw,1.8rem)}
  .engrave--stela-bg{display:none}
  .tabula-img{max-width:420px;margin:0 auto}
  .route{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .counters-row{grid-template-columns:1fr;gap:32px}
  .foot__grid{grid-template-columns:1fr}
  .sheet--pad{padding:28px}
  .card{padding:24px}
  .btn{width:100%}
  .site-head__cta,.btn--sm{width:auto}


  /* форма и грид формы в один столбец */
  .form-grid{grid-template-columns:1fr!important}
  .form-grid .col-span-2{grid-column:auto!important}
  /* спецификации продукта: метка над значением */
  .spec > div{grid-template-columns:1fr;gap:4px}
  .engraving--hero{display:none}
}

/* ---------- 13. ДОСТУПНОСТЬ: reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.anim [data-reveal]{opacity:1;transform:none}
  html.anim [data-hero]{opacity:1;transform:none}
  html.anim [data-grow]{transform:none}
  html.anim [data-scene-item]{opacity:1;transform:none}
  html.anim [data-beat]{opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================================
   14. МОБИЛЬНЫЙ РЕДИЗАЙН (≤640px) — манифест-паттерн на телефоне
   Гравюры переезжают в поток (.engrave-m), десктопные абсолютные прячутся;
   шапка получает бургер → полноэкранное меню; hero центрируется; отступы
   уплотняются. Скролл-анимации (reveal/счётчики/линия) НЕ трогаем — работают.
   Идёт ПОСЛЕ блока ≤640 выше → перебивает конфликтующие старые правила.
   ============================================================================ */
@media (max-width:640px){
  /* --- отступы плотнее, но с воздухом --- */
  :root{--sec:56px;--pad:22px;--gap:20px}
  .band{padding-block:clamp(52px,13vw,80px)}
  .band--tight{padding-block:clamp(38px,9vw,60px)}
  .scene-pin{padding-block:clamp(52px,13vw,80px)}
  .chapter{margin-bottom:clamp(20px,5vw,32px)}

  /* --- десктопные абсолютные гравюры прячем: их роль берут .engrave-m --- */
  .engrave--themis,.engrave--chess,
  .engrave--gears,.engrave--scales,.engrave--capitalm{display:none!important}
  /* колонна §01 — исключение: в запиненной story-сцене она ФОН за текстом (как на
     десктопе); в fallback-потоке (без пина) её роль играет поточная .engrave-m--column */
  .engrave--column{display:none}
  .story--pinned .engrave--column{display:flex;opacity:.14;height:min(88%,520px)}
  .story--pinned .engrave-m--column{display:none}

  /* --- гравюра-в-потоке: средняя, по центру, между заголовком и телом ---
     img сохраняет пропорции: ограничен И по ширине, И по высоте (вытянутые
     мотивы — chess/column — не разрастаются на весь экран). */
  .engrave-m{display:block;text-align:center;margin:clamp(18px,5vw,30px) auto clamp(22px,6vw,34px)}
  .engrave-m img{display:inline-block;width:auto;height:auto;
    max-width:min(68%,240px);max-height:min(380px,42vh);max-height:min(380px,42svh)}
  /* ПОЛЯРНОСТЬ — band-aware: штрих обязан контрастировать фон банды.
     На бумаге штрих тёмный, на тёмной банде — светлый. Инвертируем в зависимости
     от нативного цвета ассета (светлые: themis/column/chess/gears; тёмные: scales/capital). */
  .band--paper .engrave-m--themis img,.band--paper .engrave-m--column img,
  .band--paper .engrave-m--chess img,.band--paper .engrave-m--gears img{
    filter:invert(1) grayscale(1) contrast(1.05)}          /* светлый ассет → тёмный на бумаге */
  .band--dark .engrave-m--themis img,.band--dark .engrave-m--column img,
  .band--dark .engrave-m--chess img,.band--dark .engrave-m--gears img{
    filter:grayscale(1) brightness(1.06)}                  /* светлый ассет → светлый на тёмной */
  .band--paper .engrave-m--scales img,.band--paper .engrave-m--capital img{
    filter:grayscale(1) contrast(1.04)}                    /* тёмный ассет → тёмный на бумаге */
  .band--dark .engrave-m--scales img,.band--dark .engrave-m--capital img{
    filter:invert(1) grayscale(1) brightness(1.1)}         /* тёмный ассет → светлый на тёмной */
  /* размеры по ассету (вытянутые мотивы кап по высоте, широкие — по ширине) */
  .engrave-m--themis img{max-width:min(72%,262px)}
  .engrave-m--column img{max-height:min(340px,38vh);max-height:min(340px,38svh)}
  .engrave-m--chess  img{max-height:min(360px,40vh);max-height:min(360px,40svh)}
  .engrave-m--gears  img{max-width:min(72%,252px)}
  .engrave-m--scales img{max-width:min(74%,272px)}
  .engrave-m--capital img{max-height:min(340px,38vh);max-height:min(340px,38svh)}
  /* «печать» на странице заявки — компактнее, чтобы не топить форму вниз */
  .engrave-m--seal{margin-block:clamp(14px,3vw,22px)}
  .engrave-m--seal img{max-width:150px;max-height:170px}

  /* --- HERO: контент прижат к верху (без пустоты сверху), Фемида в потоке,
     scroll-cue отжат в самый низ через margin-top:auto --- */
  .hero{padding-top:0}
  .hero > .band__inner{justify-content:flex-start;
    padding-block:clamp(14px,3vh,32px) clamp(18px,4vh,36px);
    padding-block:clamp(14px,3svh,32px) clamp(18px,4svh,36px);
    min-height:calc(100svh - 56px)}
  .hero__statement{text-align:center;max-width:100%;margin-inline:auto}
  .hero__statement .lead{margin-inline:auto;max-width:52ch}
  .hero .cta-row{justify-content:center}
  .hero .engrave-m--themis{margin-top:clamp(20px,4vh,34px);margin-top:clamp(20px,4svh,34px)}
  .hero .scroll-cue{margin-top:auto;padding-top:clamp(20px,4vh,36px);padding-top:clamp(20px,4svh,36px)}

  /* --- кейсы: вернуть эмблему-гравюру, компактно над текстом дела --- */
  .case-row__art{display:flex;height:auto;justify-content:center;margin-bottom:4px}
  .case-row__art img{max-height:118px;max-width:60%}
  .case-row:nth-child(1) .case-row__art img{max-width:56%}

  /* --- ШАПКА: бургер вместо текстовой CTA --- */
  .site-head{z-index:100}                 /* поверх оверлея (z:90): X и логотип кликаются */
  .site-head__cta{display:none}
  .site-head__inner{gap:16px}
  /* при открытом меню шапка плавает поверх тёмного оверлея — логотип светлый, фон прозрачный */
  body.menu-open .site-head{background:transparent;border-color:transparent;box-shadow:none}
  body.menu-open .logo b{color:var(--ink-d)}
  body.menu-open .logo span{color:var(--ink-soft-d)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;padding:10px;border:0;background:none;cursor:pointer}
  .nav-toggle__box{position:relative;display:block;width:22px;height:12px}
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{position:absolute;left:0;width:22px;height:1.5px;
    background:var(--ink);transition:transform var(--dur-hover) var(--ease-soft),opacity var(--dur-hover) ease}
  .nav-toggle__bar{top:50%;transform:translateY(-50%)}
  .nav-toggle__bar::before{content:"";top:-6px}
  .nav-toggle__bar::after{content:"";top:6px}
  /* открыто → крест; бары светлые поверх тёмного оверлея */
  body.menu-open .nav-toggle__bar{background:transparent}
  body.menu-open .nav-toggle__bar::before{top:0;transform:rotate(45deg);background:var(--ink-d)}
  body.menu-open .nav-toggle__bar::after{top:0;transform:rotate(-45deg);background:var(--ink-d)}
  body.menu-open{overflow:hidden}

  /* --- полноэкранное меню-оверлей --- */
  .mobmenu{display:flex;flex-direction:column;justify-content:center;
    gap:clamp(20px,4vh,36px);gap:clamp(20px,4svh,36px);position:fixed;inset:0;z-index:90;
    padding:clamp(76px,13vh,120px) var(--pad) clamp(40px,8vh,72px);
    padding:clamp(76px,13svh,120px) var(--pad) clamp(40px,8svh,72px);
    background:var(--paper-d);color:var(--ink-d);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft),visibility .28s}
  .mobmenu.is-open{opacity:1;visibility:visible;transform:none}
  .mobmenu__nav{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);gap:clamp(12px,2.2svh,22px)}
  .mobmenu__nav a{font-family:var(--serif);font-weight:560;line-height:1;
    font-size:clamp(2rem,9vw,2.75rem);letter-spacing:-.02em;color:var(--ink-d);
    border-bottom:1px solid transparent;align-self:flex-start;padding-bottom:2px}
  .mobmenu__nav a.is-active{color:var(--visa-d);border-bottom-color:var(--visa-d)}
  .mobmenu__cta{width:100%;margin-top:8px;background:var(--visa-d);color:#101315}
  .mobmenu__cta:hover{background:#A9B6D2;color:#101315}
  .mobmenu__meta{color:var(--ink-soft-d);letter-spacing:.14em;text-transform:uppercase}

  /* --- ЦЕНТРИРОВАНИЕ прозы (как у манифеста на мобилке): заголовки, лиды,
     счётчики, финал-CTA — по центру. Структурные списки (боли, таймлайн) — отдельно ниже. */
  .chapter{text-align:center;margin-inline:auto}
  .chapter__num,.chapter__lead{margin-inline:auto}
  .chapter__lead{text-align:center;max-width:100%}
  .counters-row{text-align:center}
  .final-cta__inner{text-align:center;margin-inline:auto}
  .final-cta__lead{margin-inline:auto;text-align:center}
  .final-cta__actions{justify-content:center;align-items:center}

  /* --- §02 БОЛИ по центру: номер над текстом, всё центрировано --- */
  .pain{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;
    padding-block:clamp(22px,5vw,32px)}
  .pain__body{max-width:34ch}

  /* --- §01 STORY: биты разнесены по вертикали → каждый проявляется отдельным
     скролл-моментом (reveal per beat), а не пачкой. Центрировано. --- */
  .story__stage{display:flex;flex-direction:column;align-items:center;
    gap:clamp(44px,12vh,120px);gap:clamp(44px,12svh,120px);max-width:100%;
    margin-top:clamp(20px,4vh,36px);margin-top:clamp(20px,4svh,36px)}
  .story__beat{max-width:20ch;margin:0}
  /* пин §01 активен (ставит app.js): сцена-оверлей вместо столбика, типографика под узкий экран */
  .story--pinned .story__stage{gap:0;margin-top:0;
    min-height:clamp(200px,34vh,320px);min-height:clamp(200px,34svh,320px)}
  .story--pinned .story__beat{max-width:24ch;padding-inline:4px;font-size:clamp(1.3rem,6vw,1.6rem)}

  /* --- §03 МАРШРУТ → вертикальный таймлайн: рельс идёт ВНИЗ 1→4, шаги слева,
     проявляются по очереди; растущая ink-линия ведётся JS (.route__line--v, scaleY) --- */
  #how .scene__stage{position:relative}
  .route{grid-template-columns:1fr;gap:clamp(28px,7vw,44px);position:relative;
    padding-left:30px;margin-top:10px;text-align:left}
  .route::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:2px;
    background:var(--rule)}                                  /* статичный бледный рельс на всю высоту шагов */
  .route__line{position:static;height:auto;background:none}  /* сбрасываем горизонтальную 1px-линию */
  .route__line--v{position:absolute;left:3px;top:0;width:2px;height:0;
    background:var(--ink);z-index:1;transform-origin:top}    /* растущая линия; top/height ставит JS */
  .route__step{position:relative;gap:8px;text-align:left}
  .route__dot{position:absolute;left:-30px;top:6px;z-index:2}
  .route__dot--visa{left:-31px;top:5px}
  .route__step p{max-width:100%!important}                   /* снять инлайновый max-width:240px */
  .counters-row > div{margin-inline:auto}

  /* ========== ВТОРИЧНЫЕ СТРАНИЦЫ (продукты/метод/о-сервисе/заявка) ========== */
  /* УВЕРТЮРА вторичной страницы — по центру, без форсированной высоты --- */
  .prod-hero{padding-top:0}
  .prod-hero > .band__inner{text-align:center;min-height:auto;
    padding-block:clamp(20px,5vh,40px) clamp(22px,5vh,40px);
    padding-block:clamp(20px,5svh,40px) clamp(22px,5svh,40px)}
  .prod-hero__lead{margin-inline:auto}
  .prod-hero__meta{justify-content:center}

  /* ФОРМАТ-ГЛАВЫ (продукты/метод§03/о-сервисе§01): тело по центру, spec — слева.
     Гравюра (product__art) уже в потоке над текстом (≤900) — центрируем и уменьшаем. */
  .product > .band__inner{min-height:auto;padding-block:clamp(44px,10vw,72px)}
  .product__body{text-align:center;max-width:none}
  .product__desc,.product__body .lead{margin-inline:auto}
  .product__body .spec{text-align:left}
  /* эмблема НАД текстом формата — включая flip (иначе .product--flip перебивает специфичностью) */
  .product__art,.product--flip .product__art{order:-1;height:auto;margin-bottom:clamp(10px,4vw,22px)}
  .product__art img{max-height:min(280px,38vh);max-height:min(280px,38svh);max-width:70%}

  /* закрывающие CTA-банды метод/о-сервисе (простое заявление) — по центру */
  .band--tight .band__inner > [data-reveal]:only-child{text-align:center;margin-inline:auto}
  .band--tight .band__inner > [data-reveal]:only-child .lead{margin-inline:auto}

  /* СТРАНИЦА ЗАЯВКИ: шапку-заявление центрируем, форму (высокая) — оставляем как есть */
  .request__head{text-align:center}
  .request__lead{margin-inline:auto}
}

/* ---------- Тарифы (produkty.html) ---------- */
.tariffs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(32px,4vw,52px)}
.tariff{padding:26px 24px;display:flex;flex-direction:column}
.tariff__name{font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.tariff__list{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.tariff__list li{position:relative;padding-left:18px}
.tariff__list li::before{content:"—";position:absolute;left:0;top:0;color:var(--visa)}
.tariff__prices{margin-top:auto;border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.tariff__price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;letter-spacing:.04em}
.tariff__price b{font-weight:500;color:var(--visa);white-space:nowrap}
@media (max-width:1023px){ .tariffs__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tariffs__grid{grid-template-columns:1fr;gap:14px} .tariff{padding:20px 18px} }

/* Лист-документ, который остаётся «бумагой» даже на тёмной банде (глава 04):
   печать и маркеры читаются как на реальном документе */
.sheet--light{
  background:#FFFFFF;border-color:#E1E4E0;color:#15181A;
  --ink:#15181A;--ink-soft:#4A4F52;--rule:#E1E4E0;
  --visa:#26324D;--visa-press:#1B2436;--ochre:#7A5D00;--signal:#A6321F;
}

/* ═══════ Юридический документ (политика / оферта / согласие) ═══════ */
.legal{max-width:760px}
.legal__meta{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 6px}
.legal__rev{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink);margin:0 0 4px}
.legal h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.22;letter-spacing:-.01em;color:var(--ink);margin:38px 0 14px}
.legal h2:first-of-type{margin-top:8px}
.legal h3{font-family:var(--serif);font-weight:600;font-size:1.08rem;color:var(--ink);margin:22px 0 10px}
.legal p{font-size:15px;line-height:1.66;color:var(--ink-soft);margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-bottom:7px}
.legal a{color:var(--visa);border-bottom:1px solid currentColor}
.legal strong{color:var(--ink);font-weight:600}
.legal hr{border:none;border-top:1px solid var(--rule);margin:26px 0}

/* ═══════ Cookie-уведомление ═══════ */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:720px;margin:0 auto;padding:15px 20px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 10px 34px rgba(21,24,26,.16);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.cookie-bar.is-in{opacity:1;transform:none}
.cookie-bar__text{flex:1 1 300px;font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}
.cookie-bar__text a{color:var(--visa);border-bottom:1px solid currentColor}
.cookie-bar__btn{flex:0 0 auto;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;
  padding:11px 24px;background:var(--visa);color:#F2F3F1;border:none;border-radius:2px;cursor:pointer;
  transition:background .2s ease}
.cookie-bar__btn:hover{background:var(--visa-press)}
@media(max-width:560px){
  .cookie-bar{flex-direction:column;align-items:stretch;text-align:left;gap:12px;padding:14px 16px}
  /* в колонке flex-basis:300px растягивал ТЕКСТ на 300px ВЫСОТЫ (пустая плашка
     на полэкрана) — в вертикальной раскладке базис сбрасываем */
  .cookie-bar__text{flex:0 0 auto}
  .cookie-bar__btn{width:100%}
}