/* ==========================================================================
   ЭЛМАР · клининговая компания, Тюмень
   Лендинг. Чистый CSS, без препроцессоров и фреймворков.

   Система:
   · тема       — светлая, зафиксирована; чернильные секции используются
                  осознанно как «скобки» композиции (герой-подложка, CTA, футер)
   · акцент     — один на всю страницу: --accent (хвойно-бирюзовый)
   · радиусы    — интерактив 12px, карточки 18px, крупная медиа 24px
   · анимации   — только transform / opacity, всё гасится prefers-reduced-motion
   ========================================================================== */

/* ---------- 0. Шрифт ------------------------------------------------------
   Onest подключён локально. Внешние CDN не используются: часть из них
   недоступна или медленно отвечает у российских пользователей, а по п. 15.9
   и 16.10 ТЗ сайт не должен зависеть от одного внешнего поставщика.
   Файл вариативный, поэтому одного начертания хватает на все веса.          */

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyrillic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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. Токены ----------------------------------------------------
   Акцент разведён на два токена. --accent это заливка: кнопки, чипы,
   выбранные варианты, свечения. --accent-ink это тот же цвет, затемнённый
   до контраста 5.2:1, для текста и мелких иконок на светлом фоне.
   Светлый аквамарин в роли текста не проходит WCAG AA, поэтому смешивать их
   нельзя.                                                                  */

:root {
  /* поверхности */
  --paper:        #F2F7F6;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #E8F0EE;
  --ink:          #0A1715;
  --ink-raised:   #12221F;

  /* текст */
  --text:         #0E1614;
  --text-muted:   #57635E;
  --text-faint:   #676F6B;   /* контраст к белой карточке 5.17:1, WCAG AA */
  --text-on-ink:        #F2F5F3;
  --text-on-ink-muted:  #9CACA6;

  /* акцент */
  --accent:       #0FA391;   /* заливка */
  --accent-ink:   #0A7A6C;   /* текст и мелкие иконки, контраст 5.23:1 */
  --accent-hover: #17B7A3;   /* при наведении светлеет, а не темнеет */
  --accent-soft:  #E3F5F1;
  --accent-bright:#22C9B2;
  --on-accent:    #06231E;   /* текст поверх заливки, контраст 5.83:1 */

  /* линии */
  --line:         rgba(14, 22, 20, .11);
  --line-strong:  rgba(14, 22, 20, .2);
  --line-on-ink:  rgba(242, 245, 243, .14);

  /* радиусы */
  --r-control: 12px;
  --r-card:    18px;
  --r-media:   24px;

  /* тени, подкрашенные в тон фона */
  --shadow-sm: 0 1px 2px rgba(14, 22, 20, .05), 0 4px 14px rgba(14, 22, 20, .05);
  --shadow-md: 0 2px 6px rgba(14, 22, 20, .06), 0 18px 40px rgba(14, 22, 20, .09);
  --shadow-lg: 0 4px 10px rgba(14, 22, 20, .07), 0 34px 70px rgba(14, 22, 20, .14);

  /* сетка */
  --page:   1320px;
  --gutter: 24px;

  /* слои */
  --z-sticky: 40;
  --z-header: 60;
  --z-menu:   70;
  --z-modal:  90;
  --z-toast:  95;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
}

/* Тёмная схема: страница остаётся одной темой, меняются только значения токенов */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0B1413;
    --paper-raised: #121D1B;
    --paper-sunk:   #081110;
    --ink:          #060D0C;
    --ink-raised:   #0E1817;

    --text:         #EDF2EF;
    --text-muted:   #9AA8A2;
    --text-faint:   #8B968F;   /* контраст к тёмной карточке 5.72:1, WCAG AA */
    --text-on-ink:        #EDF2EF;
    --text-on-ink-muted:  #93A29C;

    --accent:       #23C4AC;
    --accent-ink:   #45D6BE;   /* на тёмном фоне текстовый акцент наоборот светлее */
    --accent-hover: #45D6BE;
    --accent-soft:  #0F2B27;
    --accent-bright:#52E0C8;
    --on-accent:    #04211C;

    --line:         rgba(237, 242, 239, .12);
    --line-strong:  rgba(237, 242, 239, .22);
    --line-on-ink:  rgba(237, 242, 239, .12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, .5), 0 34px 70px rgba(0, 0, 0, .6);
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Onest", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

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

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

