/* ============================================================================
   SHARK DEV — каркас страницы: сброс, сетка, шапка, оболочка секций, футер.
   Наполнение секций живёт в отдельных файлах следующих тасков; здесь только
   то, что общее для всей страницы.

   Ни одного цвета в этом файле нет — только переменные из tokens.css.
   Брейкпоинты: 480 / 768 / 1200. Базовая раскладка — мобильная.
   ============================================================================ */

/* --- 1. Сброс ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

body,
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

/* --- 2. База ------------------------------------------------------------- */

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-ink);
  /* второй фирменный тёмный подмешан двумя мягкими пятнами — палитра стр. 11 */
  background-image:
    radial-gradient(120% 70% at 12% -10%, var(--c-deep) 0%, transparent 62%),
    radial-gradient(90% 60% at 96% 8%, var(--c-surface) 0%, transparent 58%);
  background-attachment: fixed;
  overflow-x: hidden; /* страховка от горизонтального скролла на всех брейкпоинтах */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

/* Четвёртый уровень появился в блоке 06: карточки внутри подраздела «что
   фиксируется письменно» вложены в h3 и обязаны быть h4, иначе заголовки
   прыгают через уровень. Размер у него — как у текста: это подпись карточки,
   а не ещё один заголовок раздела. */
h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

p { max-width: 68ch; }

:focus-visible {
  outline: 2px solid var(--c-ice);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

::selection { background: var(--c-accent-soft); color: var(--c-text); }

/* --- 3. Утилиты ---------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: calc(-1 * var(--header-h) - var(--space-xl));
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: var(--c-ice);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { top: var(--space-2xs); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Видимая заглушка: место, куда владелец вписывает свой факт. */
.placeholder {
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-s);
  color: var(--c-text-faint);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* --- 4. Логотип ---------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { display: block; width: auto; }
.logo--header .logo__img { height: 1.75rem; }
.logo--footer .logo__img { height: 4.75rem; }

/* Печатная версия логотипа не грузится на экране. Файл подставляется фоном ниже,
   внутри @media print: пока правило не применилось, браузер за ним не ходит,
   а <img src> сходил бы всегда — 16 КБ ради страницы, которую никто не печатает. */
.logo__img--print { display: none; }

/* Защитное поле по гайдлайну (стр. 8): свободная зона со всех сторон
   не меньше ширины знака. У шапки высота знака = высота логотипа. */
.logo { padding: calc(var(--logo-clear-space) * 0.35); margin: calc(var(--logo-clear-space) * -0.35); }

/* --- 5. Шапка ------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-ink) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

/* Порядок в DOM продиктован CSS-бургером: чекбокс должен идти перед .burger
   и перед .nav, иначе селекторы `+` и `~` не сработают. Визуальный порядок
   восстанавливаем через order. */
.header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--header-h);
}

.header__bar > .logo { order: 0; margin-right: auto; flex: 0 0 auto; }
.header__bar > .nav { order: 1; }
.header__bar > .header__phone { order: 2; }
.header__bar > .header__cta { order: 3; }
.header__bar > .nav-toggle,
.header__bar > .burger { order: 4; }

/* Ссылки-контакты и кнопка */
.header__phone {
  display: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-dim);
  text-decoration: none;
  white-space: nowrap;
}
.header__phone:hover { color: var(--c-text); }

/* Почты в строке шапки нет, и это замер, а не забывчивость: контейнер шапки
   упирается в --container (1200px), а логотип, семь якорей, телефон и кнопка
   занимают 1250px из них. Ссылка на почту выдавливает кнопку «Обсудить задачу»
   и рождает горизонтальный скролл. Поэтому почта живёт в панели меню (та же
   шапка, мобильная раскладка), в блоке 13 и в футере — ни на одной ширине
   она не пропадает. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* Заливка главной кнопки — не --grad-accent: светлый конец градиента (--c-cyan) под
   светлым текстом даёт 1.95:1 при пороге 4.5. Замерено таском 05, исправлено оркестратором.
   Сплошной --c-cyan под --c-ink даёт 8.79:1 и делает кнопку самым ярким пятном страницы. */
.btn--primary { background-image: none; background-color: var(--c-cyan); color: var(--c-ink); }
.btn--primary:hover { transform: translateY(-1px); background-color: var(--c-ice); }
.btn--ghost { border-color: var(--c-line-strong); color: var(--c-text); background: transparent; }
.btn--ghost:hover { border-color: var(--c-ice); }



/* --- 6. Навигация: бургер на чистом CSS (input:checked), без JS ----------- */

/* Чекбокс остаётся в потоке фокуса, но не ловит клики: переключает .burger. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.burger {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--c-text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle:focus-visible + .burger { outline: 2px solid var(--c-ice); outline-offset: 3px; }
.nav-toggle:checked + .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked + .burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked + .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Подложка: тап мимо панели закрывает меню. Тоже без JS — это второй <label>
   на тот же чекбокс. Закрытие панели по клику на пункт меню требует одной
   строки скрипта и остаётся за JS-слоем (site/assets/js/). */
