/* ============================================================================
   SHARK DEV — оформление страницы по макету владельца «SHARK DEV - Главная 2»
   (Claude Design, 2026-09-27; ADR-0005).

   Значения — отступы, радиусы, кегли, прозрачности, градиенты — сняты с макета
   один в один. Своё здесь только то, чего в макете нет:
     — адаптивная раскладка (макет свёрстан под одну ширину, ~1440);
     — состояния, которые макет рисовал скриптом конструктора: плавающие подписи
       полей, выбранный вариант бюджета, галочка согласия;
     — прозрачность текста там, где макет давал контраст ниже WCAG AA (список —
       в ADR-0005, значения — роли --text-* и --on-dark-* в tokens.css);
     — страницы документов (privacy.html, consent.html) и печать.

   Ни одного цвета в этом файле нет: только переменные из tokens.css и
   color-mix() от них. Посторонний HEX роняет extract-brand.py --verify.

   Раскладка — от широкого экрана к узкому (так устроен макет):
   1360 / 1200 / 900 / 700 / 480.
   ============================================================================ */

/* --- 0. Шрифт ------------------------------------------------------------

   Inter лежит на своём домене, а не тянется с fonts.googleapis.com: раздел 7
   site/privacy.html перечисляет получателей данных посетителя, и Google LLC
   был там ровно из-за шрифта. Макет подключал Google Fonts — здесь этого нет.
   Иконки макета (Material Symbols) по той же причине не шрифт, а SVG-спрайт
   внутри index.html (лицензия — assets/icons/LICENSE-material-symbols.txt).

   Файлы — официальные подмножества с fonts.gstatic.com, шрифт вариативный:
   один файл покрывает все веса. Лицензия Inter — SIL OFL.

   Знак рубля — отдельным файлом на 2 КБ (2026-09-28). Он есть только в
   калькуляторе, а в официальных подмножествах лежит в latin-ext: ради одного
   «₽» браузер качал 85 КБ. Поэтому U+20BD исключён из диапазона latin-ext, а
   inter-ruble.woff собран из Inter макета (scripts/build-ruble-font.py). Какой
   файл отвечает за знак, проверяет check-page.py, группа perf.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BC, U+20BE-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-ruble.woff') format('woff');
  unicode-range: U+20BD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. Сброс и база ------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Шапка липкая: якорь не должен уезжать под неё. */
  scroll-padding-top: 118px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--c-paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, p { text-wrap: pretty; }
/* :where — нулевая специфичность: иначе сброс перебивает отступы компонентов. */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-2); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.is-dark :focus-visible { outline-color: var(--c-ice); }

::selection { background: var(--accent-16); }

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

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

.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: 16px;
  top: -120px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--c-deep);
  color: var(--c-paper);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { top: 12px; color: var(--c-paper); }

/* Спрайт иконок лежит в разметке: внешняя ссылка <use href="файл#id"> по
   file:// в Chromium не рисуется. Сам он не показывается. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Иконка — квадрат в 1em, как глиф Material Symbols: размер задаёт font-size. */
.i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* Перенос строки из JSON («\n») — там, где макет ставил <br>. */
.lines { white-space: pre-line; }

/* Видимая заглушка: место, куда владелец вписывает свой факт. На странице их
   нет — они живут в запаркованных блоках, — но класс ставит content.js. */
.placeholder {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--deep-16);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* --- 3. Анимации макета --------------------------------------------------- */

@keyframes sd-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(-1.5deg); }
}

@keyframes sd-open {
  0% { opacity: 0; transform: translateY(-10px); }
  55% { opacity: .85; }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes sd-swim-y {
  0% { transform: translate(0, -50%) rotate(0); }
  25% { transform: translate(-12px, calc(-50% - 16px)) rotate(-2deg); }
  50% { transform: translate(6px, calc(-50% + 10px)) rotate(1.4deg); }
  75% { transform: translate(12px, calc(-50% - 10px)) rotate(2deg); }
  100% { transform: translate(0, -50%) rotate(0); }
}

/* --- 4. Раскладка --------------------------------------------------------- */

.page {
  width: 100%;
  overflow-x: clip;
  padding: 0 var(--page-pad) var(--page-pad);
}

.block {
  max-width: var(--shell);
  margin: clamp(72px, 6.5vw, 124px) auto 0;
}

.block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 0 clamp(8px, 1vw, 16px) clamp(30px, 2.8vw, 48px);
}
/* Заголовок слева, вводный абзац справа — всегда двумя колонками, выровненными по верху
   (2026-10-19, по замечанию владельца: при переносе лида под заголовок правая половина
   пустовала, а выровненный по низу заголовок «отрывался» от текста справа). Тонкая линия
   слева у лида связывает его с заголовком. */
@media (min-width: 1000px) {
  .block__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);   /* на средних экранах лид шире, чтобы не вытягивался столбиком */
    align-items: start;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .block__head > :only-child { grid-column: 1 / -1; }
  .block__head > .block__lead { justify-self: end; margin-top: .45em; }
}
@media (min-width: 1440px) {
  .block__head { grid-template-columns: minmax(0, 1fr) minmax(320px, 34%); }
}

.block__lead {
  max-width: 420px;
  padding-left: 20px;
  border-left: 2px solid var(--accent-16);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: var(--text-body);
}
/* Длинный вводный абзац: шире, и на средних экранах уходит под заголовок, а не
   вытягивается рядом с ним в узкую колонку. */
.block__lead--wide { max-width: 560px; }

.h2 {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--text);
}
.h2--solo { padding: 0 clamp(8px, 1vw, 16px) clamp(30px, 2.8vw, 48px); }
/* Где макет ограничивал ширину заголовка: услуги, AI-блок, преимущества. */
.h2--narrow { max-width: 900px; }
.is-dark .h2 { color: var(--c-paper); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

/* Белая карточка макета и её подъём при наведении. */
.card {
  border-radius: var(--radius-xl);
  background: var(--c-white);
  transition: transform .25s, box-shadow .25s;
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px var(--accent-16);
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-s);
  background: var(--c-paper);
  color: var(--c-accent);
  font-size: 24px;
}

/* Список с точками макета: «•» акцентного цвета перед каждым пунктом. */
.dots { display: flex; flex-direction: column; gap: 10px; }
.dots > li { display: flex; gap: 9px; }
.dots > li::before {
  content: "•";
  flex: none;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}

/* Метки-пилюли макета. */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tags > li {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-tag);
  line-height: 1.3;
}

/* --- 5. Кнопки ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 34px;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, color .2s;
}
.btn .i { font-size: 20px; }
.btn--lg { padding: 20px 36px; font-size: 18px; }
.btn--lg .i { font-size: 21px; }

.btn--dark { background: var(--c-deep); color: var(--c-paper); }
.btn--dark:hover { background: var(--c-accent); color: var(--c-paper); }

.btn--ice { background: var(--c-ice); color: var(--c-deep); }
.btn--ice:hover { background: var(--c-white); color: var(--c-deep); }

.btn--line {
  border: 1px solid var(--ice-40);
  background: transparent;
  color: var(--c-ice);
  font-weight: var(--fw-semibold);
}
.btn--line:hover { background: var(--ice-10); color: var(--c-ice); }

.btn--white { background: var(--c-pure); color: var(--c-accent); }
.btn--white:hover { background: var(--c-paper); color: var(--c-accent); }

.btn--grad {
  background: var(--grad-button);
  color: var(--c-paper);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--c-accent) 35%, transparent);
}
.btn--grad:hover {
  color: var(--c-paper);
  box-shadow: 0 14px 42px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.btn--grad:disabled { cursor: progress; opacity: .7; }

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

.header {
  position: sticky;
  top: clamp(10px, 1vw, 16px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  max-width: var(--shell);
  margin: clamp(10px, 1vw, 16px) auto clamp(14px, 1.4vw, 20px);
  padding: 16px 16px 16px 24px;
  border-radius: var(--radius-pill);

  /* «Жидкое стекло» — решение владельца 2026-09-27 (ADR-0005); в макете здесь светлая
     плашка 86 % с blur 18. База для всех браузеров — матовое стекло: полупрозрачная
     заливка, размытие с насыщенностью, блики по кромке и мягкая тень. Плотность не ниже
     64 %: так тёмный текст меню держит 4.5:1 и над тёмными секциями (замер в ADR-0005). */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-pure) 72%, transparent),
    color-mix(in srgb, var(--c-paper) 64%, transparent));
  -webkit-backdrop-filter: blur(12px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(12px) saturate(185%) brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, var(--c-pure) 90%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--c-pure) 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--c-pure) 38%, transparent),
    inset 0 -14px 26px -14px color-mix(in srgb, var(--c-accent) 22%, transparent),
    0 14px 34px -12px color-mix(in srgb, var(--c-night-1) 38%, transparent);
}

/* Блик на стекле: светлое пятно слева сверху и отсвет справа снизу. Под содержимым
   шапки, над её заливкой (z-index: -1 внутри контекста наложения шапки). */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(90% 160% at 10% -60%, color-mix(in srgb, var(--c-pure) 70%, transparent), transparent 60%),
    radial-gradient(60% 140% at 92% 170%, color-mix(in srgb, var(--c-pure) 35%, transparent), transparent 60%);
}

/* Преломление фона по кромке, как у линзы. SVG-фильтр в backdrop-filter умеет только
   Chromium (Chrome, Edge, Яндекс Браузер, Opera), поэтому класс ставит glass.js — и только
   там, на экранах с мышью. В Safari и Firefox шапка остаётся матовым стеклом выше. */
.header.has-refraction {
  backdrop-filter: url(#lg-refraction) blur(7px) saturate(190%) brightness(1.06);
}

/* Кто попросил систему убрать прозрачность или поднять контраст — непрозрачная шапка. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .header,
  .header.has-refraction {
    background: var(--c-paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header::before { display: none; }
}

/* Логотип — готовый файл гайдлайна (стр. 6), не пересобранный: перекрашивать и
   трансформировать знак запрещено. Высота знака — как в макете, 30 px. */
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { width: auto; height: 30px; }

.nav { display: flex; align-items: center; margin-left: auto; }
.nav__list { display: flex; gap: clamp(14px, 1.6vw, 30px); }
.nav__link {
  position: relative;
  color: var(--deep-72);
  font-weight: var(--fw-medium);
  font-size: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.nav__link:hover { color: var(--c-accent); }
/* Текущий раздел — тёмный текст с синей меткой, а не синий текст: синий на стекле над
   тёмной карточкой давал 1.8–3.6:1 (замер в ADR-0005). */
.nav__link[aria-current="true"],
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="true"]::after,
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}

/* Телефон, почта и кнопка — только в мобильной панели. */
.nav__extra { display: none; }

.header__cta { flex: none; }

/* Переключатель «RU / EN» (тикет i18n/23): в панели меню (телефон, планшет) и в подвале — в шапке на компьютере
   места нет, решение владельца 2026-10-31. Язык страницы — текстом, другой — ссылкой на парную страницу; на русских
   страницах появляется с запуском английской версии. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.lang-switch > :last-child::before { content: "/"; margin-right: 6px; opacity: .45; }
.lang-switch__cur { color: var(--text); }
.lang-switch__alt { color: var(--deep-72); text-decoration: none; transition: color .2s; }
.lang-switch__alt:hover { color: var(--c-accent); }
.footer__bottom .lang-switch { flex: none; font-size: 14px; }
/* Короткое «EN» / «RU» в шапке на компьютере (решение владельца 2026-10-31): до кнопки 12 px вместо общего отступа
   шапки, так шапка шире всего на ~38 px. Уже 1440 места нет (замер: на 1366 кнопка вылезает на 23–34 px, на 1400
   английская — на 7) — там вход в подвале и в меню. */
.lang-head { display: none; }
@media (min-width: 1440px) {
  .lang-head {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    margin-right: calc(12px - clamp(16px, 3vw, 44px));
    font-weight: var(--fw-semibold);
    font-size: 16px;
    color: var(--deep-72);
    text-decoration: none;
    transition: color .2s;
  }
  .lang-head:hover { color: var(--c-accent); }
}
.footer__bottom .lang-switch__cur { color: var(--on-dark); }
.footer__bottom .lang-switch__alt { color: var(--on-dark-muted); }
.footer__bottom .lang-switch__alt:hover { color: var(--on-dark); }

/* Мобильное меню: чекбокс + label, работает без JS. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.burger { display: none; }

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

.hero { max-width: var(--shell); margin: 0 auto; }

.hero__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(624px, 50.4vw, 744px);
  border-radius: var(--radius-xl);
  background: var(--grad-hero);
  color: var(--c-paper);
}

.hero__glow {
  position: absolute;
  left: -14%;
  top: -34%;
  z-index: 1;
  width: min(1100px, 62%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 72%, transparent), transparent 64%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__art {
  position: absolute;
  right: 8%;
  top: 42%;
  z-index: 2;
  width: min(820px, 46%);
  opacity: .95;
  transform: translateY(-50%);
  filter: drop-shadow(0 40px 80px color-mix(in srgb, var(--c-night-1) 45%, transparent));
  pointer-events: none;
  animation: sd-swim-y 16s ease-in-out infinite;
}

.hero__body {
  position: relative;
  z-index: 3;
  max-width: min(1100px, 54%);
  padding: clamp(86px, 7.4vw, 150px) clamp(36px, 3.4vw, 64px) clamp(20px, 1.8vw, 34px);
}

.hero__title {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--c-paper);
}
.hero__accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 620px;
  margin-top: 26px;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-paper) 75%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 2.6vw, 38px);
}

/* Полоса «Бизнес-процесс → … → Результат». */
.flow {
  position: relative;
  z-index: 3;
  margin: clamp(18px, 1.8vw, 26px) clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 20px);
  padding: clamp(20px, 1.8vw, 26px) clamp(22px, 2vw, 30px);
  border-radius: 22px;
  background: color-mix(in srgb, var(--c-indigo) 55%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.flow__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 1.4vw, 24px);
}
.flow__item { display: flex; align-items: center; gap: 14px; }
.flow__item > .i { font-size: 32px; }
.flow__label { font-weight: var(--fw-semibold); font-size: 19px; line-height: 1.25; }
.flow__item--key .flow__label { font-weight: var(--fw-bold); }
.flow__detail {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-paper) 60%, transparent);
}

/* --- 8. Проблема (блок сайта, в макете его нет) --------------------------- */
/* Бенто (2026-10-18, выбор владельца из четырёх макетов): тёмная плитка с ответом и кнопкой слева
   (5 колонок), три светлые плитки-причины справа (7 колонок, третья — широкая, иконка слева от
   текста). Цвета на тёмном — роли --on-dark-muted и --c-ice, пары уже в check-contrast.py. */

.problem__answer {
  grid-column: span 5;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-paper);
}
.problem__answer > * { position: relative; }
.problem__art {
  position: absolute;
  right: -18%;
  top: -10%;
  width: 62%;
  height: auto;
  opacity: .22;
  pointer-events: none;
}
.problem__eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.problem__claim {
  margin: 14px 0 28px;
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.3;
  color: var(--c-ice);
}
.problem__honest {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--paper-14);
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}
.problem__cta { margin-top: 22px; align-self: flex-start; }

.problem__points {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;   /* запас высоты — верхним плиткам, широкая по содержимому */
  gap: clamp(12px, 1.2vw, 18px);
  counter-reset: point;
}
.problem__point {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2vw, 30px);
  counter-increment: point;
}
/* Номер причины — крупный водяной знак в углу: плитки читаются как 01–03, а пустой угол
   перестаёт быть пустым. На наведении проступает сильнее. */