.section { padding-block: clamp(64px, 9vw, 132px); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.section--sunk { background: var(--paper-sunk); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--ink .lede,
.section--ink .section-head__text { color: var(--text-on-ink-muted); }

/* Заголовок секции: вертикальный стек, без «плавающего» абзаца справа */
.section-head { max-width: 46ch; margin-bottom: clamp(34px, 4vw, 58px); }
.section-head--wide { max-width: 60ch; }

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.section--ink .eyebrow { color: var(--accent-bright); }

.h-display {
  font-size: clamp(2.05rem, 4.3vw, 3.35rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.h-section {
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
}
.h-card {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.24;
}

.lede {
  margin-top: 18px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--text-muted);
  line-height: 1.62;
}

.muted { color: var(--text-muted); }
.small { font-size: 14px; line-height: 1.5; }
.tiny  { font-size: 12.5px; line-height: 1.45; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: none;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease),
              box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn i { font-size: 18px; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--text); background: var(--paper-raised); }

.section--ink .btn--ghost {
  border-color: var(--line-on-ink);
  color: var(--text-on-ink);
}
.section--ink .btn--ghost:hover { border-color: var(--text-on-ink); background: rgba(255,255,255,.06); }

.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.btn--block { width: 100%; }

/* Текстовая ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-ink);
}
.link-arrow i { transition: transform .3s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

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

.topbar {
  background: var(--ink);
  color: var(--text-on-ink-muted);
  font-size: 13px;
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}
.topbar__list { display: flex; align-items: center; gap: 22px; }
.topbar__list a:hover { color: var(--text-on-ink); }
.topbar i { color: var(--accent-bright); margin-right: 6px; vertical-align: -2px; }

@media (max-width: 900px) { .topbar { display: none; } }

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--paper); }
}

.header__row {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}
@media (max-width: 640px) { .header__row { height: 64px; } }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--on-accent);
  flex: 0 0 auto;
}
.brand__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
}
.brand__sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: -2px;
}

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header__phone {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 1180px) { .nav { gap: 18px; } .nav a { font-size: 14.5px; } }
@media (max-width: 1080px) { .header__phone { display: none; } }
@media (max-width: 1024px) { .nav { display: none; } }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
@media (max-width: 1024px) { .burger { display: inline-flex; } .header__actions { margin-left: auto; } }
@media (max-width: 560px) { .header__actions .btn { display: none; } }

/* Мобильное меню */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--paper);
  padding: 96px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu a.mobile-menu__link {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mobile-menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }
.mobile-menu__close {
  position: absolute;
  top: 18px; right: var(--gutter);
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: none;
  cursor: pointer;
  font-size: 22px;
}

/* ---------- 6. Герой ----------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(40px, 5vw, 76px);
  padding-bottom: clamp(56px, 6vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 68%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hero__city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.hero__city i { color: var(--accent-ink); font-size: 15px; }

.hero h1 { max-width: 19ch; }
.hero__lede { margin-top: 20px; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--text-muted); }

.hero__usp { display: grid; gap: 9px; margin-top: 22px; }
.hero__usp li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; }
.hero__usp i { color: var(--accent-ink); font-size: 19px; flex: 0 0 auto; margin-top: 1px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero__media { position: relative; }
.hero__img {
  width: 100%;
  /* пропорция подобрана под исходники 730x475: более вытянутый кадр
     пришлось бы растягивать и он терял бы резкость */
  aspect-ratio: 4 / 3.7;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--paper-sunk);
}
.hero__badge {
  position: absolute;
  left: -22px; bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 16px 18px;
  border-radius: var(--r-card);
  background: var(--paper-raised);
  box-shadow: var(--shadow-lg);
  max-width: 270px;
}
.hero__badge i { font-size: 30px; color: var(--accent-ink); }
.hero__badge b { display: block; font-size: 17px; letter-spacing: -0.02em; }
.hero__badge span { font-size: 13.5px; color: var(--text-muted); line-height: 1.35; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__img { aspect-ratio: 4 / 3.2; }
  .hero__badge { left: 14px; bottom: 14px; }
  .hero h1 { max-width: none; }
}

/* ---------- 7. Полоса фактов --------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.facts__item { background: var(--paper); padding: 30px clamp(16px, 2vw, 30px); }
.facts__num {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-ink);   /* светлый акцент на фоне --paper даёт 2.9:1, мало даже для крупного текста */
}
.facts__num sup { font-size: .45em; vertical-align: super; margin-left: 2px; }
.facts__label { margin-top: 12px; font-size: 14.5px; color: var(--text-muted); max-width: 22ch; }

@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }

/* ---------- 8. Два направления ------------------------------------------- */

.dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 820px) { .dirs { grid-template-columns: 1fr; } }