.nav__backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: color-mix(in srgb, var(--c-ink) 62%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.nav-toggle:checked ~ .nav__backdrop { opacity: 1; visibility: visible; }

.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-m) var(--gutter) var(--space-l);
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.nav-toggle:checked ~ .nav { opacity: 1; visibility: visible; transform: none; }

.nav__list { display: grid; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }

.nav__link {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-s);
  color: var(--c-text-dim);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--c-text); background: var(--c-accent-soft); }

.nav__num {
  display: inline-block;
  min-width: 2ch;
  margin-right: var(--space-2xs);
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}

.nav__cta { margin-top: var(--space-m); display: grid; gap: var(--space-2xs); }

/* Подсветка активного пункта. Чистый CSS: пункт, к чьей секции ведёт якорь,
   подсвечивается через :has(:target) — работает при переходе по навигации.
   Скролл-спай по положению страницы — задача JS-слоя (site/assets/js/), он
   вешает атрибут aria-current="true" на тот же .nav__link. */
.nav__link[aria-current="true"],
.nav__link[aria-current="page"] { color: var(--c-ice); background: var(--c-accent-soft); }

/* Список — ровно девять живых секций релиза. Снятые блоки (proof, cases,
   pricing, guarantees, testimonials) убраны отсюда вместе с их разметкой:
   селектор на несуществующий якорь молча ничего не подсвечивает, но врёт
   следующему читателю о составе страницы. */
body:has(#hero:target)         .nav__link[href="#hero"],
body:has(#problem:target)      .nav__link[href="#problem"],
body:has(#services:target)     .nav__link[href="#services"],
body:has(#process:target)      .nav__link[href="#process"],
body:has(#pilot:target)        .nav__link[href="#pilot"],
body:has(#security:target)     .nav__link[href="#security"],
body:has(#faq:target)          .nav__link[href="#faq"],
body:has(#contact:target)      .nav__link[href="#contact"],
body:has(#legal:target)        .nav__link[href="#legal"] {
  color: var(--c-ice);
  background: var(--c-accent-soft);
}

/* --- 7. Секции ----------------------------------------------------------- */

.main { display: block; }

.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-h) + var(--space-s));
  border-top: 1px solid var(--c-line);
}
.section:first-child { border-top: 0; }

.section__head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-m); }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.section__body { display: grid; gap: var(--space-s); }

/* --- 7.1. Первый экран ---------------------------------------------------

   Три слоя: фон (canvas поверх статичной картинки), текстовая колонка и
   DOM-мокап. Все параметры движения объявлены переменными прямо на секции —
   JS их только читает, а медиа-запросы переопределяют. Ни одной константы
   анимации в скриптах нет.

   Высота — в svh с потолком в px: фиксированная высота в пикселях разваливается
   на первом же переводе, потому что русский текст длиннее английского.
   ------------------------------------------------------------------------- */

.section--hero {
  /* геометрия */
  --hero-min-h: min(92svh, 900px);

  /* заголовок: пофразовый blur-in */
  --hero-anim-step: 80ms;     /* шаг каскада между фразами */
  --hero-anim-dur: 900ms;     /* длительность появления одной фразы */
  --hero-anim-blur: 10px;
  --hero-anim-shift: 20%;

  /* фон: mesh-градиент на canvas 2D */
  --hero-canvas-buffer-w: 160;   /* бэкбуфер, растягивается через drawImage */
  --hero-canvas-buffer-h: 90;
  --hero-canvas-blobs: 4;        /* сколько радиальных градиентов рисуем */
  --hero-canvas-speed: 0.055;    /* угловая скорость центров, рад/с */
  --hero-canvas-orbit: 0.17;     /* радиус орбиты центра, доля габарита знака */
  --hero-canvas-blur: 40px;      /* добивка мягкости фильтром */
  --hero-canvas-saturate: 1.25;
  --hero-canvas-opacity: 0.92;
  --hero-canvas-fade: 120ms;     /* гейт готовности: кросс-фейд поверх картинки */

  /* силуэт знака как форма свечения (A01). Пропорции 140.125 : 133.861 скрипт
     держит сам: ширина в буфере считается так, чтобы после растяжения на экране
     знак не сплющило. Здесь задаются только размер и положение. */
  --hero-mark-scale: 0.8;        /* высота знака в долях высоты бэкбуфера */
  --hero-mark-x: 0.7;            /* центр знака, доля ширины кадра */
  --hero-mark-y: 0.46;

  /* мокап: шаг сценария */
  --hero-step-work: 620ms;       /* сколько шаг держится в состоянии «в работе» */
  --hero-step-delay: 1000ms;     /* полный шаг сценария, от строки до строки */
  --hero-step-dur: 460ms;        /* появление одной строки */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--hero-min-h);
  display: grid;
  align-content: center;
  padding-block: calc(var(--section-y) + var(--space-m));
}

/* --- Слой 1: фон ---------------------------------------------------------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Статичный фолбэк: тот же размер, тот же контейнер. Виден всегда, пока canvas
   не отрисовал первый кадр, и остаётся навсегда, если контекст не поднялся. */
.hero__bg-static,
.hero__bg-static img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__bg-static img { object-fit: cover; object-position: 70% 50%; opacity: 0.55; }

/* Canvas вылезает за границы контейнера: иначе blur() съедает края и по периметру
   появляется светлая кайма. Обрезает .hero__bg своим overflow: hidden. */
.hero__bg-canvas {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  opacity: 0;
  filter: blur(var(--hero-canvas-blur)) saturate(var(--hero-canvas-saturate));
}

/* Затемнение под текстом: движение не должно попадать под буквы, а контраст
   мелкого текста обязан оставаться выше 4.5:1 даже над самым светлым пятном
   сцены. Нижняя ступень начинается с 38 %: ровно там идут подпись мокапа и
   заглушка, и без неё замер давал 2.9:1. */
.hero__bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--c-ink) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 46%, transparent 82%),
    linear-gradient(to bottom, transparent 38%, color-mix(in srgb, var(--c-ink) 78%, transparent) 82%, var(--c-ink) 100%);
}