.problem__point::after {
  content: counter(point, decimal-leading-zero);
  position: absolute;
  right: 20px;
  top: 10px;
  font-weight: var(--fw-extrabold);
  font-size: 76px;
  line-height: 1;
  letter-spacing: -.05em;
  color: color-mix(in srgb, var(--c-accent) 8%, transparent);
  transition: color .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.problem__point:hover::after { color: color-mix(in srgb, var(--c-accent) 16%, transparent); transform: translateY(-3px); }
.problem__point--wide { grid-column: span 2; flex-direction: row; align-items: flex-start; }
.problem__point--wide .problem__text { max-width: 720px; }
.problem__title {
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.2;
}
.problem__text {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
}

/* --- 9. Услуги ------------------------------------------------------------ */

/* Лента (2026-10-19): тёмная карточка AI во всю ширину — тело слева, объёмный элемент по центру,
   цена и кнопка справа; под ней три равные карточки .svc-row. */
.svc-ai {
  grid-column: span 12;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  min-height: 340px;
  padding: clamp(30px, 2.6vw, 44px);
  border-radius: var(--radius-xl);
  background-color: var(--c-deep);
  background-image:
    linear-gradient(120deg, color-mix(in srgb, var(--c-deep) 95%, transparent), var(--accent-45)),
    url('../img/mockup/bg-09.webp?v=8eb951ba');
  background-size: cover;
  background-position: center;
  color: var(--c-paper);
  transition: transform .25s;
}
.svc-ai:hover { transform: translateY(-4px); }

.svc-ai__art {
  position: absolute;
  right: 29%;
  top: 50%;
  z-index: 1;
  width: min(430px, 32%);
  opacity: .58;
  transform: translate(0, -50%);
  pointer-events: none;
  animation: sd-swim-y 16s ease-in-out infinite;
}
.svc-ai__body { position: relative; z-index: 2; flex: 0 0 46%; }
.svc-ai__aside { position: relative; z-index: 2; flex: 0 0 30%; display: flex; flex-direction: column; align-items: flex-start; }
.svc-ai__aside .svc-ai__note { margin-top: 0; }
.svc-ai__aside .svc-ai__link { margin-top: 22px; padding-top: 0; }

.svc-ai__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
  color: var(--c-paper);
  font-size: 28px;
}

.svc-ai__title {
  position: relative;
  margin-top: 26px;
  font-weight: var(--fw-extrabold);
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1.12;
}

.svc-ai__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--on-dark-body);
}
.svc-ai__list > li { gap: 10px; }
.svc-ai__list > li::before { color: var(--c-ice); }

.svc-ai__link {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--c-ice);
  font-weight: var(--fw-bold);
  font-size: 18px;
  text-decoration: none;
}
.svc-ai__link:hover { color: var(--c-white); }
.svc-ai__link .i { font-size: 19px; }

.svc-row {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

.svc-card { display: flex; flex-direction: column; padding: clamp(24px, 2vw, 32px); }
.svc-card .svc-card__list, .svc-card .chips-soft { flex: 1; align-content: flex-start; }
.svc-card__head { display: flex; align-items: center; gap: 14px; }
.svc-card__head .icon-box { width: 44px; height: 44px; font-size: 25px; }
.svc-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.svc-card__list {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-body);
}

.chips-soft { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chips-soft > li {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--text-body);
}

/* --- 10. AI для бизнеса ---------------------------------------------------- */

.ai-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 2.9vw, 56px) clamp(24px, 2.6vw, 52px) clamp(34px, 3vw, 60px);
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 130% at 50% 42%, var(--c-night-5) 0%, var(--c-night-3) 38%, var(--c-deep) 68%, var(--c-night-1) 100%);
  color: var(--c-paper);
}

.ai-panel__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 40%, transparent) 0%, color-mix(in srgb, var(--c-accent) 12%, transparent) 42%, transparent 70%);
  pointer-events: none;
}

.ai-panel__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.ai-panel__title { font-size: clamp(28px, 2.8vw, 50px); line-height: 1.05; }
.ai-panel__lead {
  max-width: 420px;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-paper) 62%, transparent);
}

.shift {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.4vw, 40px);
  margin-top: clamp(34px, 3vw, 52px);
}

.shift__before { flex: 1 1 330px; min-width: min(300px, 100%); }
.shift__after { flex: 1 1 380px; min-width: min(340px, 100%); }

.shift__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.shift__badge .i { font-size: 19px; }
.shift__badge--before {
  border: 1px solid color-mix(in srgb, var(--c-coral-2) 32%, transparent);
  background: color-mix(in srgb, var(--c-coral-2) 12%, transparent);
  color: var(--c-coral);
}
.shift__badge--after {
  border: 1px solid var(--ice-50);
  background: color-mix(in srgb, var(--c-ice) 14%, transparent);
  color: var(--c-ice);
}

.shift__steps {
  counter-reset: shift;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--c-coral-2) 26%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c-paper) 4%, transparent);
}
.shift__steps > li {
  counter-increment: shift;
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-paper) 56%, transparent); /* в макете .5 — ниже AA */
}
.shift__steps > li::before {
  content: counter(shift, decimal-leading-zero);
  flex: none;
  width: 20px;
  font: var(--fw-bold) 13px ui-monospace, Menlo, monospace;
  color: color-mix(in srgb, var(--c-coral) 55%, transparent);
}

.shift .tags { margin-top: 14px; }
.tags--before > li {
  background: color-mix(in srgb, var(--c-coral-2) 10%, transparent);
  color: color-mix(in srgb, var(--c-coral) 85%, transparent);
}
.tags--after { margin-top: 6px; }
.tags--after > li {
  background: var(--ice-12);
  color: color-mix(in srgb, var(--c-ice) 90%, transparent);
}

/* Синяя карточка «AI-слой». Наклон за курсором — tilt.js. */
.layer {
  position: relative;
  overflow: hidden;
  flex: 0 1 520px;
  min-width: min(340px, 100%);
  min-height: 420px;
  border: 1px solid color-mix(in srgb, var(--c-ice) 60%, transparent);
  border-radius: 26px;
  background: linear-gradient(155deg, var(--c-accent) 0%, var(--c-accent-3) 42%, var(--c-accent-2) 100%);
  box-shadow:
    0 0 90px color-mix(in srgb, var(--c-accent) 55%, transparent),
    0 24px 70px color-mix(in srgb, var(--c-night-1) 50%, transparent);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  will-change: transform;
}
.layer__art {
  position: absolute;
  right: -130px;
  top: -90px;
  width: 340px;
  max-width: none;
  opacity: .4;
  filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--c-night-1) 45%, transparent));
  pointer-events: none;
}
.layer__body {
  position: relative;
  padding: clamp(26px, 2.2vw, 38px) clamp(24px, 2vw, 36px) clamp(28px, 2.4vw, 40px);
}
.layer__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-night-1) 42%, transparent);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.2;
  color: var(--c-ice);
}
.layer__head { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.layer__head > .i { font-size: 52px; color: var(--c-paper); }
.layer__title {
  font-weight: var(--fw-extrabold);
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.layer__text {
  max-width: 380px;
  margin-top: 16px;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-paper) 90%, transparent);
}
.layer__ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.layer__ops > li {
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-night-1) 34%, transparent);
  font-weight: var(--fw-semibold);
  font-size: 17px;
}
.layer__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--c-paper) 28%, transparent);
}
.layer__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-extrabold);
  font-size: clamp(38px, 2.9vw, 52px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-ice);
}
.layer__num .i { font-size: 38px; color: color-mix(in srgb, var(--c-ice) 80%, transparent); }
.layer__caption {
  max-width: 9em;
  font-weight: var(--fw-medium);
  font-size: 19px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-paper) 90%, transparent);
}

.shift__results { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.shift__result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--ice-50);
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c-ice) 26%, transparent), color-mix(in srgb, var(--c-accent-2) 20%, transparent));
  box-shadow: 0 10px 34px color-mix(in srgb, var(--c-accent-2) 16%, transparent);
}
.shift__result > .i { font-size: 26px; color: var(--c-ice); }
.shift__result-label { font-weight: var(--fw-bold); font-size: 19px; line-height: 1.2; }
.shift__result-detail {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-paper) 88%, transparent); /* в макете .65 — ниже AA */
}

/* Оговорка «это пример» — чтобы «7 → 3» не читалось как обещание. */
.shift__note {
  position: relative;
  max-width: 760px;
  margin: clamp(26px, 2.2vw, 34px) auto 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
  color: var(--on-dark-muted);
}

.ai-panel__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
  margin-top: clamp(26px, 2.4vw, 40px);
  padding-top: clamp(26px, 2.2vw, 38px);
  border-top: 1px solid var(--paper-14);
}
.ai-panel__cta-text {
  font-weight: var(--fw-medium);
  font-size: 19px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--c-paper) 70%, transparent);
}
.btn--glow { box-shadow: 0 12px 40px var(--ice-22); }
.btn--glow:hover { background: var(--c-paper); }

/* Задачи для AI. Карточки светлые, тёмная — одна: в макете это «Корпоративный поиск», а на
   экранах с мышью тёмной становится карточка под курсором — подсветка ходит за ним
   (2026-10-08). Цвета карточки — её собственные переменные: светлое и тёмное состояние
   описаны по одному разу и переключаются плавно. */
.tasks { margin-top: clamp(72px, 6.5vw, 124px); }
.task {
  --task-bg: var(--c-white);
  --task-title: var(--text);
  --task-text: var(--text-body);
  --task-icon: var(--c-accent);
  --task-glow: 0;   /* свечение в углу тёмной карточки */
  --task-fill: 0;   /* градиент плитки с иконкой */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: span 4;
  padding: clamp(26px, 2.2vw, 36px);
  background-color: var(--task-bg);
  color: var(--task-title);
  transition: background-color .35s var(--ease), color .35s var(--ease),
              transform .25s, box-shadow .25s;
}
.task::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(110% 90% at 100% 0%,
              color-mix(in srgb, var(--c-accent) 42%, transparent), transparent 62%);
  opacity: var(--task-glow);
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
/* Плитка с иконкой: светлая — мягкий градиент неба, тёмная — синий градиент кнопок. Градиент
   между градиентами не анимируется, поэтому синий лежит отдельным слоем и проявляется. */
.task .icon-box {
  position: relative;
  isolation: isolate;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-s);
  background: linear-gradient(140deg, var(--c-sky-5), var(--c-sky-1));
  box-shadow: inset 0 0 0 1px var(--accent-10);
  color: var(--task-icon);
  font-size: 28px;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.task .icon-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-button);
  opacity: var(--task-fill);
  transition: opacity .35s var(--ease);
}
.task__title {
  margin-top: 22px;
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
}
.task__text {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--task-text);
  transition: color .35s var(--ease);
}
.task--dark {
  --task-bg: var(--c-deep);
  --task-title: var(--on-dark);
  --task-text: var(--on-dark-body);
  --task-icon: var(--c-white);
  --task-glow: 1;
  --task-fill: 1;
}
@media (hover: hover) {
  .task:hover {
    --task-bg: var(--c-deep);
    --task-title: var(--on-dark);
    --task-text: var(--on-dark-body);
    --task-icon: var(--c-white);
    --task-glow: 1;
    --task-fill: 1;
    box-shadow: 0 22px 48px color-mix(in srgb, var(--c-deep) 26%, transparent);
  }
  .task:hover .icon-box { transform: translateY(-2px) rotate(-6deg); }
  /* Пока курсор над другой карточкой, тёмная из макета светлеет: тёмной остаётся одна. */
  .tasks .grid:has(> .task:hover) > .task--dark:not(:hover) {
    --task-bg: var(--c-white);
    --task-title: var(--text);
    --task-text: var(--text-body);
    --task-icon: var(--c-accent);
    --task-glow: 0;
    --task-fill: 0;
  }
}

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

/* Шесть проектов, вариант A (2026-10-26, решение владельца по презентации «Портфолио работ 2026»,
   дополнение ADR-0013; до этого — бенто на четыре кейса от 2026-10-19): автобизнес — две витрины с
   полосой цифр, три продукта «Кровельного центра» под общей подписью с итогом у каждого, игры
   Myriad Studio — тёмная полоса с четырьмя играми. Визуал держит пропорцию обложки 1200×729.
   Карточка .case общая для главной, оглавления /keisy/ и страниц услуг (там — span 6 по умолчанию). */
.cases { align-items: stretch; }
.case {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.case:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px var(--accent-16);
}
.case__visual {
  aspect-ratio: 1200 / 729;
  background: linear-gradient(120deg, var(--c-deep), var(--c-accent));
}
/* Кейс один (оглавление с одной карточкой): карточка во всю ширину, визуал слева от текста. */
.grid > .case:only-child { grid-column: span 12; flex-direction: row; min-height: 320px; }
.grid > .case:only-child .case__visual { flex: 0 0 42%; aspect-ratio: auto; }
.case__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 28px 32px 30px; }
.case__title { font-weight: var(--fw-bold); font-size: 22px; line-height: 1.25; }
.case__kind { font-weight: var(--fw-semibold); font-size: 17px; color: var(--c-accent); }
.case__text { font-size: 18px; line-height: 1.5; color: var(--text-muted); }

.case--big { grid-column: span 6; }
.case--mid { grid-column: span 4; }
.case--mid .case__body { gap: 10px; padding: 22px 24px 24px; }
.case--mid .case__title { font-size: 20px; }
.case--mid .case__kind { font-size: 15px; line-height: 1.4; }
.case__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.case__facts div { padding: 12px 12px 10px; border-radius: var(--radius-s); background: var(--c-sky-5); }
.case__facts dt { font-weight: var(--fw-extrabold); font-size: 22px; line-height: 1.1; color: var(--c-accent); }
.case__facts dd { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--text-muted); }
.case__note { font-size: 13px; color: var(--text-muted); }
.case__outcome {
  padding: 10px 12px;
  border-left: 3px solid var(--c-accent);
  border-radius: 10px;
  background: var(--accent-10);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-body);
}
.case .case__link { margin-top: auto; }
.cases__group {
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 8px 0;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.cases__group::after { content: ""; flex: 1; height: 1px; background: var(--accent-16); }
/* Игры — тёмная полоса: текст слева, четыре игры справа (арт с прозрачным фоном от build-covers.py). */
.cases__games {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(26px, 2.6vw, 44px);
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse 60% 80% at 80% 50%, color-mix(in srgb, var(--c-violet) 80%, transparent), transparent 70%), var(--grad-dark);
  color: var(--c-paper);
  transition: transform .25s, box-shadow .25s;
}
.cases__games:hover { transform: translateY(-4px); box-shadow: 0 18px 44px color-mix(in srgb, var(--c-violet) 35%, transparent); }
.cases__games-text { display: flex; flex-direction: column; gap: 12px; }
.cases__games .case__client { color: var(--c-ice); }
.cases__games .case__title { font-size: 26px; color: var(--c-paper); }
.cases__games-kind { font-weight: var(--fw-semibold); font-size: 17px; color: var(--c-ice); }
.cases__games-lead { font-size: 16px; line-height: 1.55; color: var(--on-dark-body); }
.cases__games .case__link { color: var(--c-ice); }
.cases__games-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cases__game { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--ice-16); border-radius: 18px; background: var(--paper-07); }
.cases__game img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .35s var(--ease); }
.cases__game:hover img { transform: scale(1.05) rotate(-2deg); }
.cases__game-name { font-weight: var(--fw-bold); font-size: 15px; color: var(--c-paper); }
.cases__game-kind { font-size: 12px; line-height: 1.35; color: var(--on-dark-muted); }
/* Игры на странице кейса Myriad Studio (2026-10-30, дополнение ADR-0013): та же полоса, что на главной,
   но у каждой игры свои ссылки. Цвета — пары, которые уже меряет check-contrast.py: --c-ice и
   --on-dark-muted на тёмном, --c-deep на --c-ice под курсором. */
.case-games {
  padding: clamp(18px, 2.2vw, 32px);
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse 60% 80% at 50% 50%, color-mix(in srgb, var(--c-violet) 70%, transparent), transparent 70%), var(--grad-dark);
  color: var(--c-paper);
}
.case-games__item { padding-bottom: 16px; }
.case-games__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.case-games__link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--ice-16); border-radius: 999px;
  font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.2; color: var(--c-ice); text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.case-games__link:hover, .case-games__link:focus-visible { background: var(--c-ice); border-color: var(--c-ice); color: var(--c-deep); }
.case-games__status { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--on-dark-muted); }
/* Живая миниатюра телефона в карточке радио: рамка картинки режет низ телефона; шрифт миниатюры
   задан в cqw от ширины рамки, поэтому вместе с шириной телефона уменьшается и он (3,1 при 60 %). */
.case__thumb--live { overflow: hidden; }
.case--mid .rpm { width: 40%; width: 40cqw; padding: 1.6cqw; font-size: 2.07cqw; }

/* --- 12. Как работаем ------------------------------------------------------ */

.process {
  padding: clamp(30px, 2.8vw, 52px);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--c-night-4) 0%, var(--c-deep) 46%, var(--c-night-2) 100%);
  color: var(--c-paper);
}
.process__title { font-size: clamp(28px, 3vw, 52px); }