.dir {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-media);
  overflow: hidden;
  color: #F2F5F3;
  isolation: isolate;
}
.dir__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .9s var(--ease);
}
.dir:hover .dir__img { transform: scale(1.05); }
.dir::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(200deg, rgba(6, 17, 14, .35) 0%, rgba(6, 17, 14, .78) 62%, rgba(6, 17, 14, .93) 100%);
}
.dir__kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.dir h3 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.dir p { margin-top: 14px; max-width: 34ch; color: rgba(242, 245, 243, .78); font-size: 15.5px; }
.dir__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.dir__tags li {
  padding: 7px 13px;
  border: 1px solid rgba(242, 245, 243, .26);
  border-radius: 999px;
  font-size: 13.5px;
}
.dir__foot { margin-top: auto; padding-top: 30px; }
.dir .link-arrow { color: #fff; }

/* ---------- 9. Бенто услуг ----------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bento { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-raised);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tile i { font-size: 28px; color: var(--accent-ink); }
.tile p { font-size: 14.5px; color: var(--text-muted); }
.tile__foot { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }

/* крупные ячейки с медиа */
.tile--wide { grid-column: span 2; }
/* фон тёмный, иначе прозрачная рамка в 1px даёт светлый ободок вокруг фото:
   абсолютное позиционирование по inset:0 идёт от padding-box и рамку не закрывает */
.tile--media { min-height: 300px; justify-content: flex-end; color: #F2F5F3; border-color: transparent; background: var(--ink); }
.tile--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tile--media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(6, 17, 14, .9) 6%, rgba(6, 17, 14, .35) 62%, rgba(6, 17, 14, .18) 100%);
}
.tile--media { isolation: isolate; }
.tile--media i { color: var(--accent-bright); }
.tile--media p { color: rgba(242, 245, 243, .8); }
.tile--media .tile__foot { color: #fff; }

.tile--accent {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

@media (max-width: 560px) { .tile--wide { grid-column: span 1; } }

/* ---------- 10. Калькулятор ---------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc__box {
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--paper-raised);
  padding: clamp(22px, 2.6vw, 38px);
  box-shadow: var(--shadow-sm);
}

.calc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.calc__step { font-size: 13.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.calc__track { flex: 1; height: 4px; border-radius: 999px; background: var(--paper-sunk); overflow: hidden; }
.calc__fill {
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left;
  transition: width .5s var(--ease);
}

.calc__pane { display: none; }
.calc__pane.is-active { display: block; animation: paneIn .45s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.calc__q { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 20px; }

.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.opt input:hover + span { border-color: var(--accent); }
.opt input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.opt input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.calc__nav { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.calc__side { padding-top: 4px; }
.calc__list { margin-top: 26px; display: grid; gap: 18px; }
.calc__list li { display: flex; gap: 14px; align-items: flex-start; }
.calc__list i { font-size: 22px; color: var(--accent-ink); flex: 0 0 auto; margin-top: 1px; }
.calc__list b { display: block; font-size: 15.5px; letter-spacing: -0.015em; }
.calc__list span { font-size: 14px; color: var(--text-muted); }

.calc__summary {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.calc__summary b { font-weight: 600; }

/* ---------- 11. Преимущества (липкий заголовок + список) ------------------ */

.why { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }

.why__head { position: sticky; top: 108px; }
@media (max-width: 900px) { .why__head { position: static; } }

.why__list { display: grid; }
.why__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.why__item:first-child { padding-top: 0; }
.why__item:last-child { border-bottom: 0; }
.why__ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 23px;
  flex: 0 0 auto;
}
.why__item h3 { font-size: 1.16rem; letter-spacing: -0.02em; }
.why__item p { margin-top: 8px; font-size: 15px; color: var(--text-muted); max-width: 58ch; }

@media (max-width: 560px) {
  .why__item { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- 12. Этапы (горизонтальная лента) ------------------------------ */

.steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.step {
  scroll-snap-align: start;
  padding: 26px 24px 30px;
  border-radius: var(--r-card);
  background: var(--ink-raised);
  border: 1px solid var(--line-on-ink);
  display: flex;
  flex-direction: column;
}
.step__n {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent-bright);
  margin-bottom: 18px;
}
.step h3 { font-size: 1.18rem; letter-spacing: -0.02em; color: var(--text-on-ink); }
.step p { margin-top: 10px; font-size: 14.5px; color: var(--text-on-ink-muted); }
.steps__hint { margin-top: 6px; font-size: 13.5px; color: var(--text-on-ink-muted); }

/* ---------- 13. Работы: до / после --------------------------------------- */

.ba {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 16 / 8.4;
  background: var(--paper-sunk);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
/* pointer-events снят с картинок: иначе браузер начинает нативное
   перетаскивание изображения и ползунок перестаёт ловить мышь */
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  pointer-events: none;
}
.ba__knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: #fff;
  color: #0E1614;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
  pointer-events: none;
}
.ba__tag {
  position: absolute;
  top: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(6, 17, 14, .6);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
.ba__tag--l { left: 18px; }
.ba__tag--r { right: 18px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.gallery a:hover img { transform: scale(1.04); filter: saturate(1.15); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 14. Чернильная CTA-полоса ------------------------------------ */

.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%; top: -60%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 20%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
.cta-band__inner { position: relative; text-align: center; max-width: 720px; margin-inline: auto; }
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.cta-band p { margin-top: 18px; color: var(--text-on-ink-muted); font-size: 1.05rem; }

.quick-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 32px;
  text-align: left;
}
@media (max-width: 720px) { .quick-form { grid-template-columns: 1fr; } }

/* поля быстрой формы должны стать прямыми ячейками сетки */
.quick-form .form__body { display: contents; }
.quick-form .field + .field { margin-top: 0; }
.quick-form .consent,
.quick-form .form__ok { grid-column: 1 / -1; }
.quick-form.is-sent .form__body { display: none; }

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

.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.review {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-raised);
}
.review__stars { color: var(--accent-ink); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; }
.review__by { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }
.review__mono {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  flex: 0 0 auto;
}
.review__by b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.review__by span { font-size: 13.5px; color: var(--text-muted); }

/* ---------- 16. FAQ ------------------------------------------------------- */

.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }

.qa__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.qa__q:hover { color: var(--accent-ink); }
.qa__sign {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 17px;
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.qa.is-open .qa__sign {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding-bottom: 24px; max-width: 68ch; font-size: 15.5px; color: var(--text-muted); }

/* ---------- 17. Контакты -------------------------------------------------- */

.contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (max-width: 900px) { .contacts { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: 2px; margin-top: 30px; }
.contact-list__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list__row i { font-size: 22px; color: var(--accent-ink); margin-top: 2px; }
.contact-list__row b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.contact-list__row a, .contact-list__row span { font-size: 17px; letter-spacing: -0.01em; }
.contact-list__row a:hover { color: var(--accent-ink); }

.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  display: grid; place-items: center;
  font-size: 21px;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.socials a:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.socials img { width: 22px; height: 22px; }

.card-form {
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--paper-raised);
  box-shadow: var(--shadow-sm);
}

/* ---------- 18. Формы ----------------------------------------------------- */

.field { display: grid; gap: 8px; }
.field + .field { margin-top: 16px; }

.field > label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-muted);
}
.section--ink .field > label { color: var(--text-on-ink-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper-raised);
  color: var(--text);
  font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.section--ink .field input,
.section--ink .field select,
.section--ink .field textarea {
  background: var(--ink-raised);
  border-color: var(--line-on-ink);
  color: var(--text-on-ink);
}
.section--ink .field input::placeholder { color: var(--text-on-ink-muted); }

.field__err {
  display: none;
  font-size: 13px;
  color: #C8452F;
}
@media (prefers-color-scheme: dark) { .field__err { color: #FF8A72; } }
.field.has-error input, .field.has-error select { border-color: #C8452F; }
.field.has-error .field__err { display: block; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.section--ink .consent { color: var(--text-on-ink-muted); }
.consent input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-ink);
}
.consent a { text-decoration: underline; text-underline-offset: 2px; }

.form__ok {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  color: var(--text);
}
.form.is-sent .form__ok { display: flex; }
.form.is-sent .form__body { display: none; }
.form__ok i { font-size: 30px; color: var(--accent-ink); flex: 0 0 auto; }
.form__ok b { display: block; letter-spacing: -0.015em; }
.form__ok span { font-size: 14.5px; color: var(--text-muted); }

.btn.is-busy { pointer-events: none; opacity: .72; }
.btn.is-busy .btn__label { visibility: hidden; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 19. Модальное окно ------------------------------------------- */

.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-media);
  background: var(--paper-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.modal::backdrop {
  background: rgba(6, 17, 14, .58);
  backdrop-filter: blur(4px);
}
.modal[open] { animation: modalIn .4s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__inner { padding: clamp(24px, 3vw, 38px); }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  cursor: pointer;
  font-size: 19px;
}
.modal h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); padding-right: 44px; }
.modal__lede { margin-top: 12px; font-size: 15px; color: var(--text-muted); }
.modal form { margin-top: 24px; }

/* ---------- 20. Тост ------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: var(--z-toast);
  transform: translate(-50%, 120%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 15px 22px;
  border-radius: var(--r-control);
  background: var(--ink-raised);
  color: var(--text-on-ink);
  box-shadow: var(--shadow-lg);
  font-size: 15px;
  transition: transform .5s var(--ease);
}
.toast.is-shown { transform: translate(-50%, 0); }
.toast i { color: var(--accent-bright); font-size: 21px; }

/* ---------- 21. Подвал ---------------------------------------------------- */

.footer { background: var(--ink); color: var(--text-on-ink-muted); padding-block: clamp(48px, 6vw, 78px) 32px; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer .brand__name { color: var(--text-on-ink); }
.footer p { font-size: 14.5px; max-width: 34ch; margin-top: 18px; }
.footer h4 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-ink); margin-bottom: 16px; }
.footer li + li { margin-top: 10px; }
.footer a { font-size: 15px; }
.footer a:hover { color: var(--text-on-ink); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: 26px;
  border-top: 1px solid var(--line-on-ink);
  font-size: 13.5px;
}

/* ---------- 21b. Полоса прогресса прокрутки ------------------------------ */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: var(--z-header);
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-ink), var(--accent-bright));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: progressGrow linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes progressGrow { to { transform: scaleX(1); } }
  }
}