/* --- Слой 2: текст -------------------------------------------------------- */

.hero__inner { display: grid; gap: var(--space-xl); align-items: center; }

/* Мышь проходит сквозь текст к фону, но ссылки и кнопки кликаются,
   а заглушку владелец может выделить и скопировать. */
.hero__copy { pointer-events: none; }
.hero__copy a,
.hero__copy .btn,
.hero__copy .placeholder { pointer-events: auto; }

/* Размер заголовка вынесен в переменную: в одноколоночном герое он равен
   типографическому токену, в двухколоночном — уменьшается, потому что колонка
   вдвое уже, а фраза «Цифровые решения» должна умещаться в одну строку. */
.hero__title {
  font-size: var(--hero-title-size, var(--fs-hero));
  max-width: 20ch;
  margin-top: var(--space-s);
}
.hero__set { display: block; }
.hero__set--wide { display: none; }

/* Фраза — собственная строка заголовка: перенос задан разметкой, а не браузером.
   display:block вместо inline-block — filter и transform на нём работают так же,
   а слишком длинная фраза переносится внутри себя вместо выхода за колонку. */
.hero__phrase { display: block; }

.hero__lead { margin-top: var(--space-m); font-size: var(--fs-lead); color: var(--c-text); }
.hero__support { margin-top: var(--space-xs); color: var(--c-text-dim); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-l); }
.hero__note { margin-top: var(--space-m); }

/* --- Слой 3: мокап работы агента ------------------------------------------ */

.hero__demo { pointer-events: auto; }

.mockup { margin: 0; display: grid; gap: var(--space-xs); }

.mockup__frame {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--c-deep) 62%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px var(--c-shadow);
  overflow: hidden;
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-micro);
}
.mockup__dots { display: inline-flex; gap: 5px; }
.mockup__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); }
.mockup__bar-title {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.mockup__status {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  color: var(--c-text-faint);
  white-space: nowrap;
}
/* Без скрипта и в финале сценария виден «готово», во время прогона — «в работе». */
.mockup__status-run { display: none; }
[data-hero-anim="on"] .mockup:not(.is-complete) .mockup__status-run { display: inline; }
[data-hero-anim="on"] .mockup:not(.is-complete) .mockup__status-done { display: none; }
.mockup.is-complete .mockup__status { border-color: var(--c-accent); color: var(--c-accent); }

/* Рельс слева: тусклая направляющая и заливка по числу пройденных шагов.
   Селектор с тегом — иначе сброс `ol[class] { padding: 0 }` из раздела 1
   перебивает отступ под маркеры по специфичности. */
ol.mockup__steps {
  --hero-rail: 1;
  position: relative;
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-s) + 2.4rem);
  list-style: none;
  counter-reset: mockup;
}
.mockup__steps::before,
.mockup__steps::after {
  content: "";
  position: absolute;
  left: calc(var(--space-s) + 0.7rem);
  top: calc(var(--space-s) + 0.7rem);
  bottom: calc(var(--space-s) + 0.7rem);
  width: 2px;
  border-radius: 2px;
}
.mockup__steps::before { background: var(--c-line); }
.mockup__steps::after {
  background-image: var(--grad-accent);
  transform: scaleY(var(--hero-rail));
  transform-origin: top;
}

.mockup__step {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  counter-increment: mockup;
}

.mockup__marker {
  position: absolute;
  left: -2.4rem;
  top: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: var(--c-ink);
  color: var(--c-text-faint);
  font-size: var(--fs-micro);
  line-height: 1.3rem;
  text-align: center;
}
.mockup__marker::before { content: counter(mockup); }

.mockup__step.is-active .mockup__marker { border-color: var(--c-accent); color: var(--c-accent); }
.mockup__step.is-done .mockup__marker {
  border-color: transparent;
  background-image: var(--grad-accent);
  color: var(--c-paper);
}
.mockup__step.is-done .mockup__marker::before { content: "\2713"; }

.mockup__label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--c-text);
}
.mockup__detail {
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-text-dim);
}