.process__scroller {
  margin-top: clamp(30px, 3vw, 44px);
  overflow-x: auto;
  padding: 10px 2px 12px;
  scrollbar-color: var(--ice-22) transparent;
}
.process__track { counter-reset: step; display: flex; gap: 14px; }

.step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 240px;
  gap: 12px;
  min-width: 240px;
  padding: clamp(20px, 1.6vw, 26px);
  border: 1px solid var(--ice-16);
  border-radius: var(--radius-m);
  background: var(--paper-07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), background .3s ease;
}
.step:hover { transform: translateY(-6px); background: color-mix(in srgb, var(--c-paper) 12%, transparent); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--c-ice) 14%, transparent);
  color: var(--c-ice);
  font-size: 23px;
}
.step__num { font: var(--fw-extrabold) 26px/1 ui-monospace, Menlo, monospace; color: var(--ice-22); }
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__title { font-weight: var(--fw-bold); font-size: clamp(18px, 1.3vw, 22px); line-height: 1.15; }
.step__time {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--ice-12);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--c-ice);
}
.step__text {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.step__out {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--c-ice) 14%, transparent);
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-paper) 85%, transparent);
}
.step__out-label { font-weight: var(--fw-bold); color: var(--c-ice); }
.step__out-label::after { content: ":"; }

/* Подробности этапов: в макете их нет, решение владельца — «коротко + подробнее». */
.process__more {
  margin-top: 18px;
  border-top: 1px solid var(--ice-12);
}
.process__more > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 2px 4px;
  font-weight: var(--fw-semibold);
  font-size: 17px;
  color: var(--c-ice);
  cursor: pointer;
  list-style: none;
}
.process__more > summary::-webkit-details-marker { display: none; }
.process__more > summary .i { font-size: 28px; transition: transform .25s ease; }
.process__more[open] > summary .i { transform: rotate(180deg); }

.process__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.process__detail {
  padding: 20px 22px;
  border: 1px solid var(--ice-12);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--c-paper) 5%, transparent);
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-paper) 75%, transparent);
}
.process__detail-name { font-weight: var(--fw-bold); font-size: 17px; color: var(--c-paper); }
.process__detail-text { margin-top: 8px; }
.process__detail dl { margin-top: 12px; display: grid; gap: 10px; }
.process__detail dt { font-weight: var(--fw-bold); color: var(--c-ice); }
.process__detail dd { margin-top: 2px; }
.process__after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-paper) 75%, transparent);
}
.process__after-title { font-weight: var(--fw-bold); font-size: 18px; color: var(--c-paper); }
.process__after-text { margin-top: 8px; }

/* --- 13. Разработка заканчивается не на релизе ---------------------------- */

/* Фигура слева — тёмная панель под схему «цикл жизни продукта» (2026-10-19; вариант GPT-5.5,
   полученный через OpenRouter, — выбор владельца из вариантов четырёх моделей и шести своих,
   дополнение ADR-0005). Свечение и сетка — фоном самой фигуры, чтобы заполнять её при любой
   пропорции; схема (meet) видна целиком. Иллюстрация остаётся едва заметной текстурой. */
.adv__media {
  grid-column: span 5;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: var(--radius-xl);
  background-color: var(--c-night-1);
  background-image:
    radial-gradient(ellipse 58% 54% at 50% 50%, color-mix(in srgb, var(--c-accent-2) 34%, transparent), color-mix(in srgb, var(--c-accent) 14%, transparent) 48%, transparent 76%),
    linear-gradient(color-mix(in srgb, var(--c-paper) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-paper) 6%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}
.adv__media img,
.faq__media img,
.tech__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adv__media img { opacity: .14; }

.adv__cards {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.adv {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 1.8vw, 30px);
  border-radius: var(--radius-l);
}
.adv:hover { box-shadow: 0 18px 44px color-mix(in srgb, var(--c-accent) 14%, transparent); }
.adv__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-accent);
}
.adv__text { margin-top: 10px; font-size: 18px; line-height: 1.55; color: var(--text-body); }

/* Последний пункт — тёмная полоса во всю ширину, как в макете; иконка слева от текста. */
.adv:last-child { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 20px; background: var(--c-deep); color: var(--c-paper); }
.adv:last-child:hover { transform: none; box-shadow: none; }
.adv:last-child .icon-box { background: var(--ice-12); color: var(--c-ice); }
.adv:last-child .adv__title { color: var(--c-ice); }
.adv:last-child .adv__text { max-width: 640px; color: color-mix(in srgb, var(--c-paper) 68%, transparent); }
.adv:last-child::before { display: none; }

/* Схема «цикл жизни продукта»: пять узлов — пять карточек справа (тот же порядок и те же иконки) —
   на кольце вокруг ракеты. Штрих колец и спиц бежит, два спутника обходят кольцо, узлы вспыхивают
   по очереди, ядро дышит. Наведение на карточку справа зажигает её узел (:has()). Позиция узла —
   атрибут transform, поэтому CSS-transform на группе узла не анимируется (он перекрыл бы атрибут);
   увеличение при наведении — у внутреннего rect. Периоды штриха кратны длине пунктира — цикл
   бесшовный. */
.adv__cycle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.adv__node-stop--a { stop-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-deep)); }
.adv__node-stop--b { stop-color: color-mix(in srgb, var(--c-night-1) 78%, var(--c-accent-2)); }
.adv__orbit { fill: none; stroke: var(--c-accent); stroke-width: 2; opacity: .24; }
.adv__ring {
  fill: none;
  stroke: var(--c-accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 24 18;
  opacity: .78;
  animation: adv-ring-1 9s linear infinite;
}
.adv__ring--2 { stroke: var(--c-ice); stroke-width: 1.5; stroke-dasharray: 8 18; opacity: .38; animation: adv-ring-2 13s linear infinite; }
.adv__spokes { fill: none; stroke: var(--c-paper); stroke-width: 1.6; stroke-linecap: round; opacity: .18; }
.adv__spokes--flow { stroke: var(--c-accent-2); stroke-width: 2; stroke-dasharray: 10 14; opacity: 1; animation: adv-spokes 7s linear infinite; }
.adv__sats { transform-box: fill-box; transform-origin: center; animation: adv-orbit 12s linear infinite; }
.adv__sat { fill: var(--c-ice); opacity: .94; }
.adv__sat--2 { fill: var(--c-accent-2); opacity: .56; }
.adv__core { transform-box: fill-box; transform-origin: center; animation: adv-core 6s ease-in-out infinite; }
.adv__core-disc { fill: color-mix(in srgb, var(--c-deep) 74%, var(--c-accent)); stroke: var(--c-accent-2); stroke-width: 2; }
.adv__core-inner { fill: var(--c-night-1); opacity: .58; }
.adv__core-icon { fill: var(--c-ice); }
.adv__node { animation: adv-node 8s ease-in-out infinite; }
.adv__node--2 { animation-delay: -1.4s; }
.adv__node--3 { animation-delay: -2.8s; }
.adv__node--4 { animation-delay: -4.2s; }
.adv__node--5 { animation-delay: -5.6s; }
.adv__node-box {
  fill: url(#adv-node-fill);
  stroke: var(--c-accent-2);
  stroke-width: 1.7;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), stroke .3s ease;
}
.adv__node-icon { fill: var(--c-paper); }
/* Наведение на карточку справа → её узел; порядок карточек и узлов совпадает. */
#advantages .grid:has(.adv:nth-child(1):hover) .adv__node--1,
#advantages .grid:has(.adv:nth-child(2):hover) .adv__node--2,
#advantages .grid:has(.adv:nth-child(3):hover) .adv__node--3,
#advantages .grid:has(.adv:nth-child(4):hover) .adv__node--4,
#advantages .grid:has(.adv:nth-child(5):hover) .adv__node--5 {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 18px var(--c-accent-2));
}
#advantages .grid:has(.adv:nth-child(1):hover) .adv__node--1 .adv__node-box,
#advantages .grid:has(.adv:nth-child(2):hover) .adv__node--2 .adv__node-box,
#advantages .grid:has(.adv:nth-child(3):hover) .adv__node--3 .adv__node-box,
#advantages .grid:has(.adv:nth-child(4):hover) .adv__node--4 .adv__node-box,
#advantages .grid:has(.adv:nth-child(5):hover) .adv__node--5 .adv__node-box { transform: scale(1.1); stroke: var(--c-ice); }
@keyframes adv-ring-1 { to { stroke-dashoffset: -252; } }
@keyframes adv-ring-2 { to { stroke-dashoffset: 208; } }
@keyframes adv-spokes { to { stroke-dashoffset: -144; } }
@keyframes adv-orbit { to { transform: rotate(360deg); } }
@keyframes adv-core {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px var(--c-accent)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 24px var(--c-accent-2)); }
}
@keyframes adv-node {
  0%, 100% { opacity: .76; filter: drop-shadow(0 0 2px var(--c-accent)); }
  45%, 60% { opacity: 1; filter: drop-shadow(0 0 16px var(--c-accent-2)); }
}

/* --- 14. Не каждой задаче нужен AI ---------------------------------------- */

.accent {
  position: relative;
  overflow: visible;
  padding: clamp(40px, 4vw, 80px) clamp(30px, 3vw, 60px);
  border-radius: var(--radius-xl);
  background-color: var(--c-accent-2);
  background-image: url('../img/mockup/bg-04.webp?v=8bd014de');
  background-size: cover;
  background-position: center;
}
.accent__art {
  position: absolute;
  right: 2vw;
  top: 50%;
  z-index: 2;
  width: min(900px, 48%);
  opacity: .96;
  transform: translate(0, -50%);
  filter: drop-shadow(0 40px 80px color-mix(in srgb, var(--c-night-1) 34%, transparent));
  pointer-events: none;
  animation: sd-swim-y 17s ease-in-out infinite;
}
.accent__body { position: relative; max-width: 60%; }
.accent__title {
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 3.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--c-pure);
}
.accent__text,
.accent__claim {
  max-width: 640px;
  font-size: clamp(16px, 1.2vw, 21px);
  line-height: 1.6;
}
.accent__text { margin-top: 26px; color: color-mix(in srgb, var(--c-pure) 85%, transparent); }
.accent__claim { margin-top: 18px; font-weight: var(--fw-bold); color: var(--c-pure); }
.accent__btn { margin-top: 36px; }

/* --- 15. Разбор задачи и калькулятор --------------------------------------- */

.pilot__what {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 2.4vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-paper);
}
.pilot__what-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-ice);
}
.pilot__what-text { font-size: 18px; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 72%, transparent); }

.pilot__diff { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ice-16); }
.pilot__diff > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-semibold);
  font-size: 17px;
  color: var(--c-ice);
  cursor: pointer;
  list-style: none;
}
.pilot__diff > summary::-webkit-details-marker { display: none; }
.pilot__diff > summary .i { font-size: 26px; transition: transform .25s ease; }
.pilot__diff[open] > summary .i { transform: rotate(180deg); }
.pilot__diff p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--c-paper) 72%, transparent); }

.pilot__terms {
  grid-column: span 7;
  display: grid;
  gap: 0;
  padding: clamp(10px, 1vw, 16px) clamp(26px, 2.4vw, 40px);
}
.pilot__term {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--deep-10);
}
.pilot__term:first-child { border-top: 0; }
.pilot__term dt { font-weight: var(--fw-bold); font-size: 17px; line-height: 1.4; color: var(--c-accent); }
.pilot__term dd { font-size: 17px; line-height: 1.55; color: var(--text-body); }

.pilot__why {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.why { padding: clamp(24px, 2vw, 32px); }
.why__title { font-weight: var(--fw-bold); font-size: 21px; line-height: 1.25; }
.why__text { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--text-body); }

/* Калькулятор — отдельная тёмная карточка, как в макете. */
.calc {
  margin-top: clamp(72px, 6.5vw, 124px);
  padding: clamp(30px, 2.8vw, 52px);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--c-night-4) 0%, var(--c-deep) 46%, var(--c-night-2) 100%);
  color: var(--c-paper);
}
.calc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 2.6vw, 40px);
}
.calc__title { max-width: 820px; font-size: clamp(28px, 3vw, 52px); line-height: 1.08; }
.calc__note {
  max-width: 330px;
  font-size: 17px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-paper) 50%, transparent);
}

.calc__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

/* Поле с плавающей подписью: подпись стоит в поле, пока оно пустое и не в
   фокусе, и поднимается над значением, как только в нём что-то есть. В макете
   это делал скрипт конструктора; здесь — :placeholder-shown, без JS. */
.float {
  position: relative;
  display: block;
  height: 66px;
  border-radius: 18px;
  background: var(--c-paper);
  cursor: text;
  transition: background .2s;
}
.float:hover { background: var(--c-sky-3); }
.float__input {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  width: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: var(--fw-semibold);
  font-size: 17px;
  color: var(--text);
  outline: none;
}
.float__label {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease;
}
.float__input:focus + .float__label,
.float__input:not(:placeholder-shown) + .float__label { top: 22px; font-size: 13px; }
.float:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.float__input:focus-visible { outline: none; }

.float--area { height: auto; min-height: 136px; }
.float--area .float__input {
  top: 42px;
  bottom: 16px;
  left: 18px;
  right: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 58px);
  min-height: 72px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  resize: none;
}
.float--area .float__label { left: 18px; top: 30px; }
.float--area .float__input:focus + .float__label,
.float--area .float__input:not(:placeholder-shown) + .float__label { top: 25px; font-size: 13px; }

/* Поля калькулятора — крупнее и на тёмном. */
.float--calc {
  height: 88px;
  border: 1px solid var(--ice-16);
  border-radius: var(--radius-m);
  background: var(--paper-09);
}
.float--calc:hover { background: var(--paper-14); }
.float--calc .float__input {
  left: 18px;
  right: 18px;
  bottom: 16px;
  width: calc(100% - 36px);
  font-size: 21px;
  color: var(--c-paper);
  -moz-appearance: textfield;
  appearance: textfield;
}
.float--calc .float__input::-webkit-outer-spin-button,
.float--calc .float__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.float--calc .float__label { left: 18px; right: 18px; font-size: 20px; color: color-mix(in srgb, var(--c-paper) 62%, transparent); }
.float--calc .float__input:focus + .float__label,
.float--calc .float__input:not(:placeholder-shown) + .float__label { top: 24px; font-size: 15px; }
.float--calc:focus-within { outline-color: var(--c-ice); }