/* ---------- 21c. Бегущая строка ------------------------------------------ */

.marquee {
  overflow: hidden;
  padding-block: 16px;
  border-block: 1px solid var(--line);
  background: var(--paper-sunk);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee__group b {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__group i {
  width: 5px; height: 5px;
  margin-inline: 22px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marqueeRun 34s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marqueeRun { to { transform: translateX(-50%); } }
}

/* ---------- 22. Моушен ---------------------------------------------------- */

/* Построчное проявление заголовка первого экрана.
   Слова оборачиваются в маску скриптом, поэтому без JS текст просто виден. */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.word > span {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
}
.is-ready .word > span {
  transform: none;
  opacity: 1;
  transition: transform .85s var(--ease), opacity .6s var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms);
}

/* Раскрытие изображения первого экрана шторкой.
   Маска висит на самой картинке, а не на обёртке: карточка с оффером выходит
   за её границы слева и попала бы под обрезку. */
@media (prefers-reduced-motion: no-preference) {
  .hero__img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .15s; }
  .is-ready .hero__img { clip-path: inset(0 0 0 0); }

  .hero__badge { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .75s, transform .7s var(--ease) .75s; }
  .is-ready .hero__badge { opacity: 1; transform: none; }
}

/* Подсветка плитки услуги за курсором */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  transition: opacity .35s var(--ease);
}
.tile:hover::after { opacity: 1; }
.tile > * { position: relative; z-index: 1; }
/* у медиа-плиток свой градиент в ::after, подсветку туда не добавляем */
.tile--media::after { background: linear-gradient(0deg, rgba(6, 17, 14, .9) 6%, rgba(6, 17, 14, .35) 62%, rgba(6, 17, 14, .18) 100%); opacity: 1; z-index: -1; }