.mockup__result {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border-top: 1px solid var(--c-line);
  background: var(--c-accent-soft);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-ice);
}
.mockup__result::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-accent);
  flex: 0 0 auto;
}

/* Мелкий текст на живом фоне идёт на ступень ярче, чем такой же текст на глухой
   подложке: --c-text-faint здесь не проходит по контрасту, замер это показал. */
.mockup__caption { font-size: var(--fs-micro); color: var(--c-text-dim); max-width: 46ch; }
.hero__note .placeholder { color: var(--c-text-dim); }

/* --- 7.2. Блоки ниже первого экрана ---------------------------------------

   Тринадцать секций после героя собраны из десятка повторяющихся деталей, а не
   из тринадцати самостоятельных вёрсток: карточка, анкета, выноска, счётчик,
   переключатель, аккордеон, поле формы. Разные блоки закрывают разные
   возражения, но выглядеть должны одной страницей.

   Главная деталь здесь — .sheet, «анкета»: подпись поля и его значение.
   Заглушек ниже героя 122, и четыре блока (кейсы, процесс, цены, отзывы)
   состоят из них почти целиком. Такой блок обязан читаться как незаполненный
   бланк — подпись на месте, значение помечено, — а не как сломанная вёрстка.
   Поэтому подпись поля живёт своей типографикой и видна даже там, где значение
   ещё не вписано.

   Медиазапросы этого раздела стоят рядом со своими компонентами, а не в общем
   разделе 9: там живут брейкпоинты страницы (шапка, футер, герой), здесь —
   поведение отдельных деталей. Пороги те же: 480 / 768 / 1024 / 1200.

   Ни одного цвета: только переменные из tokens.css.
   ------------------------------------------------------------------------- */

/* Атрибут hidden должен побеждать любой display у класса: им скрываются
   переключатель без данных, экраны формы и служебный блок строк. */
[hidden] { display: none !important; }

/* --- 7.2.1. Общее для секции ---------------------------------------------- */

.section__lead {
  font-size: var(--fs-lead);
  color: var(--c-text-dim);
  max-width: 62ch;
}

.section__caption {
  font-size: var(--fs-small);
  color: var(--c-text-dim);
}

.section__body { gap: var(--space-l); }
.section__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: none; }

.stack { display: grid; gap: var(--space-xs); }

.subsection {
  display: grid;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-line);
}
.subsection__lead { color: var(--c-text-dim); }

/* --- 7.2.2. Карточка ------------------------------------------------------- */

.cards { display: grid; gap: var(--space-s); }

.card {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}

.card__title { margin: 0; }
.card__text { color: var(--c-text-dim); max-width: 48ch; }

.card__note {
  display: grid;
  gap: var(--space-3xs);
  justify-items: start;
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--c-line);
}
.card__note-label,
.form__owner-label,
.sheet__label,
.counter__label,
.calc__cap {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
}

@media (min-width: 768px) {
  .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 7.2.3. Анкета: подпись поля и значение -------------------------------- */

.sheet { display: grid; gap: var(--space-xs); margin: 0; }
.sheet--tight { gap: var(--space-2xs); }

.sheet__row {
  display: grid;
  gap: var(--space-3xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--c-line);
}
.sheet__row:first-child { padding-top: 0; border-top: 0; }

.sheet__label { margin: 0; }
.sheet__value { margin: 0; color: var(--c-text); }

/* «Было → стало» — единственная пара, которую нужно читать вместе.
   Подсветка слева связывает две строки, не превращая их в отдельный блок. */
.sheet__row--pair {
  padding-left: var(--space-2xs);
  border-left: 2px solid var(--c-accent-soft);
}

@media (min-width: 768px) {
  .sheet:not(.sheet--tight) .sheet__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-s);
    align-items: start;
  }
}

/* --- 7.2.4. Выноска и приписка --------------------------------------------- */

.callout {
  display: grid;
  gap: var(--space-2xs);
  max-width: none;
  padding: var(--space-m);
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  font-size: var(--fs-lead);
}
.callout__title { margin: 0; font-size: var(--fs-h3); }
.callout p { font-size: var(--fs-body); color: var(--c-text-dim); }

/* Блок без данных: пометка «здесь пока пусто» пунктиром, чтобы её нельзя было
   спутать с наполненным блоком. */
.callout--empty {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--c-line-strong);
  color: var(--c-text-dim);
  font-size: var(--fs-body);
}

.note { color: var(--c-text-dim); font-size: var(--fs-small); }

/* --- 7.2.5. Счётчики и логотипы -------------------------------------------- */

.counters { display: grid; gap: var(--space-s); }

.counter {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding: var(--space-s);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}
.counter__value {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--c-ice);
}
.counter__label { display: block; }

/* Незаполненное поле не должно выглядеть как заполненное: заглушка на месте
   цифры теряет и кегль, и жирность счётчика — иначе рамка с текстом читается
   как сама цифра. */