.calc__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(24px, 2.6vw, 44px);
  margin-top: clamp(16px, 1.6vw, 22px);
  padding: clamp(26px, 2.4vw, 36px) clamp(28px, 2.6vw, 40px);
  border-radius: var(--radius-l);
  background-color: var(--c-accent-2);
  background-image:
    linear-gradient(105deg, color-mix(in srgb, var(--c-accent) 50%, transparent), color-mix(in srgb, var(--c-accent-2) 25%, transparent)),
    url('../img/mockup/bg-06.webp?v=1f64a769');
  background-size: cover;
  background-position: center;
  color: var(--c-paper);
}
.calc__out + .calc__out { margin-left: clamp(24px, 4vw, 90px); }
.calc__value {
  font-weight: var(--fw-extrabold);
  font-size: clamp(32px, 2.8vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.calc__label { margin-top: 8px; font-size: 18px; color: color-mix(in srgb, var(--c-paper) 85%, transparent); }
.calc__btn {
  margin-left: auto;
  padding: 18px 32px;
  background: var(--c-white);
  color: var(--c-accent);
  font-size: 18px;
}
.calc__btn:hover { background: var(--c-paper); color: var(--c-accent); }
.calc__btn .i { font-size: 19px; }
.calc__state {
  margin-top: 14px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

/* --- 16. Безопасность и технологии ----------------------------------------- */

.sec { grid-column: span 3; padding: clamp(24px, 2vw, 32px); }
.sec__title {
  margin-top: 20px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.sec__text { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--text-body); }

.tech {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: clamp(72px, 6.5vw, 124px);
}
.tech__main { padding: clamp(30px, 2.8vw, 52px); border-radius: var(--radius-xl); background: var(--c-white); }
.tech__title { margin-bottom: clamp(26px, 2.4vw, 40px); font-size: clamp(28px, 3vw, 52px); }
.tech__groups {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.tech__group {
  grid-column: span 2;
  padding: clamp(22px, 1.8vw, 28px);
  border-radius: var(--radius-l);
  background: var(--c-sky-2);
}
.tech__group:nth-child(-n + 2) { grid-column: span 3; }
.tech__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  color: var(--c-accent);
}
/* Первая группа — «AI» на картинке, как в макете. */
.tech__group:first-child {
  background-color: var(--c-accent);
  background-image: url('../img/mockup/bg-04.webp?v=8bd014de');
  background-size: cover;
  background-position: center;
}
.tech__group:first-child .tech__label { font-size: 17px; line-height: 1.3; color: var(--c-ice); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--c-pure);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.3;
  color: var(--deep-78);
}
.chip .i { font-size: 18px; color: var(--c-accent); }
.tech__group:first-child .chip { font-weight: var(--fw-semibold); color: var(--text); }
.tech__group:first-child .chip .i { color: inherit; }
.chip--more { color: var(--text-muted); }
.chip--more .i { color: color-mix(in srgb, var(--c-accent) 55%, transparent); }

.tech__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(300px, 26vw, 460px);
  border-radius: var(--radius-xl);
  background-color: var(--c-night-1);
  background-image: url('../img/mockup/bg-08.webp?v=16514cc3');
  background-size: cover;
  background-position: center;
}
/* Схема «AI внутри инфраструктуры клиента» (2026-10-19; вариант GPT-5.5, полученный через
   OpenRouter, — выбор владельца, дополнение ADR-0005): рамка — контур клиента, четыре системы по
   кресту вокруг AI-модуля, бегущий штрих связей, пульс модуля и скобок, узлы вспыхивают по очереди.
   Наведение на группу слева зажигает её узел (:has()). Тёмный слой, сетка и свечение — ::before
   фигуры, схема (meet) целиком; иллюстрация и фон макета — текстурой под ними. */
.tech__media img { opacity: .2; filter: saturate(.85); }
.tech__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 52% 56% at 50% 50%, color-mix(in srgb, var(--c-accent-2) 30%, transparent), color-mix(in srgb, var(--c-accent) 12%, transparent) 55%, transparent 78%),
    linear-gradient(color-mix(in srgb, var(--c-paper) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-paper) 5%, transparent) 1px, transparent 1px),
    linear-gradient(160deg, color-mix(in srgb, var(--c-night-1) 88%, transparent), color-mix(in srgb, var(--c-deep) 78%, transparent));
  background-size: 100% 100%, 36px 36px, 36px 36px, 100% 100%;
}
.tech__scheme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tech__sys-stop--a { stop-color: color-mix(in srgb, var(--c-deep) 68%, var(--c-accent)); }
.tech__sys-stop--b { stop-color: color-mix(in srgb, var(--c-night-1) 76%, var(--c-accent-2)); }
.tech__frame { fill: color-mix(in srgb, var(--c-deep) 42%, var(--c-night-1)); stroke: var(--c-accent); stroke-width: 1.8; stroke-opacity: .45; }
.tech__frame--inner { fill: none; stroke: var(--c-paper); stroke-width: 1.5; stroke-opacity: .12; }
.tech__link { fill: none; stroke: var(--c-paper); stroke-width: 1.7; stroke-linecap: round; opacity: .22; }
.tech__flow {
  fill: none;
  stroke: var(--c-accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 12 14;
  animation: tech-flow-a 8s linear infinite;
}
.tech__flow--b { stroke: var(--c-ice); stroke-width: 1.5; stroke-dasharray: 4 18; opacity: .65; animation: tech-flow-b 11s linear infinite; }
/* Узлы систем пронумерованы как группы слева: 2 — данные, 3 — инфраструктура, 4 — бизнес-системы, 5 — каналы. */
.tech__sys { animation: tech-sys 8.5s ease-in-out infinite; }
.tech__sys--2 { animation-delay: -1.7s; }
.tech__sys--4 { animation-delay: -3.4s; }
.tech__sys--5 { animation-delay: -5.1s; }
.tech__sys-box {
  fill: url(#tech-sys-fill);
  stroke: var(--c-accent-2);
  stroke-width: 1.7;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), stroke .3s ease;
}
.tech__sys-icon { fill: var(--c-paper); }
.tech__ai { transform-box: fill-box; transform-origin: center; animation: tech-ai 6.5s ease-in-out infinite; }
.tech__ai-box { fill: color-mix(in srgb, var(--c-accent) 24%, var(--c-deep)); stroke: var(--c-accent-2); stroke-width: 2; }
.tech__ai-ring { fill: none; stroke: var(--c-ice); stroke-width: 1.8; stroke-dasharray: 8 12; opacity: .78; animation: tech-ai-ring 10s linear infinite; }
.tech__ai-inner { fill: var(--c-night-1); opacity: .62; }
.tech__ai-icon { fill: var(--c-ice); }
.tech__ai-badge { fill: var(--c-accent-2); opacity: .9; }
.tech__bracket { fill: none; stroke: var(--c-accent-2); stroke-width: 1.8; stroke-linecap: round; animation: tech-bracket 9s ease-in-out infinite; }
/* Наведение на группу слева → её узел: группа 1 (AI) — центр, группы 2–5 — системы. */
.tech:has(.tech__group:nth-child(1):hover) .tech__ai { animation: none; filter: drop-shadow(0 0 26px var(--c-accent-2)); }
.tech:has(.tech__group:nth-child(2):hover) .tech__sys--2,
.tech:has(.tech__group:nth-child(3):hover) .tech__sys--3,
.tech:has(.tech__group:nth-child(4):hover) .tech__sys--4,
.tech:has(.tech__group:nth-child(5):hover) .tech__sys--5 {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 16px var(--c-accent-2));
}
.tech:has(.tech__group:nth-child(2):hover) .tech__sys--2 .tech__sys-box,
.tech:has(.tech__group:nth-child(3):hover) .tech__sys--3 .tech__sys-box,
.tech:has(.tech__group:nth-child(4):hover) .tech__sys--4 .tech__sys-box,
.tech:has(.tech__group:nth-child(5):hover) .tech__sys--5 .tech__sys-box { transform: scale(1.08); stroke: var(--c-ice); }
@keyframes tech-flow-a { to { stroke-dashoffset: -156; } }
@keyframes tech-flow-b { to { stroke-dashoffset: 132; } }
@keyframes tech-ai-ring { to { stroke-dashoffset: -200; } }
@keyframes tech-ai {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px var(--c-accent)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 24px var(--c-accent-2)); }
}
@keyframes tech-bracket {
  0%, 100% { opacity: .48; filter: drop-shadow(0 0 4px var(--c-accent)); }
  50% { opacity: .9; filter: drop-shadow(0 0 14px var(--c-accent-2)); }
}
@keyframes tech-sys {
  0%, 100% { opacity: .74; filter: drop-shadow(0 0 2px var(--c-accent)); }
  45%, 60% { opacity: 1; filter: drop-shadow(0 0 14px var(--c-accent-2)); }
}

/* --- 17. Частые вопросы ---------------------------------------------------- */

/* Переработка 2026-10-19 (дополнение ADR-0005): левая колонка больше не растягивается на всю
   высоту списка (было 640 px пустой тёмной фигуры), фигура — 4:3 под текстом, колонка прилипает к
   верху под шапкой; ряды вопросов ниже (стрелка 48 px раздувала ряд до 102 px), первый вопрос
   открыт в разметке — цена видна сразу; появились состояния наведения и открытого вопроса и
   кнопка ассистента. overflow: clip, а не hidden: clip режет фон по скруглению, но не делает
   панель прокручиваемым контейнером, иначе sticky не работал бы. */
.faq {
  position: relative;
  overflow: clip;
  padding: clamp(30px, 2.8vw, 52px);
  border-radius: var(--radius-xl);
  background-color: var(--c-deep);
  background-image:
    linear-gradient(150deg, color-mix(in srgb, var(--c-deep) 72%, transparent), color-mix(in srgb, var(--c-deep) 94%, transparent)),
    url('../img/mockup/bg-12.webp?v=64554ba4');
  background-size: cover;
  background-position: center;
  color: var(--c-paper);
}
.faq__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 44px);
  align-items: start;
}
.faq__aside {
  grid-column: span 4;
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq__title { font-size: clamp(28px, 2.6vw, 48px); }
.faq__more { font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--c-paper) 62%, transparent); }
.faq__more a { color: var(--c-ice); font-weight: var(--fw-bold); text-decoration: none; }
.faq__more a:hover { color: var(--c-white); }
.faq__ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 11px 20px 11px 14px;
  border: 1px solid var(--ice-40);
  border-radius: var(--radius-pill);
  background: var(--ice-10);
  color: var(--c-ice);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.faq__ask .i { font-size: 22px; }
.faq__ask:hover { background: var(--ice-16); border-color: var(--c-ice); transform: translateY(-1px); }
.faq__ask:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 3px; }
.faq__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-top: 4px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--c-paper) 6%, transparent);
}

/* Персонаж ассистента в фигуре (вариант FC, выбор владельца 2026-10-19 из семи: три своих и четыре
   от моделей через OpenRouter): кадр «думает» плывёт, за ним дышит свечение и расходятся кольца, в
   облаке мысли точки сменяются галочкой — «спросите, ответ будет». Нажатие открывает диалог, фигура —
   кнопка. Картинка — кадр shark-think набора ассистента, копии 480/720 собирает build-images.py.
   Селектор с .faq__media — чтобы перебить общее правило картинок фигур (inset: 0, cover). */
.faq__shark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 60% at 42% 62%, color-mix(in srgb, var(--c-accent-2) 28%, transparent), color-mix(in srgb, var(--c-accent) 10%, transparent) 50%, transparent 78%),
    color-mix(in srgb, var(--c-deep) 60%, var(--c-night-1));
  cursor: pointer;
}
.faq__shark:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 3px; }
.faq__shark-glow {
  position: absolute;
  left: 18%;
  top: 36%;
  width: 50%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-2) 45%, transparent), transparent);
  filter: blur(18px);
  animation: faq-glow 6s ease-in-out infinite;
}
.faq__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.faq__ring { fill: none; stroke: var(--c-ice); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: faq-ring 6s ease-out infinite; }
.faq__ring--2 { animation-delay: -3s; }
.faq__media .faq__shark-img {
  position: absolute;
  left: 4%;
  right: auto;
  top: auto;
  bottom: 6%;      /* персонаж целиком внутри фигуры — замечание владельца 2026-10-19 */
  width: 60%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--c-night-1) 55%, transparent));
  transition: scale .45s var(--ease);
  animation: faq-float 6s ease-in-out infinite alternate;
}
.faq__shark:hover .faq__shark-img { scale: 1.03; }
.faq__bubble {
  position: absolute;
  right: 6%;
  top: 7%;
  width: 34%;
  height: auto;
  transform-origin: 20% 95%;
  animation: faq-bubble 12s var(--ease) infinite;
}
.faq__bubble-cloud, .faq__bubble-tail { fill: var(--c-paper); }
.faq__bubble-dot { fill: var(--c-accent); transform-box: fill-box; transform-origin: center; animation: faq-dot 1.3s ease-in-out infinite, faq-dots 12s linear infinite; }
.faq__bubble-dot--2 { animation-delay: .2s, 0s; }
.faq__bubble-dot--3 { animation-delay: .4s, 0s; }
.faq__bubble-ok { transform-box: fill-box; transform-origin: center; animation: faq-ok 12s var(--ease) infinite; }
.faq__bubble-ok circle { fill: var(--c-accent); }
.faq__bubble-ok use { fill: var(--c-paper); }
@keyframes faq-float { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes faq-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes faq-ring { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.5); opacity: 0; } }
@keyframes faq-bubble { 0%, 4% { opacity: 0; transform: scale(.6); } 10%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes faq-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes faq-dots { 0%, 58% { visibility: visible; } 62%, 100% { visibility: hidden; } }
@keyframes faq-ok { 0%, 58% { opacity: 0; transform: scale(.3); } 64% { opacity: 1; transform: scale(1.12); } 68%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }

.faq__list { grid-column: span 8; display: flex; flex-direction: column; gap: 12px; }

.qa {
  padding: 0 clamp(20px, 1.6vw, 28px);
  border: 1px solid var(--ice-16);
  border-radius: var(--radius-l);
  background: var(--paper-09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .25s ease, border-color .25s ease;
}
.qa:hover { background: var(--paper-14); border-color: var(--ice-22); }
.qa[open] { background: color-mix(in srgb, var(--c-paper) 12%, transparent); border-color: var(--ice-40); }
.qa > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.35;
  color: var(--c-paper);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover, .qa[open] > summary { color: var(--c-ice); }
.qa > summary:focus-visible { outline: 2px solid var(--c-ice); outline-offset: 6px; border-radius: 10px; }
.qa__q { flex: 1; }
/* Стрелка в круглой кнопке 40 px: у открытого вопроса кнопка заливается и поворачивается. */
.qa__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--ice-22);
  border-radius: 50%;
  background: var(--paper-07);
  color: var(--c-ice);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--ease);
}
.qa__chevron { font-size: 24px; }
.qa > summary:hover .qa__toggle { border-color: var(--ice-40); }
.qa[open] .qa__toggle { background: var(--c-ice); border-color: var(--c-ice); color: var(--c-deep); transform: rotate(180deg); }
.qa__a {
  max-width: 840px;
  padding: 0 0 22px;
  font-size: 18px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--c-paper) 75%, transparent);
  animation: sd-open .42s var(--ease);
}

/* Плавное раскрытие ведёт faq.js (Web Animations API, высота details): открывающийся вопрос растёт,
   закрывающийся сжимается одновременно. Прежний вариант на ::details-content работал только в новых
   Chrome, а сосед по name="faq" всё равно схлопывался рывком. Пока вопрос закрывается, у него класс
   is-closing — выглядит уже закрытым, хотя атрибут open ещё стоит. */
.qa.is-closing { background: var(--paper-09); border-color: var(--ice-16); }
.qa.is-closing > summary { color: var(--c-paper); }
.qa.is-closing .qa__toggle { background: var(--paper-07); border-color: var(--ice-22); color: var(--c-ice); transform: none; }

/* --- 18. Заявка ------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 2.8vw, 52px);
  border-radius: var(--radius-xl);
  background-color: var(--c-deep);
  background-image:
    linear-gradient(120deg, color-mix(in srgb, var(--c-deep) 92%, transparent), color-mix(in srgb, var(--c-accent) 50%, transparent)),
    url('../img/mockup/bg-05.webp?v=05e03583');
  background-size: cover;
  background-position: center;
  color: var(--c-paper);
}
.contact__art {
  position: absolute;
  right: -60px;
  top: -120px;
  width: min(520px, 32%);
  opacity: .35;
  pointer-events: none;
  animation: sd-float 14s ease-in-out infinite;
}
.contact__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.contact__title { max-width: 920px; font-size: clamp(28px, 3vw, 52px); line-height: 1.05; }
/* Прямые контакты — подпись и три пилюли-ссылки (2026-10-19, проверка раздела): раньше строка с «·»
   между ссылками при переносе начинала строку с точки. Пилюли переносятся по одной, минимум 44 px
   в высоту — удобно нажимать. Цвет подписи .8 — в макете .62 ниже AA справа, где фон светлее. */
.contact__direct { display: flex; flex-direction: column; gap: 10px; }
.contact__direct-lead { font-size: 18px; line-height: 1.4; color: color-mix(in srgb, var(--c-paper) 80%, transparent); }
.contact__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--ice-40);
  border-radius: var(--radius-pill);
  background: var(--ice-10);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.2;
  color: var(--c-ice);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.contact__link:hover { background: var(--ice-16); border-color: var(--c-ice); color: var(--c-white); transform: translateY(-1px); }
.contact__link:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 3px; }

.contact__card {
  position: relative;
  margin-top: clamp(28px, 2.4vw, 40px);
  padding: clamp(24px, 2vw, 32px);
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: var(--text);
}