/* Наклон карточек направлений вслед за курсором */
.dir {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
  will-change: transform;
}
.dir.is-tilting { transition: transform .12s linear; }

/* Блик на основной кнопке */
.btn--primary { overflow: hidden; }
.btn--primary .btn__label { position: relative; z-index: 1; }
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::before { animation: sheen .7s var(--ease); }
  @keyframes sheen { to { left: 115%; } }
}

/* Линия под лентой этапов. Там, где поддержаны scroll-driven анимации,
   она заполняется по мере горизонтальной прокрутки ленты; где нет,
   остаётся обычной акцентной чертой. */
.steps-rail { position: relative; timeline-scope: --stepsx; }
.steps { scroll-timeline: --stepsx inline; }
.steps-rail__track {
  height: 2px;
  border-radius: 999px;
  background: var(--line-on-ink);
  overflow: hidden;
}
.steps-rail__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent-bright);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
@supports (animation-timeline: --x) {
  @media (prefers-reduced-motion: no-preference) {
    .steps-rail__fill {
      animation: railGrow linear both;
      animation-timeline: --stepsx;
    }
    @keyframes railGrow { from { transform: scaleX(.18); } to { transform: scaleX(1); } }
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="scale"] { transform: scale(.965); }
[data-reveal="scale"].is-in { transform: none; }

[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="left"].is-in { transform: none; }

/* Медленный параллакс фонового изображения героя на прокрутке.
   Используются scroll-driven animations там, где они поддержаны;
   в остальных браузерах изображение просто статично. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero__img {
      animation: heroPan linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes heroPan {
      from { transform: scale(1.06) translateY(-1.4%); }
      to   { transform: scale(1.06) translateY(1.4%); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.stack-24 > * + * { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.center { text-align: center; }