.counter__value .placeholder,
.calc__value .placeholder {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.counters--single { max-width: 44rem; }

.logos { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.logos__item { color: var(--c-text-dim); font-weight: var(--fw-semibold); }

@media (min-width: 480px) {
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counters--single { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .counters--single { grid-template-columns: minmax(0, 1fr); }
}

/* --- 7.2.6. Переключатель на radio + :checked ------------------------------
   Ни строки JS: вкладка выбирается радиокнопкой, стрелки клавиатуры внутри
   группы работают нативно. Раскладка на flex, а не на grid-колонках: при
   узком экране ярлыки переносятся сами, а панель всегда занимает свою строку.
   display: contents у .tabs__item нужен, чтобы селектор input:checked ~ .panel
   остался внутри одной вкладки, а ярлыки при этом лежали в общем ряду.
   --------------------------------------------------------------------------- */

.tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.tabs__item { display: contents; }

.tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tabs__label {
  flex: 0 1 auto;
  padding: 0.55rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.tabs__label:hover { color: var(--c-text); border-color: var(--c-ice); }

/* Выбранная вкладка — сплошной --c-ice, а не фирменный градиент. Замер: тёмный
   текст на градиенте даёт 2.15:1 у синего края (порог 4.5), светлый — 1.95:1
   у голубого. На сплошном --c-ice тот же тёмный текст даёт 17.1:1, и светлая
   плашка на тёмной странице заодно яснее всего показывает, что вкладка выбрана. */
.tabs__input:checked + .tabs__label {
  color: var(--c-ink);
  border-color: transparent;
  background-color: var(--c-ice);
}
.tabs__input:focus-visible + .tabs__label {
  outline: 2px solid var(--c-ice);
  outline-offset: 3px;
}

.tabs__panel {
  flex: 1 0 100%;
  order: 1;              /* ярлыки идут первой строкой, панель — под ними */
  display: none;
  margin-top: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}
.tabs__input:checked ~ .tabs__panel { display: grid; gap: var(--space-s); }

.tabs__summary { color: var(--c-text-dim); margin: 0; }

/* --- 7.2.7. Кейсы ---------------------------------------------------------- */

.cases { display: grid; gap: var(--space-m); counter-reset: shark-case; }

.case { counter-increment: shark-case; gap: var(--space-s); }
.case::before {
  content: "Кейс " counter(shark-case);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* --- 7.2.8. Процесс -------------------------------------------------------- */

.steps { display: grid; gap: var(--space-m); margin: 0; }

.step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}

/* Номер шага — на сплошном --c-blue, не на градиенте: у голубого края градиента
   светлый текст даёт 1.95:1 при пороге 4.5, на сплошном синем — 7.97:1.
   Цифра мелкая и жирная, послаблений по размеру ей не положено. */
.step__n {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--c-blue);
  color: var(--c-paper);
  font-size: var(--fs-small);
  font-weight: var(--fw-extrabold);
}

.step__body { display: grid; gap: var(--space-2xs); }
.step__name { margin: 0; }
.step__text { color: var(--c-text-dim); }

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 7.2.9. Вопрос — ответ (безопасность, гарантии) ------------------------ */

.qa { display: grid; gap: var(--space-s); }

.qa__item { gap: var(--space-2xs); }
.qa__title { margin: 0; color: var(--c-ice); }
.qa__q { color: var(--c-text); font-size: var(--fs-small); }
.qa__a { margin: 0; }

@media (min-width: 768px) {
  .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 7.2.10. Отзывы -------------------------------------------------------- */

.quotes { display: grid; gap: var(--space-s); }

.quote { gap: var(--space-s); }
.quote__text { margin: 0; }
.quote__text p { font-size: var(--fs-lead); color: var(--c-text); }

@media (min-width: 1024px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 7.2.11. FAQ на details/summary ---------------------------------------
   Аккордеон без единой строки JS. Клавиатура работает нативно: Tab доводит до
   вопроса, Enter или пробел раскрывает. Атрибут name на <details> делает группу
   взаимоисключающей там, где браузер это умеет; где не умеет — просто
   открывается несколько ответов сразу, и ничего не ломается.
   --------------------------------------------------------------------------- */

.faq { display: grid; gap: var(--space-2xs); }

.faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}
.faq__item[open] { border-color: var(--c-line-strong); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/* Значок раскрытия рисуем сами: у нативного маркера нет ни цвета, ни размера,
   которыми можно управлять. */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.45rem;
  margin-left: auto;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a { padding: 0 var(--space-m) var(--space-m); }

/* --- 7.2.12. Поля ввода ---------------------------------------------------- */

.form { display: grid; gap: var(--space-m); }

.form__field { display: grid; gap: var(--space-3xs); }

.form__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-text); }

.form__control { position: relative; display: block; }

.form__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.form__input:hover { border-color: var(--c-ice); }
.form__input--area { resize: vertical; min-height: 5.5rem; }

/* Единица измерения лежит поверх поля справа; место под неё освобождает padding. */
.form__control .form__input { padding-right: 4rem; }
.form__unit {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  font-size: var(--fs-small);
  color: var(--c-text-dim);
  pointer-events: none;
}

.form__hint { font-size: var(--fs-micro); color: var(--c-text-dim); margin: 0; }

/* Селектор вилки бюджета. Нативная стрелка у <select> не поддаётся ни цвету,
   ни размеру, поэтому она снимается, а своя рисуется тем же приёмом, что значок
   аккордеона FAQ: два бордюра и поворот. Место под неё освобождает padding-right
   из .form__control — тот же, что у единиц измерения в калькуляторе. */
.form__input--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* Место справа стрелке нужно вдвое меньше, чем единице измерения в калькуляторе,
   а лишний отступ съедал хвост самого длинного варианта на узком экране. */
.form__control .form__input--select { padding-right: 2.4rem; }
.form__caret {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Ошибка. Красного в палитре нет и завести его нельзя, поэтому состояние
   различается не оттенком, а формой: восклицательный знак в кружке, светлый
   акцент и подпись словами. Цветом одним это состояние и не должно
   передаваться — так требование к доступности выполняется само. */
.form__error {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ice);
}
.form__error::before {
  content: "!";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--c-ice);
  border-radius: 50%;
  font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold);
  line-height: 1rem;
  text-align: center;
}
.form__input.is-invalid { border-color: var(--c-ice); box-shadow: inset 0 0 0 1px var(--c-ice); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  max-width: none;
}
.form__submit:disabled { opacity: 0.6; cursor: progress; }

/* Согласие теперь чекбокс, а не абзац: галочка снята по умолчанию и без неё
   отправка не проходит. Предустановленное согласие законом за согласие не
   считается, поэтому checked здесь быть не должно ни при каких правках. */
.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--c-text-dim);
  line-height: 1.5;
}
.form__checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--c-cyan);
  cursor: pointer;
}
.form__consent-text a { color: var(--c-ice); }
.form__field--consent { margin-block: var(--space-s); }
/* Невалидный чекбокс подсвечивается рамкой: цвет один не годится, у галочки
   слишком мало площади, чтобы он читался. */