.form { display: flex; flex-direction: column; gap: 12px; }
/* min(): форма на телефоне уже 260 px (243 при 375, 188 при 320) — поля не вылезают за карточку (2026-10-31). */
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; align-items: start; }
.form__row--task { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
.form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Подсказка-пример под полем задачи (решение владельца 2026-10-19): пустое поле не говорило, что писать. */
.form__hint { padding: 0 4px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.form__error {
  padding: 0 4px;
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-error);
}
/* Обязательные поля помечены звёздочкой: до ошибки посетитель не знал, что обязательно (2026-10-19). */
.form .float:has(.float__input:required) .float__label::after { content: " *"; color: var(--c-accent); }
.float__input.is-invalid { color: var(--c-error); }
.float:has(.is-invalid) { box-shadow: inset 0 0 0 1.5px var(--c-error); }

/* Бюджет: четыре чипа макета — это радиокнопки, чтобы выбор работал с
   клавиатуры и без JS. */
.budget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 18px;
  background: var(--c-sky-5);
}
.budget__label {
  float: left;
  width: 100%;
  padding: 0;
  font-weight: var(--fw-semibold);
  font-size: 18px;
  color: var(--text-muted);
}
.budget__options { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.budget__option { position: relative; display: inline-flex; }
.budget__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.budget__option span {
  padding: 11px 18px;
  border: 1.5px solid var(--deep-16);
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-deep) 70%, transparent);
  transition: background .2s, border-color .2s, color .2s;
}
.budget__option input:hover + span { border-color: var(--accent-45); }
.budget__option input:checked + span {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-pure);
}
.budget__option input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

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

/* Согласие — вместо строки макета «Нажимая кнопку, вы соглашаетесь…»:
   по статье 9 152-ФЗ согласие даётся отдельным действием. */
.consent { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.consent__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.consent__box {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.consent__label a { color: var(--c-accent); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.form__promise {
  flex: 1;
  /* min(): на телефоне форма уже 280 px (243 при 375, 188 при 320) — текст не вылезает за карточку (2026-10-31). */
  min-width: min(280px, 100%);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
}
.form__status {
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--c-alert) 35%, transparent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--c-alert) 10%, transparent);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--c-error);
}

/* Экран после отправки. Два варианта: заявка ушла на приёмник — или, пока
   приёмника нет, открылось письмо, которое отправляет сам посетитель. */
.form__done { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; outline: none; }
.form__done-title { font-weight: var(--fw-extrabold); font-size: 30px; line-height: 1.2; color: var(--c-accent); }
.form__done p { font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--c-deep) 70%, transparent); }
.form__done > div { display: flex; flex-direction: column; gap: 14px; }
.form__back { align-self: flex-start; margin-top: 6px; }

/* --- 19. Подвал ------------------------------------------------------------- */
/* Компактный подвал (2026-10-19, по замечанию владельца): три яруса — логотип с описанием и
   контакты в строку; четыре колонки ссылок (навигация, услуги, отрасли, документы);
   реквизиты одной строкой рядом с копирайтом. Вся информация прежняя, высота вдвое меньше. */

.footer {
  max-width: var(--shell);
  margin: clamp(48px, 4vw, 72px) auto 0;
  padding: clamp(28px, 2.6vw, 40px) clamp(28px, 3vw, 48px) clamp(20px, 2vw, 26px);
  border-radius: var(--radius-xl);
  background: var(--c-night-1);
  color: var(--c-paper);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px 40px;
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--ice-10);
}
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; max-width: 760px; }
.footer__logo { display: inline-flex; flex: none; }
.footer__logo img { width: auto; height: 30px; }
.footer__tagline {
  flex: 1 1 320px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--on-dark-faint);
}
.footer__label {
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
/* «Услуги» и «Отрасли» над списками — ссылки на оглавления, вид — как у подписи. */
.footer__label a { color: inherit; text-decoration: none; }
.footer__label a:hover { color: var(--c-ice); }
.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 12px;
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.4;
  color: var(--on-dark-body);
}
.footer__contacts a { color: var(--c-ice); text-decoration: none; }
.footer__contacts a:hover { color: var(--c-white); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 32px;
  padding: clamp(22px, 2vw, 30px) 0;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.4;
}
/* Документы только языковой версии — продолжение того же списка, без второго верхнего отступа (2026-10-31). */
.footer__links--local { margin-top: 8px; }
.footer__links a { color: color-mix(in srgb, var(--c-paper) 72%, transparent); text-decoration: none; }
.footer__links a:hover { color: var(--c-ice); }
.footer__cookie { margin-top: 10px; font-size: 16px; }
.footer__cookie .link-btn { font-size: inherit; font-weight: var(--fw-medium); color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.footer__cookie .link-btn:hover { color: var(--c-ice); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--ice-10);
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-faint);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.footer__legal .footer__label { font-size: 12px; }
.footer__req { display: flex; flex-wrap: wrap; gap: 4px 0; }
.footer__req > li + li::before { content: "·"; margin: 0 10px; opacity: .6; }
.footer__copy { flex: 1 1 280px; text-align: right; }

/* Печатный логотип не грузится на экране: файл подставляется фоном ниже,
   внутри @media print. */
.logo-print { display: none; }


/* --- 20. Страницы документов (privacy.html, consent.html) ------------------- */

.header__back { margin-left: auto; }

.doc-page .main { max-width: var(--shell); margin: 0 auto; }
.doc-page .section {
  padding: clamp(28px, 4vw, 72px) clamp(20px, 4vw, 72px);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}
.doc-page .container { max-width: 880px; margin: 0 auto; }
.doc .contacts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  padding: 18px 22px;
  border-radius: var(--radius-m);
  background: var(--c-paper);
  font-size: 17px;
}
.doc .contacts dt { font-weight: var(--fw-semibold); color: var(--text); }
.doc strong { font-weight: var(--fw-semibold); color: var(--text); }
.doc__head { display: flex; flex-direction: column; gap: 16px; }
.doc__eyebrow {
  font-weight: var(--fw-semibold);
  font-size: 15px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
.doc__title {
  font-weight: var(--fw-extrabold);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.doc__lead { font-size: 19px; line-height: 1.6; color: var(--text-body); }
.doc__meta { font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.doc {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: clamp(32px, 3vw, 48px);
  font-size: 18px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--c-deep) 80%, transparent);
}
.doc__part { display: flex; flex-direction: column; gap: 12px; }
.doc h2 {
  margin-top: 8px;
  font-weight: var(--fw-bold);
  font-size: clamp(21px, 1.6vw, 26px);
  line-height: 1.25;
  color: var(--text);
}
.doc h3 { font-weight: var(--fw-bold); font-size: 19px; line-height: 1.3; color: var(--text); }
.doc ul, .doc ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.3em; }
.doc table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { padding: 10px 12px; border-top: 1px solid var(--deep-10); text-align: left; vertical-align: top; }
.doc th { font-weight: var(--fw-semibold); color: var(--text); }
/* Длинные имена (ключи хранилища, cookie) переносятся внутри узкой колонки на телефоне (Cookie Notice, 2026-10-31). */
.doc td code { overflow-wrap: anywhere; }

.footer--doc .contacts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  font-size: 17px;
  line-height: 1.6;
}
.footer--doc .contacts dt { font-weight: var(--fw-bold); color: var(--on-dark-faint); }
.footer--doc .contacts dd { color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.footer--doc a { color: var(--c-ice); text-decoration: none; }
.footer--doc a:hover { color: var(--c-white); }
.footer--doc .footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* --- 20а. Баннер согласия на аналитику ---------------------------------------
   Его строит consent.js (ADR-0008). Не модальный: страницу не перекрывает и фокус
   не забирает. Тёмная плашка читается поверх любого блока; текст и ссылка — роли
   тёмных карточек (--on-dark-body, --c-ice на --c-deep), их меряет check-contrast.py. */
.cookie-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(520px, calc(100% - 32px));
  padding: 22px 24px;
  border-radius: var(--radius-l);
  background: var(--c-deep);
  color: var(--on-dark-body);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--c-night-1) 40%, transparent);
  font-size: 16px;
  line-height: 1.5;
}
.cookie-bar__text a { color: var(--c-ice); }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* На телефоне плашка ниже: прижата к краям, текст плотнее, кнопки в одну строку по 44 px —
   меньше закрывает первый экран (2026-10-14). Текст тот же: он согласован с разделом 7 политики. */
@media (max-width: 479px) {
  .cookie-bar {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    gap: 10px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.42;
  }
  .cookie-bar__actions { flex-wrap: nowrap; gap: 8px; }
  .cookie-bar__actions .btn { flex: 1 1 0; min-height: 44px; padding-block: 8px; padding-inline: 12px; }
}
/* «Настройки cookie» в подвале — кнопка (открывает баннер, а не ведёт по адресу),
   оформленная как ссылки рядом с ней. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* .footer__cookie — в разделе 19 (компактный подвал, 2026-10-19). */
.footer__cookie .link-btn { color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.footer__cookie .link-btn:hover { color: var(--c-ice); }
.footer--doc .link-btn { color: var(--c-ice); }
.footer--doc .link-btn:hover { color: var(--c-white); }

/* --- 20б. Страницы услуг ----------------------------------------------------
   Их собирает scripts/build-services.py (ADR-0009) почти целиком из компонентов главной;
   здесь — только то, чего на главной нет. */

/* Пункты блока «Услуги» на главной, у которых есть своя страница. */
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color .2s, text-decoration-color .2s;
}
.svc-link .i { font-size: 18px; opacity: .75; transition: transform .2s var(--ease); }
.svc-link:hover { text-decoration-color: currentColor; }
.svc-link:hover .i { transform: translateX(3px); }
/* Заголовок карточки «Разработка / Поддержка / Развитие» — ссылка на свою страницу (2026-10-22, ADR-0016). */
.svc-card__link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.svc-card__link .i { font-size: 20px; opacity: .7; transition: transform .2s var(--ease); }
.svc-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-card__link:hover .i { transform: translateX(3px); }
.svc-ai .svc-link:hover { color: var(--c-ice); }
.svc-card .svc-link:hover { color: var(--c-accent); }

/* Хлебные крошки над заголовком первого экрана. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--on-dark-muted);
}
.crumbs a { color: var(--c-ice); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Блоки страницы идут один за другим, как секции главной. */
.svc-page__tasks { margin-top: 0; }

/* «Когда это подходит» и кейс в одном ряду; без кейса — во всю ширину. */
.fit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-column: span 6;
  padding: clamp(26px, 2.4vw, 40px);
}
.fit--wide { grid-column: span 12; }
.fit__title { font-size: clamp(26px, 2.2vw, 36px); }
.fit__list { font-size: 18px; line-height: 1.55; color: var(--text-body); }
.fit__note { margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.fit__eyebrow {
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
@media (max-width: 899px) {
  .fit { grid-column: span 12; }
}

/* Оглавление /uslugi/ (2026-10-14): карточки страниц услуг по две в ряд, карточка целиком —
   ссылка (ссылка в заголовке растянута на карточку), ниже — остальные направления. */
.hero--short .hero__card { min-height: clamp(420px, 34vw, 520px); }   /* без схемы под текстом */
.hub .task { grid-column: span 6; }
.hub__link { color: inherit; text-decoration: none; }
.hub__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: var(--fw-semibold);
  color: var(--task-icon);
  transition: color .35s var(--ease);
}
.hub__more .i { font-size: 18px; }
.hub__rest {
  display: flex;
  flex-direction: column;
  gap: 22px;
  grid-column: span 12;
  padding: clamp(26px, 2.4vw, 40px);
}
.hub__rest-head { font-size: clamp(26px, 2.2vw, 36px); }
.hub__rest-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hub__rest-title { font-weight: var(--fw-bold); font-size: 20px; }
.hub__rest .dots { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--text-body); }
.hub__rest .svc-link { align-self: flex-start; font-weight: var(--fw-semibold); }
@media (max-width: 699px) {
  .hub .task { grid-column: span 12; }
  .hub__rest-cols { grid-template-columns: 1fr; }
}

/* --- 20в. Релиз 1 волны 2 (2026-10-15, ADR-0011): цены на карточках, факты о компании,
   закреплённая кнопка на телефоне, полоса «стоимость / прототип / разбор» на страницах услуг. */
.svc-ai__note { position: relative; max-width: 440px; margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--on-dark-body); }
.svc-card__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--deep-06); font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.adv__facts { margin-top: clamp(20px, 2vw, 28px); font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.offer { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 22px; }
.offer dt { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-muted); }
.offer dd { margin-top: 4px; font-weight: var(--fw-bold); font-size: 20px; color: var(--on-dark); }
.offer__note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--on-dark-body); }
.hub__offer { margin-top: 14px; font-weight: var(--fw-semibold); font-size: 15px; color: var(--task-text); transition: color .35s var(--ease); }
.sticky-cta { display: none; }
@media (max-width: 899px) {
  .sticky-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 12px;
    z-index: 85;
    display: inline-flex;
    justify-content: center;
    min-height: 52px;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--c-deep) 35%, transparent);
  }
  .sticky-cta.is-hidden, body:has(.cookie-bar) .sticky-cta, body:has(.nav-toggle:checked) .sticky-cta { display: none; }
  .page { padding-bottom: 72px; }
}

/* --- 20г. Релиз 2 волны 2 (2026-10-15, ADR-0013): страницы кейсов /keisy/ и снимок экрана
   в карточке кейса. Карточка `.case` — общая для главной, оглавления и страниц услуг. */
.case { position: relative; }
.case__visual { position: relative; }
/* Обложка собрана build-covers.py под эту карточку: рамка устройства сверху по центру, низ — вылет
   за край, поэтому режем снизу и по бокам, но не сверху (2026-10-18). */
.case__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case__client {
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.case__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  text-decoration: none;
}
.case__link .i { font-size: 18px; transition: transform .2s var(--ease); }
.case__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* ссылка — вся карточка */
.case:hover .case__link .i { transform: translateX(3px); }

/* Первый экран кейса: снимок с телефона вместо объёмного элемента, над заголовком — отрасль и
   заказчик, под лидом — полоса фактов продукта (те же стили, что у «стоимость / прототип»). */
.hero__eyebrow {
  margin-bottom: 14px;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ice);
}
/* Картинка первого экрана кейса — устройство с прозрачным фоном и мягким срезом снизу
   (build-covers.py, 2026-10-18): тень рисуем drop-shadow по силуэту, а не по прямоугольнику. */
.hero--case .hero__art {
  right: 7%;
  top: 48%;
  width: min(380px, 28%);
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  filter: drop-shadow(0 30px 50px color-mix(in srgb, var(--c-night-1) 55%, transparent));
}
.hero--case .hero__body { max-width: min(1100px, 58%); }
/* Витрина (окно веб-версии и два телефона, build-covers.py showcase, 2026-10-29) — на всю правую колонку. */
.hero--case .hero__art--wide { right: 2%; top: 46%; width: min(660px, 44%); }
.offer--facts dd { font-size: 24px; }
.offer--facts div { min-width: 150px; }

/* «Задача» и «Что получилось» — широкая карточка с абзацами или списком. */
.case-block__text { display: flex; flex-direction: column; gap: 14px; max-width: 980px; font-size: 18px; line-height: 1.6; color: var(--text-body); }

/* «Задача» со схемой «было → стало» справа (task.compare, 2026-10-30): приём AI-блока главной —
   «было» светлое с коралловыми крестиками, «стало» тёмное с галочками цвета --c-ice. */
.case-block--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 3.2vw, 56px); }
.case-block__main { display: flex; flex-direction: column; gap: 20px; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; }
.compare__col { display: flex; flex-direction: column; gap: 16px; padding: 24px 22px 26px; border-radius: var(--radius-l); }
.compare__col--before { background: var(--c-sky-2); }
.compare__col--after { background: var(--c-deep); box-shadow: 0 18px 40px var(--accent-16); }
.compare__title { font-weight: var(--fw-semibold); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-body); }
.compare__col--after .compare__title { color: var(--c-ice); }
.compare__list { display: flex; flex-direction: column; gap: 14px; }
.compare__list > li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--text-body); }
.compare__col--after .compare__list > li { color: var(--c-paper); }
.compare__list .i { margin-top: 1px; font-size: 20px; }
.compare__col--before .i { color: var(--c-coral-2); }
.compare--need .compare__col--before .i { color: var(--c-accent); }   /* «Нужно было» — требования, а не недостатки */
.compare__col--after .i { color: var(--c-ice); }
.compare__arrow { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: var(--c-pure); font-size: 22px; }
@media (max-width: 1199px) {
  .case-block--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__arrow { justify-self: center; transform: rotate(90deg); }
}

/* Галерея снимков: первый — во всю ширину, остальные — по два в ряд. */
.shots .shot { grid-column: span 6; overflow: hidden; padding: 0; }
.shots .shot:first-child { grid-column: span 12; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 16px 22px 20px; font-size: 16px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 1199px) {
  .problem__answer, .problem__points { grid-column: span 12; }
  .hero--case .hero__art { width: min(320px, 30%); right: 4%; }
  .hero--case .hero__art--wide { width: 40%; right: 2%; }
}
@media (max-width: 899px) {
  .hero--case .hero__art { display: none; }   /* снимок есть в галерее ниже */
  .hero--case .hero__body { max-width: 100%; }
  .shots .shot { grid-column: span 12; }
}

/* --- 20д. Релиз 4 волны 2 (2026-10-15, ADR-0014): страницы отраслей /otrasli/. Карточки услуг и
   оглавление — стили .hub; на главной слова «в автобизнесе, …» в строке фактов стали ссылками,
   запятые между ними ставит CSS (повторитель клонирует span). */
.adv__industries > span + span::before { content: ", "; }
.adv__facts a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color .2s, text-decoration-color .2s;
}
.adv__facts a:hover { color: var(--c-accent); text-decoration-color: currentColor; }

/* --- 20е. Волна 3 (2026-10-16, ADR-0015): AI-ассистент — персонаж в первом экране, поле
   «Спросите», плавающая кнопка и панель диалога. Все цвета — токены, новых пар текст/фон нет:
   панель — белая карточка, тёмная шапка панели повторяет тёмные карточки макета. */

/* Персонаж вместо объёмного элемента: кнопка-картинка, кадры меняются классами панели.
   Движение в слоях (2026-10-18, дополнение ADR-0015): дрейф (11 с), крен (7 с) и «дыхание» (5 с)
   идут отдельными свойствами translate/rotate/scale с несовпадающими периодами — общий рисунок
   повторяется только раз в несколько минут и не читается как цикл; свечение за персонажем (4,6 с)
   и тень под ним дышат в своём ритме; кадры моргания (6,3 с, две вспышки по ~150 мс) и взмаха
   плавника (9,7 с) проступают поверх основного; .hero__shark-body поворачивается за курсором
   (tilt.js), при наведении персонаж подплывает ближе. prefers-reduced-motion выключает всё. */
.hero__shark {
  position: absolute;
  right: 6%;
  top: 46%;
  z-index: 2;
  width: min(640px, 38%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(-50%);
  animation: shark-drift 11s ease-in-out infinite, shark-breathe 5s ease-in-out infinite;
}
.hero__shark::before {           /* свечение визора и корпуса за персонажем */
  content: "";
  position: absolute;
  inset: 14% 10% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--c-accent-2) 55%, transparent),
              color-mix(in srgb, var(--c-accent) 28%, transparent) 55%,
              transparent 74%);
  filter: blur(26px);
  opacity: .5;
  pointer-events: none;
  animation: shark-glow 4.6s ease-in-out infinite;
}
.hero__shark::after {            /* тень под персонажем — чем выше всплыл, тем бледнее */
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -8%;
  height: 11%;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-night-1) 70%, transparent);
  filter: blur(18px);
  opacity: .42;
  pointer-events: none;
  animation: shark-shadow 11s ease-in-out infinite;
}
.hero__shark-body {               /* крен — здесь, а не на кнопке: тень под персонажем не вращается */
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), scale .45s var(--ease);
  will-change: transform;
  animation: shark-roll 7s ease-in-out infinite alternate;
}
.hero__shark .hero__art { position: static; width: 100%; height: auto; transform: none; animation: none; pointer-events: auto; }
.hero__shark .hero__art--blink,
.hero__shark .hero__art--fin { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Моргание — заплатка только на глаза поверх основного кадра. Взмах — целый кадр с другим хвостом,
   поэтому основной кадр в этот момент гаснет синхронно (иначе хвост двоился бы). */
.hero__shark .hero__art--shark { animation: shark-fin-base 9.7s ease-in-out infinite; }
.hero__shark .hero__art--blink { animation: shark-blink 6.3s steps(1, end) infinite; }
.hero__shark .hero__art--fin { animation: shark-fin 9.7s ease-in-out infinite; }
.hero__shark:hover .hero__shark-body { scale: 1.035; }
.hero__shark:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 8px; border-radius: 40px; }
.hero__shark:hover .hero__art--shark { filter: drop-shadow(0 40px 80px color-mix(in srgb, var(--c-night-1) 45%, transparent)) brightness(1.06); }

@keyframes shark-drift {
  0%   { translate: 0 0; }
  22%  { translate: -14px -16px; }
  48%  { translate: 8px 12px; }
  74%  { translate: 14px -10px; }
  100% { translate: 0 0; }
}
@keyframes shark-roll { from { rotate: -2.2deg; } to { rotate: 2.4deg; } }
@keyframes shark-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.016; } }
@keyframes shark-glow { 0%, 100% { opacity: .42; scale: .96; } 50% { opacity: .72; scale: 1.06; } }
@keyframes shark-shadow {
  0%, 100% { opacity: .42; scale: 1; }
  22%  { opacity: .28; scale: .9; }
  48%  { opacity: .5; scale: 1.05; }
  74%  { opacity: .32; scale: .92; }
}
@keyframes shark-blink {
  0%, 100% { opacity: 0; }
  41%  { opacity: 1; }
  43.5% { opacity: 0; }
  88%  { opacity: 1; }
  90.5% { opacity: 0; }
}
@keyframes shark-fin {              /* взмах — короткое движение: подъём ~0,2 с, пауза, возврат */
  0%, 60%, 100% { opacity: 0; }
  62%, 66% { opacity: 1; }
  68.5% { opacity: 0; }
}
@keyframes shark-fin-base {         /* зеркало shark-fin для основного кадра */
  0%, 60%, 100% { opacity: 1; }
  62%, 66% { opacity: 0; }
  68.5% { opacity: 1; }
}

/* Поле «Спросите ассистента» под кнопками первого экрана. */
.hero__ask {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin-top: clamp(18px, 1.8vw, 26px);
  padding: 6px 6px 6px 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-white) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-paper) 25%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero__ask:focus-within { border-color: var(--c-ice); }
.hero__ask-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--c-paper);
  font: inherit;
  font-size: 16px;
}
.hero__ask-input::placeholder { color: var(--on-dark-muted); }
.hero__ask-input:focus { outline: none; }
.hero__ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-ice);
  color: var(--c-deep);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  cursor: pointer;
}
.hero__ask-btn .i { font-size: 18px; }

/* Плавающая кнопка: персонаж анфас и подпись; на телефоне — над закреплённой кнопкой. */
.assistant-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 86;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-deep);
  color: var(--c-paper);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--c-deep) 35%, transparent);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, padding .35s var(--ease);
}
.assistant-fab img { width: 44px; height: 38px; object-fit: contain; }
.assistant-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 48px color-mix(in srgb, var(--c-deep) 45%, transparent); }
/* После первого экрана кнопка сжимается до значка (решение владельца 2026-10-19: подпись перекрывала
   стрелки списка FAQ): класс is-compact ставит assistant.js по прокрутке, подпись сворачивается и
   раскрывается снова при наведении и фокусе. */
.assistant-fab span { max-width: 240px; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease), opacity .25s ease, margin .35s var(--ease); }
.assistant-fab.is-compact { padding-right: 8px; }
.assistant-fab.is-compact span { max-width: 0; margin-left: -10px; opacity: 0; }
.assistant-fab.is-compact:hover, .assistant-fab.is-compact:focus-visible { padding-right: 18px; }
.assistant-fab.is-compact:hover span, .assistant-fab.is-compact:focus-visible span { max-width: 240px; margin-left: 0; opacity: 1; }
.assistant-fab:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 3px; }
body.has-assistant .assistant-fab, body:has(.nav-toggle:checked) .assistant-fab { display: none; }

/* Панель диалога: белая карточка справа внизу; на телефоне — во весь экран. */
.assistant {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 40px));
  height: min(680px, calc(100vh - 40px));
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-white);
  color: var(--c-deep);
  box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--c-night-1) 50%, transparent);
}
.assistant[hidden] { display: none; }
.assistant__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--grad-hero);
  color: var(--c-paper);
}
.assistant__avatar { width: 56px; height: 48px; object-fit: contain; transition: transform .3s var(--ease); }
.assistant.is-thinking .assistant__avatar { animation: sd-swim-y 2.4s ease-in-out infinite; }
.assistant.is-talking .assistant__avatar { animation: assistant-talk .5s ease-in-out infinite; }
@keyframes assistant-talk {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06) translateY(-2px); }
}
.assistant__who { flex: 1; min-width: 0; }
.assistant__title { font-weight: var(--fw-bold); font-size: 17px; line-height: 1.2; }
.assistant__sub { margin-top: 3px; font-size: 13px; color: var(--on-dark-muted); }
.assistant__close {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper-14);
  color: var(--c-paper);
  cursor: pointer;
}
.assistant__close .i { font-size: 22px; }
.assistant__close:hover { background: var(--paper-50); color: var(--c-deep); }

/* Экран согласия — поверх ленты, пока посетитель не нажал «продолжить». */
.assistant__consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--deep-10);
  background: var(--c-paper);
}
.assistant__consent[hidden] { display: none; }
.assistant__consent-title { font-weight: var(--fw-bold); font-size: 16px; }
.assistant__consent-text { font-size: 14px; line-height: 1.5; color: var(--text-body); }
.assistant__consent-text a { color: var(--c-accent); }
.assistant__agree { align-self: flex-start; padding: 12px 22px; font-size: 15px; }

/* Лента сообщений. */
.assistant__log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assistant__msg {
  position: relative;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.assistant__msg--bot { align-self: flex-start; background: var(--c-paper); border-bottom-left-radius: 6px; color: var(--c-deep); padding-right: 40px; }
.assistant__msg--user { align-self: flex-end; background: var(--c-accent); color: var(--c-pure); border-bottom-right-radius: 6px; }
.assistant__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant__speak {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.assistant__speak .i { font-size: 18px; }
.assistant__speak:hover, .assistant__speak.is-on { color: var(--c-accent); background: var(--c-white); }
.assistant__msg--typing { display: flex; gap: 5px; padding: 14px 16px; }
.assistant__msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: assistant-dots 1.2s ease-in-out infinite; }
.assistant__msg--typing span:nth-child(2) { animation-delay: .15s; }
.assistant__msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes assistant-dots { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.assistant__system { align-self: center; max-width: 92%; font-size: 13px; line-height: 1.45; text-align: center; color: var(--text-muted); }

/* Карточка заявки: поля предзаполнены моделью, отправляет человек. */
.assistant__lead {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--deep-10);
  background: var(--c-white);
}
.assistant__lead-title { font-weight: var(--fw-bold); font-size: 15px; }
.assistant__lead-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.assistant__lead-field input, .assistant__lead-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--deep-10);
  border-radius: 10px;
  background: var(--c-paper);
  color: var(--c-deep);
  font: inherit;
  font-size: 14px;
}
.assistant__lead-consent { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.assistant__lead-consent a { color: var(--c-accent); }
.assistant__lead-send { align-self: flex-start; padding: 10px 18px; font-size: 14px; }
.assistant__lead.is-sent .assistant__lead-send, .assistant__lead.is-sent .assistant__lead-field, .assistant__lead.is-sent .assistant__lead-consent { display: none; }
.assistant__lead-status { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.assistant__lead-status:empty { display: none; }

/* Поле ввода. */
.assistant__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 6px;
  border-top: 1px solid var(--deep-10);
}
.assistant__input {
  flex: 1;
  min-height: 42px;
  max-height: 140px;
  padding: 10px 14px;
  border: 1px solid var(--deep-10);
  border-radius: 20px;
  background: var(--c-paper);
  color: var(--c-deep);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
}
.assistant__input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.assistant__send {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-pure);
  cursor: pointer;
}
.assistant__send .i { font-size: 20px; }
.assistant__note { padding: 4px 16px 12px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

@media (max-width: 899px) {
  /* На узком экране персонаж уходит под текст полупрозрачным фоном — как объёмный элемент макета;
     в полный рост он есть на кнопке и в панели. */
  .hero__shark { right: -14%; top: 34%; width: 72%; opacity: .32; z-index: 0; }
  .hero__ask { max-width: 100%; }
  .assistant-fab { right: 16px; bottom: 76px; }      /* над закреплённой «Обсудить задачу» */
  body:has(.cookie-bar) .assistant-fab { display: none; }
  .assistant { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  body.has-assistant { overflow: hidden; }
  body.has-assistant .sticky-cta { display: none; }
}
@media (max-width: 479px) {
  .hero__ask { padding-left: 14px; }
  .hero__ask-btn span { display: none; }
  .hero__ask-btn { padding: 10px 12px; }
  .assistant-fab span { display: none; }
  .assistant-fab { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__shark, .hero__shark::before, .hero__shark::after, .hero__shark-body, .hero__shark .hero__art--shark,
  .hero__shark .hero__art--blink, .hero__shark .hero__art--fin,
  .assistant.is-thinking .assistant__avatar, .assistant.is-talking .assistant__avatar { animation: none; }
  .hero__shark .hero__art--shark { opacity: 1; }
  .hero__shark .hero__art--blink, .hero__shark .hero__art--fin { opacity: 0; }
  .hero__shark:hover .hero__shark-body { scale: 1; }
}

/* --- 20ж. Движение карточек (2026-10-19, дополнение ADR-0005) ---------------------------
   Одна система наведения для плиток «Проблемы», карточек «Преимуществ» и «Безопасности»:
   подъём (card--hover), полоса градиента по верхнему краю, иконка заливается синим и чуть
   наклоняется — тот же язык, что у карточек «Что можно автоматизировать». Тёмные карточки
   в систему не входят. */
.card--spark { position: relative; overflow: hidden; }
.card--spark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--grad-button);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease);
  pointer-events: none;
}
.card--spark:hover::before { transform: scaleX(1); }
.card--spark .icon-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.card--spark .icon-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-button);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card--spark:hover .icon-box { color: var(--c-white); transform: translateY(-2px) rotate(-6deg); }
.card--spark:hover .icon-box::before { opacity: 1; }

/* Липкая подсветка карточек задач: tasks.js вешает is-active на последнюю карточку под
   курсором (2026-10-19). Пока класса нет ни у кого — тёмной остаётся карточка из макета. */
@media (hover: hover) {
  .task.is-active {
    --task-bg: var(--c-deep);
    --task-title: var(--on-dark);
    --task-text: var(--on-dark-body);
    --task-icon: var(--c-white);
    --task-glow: 1;
    --task-fill: 1;
  }
  .tasks .grid:has(> .task.is-active) > .task--dark:not(.is-active):not(:hover),
  .tasks .grid:has(> .task:hover) > .task.is-active:not(:hover) {
    --task-bg: var(--c-white);
    --task-title: var(--text);
    --task-text: var(--text-body);
    --task-icon: var(--c-accent);
    --task-glow: 0;
    --task-fill: 0;
  }
}

@media (max-width: 1199px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .footer__brand { max-width: 100%; }
  .footer__copy { text-align: left; }
  .problem__point::after { font-size: 60px; }
}
@media (max-width: 479px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .footer__req { flex-direction: column; }
  .footer__req > li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .adv__cycle *, .tech__scheme * { animation: none; }
  .adv__sats { display: none; }
  .adv__node, .tech__sys { opacity: .9; }
  .faq__shark-glow, .faq__ring, .faq__shark-img, .faq__bubble, .faq__bubble-dot, .faq__bubble-ok { animation: none; }
  .faq__ring { display: none; }
  .faq__bubble, .faq__bubble-ok { opacity: 1; transform: none; }
  .faq__bubble-dot { visibility: hidden; }
  .faq__shark:hover .faq__shark-img { scale: 1; }
  .card--spark:hover .icon-box { transform: none; }
}

/* --- 21. Адаптив -------------------------------------------------------------
   Макет нарисован под одну ширину. Ниже — как он складывается на экранах уже.
   ---------------------------------------------------------------------------- */

@media (max-width: 1359px) {
  .nav__link { font-size: 18px; }
  .nav__list { gap: clamp(12px, 1.4vw, 22px); }
}

/* Меню прячется в бургер, как только пункты перестают влезать в строку. С седьмым пунктом
   «Статьи» (2026-10-22, ADR-0017) строка с кнопкой помещается с 1260 px — порог 1280 с запасом
   на полосу прокрутки в Windows. Остальная раскладка блоков по-прежнему перестраивается уже 1200. */