.form__checkbox.is-invalid { outline: 2px solid var(--c-ice); outline-offset: 2px; }
.form__promise { margin: 0; font-size: var(--fs-small); color: var(--c-text-dim); }

.form__status {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--c-ice);
  border-radius: var(--radius-m);
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-size: var(--fs-small);
}

.form__done {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}
.form__done-title { margin: 0 0 var(--space-2xs); color: var(--c-ice); }
.form__done p { color: var(--c-text-dim); }
.form__done a { color: var(--c-ice); }

/* Приписка для владельца, а не для посетителя: куда уходит заявка. Пока в
   contact.json стоит заглушка, её видно на странице — иначе про неё забудут. */
.form__owner-note {
  display: grid;
  gap: var(--space-3xs);
  justify-items: start;
  margin: 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.contact__grid { display: grid; gap: var(--space-l); }
.contact__form-col { display: grid; gap: var(--space-m); align-content: start; }

.direct {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface-soft);
}
.direct__lead { color: var(--c-text-dim); font-size: var(--fs-small); }

@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-xl); }
  /* Прямые контакты стали короче на строку (мессенджеры сняты с релиза), и
     растянутая по высоте формы карточка превращалась в пустую панель на пол-экрана.
     Пусть она будет ровно такой, сколько в ней содержимого. */
  .direct { align-self: start; }
}

/* --- 7.2.13. Калькулятор эффекта (A02) ------------------------------------- */

.calc {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-l);
  background: var(--c-surface-soft);
}

.calc__head { display: grid; gap: var(--space-2xs); }
.calc__title { margin: 0; }
.calc__lead { color: var(--c-text-dim); }

.calc__grid { display: grid; gap: var(--space-s); }
.calc__field { display: grid; gap: var(--space-3xs); align-content: start; }

.calc__result {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-ink);
}
.calc__result.is-ready { border-color: var(--c-accent); }

.calc__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: 0;
  max-width: none;
  font-weight: var(--fw-semibold);
}

/* Оценка, а не обещание — это должно стоять рядом с числами, а не только
   в мелком дисклеймере внизу. */
.calc__badge {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  color: var(--c-text-dim);
  white-space: nowrap;
}

.calc__rows { display: grid; gap: var(--space-s); }
.calc__row { display: grid; gap: var(--space-3xs); }
.calc__value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--c-ice);
  font-variant-numeric: tabular-nums;
}
.calc__cap { display: block; }

.calc__state { margin: 0; font-size: var(--fs-small); color: var(--c-text-dim); }
.calc__formula { font-size: var(--fs-micro); color: var(--c-text-dim); max-width: none; }

/* Подписи полей разной длины: «Доля процесса под автоматизацию» занимает две
   строки, остальные — одну, и в ряду поля ввода расползались по вертикали
   (замер: 19 / 19 / 19 / 47 px от верха сетки). Subgrid выравнивает три полосы —
   подпись, поле, пояснение — по всему ряду сразу. Там, где его нет, остаётся
   прежнее поведение: span 3 по автоматическим строкам ничего не ломает. */
@media (min-width: 480px) {
  .calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__field { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-3xs); }
  .calc__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .calc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 8. Футер ------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-deep) 40%, var(--c-ink));
}

.footer__legal { border-top: 0; }