@media (max-width: 1279px) {
  .burger {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    padding: 0 15px;
    border-radius: var(--radius-pill);
    background: var(--c-white);
    cursor: pointer;
  }
  .burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--c-deep);
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle:focus-visible + .burger { outline: 2px solid var(--c-accent); 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); }

  .header__cta { order: 2; margin-left: auto; }

  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-xl);
    background: var(--c-white);
    box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--c-night-1) 40%, transparent);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__link { display: block; padding: 14px 16px; border-radius: 16px; font-size: 19px; }
  .nav__link:hover,
  .nav__link[aria-current="true"],
  .nav__link[aria-current="page"] { background: var(--c-paper); }
  .nav__link[aria-current="true"]::after,
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 12px 16px 8px;
    border-top: 1px solid var(--deep-10);
  }
  .nav__extra a:not(.btn) { font-weight: var(--fw-semibold); text-decoration: none; }
}

/* Уже 1200 — своя раскладка блоков. */
@media (max-width: 1199px) {
  .hero__body { max-width: 62%; }

  .svc-ai { flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; min-height: 0; }
  .svc-ai__body { flex: 1 1 100%; }
  .svc-ai__aside { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .svc-ai__aside .svc-ai__link { margin-top: 0; }
  .svc-ai__art { right: -8%; top: 36%; width: min(380px, 40%); opacity: .35; }

  .task { grid-column: span 6; }
  .sec { grid-column: span 6; }

  .adv__media { grid-column: span 12; min-height: 320px; }
  .adv__cards { grid-column: span 12; }

  .pilot__what, .pilot__terms { grid-column: span 12; }

  .tech { grid-template-columns: 1fr; }
  .tech__media { min-height: 320px; }

  .faq__aside, .faq__list { grid-column: span 12; position: static; }
  .faq__media { aspect-ratio: 16 / 7; }
  .faq__media .faq__shark-img { left: 6%; width: 40%; }
  .faq__bubble { right: 10%; top: 12%; width: 26%; }

  .process__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Макет нарисован под широкий экран; уже 1200 раскладка своя, и светлый текст
     на ярко-синем получает затемнение подложки. Без него на узком экране за
     текстом оказывается самый светлый участок фона и контраст падал до 1.7:1
     (замер — ADR-0005). Шире 1200 всё как в макете. */
  .accent {
    background-image:
      linear-gradient(color-mix(in srgb, var(--c-night-1) 42%, transparent), color-mix(in srgb, var(--c-night-1) 42%, transparent)),
      url('../img/mockup/bg-04.webp?v=8bd014de');
  }
  .accent__art { opacity: .22; }
  .layer {
    background: linear-gradient(155deg, var(--c-accent) 0%,
      color-mix(in srgb, var(--c-accent-3) 65%, var(--c-night-1)) 42%,
      color-mix(in srgb, var(--c-accent-2) 62%, var(--c-night-1)) 100%);
  }
  .calc__result {
    background-image:
      linear-gradient(105deg, color-mix(in srgb, var(--c-accent) 88%, transparent), color-mix(in srgb, var(--c-night-1) 45%, transparent)),
      url('../img/mockup/bg-06.webp?v=1f64a769');
  }
  .calc__label, .accent__text { color: var(--c-pure); }
  .tech__group:first-child {
    background-image:
      linear-gradient(color-mix(in srgb, var(--c-night-1) 40%, transparent), color-mix(in srgb, var(--c-night-1) 40%, transparent)),
      url('../img/mockup/bg-04.webp?v=8bd014de');
  }
  .btn--grad { background: var(--c-accent); }
  .shift__steps > li { color: var(--on-dark-body); }
  .tags--before > li { color: var(--c-coral); }
  .calc__note { color: var(--on-dark-muted); }
}

@media (max-width: 899px) {
  .hero__body { max-width: 100%; padding-top: clamp(56px, 10vw, 86px); }
  .hero__art { right: -18%; top: 30%; width: 82%; opacity: .32; }

  /* На узком экране объёмные элементы уходят под текст: поверх него, как на
     широком макете, они мешают читать. */
  .svc-ai__art, .accent__art { z-index: 0; }

  .problem__answer, .problem__points { grid-column: span 12; }
  .problem__points { grid-template-columns: minmax(0, 1fr); }
  .svc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem__point--wide { grid-column: span 1; flex-direction: column; }

  .case, .case--big, .case--mid { grid-column: span 12; }
  .cases__games { grid-template-columns: 1fr; }
  .cases__games-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > .case:only-child { flex-direction: column; }
  .grid > .case:only-child .case__visual { flex: none; aspect-ratio: 1200 / 729; }

  .accent__body { max-width: 100%; }
  .accent__art { right: -30%; width: 90%; }

  .pilot__why { grid-template-columns: 1fr; }
  .pilot__term { grid-template-columns: 1fr; gap: 4px; }

  .calc__out + .calc__out { margin-left: 0; }
  .calc__btn { margin-left: 0; }

  .form__row--task { grid-template-columns: 1fr; }

  .process__after { grid-template-columns: 1fr; }
}

@media (max-width: 699px) {
  .header { padding: 10px 10px 10px 18px; }
  .header__cta { display: none; }
  .burger { margin-left: auto; }

  .svc-row { grid-template-columns: 1fr; }
  .svc-ai__list { grid-template-columns: 1fr; }
  .svc-ai__aside { flex-direction: column; align-items: flex-start; }

  .task, .sec { grid-column: span 12; }

  .adv__cards { grid-template-columns: 1fr; }
  .adv:last-child { grid-column: auto; }

  .tech__groups { grid-template-columns: 1fr; }
  .tech__group, .tech__group:nth-child(-n + 2) { grid-column: auto; }

  .process__details { grid-template-columns: 1fr; }

  .contact__art { width: 60%; right: -25%; top: -60px; }

  /* Декоративная картинка FAQ на телефоне только удлиняет прокрутку. */
  .faq__media { display: none; }

  .svc-ai__art { top: 70%; right: -22%; width: 72%; opacity: .3; }

  .footer--doc .contacts,
  .doc .contacts { grid-template-columns: 1fr; gap: 2px; }
  .footer--doc .contacts dd + dt,
  .doc .contacts dd + dt { margin-top: 10px; }
}

@media (max-width: 479px) {
  .btn { white-space: normal; padding: 17px 26px; text-align: center; }
  .btn--lg { padding: 18px 28px; }
  .hero__actions .btn { width: 100%; }
  .flow__list { grid-template-columns: 1fr; }
  .layer__art { right: -160px; }
  .qa__toggle { width: 36px; height: 36px; }
  .qa__chevron { font-size: 22px; }
  /* Чипы бюджета в две колонки: по одному в строку они занимали четыре строки (2026-10-19). */
  /* Строки проектов на телефоне — мини-карточки: миниатюра сверху во всю ширину, под ней название,
     суть и видимая ссылка (просьба владельца 2026-10-19). */
  .case__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case--mid .rpm { width: 50%; width: 50cqw; padding: 2cqw; font-size: 2.58cqw; }
  .budget { padding: 14px; gap: 10px; }
  .budget__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .budget__option span { width: 100%; padding: 10px 6px; font-size: 14px; text-align: center; white-space: normal; }
  .form__promise { font-size: 15px; }
  /* Таблица документа на телефоне — карточками: имя, под ним подписанные значения (Cookie Notice, 2026-10-31). */
  .doc__table--stack thead { display: none; }
  .doc__table--stack, .doc__table--stack tbody, .doc__table--stack tr, .doc__table--stack td { display: block; }
  .doc__table--stack tr { padding: 12px 0; border-top: 1px solid var(--deep-10); }
  .doc__table--stack td { padding: 2px 0; border: 0; }
  .doc__table--stack td:first-child { font-weight: var(--fw-semibold); color: var(--text); }
  .doc__table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  /* Длинное имя бота («Telegram @sharkdev_support_bot») на телефоне переносится, а не уходит за край (2026-10-31). */
  .contact__link { max-width: 100%; white-space: normal; }
}
@media (max-width: 379px) {
  /* Узкие телефоны: «Не указывать» не делится на слова — чуть мельче, чтобы влезть в полколонки;
     уже 340 px чипы идут в одну колонку. */
  .budget__option span { padding: 10px 4px; font-size: 13px; }
  /* Большие кнопки на узких телефонах компактнее: «Discuss your project» в форме шириной 188 px шла в три строки,
     теперь в две (проверка английской версии, 2026-10-31). */
  .btn--lg { padding: 16px 20px; font-size: 16px; }
}
@media (max-width: 339px) {
  .budget__options { grid-template-columns: minmax(0, 1fr); }
}

/* --- 22. Движение ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__art, .svc-ai__art, .accent__art { animation: none; transform: translateY(-50%); }
  .contact__art { animation: none; }
  .task .icon-box { transform: none !important; }
}

/* --- 23. Печать ------------------------------------------------------------- */

@media print {
  body { background: none; color: var(--c-mono); }
  .header, .skip-link, .hero__actions, .btn, .hero__art, .hero__glow,
  .svc-ai__art, .accent__art, .layer__art, .contact__art, .contact__card,
  .calc__form, .tech__media, .faq__media, .adv__media, .process__scroller, .cookie-bar, .sticky-cta { display: none; }
  .hero__card, .svc-ai, .ai-panel, .process, .accent, .calc, .faq, .contact, .footer,
  .task--dark, .adv:last-child, .pilot__what, .problem__answer, .tech__group:first-child {
    background: none;
    color: var(--c-mono);
    box-shadow: none;
    border: 1px solid var(--c-mono);
  }
  .hero__accent { background: none; color: var(--c-mono); }
  .is-dark *, .footer * { color: var(--c-mono) !important; }
  .logo-screen { display: none; }
  .logo-print {
    display: block;
    height: 1.6rem;
    width: calc(1.6rem * 426.037 / 52.139);
    background: url("../logo/logo-mono.svg") no-repeat left center / contain;
  }
  .qa::details-content { block-size: auto; opacity: 1; }
}

/* --- 20з. Интерактивный прототип плеера на странице кейса «Фирменное радио» ----------------
   (2026-10-19, дополнение ADR-0013; просьба владельца сделать страницу как концепт-презентацию
   веб-прототипа). Разметку телефона собирает build-services.py (rp_phone), оживляет radio-demo.js.
   Все размеры внутри телефона — в px от его собственного шрифта: телефон резиновый по ширине
   (max-width), пропорция 390×844. Цвета — переменные --rp-*, по умолчанию тёмная тема; светлая
   и фоны «цвет»/«обложка» переопределяют их по data-атрибутам. Клиент не назван — бренд
   нейтральный. Без JS: прототип на экране «Эфир» и борд экранов под ним, без переключателей. */
.demo__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding: clamp(30px, 2.8vw, 52px);
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  color: var(--c-paper);
}
.demo__intro { display: flex; flex-direction: column; gap: 18px; }
.demo__title { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.08; color: var(--c-paper); }
.demo__lead { max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--on-dark-body); }
.demo__views { display: inline-flex; gap: 4px; align-self: flex-start; padding: 4px; border: 1px solid var(--ice-16); border-radius: var(--radius-pill); background: var(--paper-09); }
.demo__view {
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-dark-body);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.demo__view.is-on { background: var(--c-paper); color: var(--c-deep); }
.demo__view:focus-visible, .demo__seg button:focus-visible, .demo__reset:focus-visible { outline: 2px solid var(--c-ice); outline-offset: 3px; }
.demo__tools { display: flex; flex-direction: column; gap: 12px; }
.demo__label { font-weight: var(--fw-semibold); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.demo__seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.demo__seg button {
  padding: 10px 16px;
  border: 1px solid var(--ice-22);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-paper);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.demo__seg button.is-on { border-color: var(--c-ice); background: var(--c-ice); color: var(--c-deep); }
.demo__notes { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--on-dark-muted); }
.demo__notes span + span::before { content: "·"; margin-right: 14px; }
.demo__hint { font-size: 15px; line-height: 1.5; color: var(--on-dark-body); }
.demo__reset { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--c-ice); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.demo__stage { position: relative; }
.demo__proto { display: flex; justify-content: center; }
.demo__board-lead { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; font-size: 15px; color: var(--on-dark-body); }
.demo__board-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.demo__board-title { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--on-dark-body); }
.demo__board-num { color: var(--on-dark-muted); }
.demo__board .rp { max-width: 100%; }
/* Переключение «Прототип / Все экраны» — только с JS (класс is-js). Без JS видно и то и другое. */
.demo.is-js[data-view="proto"] [data-demo-panel="board"], .demo.is-js[data-view="board"] [data-demo-panel="proto"] { display: none; }
.demo.is-js[data-view="board"] .demo__card { grid-template-columns: 1fr; }
.demo.is-js[data-view="board"] .demo__tools { display: none; }
.demo:not(.is-js) .demo__views, .demo:not(.is-js) .demo__tools { display: none; }
.demo:not(.is-js) .demo__board { grid-column: 1 / -1; margin-top: 32px; }

/* Телефон */
.rp {
  --rp-bg: var(--c-night-1);
  --rp-screen: linear-gradient(180deg, var(--c-night-2), var(--c-night-1));
  --rp-card: color-mix(in srgb, var(--c-paper) 8%, transparent);
  --rp-line: color-mix(in srgb, var(--c-paper) 12%, transparent);
  --rp-text: var(--c-paper);
  --rp-muted: color-mix(in srgb, var(--c-paper) 62%, transparent);
  --rp-accent: var(--c-accent);
  --rp-accent-2: var(--c-accent-2);
  width: 100%;
  max-width: 320px;
  aspect-ratio: 390 / 844;
  margin: 0 auto;
  padding: 10px;
  border-radius: 48px;
  background: var(--c-night-1);
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--c-night-1) 70%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--c-paper) 10%, transparent);
}
.rp[data-theme="light"] {
  --rp-bg: var(--c-paper);
  --rp-screen: linear-gradient(180deg, var(--c-white), var(--c-paper));
  --rp-card: var(--c-white);
  --rp-line: var(--deep-10);
  --rp-text: var(--c-deep);
  --rp-muted: var(--text-muted);
}
.rp[data-bg="color"] { --rp-screen: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 55%, var(--c-night-1)), var(--c-night-1) 70%); }
.rp[data-bg="cover"] { --rp-screen: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-2) 45%, var(--c-deep)), var(--c-night-1) 75%); }
.rp[data-theme="light"][data-bg="color"] { --rp-screen: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 22%, var(--c-white)), var(--c-paper) 70%); }
.rp[data-theme="light"][data-bg="cover"] { --rp-screen: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-2) 28%, var(--c-white)), var(--c-paper) 75%); }
.rp[data-concept="2"] { --rp-screen: linear-gradient(180deg, var(--c-night-1), var(--c-ink)); }
.rp[data-concept="2"][data-theme="light"] { --rp-screen: linear-gradient(180deg, var(--c-white), var(--c-sky-2)); }
.rp__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: var(--rp-screen);
  color: var(--rp-text);
  font-size: 13px;
  line-height: 1.3;
  transition: background .4s;
}
.rp [hidden] { display: none !important; }
.rp p { margin: 0; }
.rp button { font-family: inherit; }
.rp__i { width: 1em; height: 1em; flex: none; fill: currentColor; }
.rp__status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; font-weight: var(--fw-semibold); font-size: 12px; }
.rp__sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.rp__sig i { width: 3px; border-radius: 1px; background: currentColor; }
.rp__sig i:nth-child(1) { height: 4px; } .rp__sig i:nth-child(2) { height: 7px; } .rp__sig i:nth-child(3) { height: 10px; }
.rp__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; }
.rp__brand { font-style: italic; font-weight: var(--fw-extrabold); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rp__badge { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-accent-2); }
.rp__c2head { display: none; }
.rp__screens { position: relative; flex: 1; min-height: 0; }
.rp__screen { position: absolute; inset: 12px 18px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.rp__screen--set { overflow-y: auto; scrollbar-width: none; padding-bottom: 12px; }
.rp__screen--set::-webkit-scrollbar { display: none; }
.rp__h { font-weight: var(--fw-bold); font-size: 17px; line-height: 1.2; }
.rp__sub { margin-top: -6px; font-size: 11px; color: var(--rp-muted); }
.rp__live-head { display: flex; justify-content: space-between; align-items: baseline; }
.rp__onair { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semibold); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-muted); }
.rp__onair i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-coral-2); }
.rp.is-playing .rp__onair i { animation: rp-blink 1.6s ease-in-out infinite; }
.rp__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--c-accent), var(--c-blue));
  color: var(--c-paper);
  text-align: center;
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.rp__tile-top { font-weight: var(--fw-semibold); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.rp__tile-bottom { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.rp__eq { display: flex; align-items: flex-end; gap: 7px; height: 58px; }
.rp__eq i { width: 10px; border-radius: 4px; background: var(--c-paper); opacity: .92; transform-origin: bottom; }
.rp__eq i:nth-child(1) { height: 36%; } .rp__eq i:nth-child(2) { height: 68%; } .rp__eq i:nth-child(3) { height: 48%; } .rp__eq i:nth-child(4) { height: 88%; } .rp__eq i:nth-child(5) { height: 42%; }
.rp.is-playing .rp__eq i { animation: rp-eq 1.1s ease-in-out infinite alternate; }
.rp.is-playing .rp__eq i:nth-child(2) { animation-delay: -.25s; } .rp.is-playing .rp__eq i:nth-child(3) { animation-delay: -.5s; }
.rp.is-playing .rp__eq i:nth-child(4) { animation-delay: -.75s; } .rp.is-playing .rp__eq i:nth-child(5) { animation-delay: -1s; }
.rp__track { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp__track-text { min-width: 0; }
.rp__track-title { font-weight: var(--fw-bold); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__track-artist { font-size: 12px; color: var(--rp-muted); }
.rp__heart {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rp-line);
  border-radius: 50%;
  background: transparent;
  color: var(--rp-text);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;
}
.rp__heart .rp__i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rp__heart[aria-pressed="true"], .rp__heart--on { color: var(--rp-accent-2); border-color: var(--rp-accent-2); }
.rp__heart[aria-pressed="true"] .rp__i, .rp__heart--on .rp__i { fill: currentColor; }
.rp__heart:active { transform: scale(.92); }
.rp__hint { text-align: center; font-size: 10px; color: var(--rp-muted); }
.rp__controls { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.rp__ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--rp-text); font-size: 9px; cursor: pointer; }
.rp__ctl .rp__i { width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: var(--rp-card); }
.rp__ctl:disabled { opacity: .7; cursor: default; }
.rp__play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--rp-accent);
  color: var(--c-pure);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--c-accent) 70%, transparent);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.rp__play:hover { transform: scale(1.04); }
.rp__play .rp__i { width: 28px; height: 28px; }
/* is-on — посетитель включил эфир (на кнопке пауза), is-playing — звук уже идёт (эквалайзер),
   is-connecting — поток подключается, is-error — эфир недоступен; has-stream — настоящий эфир, «Следующий
   трек» прячется: живой поток не перемотать. */
.rp__i--pause, .rp.is-on .rp__i--play { display: none; }
.rp.is-on .rp__i--pause { display: block; }
.rp.is-connecting .rp__play { animation: rp-pulse 1s ease-in-out infinite; }
.rp.has-stream .rp__next { display: none; }
.rp.is-error .rp__hint { display: block; color: var(--c-coral); }
.rp[data-theme="light"].is-error .rp__hint { color: var(--c-error); }
.rp__next { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 4px 8px; border: 0; background: none; color: var(--rp-text); font-size: 11px; cursor: pointer; }
.rp__next .rp__i { width: 14px; height: 14px; }
.rp__listen { display: none; text-align: center; font-size: 10px; color: var(--rp-muted); }
/* Избранное */
.rp__search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--rp-card); font-size: 11px; color: var(--rp-muted); }
.rp__search .rp__i { width: 14px; height: 14px; }
.rp__caps { display: flex; justify-content: space-between; font-weight: var(--fw-semibold); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }
.rp__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.rp__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--rp-card); }
.rp__cover { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--c-accent-2), var(--c-accent)); color: var(--c-paper); }
.rp__cover .rp__i { width: 16px; height: 16px; }
.rp__item-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rp__item-title { font-weight: var(--fw-semibold); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__item-artist { font-size: 10px; color: var(--rp-muted); }
.rp__item .rp__heart { width: 28px; height: 28px; border-color: transparent; }
.rp__item .rp__heart .rp__i { width: 14px; height: 14px; }
.rp__note, .rp__empty, .rp__small { font-size: 10px; line-height: 1.4; color: var(--rp-muted); }
.rp__mini { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--rp-accent) 30%, var(--rp-bg)); }
.rp__mini-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.rp__mini-eq i { width: 3px; border-radius: 1px; background: var(--rp-accent-2); height: 50%; transform-origin: bottom; }
.rp__mini-eq i:nth-child(2) { height: 100%; } .rp__mini-eq i:nth-child(3) { height: 70%; }
.rp.is-playing .rp__mini-eq i { animation: rp-eq .9s ease-in-out infinite alternate; }
.rp.is-playing .rp__mini-eq i:nth-child(2) { animation-delay: -.3s; } .rp.is-playing .rp__mini-eq i:nth-child(3) { animation-delay: -.6s; }
.rp__mini-text { flex: 1; min-width: 0; }
.rp__mini-text p:first-child { font-weight: var(--fw-semibold); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__mini-text p + p { font-size: 10px; color: var(--rp-muted); }
.rp__mini-play { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--rp-accent); color: var(--c-pure); cursor: pointer; }
.rp__mini-play .rp__i { width: 16px; height: 16px; }
/* Настройки */
.rp__seg { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--rp-card); }
.rp__seg button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--rp-muted); font-weight: var(--fw-semibold); font-size: 11px; cursor: pointer; transition: background .2s, color .2s; }
.rp__seg button.is-on { background: color-mix(in srgb, var(--rp-accent) 35%, var(--rp-bg)); color: var(--rp-text); }
.rp__seg .rp__i { width: 13px; height: 13px; }
.rp__bgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rp__bgs button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: var(--rp-card); color: var(--rp-muted); font-size: 10px; cursor: pointer; transition: border-color .2s, color .2s; }
.rp__bgs button.is-on { border-color: var(--rp-accent-2); color: var(--rp-text); }
.rp__sw { display: block; width: 100%; height: 22px; border-radius: 6px; }
.rp__sw--plain { background: var(--c-night-2); }
.rp__sw--color { background: linear-gradient(135deg, var(--c-coral-2), var(--c-accent)); }
.rp__sw--cover { background: linear-gradient(135deg, var(--c-accent-2), var(--c-deep)); }
.rp__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 12px; background: var(--rp-card); }
.rp__rows > li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--rp-line); }
.rp__rows > li:first-child { border-top: 0; }
.rp__row-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.rp__row-title { font-weight: var(--fw-semibold); font-size: 12px; }
.rp__row-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.rp__rows .rp__i { width: 14px; height: 14px; color: var(--rp-muted); }
.rp__switch { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--rp-line); }
.rp__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--rp-text); opacity: .8; }
/* Таймер сна — шторка снизу */
.rp__sheet { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--c-night-1) 55%, transparent); }
.rp__sheet-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 18px 18px 26px; border-radius: 24px 24px 0 0; background: var(--rp-bg); animation: rp-sheet .32s var(--ease); }
.rp__sheet-icon .rp__i { width: 34px; height: 34px; color: var(--rp-accent-2); }
.rp__chips { display: flex; gap: 6px; }
.rp__chip { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--rp-line); border-radius: 10px; background: var(--rp-card); color: var(--rp-text); cursor: pointer; transition: border-color .2s, background .2s; }
.rp__chip b { font-size: 14px; }
.rp__chip span { font-size: 9px; color: var(--rp-muted); }
.rp__chip.is-on { border-color: var(--rp-accent-2); background: color-mix(in srgb, var(--rp-accent) 30%, var(--rp-bg)); }
.rp__btn { padding: 11px; border: 0; border-radius: 12px; background: var(--rp-accent); color: var(--c-pure); font-weight: var(--fw-semibold); font-size: 12px; cursor: pointer; }
.rp__link { padding: 4px; border: 0; background: none; color: var(--rp-muted); font-size: 11px; cursor: pointer; }
/* Вкладки и индикатор */
.rp__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px 4px; border-top: 1px solid var(--rp-line); background: color-mix(in srgb, var(--rp-bg) 80%, transparent); }
.rp__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; background: none; color: var(--rp-muted); font-size: 9px; cursor: pointer; transition: color .2s; }
.rp__tab.is-on { color: var(--rp-accent-2); }
.rp__tab .rp__i { width: 18px; height: 18px; }
.rp__home { width: 100px; height: 4px; margin: 4px auto 8px; border-radius: 2px; background: var(--rp-text); opacity: .6; }
/* Концепт 2: графит, только музыка — без шапки бренда и вкладок на экране эфира */
.rp[data-concept="2"] .rp__head, .rp[data-concept="2"] .rp__live-head, .rp[data-concept="2"] .rp__tile-top, .rp[data-concept="2"] .rp__tile-bottom,
.rp[data-concept="2"] .rp__ctl, .rp[data-concept="2"] .rp__hint { display: none; }
.rp[data-concept="2"]:has(.rp__screen--live:not([hidden])) .rp__tabs { display: none; }
.rp[data-concept="2"] .rp__c2head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; }
.rp__c2icons { display: inline-flex; gap: 8px; }
.rp__c2icons .rp__heart, .rp__c2btn { width: 30px; height: 30px; border: 0; background: none; color: var(--rp-muted); display: grid; place-items: center; cursor: pointer; }
.rp__c2btn .rp__i { width: 16px; height: 16px; }
.rp[data-concept="2"] .rp__tile { margin-top: 10px; }
.rp[data-concept="2"] .rp__controls { justify-content: center; margin-top: 6px; }
.rp[data-concept="2"] .rp__play { background: var(--rp-text); color: var(--rp-bg); box-shadow: none; }
.rp[data-concept="2"] .rp__listen { display: block; margin-top: -4px; }
.rp--static { pointer-events: none; }
@keyframes rp-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes rp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes rp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes rp-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Живая миниатюра телефона в карточке кейса «Фирменное радио» на главной (просьба владельца
   2026-10-19): уменьшенный экран эфира из прототипа, эквалайзер бежит. Размеры внутри — в em от шрифта
   .rpm, а шрифт — в cqw от ширины миниатюры (с запасным px для браузеров без контейнерных единиц),
   поэтому телефон одинаково складывается в строке 150 px и во всю ширину на телефоне; низ срезает
   рамка миниатюры. */
.case__thumb--live { container-type: inline-size; background: linear-gradient(135deg, var(--c-deep), var(--c-accent)); }
.case__thumb--live::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--c-accent-2) 45%, transparent), transparent 70%); }
.rpm {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 60%;
  width: 60cqw;
  padding: 5px;
  padding: 2.4cqw;
  border-radius: 2.6em;
  background: var(--c-night-1);
  color: var(--c-paper);
  font-size: 5px;
  font-size: 3.1cqw;
  line-height: 1.25;
  transform: translateX(-50%);
  box-shadow: 0 1.5em 3em -1em color-mix(in srgb, var(--c-night-1) 70%, transparent), inset 0 0 0 .15em color-mix(in srgb, var(--c-paper) 10%, transparent);
}
.rpm__screen { display: flex; flex-direction: column; gap: .9em; padding: 1.4em 1.5em 2em; border-radius: 2.1em; background: linear-gradient(180deg, var(--c-night-2), var(--c-night-1)); }
.rpm p { margin: 0; }
.rpm__status { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); font-size: .95em; }
.rpm__sig { display: inline-flex; align-items: flex-end; gap: .18em; height: .8em; }
.rpm__sig i { width: .25em; border-radius: .1em; background: currentColor; }
.rpm__sig i:nth-child(1) { height: 40%; } .rpm__sig i:nth-child(2) { height: 70%; } .rpm__sig i:nth-child(3) { height: 100%; }
.rpm__head { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .85em; }
.rpm__brand { font-style: italic; font-weight: var(--fw-extrabold); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rpm__badge { font-weight: var(--fw-semibold); font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-2); }
.rpm__title { font-weight: var(--fw-bold); font-size: 1.35em; }
.rpm__tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 1.4em; background: linear-gradient(145deg, var(--c-accent), var(--c-blue)); box-shadow: 0 1.4em 3em -1.2em color-mix(in srgb, var(--c-accent) 60%, transparent); }
.rpm__eq { display: flex; align-items: flex-end; gap: .55em; height: 4.4em; }
.rpm__eq i { width: .8em; border-radius: .3em; background: var(--c-paper); opacity: .92; transform-origin: bottom; animation: rp-eq 1.1s ease-in-out infinite alternate; }
.rpm__eq i:nth-child(1) { height: 36%; } .rpm__eq i:nth-child(2) { height: 68%; animation-delay: -.25s; } .rpm__eq i:nth-child(3) { height: 48%; animation-delay: -.5s; }
.rpm__eq i:nth-child(4) { height: 88%; animation-delay: -.75s; } .rpm__eq i:nth-child(5) { height: 42%; animation-delay: -1s; }
.rpm__track { font-weight: var(--fw-bold); font-size: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpm__artist { font-size: .95em; color: color-mix(in srgb, var(--c-paper) 62%, transparent); }
.case:hover .rpm { transform: translateX(-50%) translateY(-3%); transition: transform .4s var(--ease); }

@media (max-width: 1199px) {
  .demo__card { grid-template-columns: 1fr; }
  .demo__board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .demo__board-list { grid-template-columns: 1fr; }
  .demo__notes { flex-direction: column; gap: 4px; }
  .demo__notes span + span::before { content: none; }
  .rp { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp.is-playing .rp__eq i, .rp.is-playing .rp__mini-eq i, .rp.is-playing .rp__onair i, .rp__sheet-card, .rpm__eq i, .rp.is-connecting .rp__play { animation: none; }
  .rp.is-playing .rp__eq i, .rpm__eq i { transform: scaleY(.75); }
}

/* --- 20и. Страницы «О компании» и «Контакты» (2026-10-22, ADR-0016): собираются build-services.py из
   тех же компонентов, что страницы услуг и кейсов; здесь только мелочи поверх них. --- */
.about__services-title { margin-top: 24px; font-weight: var(--fw-semibold); color: var(--text); }
.about__services { margin-top: 12px; }
.about__services a { color: inherit; text-decoration: none; }
.about__services a:hover { text-decoration: underline; text-underline-offset: 3px; }
.about__steps li strong { color: var(--text); }
.contacts .task__text a { color: var(--text); font-weight: var(--fw-semibold); text-decoration: none; }
.contacts .task__text a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacts .case-block__text .svc-link { font-weight: var(--fw-semibold); }

/* --- 20к. Статьи /stati/ (2026-10-22, ADR-0017): текст — белая карточка с колонкой для чтения,
   справа липкое оглавление; уже 1100 оглавление уходит. Карточка не шире 900 px, а пара «статья +
   оглавление» стоит по центру (замечание владельца 2026-10-22): во всю ширину карточка оставляла
   справа от строк 760 px пустоту до 700 px на широком экране. --- */
.article-wrap {
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(240px, 300px);
  justify-content: center;
  gap: clamp(12px, 1.2vw, 18px);
  align-items: start;
}
.article { min-width: 0; padding: clamp(24px, 3.6vw, 64px); }
.article p, .article li { max-width: 760px; font-size: 18px; line-height: 1.7; color: var(--text-body); }
.article p + p { margin-top: 14px; }
.article__h2 {
  max-width: 760px;
  margin: clamp(36px, 3vw, 52px) 0 16px;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text);
  scroll-margin-top: 110px;
}
.article__list { margin-top: 16px; }
.article__summary { max-width: 820px; padding: clamp(20px, 2vw, 28px); border-radius: var(--radius-l); background: var(--ice-10); }
.article__summary-title { margin-bottom: 12px; font-size: 20px; font-weight: var(--fw-bold); color: var(--text); }
.article__summary li { font-size: 17px; }
.article__note {
  max-width: 820px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-s);
  background: var(--accent-10);
}
.article p.article__note { font-size: 16px; line-height: 1.55; }
.article__aside { position: sticky; top: 110px; }
.article__toc { padding: 24px 26px; }
.article__toc-title { margin-bottom: 12px; font-size: 16px; font-weight: var(--fw-bold); color: var(--text); }
.article__toc ol { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; list-style: decimal; }
.article__toc li { font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.article__toc a { color: var(--text-body); text-decoration: none; }
.article__toc a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.article__meta { margin-top: 18px; font-size: 15px; color: var(--on-dark-muted); }
.hero--article .hero__title { font-size: clamp(30px, 3.4vw, 56px); }
@media (max-width: 1099px) {
  .article-wrap { grid-template-columns: minmax(0, 900px); }
  .article__aside { display: none; }
}
@media (max-width: 699px) {
  .article p, .article li { font-size: 17px; }
}