.footer__grid { display: grid; gap: var(--space-l); }

.footer__brand { display: grid; gap: var(--space-s); justify-items: start; }
.footer__tagline { color: var(--c-text-dim); font-size: var(--fs-small); max-width: 42ch; }

.contacts { display: grid; gap: var(--space-2xs); }
.contacts dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.contacts dd { margin: 0; }

/* Документы — список: сейчас в нём одна политика, но повторитель рассчитан на
   несколько, и две ссылки подряд в одной строке слиплись бы. */
.footer__docs { display: grid; gap: var(--space-3xs); }
.contacts a { color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-line-strong); }
.contacts a:hover { color: var(--c-ice); border-bottom-color: var(--c-ice); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-faint);
  font-size: var(--fs-micro);
}

/* --- 9. Брейкпоинты ------------------------------------------------------ */

/* до 480: логотип и кнопка в шапке мельче, чтобы всё поместилось в строку */
@media (max-width: 479px) {
  .logo--header .logo__img { height: 1.35rem; }
  .header__cta { padding: 0.5rem 0.7rem; font-size: var(--fs-micro); }
}

/* до 768: телефон. Плотность сцены снижена одной строкой CSS, без ветвлений в JS:
   на три пятна вместо четырёх и вдвое меньше blur — на мобильном GPU это заметно. */
@media (max-width: 767px) {
  .section--hero {
    --hero-canvas-blobs: 3;
    --hero-canvas-blur: 26px;
    --hero-canvas-opacity: 0.8;
    --hero-mark-x: 0.5;
    --hero-mark-scale: 1.05;
  }
  .hero__bg-veil {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 72%, transparent) 0%,
                      color-mix(in srgb, var(--c-ink) 55%, transparent) 45%, var(--c-ink) 100%);
  }
}

/* Низкий экран: вертикальные отступы ужимаются, иначе на ноутбуке 13"
   кнопка «Обсудить задачу» уезжает за линию сгиба. */
@media (max-height: 800px) {
  .section--hero {
    --hero-min-h: min(96svh, 760px);
    padding-block: var(--section-y);
  }
  .hero__inner { gap: var(--space-l); }
  .hero__actions { margin-top: var(--space-m); }
}

/* до 360: в шапке остаются только логотип и бургер. Кнопка «Обсудить задачу»
   никуда не пропадает — она в панели меню и в первом экране. */
@media (max-width: 359px) {
  .header__cta { display: none; }
}

/* 480: футер в два столбца */
@media (min-width: 480px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 768: горизонтальная навигация, бургер убирается */
@media (min-width: 768px) {
  .nav-toggle, .burger, .nav__backdrop { display: none; }

  .header__bar { gap: var(--space-s); }
  .header__bar > .logo { margin-right: var(--space-m); }

  .nav {
    position: static;
    margin-right: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__list { grid-auto-flow: column; gap: var(--space-3xs); }
  /* Подписи релизных секций длиннее прежних («Разбор задачи», «Данные и права»),
     и в тесной строке grid ужимал колонку до переноса: пункт меню в две строки
     поднимал шапку и ломал её ритм. Перенос запрещён, а вместимость строки
     решается составом пунктов ниже, а не порчей типографики. */
  .nav__link { padding: 0.4rem 0.55rem; white-space: nowrap; }
  .nav__num { display: none; }
  .nav__cta { display: none; }

  /* В строке шапки помещается не всё: с 768 показываем четыре ключевых якоря,
     с 1200 — шесть. Полный список из девяти блоков всегда доступен в мобильной
     панели, поэтому ни одна секция не остаётся без навигации.

     Состав строки — замер, а не вкус. Секций стало меньше, но подписи длиннее,
     и в контейнере 1200 рядом с логотипом, телефоном и кнопкой семь якорей дают
     1206 px, шесть — 1241 px. Помещается пять, и это порог 1200. На 768 в строке
     753 px четыре якоря дают 804 px — там помещается три.

     Отсюда три ступени: с 768 — «Решения», «Процесс», «Вопросы»; с 1024
     добавляется «Разбор задачи» (--wide), с 1200 — «Данные и права»
     (--tertiary). «Заявка» не нужна второй раз, на неё ведёт кнопка шапки;
     «Проблема» читается сразу за первым экраном, до неё не прыгают. Обе
     помечены --secondary и живут в панели — вместе со всеми девятью. */
  .nav__item--secondary,
  .nav__item--wide,
  .nav__item--tertiary { display: none; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-l); }

  /* Заголовок переключается на широкий набор фраз: два переноса вместо трёх. */
  .hero__set--narrow { display: none; }
  .hero__set--wide { display: block; }
}

/* 1024: текст и мокап встают в две колонки. Ниже — мокап под текстом на всю ширину.

   Ширины подобраны замером, а не на глаз: при контейнере 1200 текстовая колонка
   получается ≈ 607 px, и фраза «Цифровые решения» в 48 px укладывается в строку
   с запасом. Если метрики шрифта окажутся шире расчётных, фраза перенесётся
   внутри себя — заголовок станет трёхстрочным, но за колонку не вылезет. */
@media (min-width: 1024px) {
  /* Четвёртый якорь: «Разбор задачи» — самая длинная подпись и главный блок
     страницы, поэтому в строку он входит первым из отложенных. */
  .nav__item--wide { display: block; }

  .section--hero { --hero-title-size: clamp(2.5rem, 1.1rem + 2.5vw, 3rem); }
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-xl);
  }
  .hero__title { max-width: 100%; }
  .hero__demo { justify-self: end; width: 100%; max-width: 30rem; }
}

/* 1200: полный набор якорей в шапке, футер в четыре колонки */
@media (min-width: 1200px) {
  .nav__list { gap: var(--space-3xs); }
  .nav__link { padding: 0.45rem 0.6rem; }
  .nav__item--tertiary { display: block; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* 1360: в строку помещается ещё и телефон. Это не отдельный брейкпоинт вёрстки,
   а порог, ниже которого телефон в шапке начал бы выдавливать кнопку. */
@media (min-width: 1360px) {
  .nav__list { gap: var(--space-2xs); }
  .nav__link { padding: 0.45rem 0.7rem; }
  .header__phone { display: inline-block; }
}

/* --- 10. Движение включается только там, где его не запрещали ------------ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Единственный вход для движения первого экрана. Гейт написан как разрешение,
     а не как выключение: при обратном подходе каждая новая анимация по умолчанию
     едет мимо защиты. Второй ключ — атрибут data-hero-anim, который ставит скрипт:
     без JS начальных состояний не существует и текст виден целиком. */

  /* Фон: canvas проявляется, только когда отрисовал первый кадр. */
  .hero__bg-canvas { transition: opacity var(--hero-canvas-fade) linear; }
  .hero__bg-canvas.is-ready { opacity: var(--hero-canvas-opacity); }

  /* Заголовок и строки под ним: пофразовый blur-in с каскадом по --i. */
  [data-hero-anim="on"] .hero__phrase,
  [data-hero-anim="on"] [data-hero-reveal] {
    opacity: 0;
    filter: blur(var(--hero-anim-blur));
    transform: translateY(var(--hero-anim-shift));
    transition: opacity var(--hero-anim-dur) var(--ease),
                filter var(--hero-anim-dur) var(--ease),
                transform var(--hero-anim-dur) var(--ease);
    transition-delay: calc(var(--i, 0) * var(--hero-anim-step));
  }
  [data-hero-anim="on"] .hero__phrase.is-in,
  [data-hero-anim="on"] [data-hero-reveal].is-in {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }

  /* Мокап: строки проявляются переключением классов по таймеру. */
  [data-hero-anim="on"] .mockup__step {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--hero-step-dur) var(--ease),
                transform var(--hero-step-dur) var(--ease);
  }
  [data-hero-anim="on"] .mockup__step.is-in { opacity: 1; transform: none; }

  [data-hero-anim="on"] .mockup__marker {
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
  [data-hero-anim="on"] .mockup__step.is-active .mockup__marker {
    animation: hero-pulse 1.2s var(--ease) infinite;
  }

  [data-hero-anim="on"] .mockup__steps::after {
    transition: transform var(--hero-step-dur) var(--ease);
  }

  [data-hero-anim="on"] .mockup__result {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity var(--hero-step-dur) var(--ease),
                transform var(--hero-step-dur) var(--ease);
  }
  [data-hero-anim="on"] .mockup.is-complete .mockup__result { opacity: 1; transform: none; }

  @keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--c-accent-soft); }
    50%      { box-shadow: 0 0 0 6px transparent; }
  }
}

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

  .hero__phrase,
  [data-hero-reveal],
  .mockup__step,
  .mockup__result {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .hero__bg-canvas { opacity: 0 !important; }
}

/* --- 11. Печать: по гайдлайну (стр. 7) здесь монохромная версия ---------- */

@media print {
  body { background: none; color: var(--c-mono); }
  .header, .nav, .skip-link, .hero__actions, .btn, .hero__bg { display: none; }
  .section--hero { min-height: 0; overflow: visible; }
  .mockup__frame { border-color: var(--c-mono); background: none; box-shadow: none; }
  .mockup__label, .mockup__detail, .mockup__caption, .mockup__result { color: var(--c-mono); }
  .logo__img--screen { display: none; }
  .logo__img--print {
    display: block;
    background: url("../logo/logo-mono.svg") no-repeat left center / contain;
  }
  /* Ширина задаётся явно: у пустого span своих пропорций нет.
     Отношение — viewBox файла, 426.037 × 52.139. Селектор с .logo--footer
     обязателен: иначе высоту перебьёт .logo--footer .logo__img выше по файлу. */
  .logo--footer .logo__img--print { height: 1.6rem; width: calc(1.6rem * 426.037 / 52.139); }
  .section { border-top: 1px solid var(--c-mono); padding-block: 1rem; }
  .placeholder, .contacts a { color: var(--c-mono); border-color: var(--c-mono); }
  .contacts dt, .footer__tagline, .footer__bottom { color: var(--c-mono); }
}