/* ===================================================================
   DreamPools — сайт по проектированию и строительству бассейнов
   Дизайн-система: «архитектурная» — светлая база, тонкие линейки,
   прямые углы, крупная засечная типографика, приглушённые акценты.
   Один файл стилей на все страницы.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- поверхности --- */
  --paper:#FBFAF8;          /* основной фон — тёплая бумага */
  --paper-alt:#F3F1ED;      /* чередующаяся полоса */
  --white:#FFFFFF;
  --ink:#0A1520;            /* глубокий чернильный — тексты и тёмные полосы */
  --ink-deep:#060E16;
  --ink-soft:#16232F;

  /* --- текст --- */
  --tx-strong:#0A1520;
  --tx-body:#48565F;
  --tx-mute:#646F77;
  --tx-on-dark:#F4F2EE;
  --tx-on-dark-soft:#A9B4BC;
  --tx-on-dark-mute:#74838E;

  /* --- линии --- */
  /* Полупрозрачная бумага: липкая шапка и подменю разделов лежат
     поверх содержимого и просвечивают. Цвет обязан быть токеном —
     иначе в тёмной теме шапка остаётся белой полосой со светлым
     текстом на ней, то есть нечитаемой. */
  --paper-veil:rgba(251,250,248,0.985);
  --paper-veil-soft:rgba(251,250,248,0.95);
  /* Полотно всплывающего окна и затемнение под ним. В светлой теме
     белый лист сам отделяется от притемнённой страницы. В тёмной
     отделять нечем: окно и фон почти одного тона, край окна теряется.
     Поэтому окно — отдельным токеном, и в тёмной теме оно СВЕТЛЕЕ
     страницы, как приподнятый лист. */
  --surface:#FBFAF8;
  --ov-veil:rgba(6,14,22,0.78);
  --rule:#E2DFD9;
  --rule-strong:#CFCBC3;
  --rule-dark:rgba(255,255,255,0.13);

  /* --- акценты --- */
  --blue:#1B4B8F;           /* сдержанный глубокий синий — бренд */
  --blue-lift:#2A63B0;
  /* Заливка главной кнопки — отдельным токеном, а не просто --blue.
     В тёмной теме синий поднят по яркости ради читаемости ссылок, и
     белый текст на нём уже не держит контраст. Поэтому у кнопки свой
     оттенок: в светлой теме он совпадает с --blue, в тёмной — глубже. */
  --btn-fill-bg:#1B4B8F;
  --btn-fill-lift:#2A63B0;
  --blue-pale:#E8EEF6;
  --bronze:#A8834D;         /* приглушённая бронза вместо яркого золота */
  --bronze-lift:#C9A469;
  /* Текст поверх сплошной бронзы. Белым по бронзе контраст всего
     3.5 при норме 4.5 — мелкая цифра счётчика на такой заливке
     читается плохо в любой теме. Тёмными чернилами — 5.3 и 7.0. */
  --bronze-tx:#0A1520;
  /* Бронза, которой НАБРАН ТЕКСТ — номера разделов, мелкие подписи.
     Сама бронза не меняется: линии, заливки и подчёркивания остаются
     прежними. Но как текст она давала 3.3 при норме 4.5, и номер
     раздела приходилось выискивать глазами. Здесь она глубже. */
  --bronze-ink:#856231;

  /* --- типографика --- */
  --serif:'Spectral', 'PT Serif', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- метрика --- */
  --wrap:1280px;
  --gut:40px;
  --r:2px;                  /* радиус — почти нулевой, строгость */
}

/* ─────────────────────────────────────────────
   ТЁМНАЯ ТЕМА

   Значения объявлены ОДИН раз — здесь, с приставкой --n- (night).
   Ниже они «включаются» переназначением обычных токенов, и в тех двух
   блоках нет ни одного цвета: только механическая перекладка. Меняя
   оттенок, правьте только эти строки — разъехаться двум спискам
   негде.

   Блока два намеренно. Первый ловит системную настройку и работает
   даже без JavaScript. Второй — ручной выбор посетителя. Условие
   :not([data-theme="light"]) в первом обязательно: человек с тёмной
   системой, выбравший у нас светлую, должен получить светлую.

   Про сами оттенки. Тёмные полосы (--ink) в тёмной теме СВЕТЛЕЕ фона
   страницы, а не темнее. Иначе вся вёрстка, построенная на чередовании
   «бумага — чернила», схлопнулась бы в одно чёрное полотно: разделы
   перестали бы отделяться друг от друга. Синий и бронза подняты по
   яркости — те же цвета на тёмном фоне читаются глуше.
   ───────────────────────────────────────────── */
:root{
  --n-paper:#0E151C;
  --n-paper-alt:#141D26;
  --n-white:#18222C;
  --n-ink:#1C2733;
  --n-ink-deep:#141E28;
  --n-ink-soft:#22303D;

  --n-tx-strong:#ECE9E3;
  --n-tx-body:#B3BDC5;
  --n-tx-mute:#828D97;

  /* Текст на тёмных полосах. В светлой теме полоса почти чёрная
     (#060E16), в тёмной она СВЕТЛЕЕ страницы — значит те же серые
     на ней тускнеют. Поднимаем: иначе приглушённые надписи в подвале
     проваливаются до 3.4 при норме 4.5. */
  --n-tx-on-dark:#F0EDE8;
  --n-tx-on-dark-soft:#BAC4CB;
  --n-tx-on-dark-mute:#939EA9;

  --n-paper-veil:rgba(14,21,28,0.985);
  --n-paper-veil-soft:rgba(14,21,28,0.95);
  --n-surface:#18222C;
  --n-ov-veil:rgba(0,0,0,0.74);
  --n-rule:#26313C;
  --n-rule-strong:#35424F;

  --n-blue:#5A90DC;
  --n-blue-lift:#79A8E8;
  --n-blue-pale:#16263B;
  --n-btn-fill-bg:#3468B4;
  --n-btn-fill-lift:#3F76C6;
  --n-bronze:#C09A62;
  --n-bronze-lift:#D9BA85;
  --n-bronze-tx:#0E151C;
  /* На тёмном фоне бронза, наоборот, светлее: приглушать её здесь
     незачем, обычная ночная бронза даёт 7.0 на бумаге. */
  --n-bronze-ink:#C09A62;
}

/* Системная настройка. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:var(--n-paper); --paper-alt:var(--n-paper-alt); --white:var(--n-white);
    --ink:var(--n-ink); --ink-deep:var(--n-ink-deep); --ink-soft:var(--n-ink-soft);
    --tx-strong:var(--n-tx-strong); --tx-body:var(--n-tx-body); --tx-mute:var(--n-tx-mute);
    --tx-on-dark:var(--n-tx-on-dark); --tx-on-dark-soft:var(--n-tx-on-dark-soft);
    --tx-on-dark-mute:var(--n-tx-on-dark-mute);
    --paper-veil:var(--n-paper-veil); --paper-veil-soft:var(--n-paper-veil-soft);
    --rule:var(--n-rule); --rule-strong:var(--n-rule-strong);
    --blue:var(--n-blue); --blue-lift:var(--n-blue-lift); --blue-pale:var(--n-blue-pale);
    --bronze:var(--n-bronze); --bronze-lift:var(--n-bronze-lift);
    --btn-fill-bg:var(--n-btn-fill-bg); --btn-fill-lift:var(--n-btn-fill-lift);
    --bronze-tx:var(--n-bronze-tx); --bronze-ink:var(--n-bronze-ink);
    --surface:var(--n-surface); --ov-veil:var(--n-ov-veil);
  }
}

/* Ручной выбор — сильнее системного. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:var(--n-paper); --paper-alt:var(--n-paper-alt); --white:var(--n-white);
  --ink:var(--n-ink); --ink-deep:var(--n-ink-deep); --ink-soft:var(--n-ink-soft);
  --tx-strong:var(--n-tx-strong); --tx-body:var(--n-tx-body); --tx-mute:var(--n-tx-mute);
  --tx-on-dark:var(--n-tx-on-dark); --tx-on-dark-soft:var(--n-tx-on-dark-soft);
  --tx-on-dark-mute:var(--n-tx-on-dark-mute);
  --paper-veil:var(--n-paper-veil); --paper-veil-soft:var(--n-paper-veil-soft);
    --rule:var(--n-rule); --rule-strong:var(--n-rule-strong);
  --blue:var(--n-blue); --blue-lift:var(--n-blue-lift); --blue-pale:var(--n-blue-pale);
  --bronze:var(--n-bronze); --bronze-lift:var(--n-bronze-lift);
  --btn-fill-bg:var(--n-btn-fill-bg); --btn-fill-lift:var(--n-btn-fill-lift);
  --bronze-tx:var(--n-bronze-tx); --bronze-ink:var(--n-bronze-ink);
  --surface:var(--n-surface); --ov-veil:var(--n-ov-veil);
}
:root[data-theme="light"]{ color-scheme: light; }

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--tx-body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
blockquote,figure{ margin:0; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--serif); font-weight:400; color:var(--tx-strong); letter-spacing:-0.01em; }
button{ font-family:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* ─────────────────────────────────────────────
   ТИПОГРАФИЧЕСКИЕ ПРИМИТИВЫ
   ───────────────────────────────────────────── */

/* мелкая подпись-рубрика с номером — редакционный приём */
.kicker{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--tx-mute);
}
.kicker .num{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--bronze-ink);
}
.kicker::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
  position:relative;
  top:-3px;
}
.on-dark .kicker{ color:var(--tx-on-dark-mute); }
.on-dark .kicker::after{ background:var(--rule-dark); }
.on-dark .kicker .num{ color:var(--bronze-lift); }

/* заголовок раздела */
.h-sec{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.16;
  letter-spacing:-0.015em;
  max-width:19ch;
}
.h-sec.wide{ max-width:26ch; }
.on-dark .h-sec{ color:var(--tx-on-dark); }

.lede{
  font-size:17px;
  line-height:1.62;
  color:var(--tx-body);
  max-width:56ch;
}
.on-dark .lede{ color:var(--tx-on-dark-soft); }

/* шапка раздела: рубрика сверху, заголовок и лид в две колонки */
.sec-head{ margin-bottom:64px; }
.sec-head .kicker{ margin-bottom:28px; }
.sec-head-split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:56px;
  align-items:end;
}

/* ─────────────────────────────────────────────
   КНОПКИ — прямоугольные, строгие
   ───────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:52px;
  padding:0 30px;
  border:1px solid transparent;
  border-radius:var(--r);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background .28s ease, color .28s ease, border-color .28s ease;
}
.btn-fill{ background:var(--btn-fill-bg); color:#fff; }
.btn-fill:hover{ background:var(--btn-fill-lift); }

.btn-line{ background:transparent; color:var(--tx-strong); border-color:var(--rule-strong); }
.btn-line:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }

.btn-line-light{ background:transparent; color:var(--tx-on-dark); border-color:rgba(255,255,255,0.32); }
.btn-line-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* Бронзовый контур — третья кнопка на тёмном экране приветствия.
   Синяя заливка занята главным действием, светлый контур — портфолио;
   магазину нужен свой голос, а не третий клон соседа. Бронза уже есть
   в палитре сайта, так что нового цвета не появляется. */
.btn-line-bronze{
  background:transparent;
  color:var(--bronze-lift);
  border-color:rgba(201,164,105,0.55);
}
.btn-line-bronze:hover{ background:var(--bronze); color:var(--bronze-tx); border-color:var(--bronze); }

.btn-wide{ width:100%; }
.btn-sm{ height:44px; padding:0 22px; font-size:12px; }

/* текстовая ссылка со стрелкой */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--tx-strong);
  padding-bottom:6px;
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .28s ease, color .28s ease;
}
.link-arrow:hover{ border-color:var(--blue); color:var(--blue); }
.on-dark .link-arrow{ color:var(--tx-on-dark); border-color:rgba(255,255,255,0.3); }
.on-dark .link-arrow:hover{ color:#fff; border-color:#fff; }

/* ─────────────────────────────────────────────
   ШАПКА
   ───────────────────────────────────────────── */
.hdr{
  position:fixed;
  inset:0 0 auto 0;
  z-index:600;
  padding:26px 0;
  transition:padding .4s ease, background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; }

/* состояние поверх тёмного hero */
.hdr.over-dark .nav a{ color:var(--tx-on-dark-soft); }
.hdr.over-dark .nav a:hover,.hdr.over-dark .nav a.on{ color:#fff; }
.hdr.over-dark .logo-word{ color:#fff; }
.hdr.over-dark .hdr-tel{ color:#fff; }
.hdr.over-dark .hdr-tel span{ color:var(--tx-on-dark-mute); }
.hdr.over-dark .btn-line{ color:#fff; border-color:rgba(255,255,255,0.32); }
.hdr.over-dark .btn-line:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.hdr.over-dark .burger{ color:#fff; border-color:rgba(255,255,255,0.3); }

/* прилипшее состояние */
.hdr.stuck{
  padding:15px 0;
  background:var(--paper-veil);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}
.hdr.stuck .nav a{ color:var(--tx-body); }
.hdr.stuck .nav a:hover,.hdr.stuck .nav a.on{ color:var(--tx-strong); }
.hdr.stuck .logo-word{ color:var(--tx-strong); }
.hdr.stuck .hdr-tel{ color:var(--tx-strong); }
.hdr.stuck .hdr-tel span{ color:var(--tx-mute); }
.hdr.stuck .btn-line{ color:var(--tx-strong); border-color:var(--rule-strong); }
.hdr.stuck .btn-line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.hdr.stuck .burger{ color:var(--tx-strong); border-color:var(--rule-strong); }

/* логотип: векторная эмблема + название текстом в шрифте сайта */
.logo{ display:flex; align-items:center; gap:13px; flex:none; }
.logo-mark{
  display:block;
  width:44px; height:44px;
  flex:none;
  transition:width .4s ease, height .4s ease;
}
.logo-word{
  font-family:var(--serif);
  font-size:27px;
  font-weight:500;
  letter-spacing:0.035em;
  line-height:1;
  white-space:nowrap;
  color:#fff;
  transition:color .4s ease, font-size .4s ease;
}
/* по умолчанию шапка поверх тёмного экрана */
.logo-on-light{ display:none; }
/* прилипшая шапка светлая — меняем и эмблему, и цвет названия */
.hdr.stuck .logo-on-dark{ display:none; }
.hdr.stuck .logo-on-light{ display:block; }
.hdr.stuck .logo-word{ color:var(--tx-strong); font-size:24px; }
.hdr.stuck .logo-mark{ width:38px; height:38px; }

/* Подмена эмблемы существует ради одного: прилипшая шапка становится
   светлой бумагой, и эмблема со светлым контуром на ней пропадала бы.
   В тёмной теме прилипшая шапка сама тёмная — и подменять не на что:
   «светлый» вариант нарисован почти чёрным контуром (#16263c), и на
   тёмной шапке от кольца не остаётся ничего, только синяя корона
   висит в пустоте. Поэтому здесь возвращаем тёмный вариант.

   Правило продублировано намеренно: первый блок ловит системную
   настройку и работает без JavaScript, второй — ручной выбор. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hdr.stuck .logo-on-dark{ display:block; }
  :root:not([data-theme="light"]) .hdr.stuck .logo-on-light{ display:none; }
}
:root[data-theme="dark"] .hdr.stuck .logo-on-dark{ display:block; }
:root[data-theme="dark"] .hdr.stuck .logo-on-light{ display:none; }

/* подвал всегда тёмный */
.ftr .logo-on-light{ display:none; }
.ftr .logo-word{ color:#fff; }
.logo-big .logo-mark{ width:54px; height:54px; }
.logo-big .logo-word{ font-size:31px; }

.nav{ display:flex; align-items:center; gap:38px; }
.nav a{
  position:relative;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--tx-body);
  padding:4px 0;
  /* Пункт меню — это одно слово, даже когда слов в нём два. Без запрета
     строка шапки между 1260 и 1100 пикселями поджимается, и «О нас»
     — единственный пункт из двух слов — разваливался по пробелу на две
     строки: «О» сверху, «нас» снизу. Соседние пункты при этом стояли
     ровно, и выглядело это как съехавшая вёрстка. */
  white-space:nowrap;
  transition:color .3s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav a.on::after,.nav a:hover::after{ transform:scaleX(1); }

.hdr-side{ display:flex; align-items:center; gap:26px; }
/* ── Мессенджеры в шапке ──────────────────────────────────────────
   Квадрат с волосяной рамкой и радиусом --r — та же кнопка, что
   «Оставить заявку», только по размеру значка. Высота 44px совпадает с
   .btn-sm, поэтому строка шапки остаётся ровной. */
.hdr-soc{ display:flex; gap:8px; flex:none; }
.hdr-soc-a{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  color:var(--tx-strong);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.hdr-soc-a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ── Переключатель темы ────────────────────────────────────────────
   Размер и рамка — как у значков мессенджеров рядом: это один ряд
   органов управления, и выпадать из него кнопке незачем. */
.hdr-theme{
  width:44px; height:44px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--rule-strong); border-radius:var(--r);
  background:none; color:var(--tx-strong); cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.hdr-theme:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.hdr.over-dark .hdr-theme{ color:#fff; border-color:rgba(255,255,255,0.32); }
.hdr.over-dark .hdr-theme:hover{ background:#fff; color:var(--ink); border-color:#fff; }

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

   Переключение сделано стилями, а не скриптом. Значок оказывается
   правильным с первой отрисовки, без мигания, и при выключенном
   JavaScript кнопка хотя бы не врёт: она просто не работает. */
.hdr-theme .th-sun{ display:none; }
.hdr-theme .th-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hdr-theme .th-sun{ display:block; }
  :root:not([data-theme="light"]) .hdr-theme .th-moon{ display:none; }
}
:root[data-theme="dark"] .hdr-theme .th-sun{ display:block; }
:root[data-theme="dark"] .hdr-theme .th-moon{ display:none; }
:root[data-theme="light"] .hdr-theme .th-sun{ display:none; }
:root[data-theme="light"] .hdr-theme .th-moon{ display:block; }
.hdr-soc-a svg{ display:block; }
/* поверх тёмного экрана приветствия — светлый контур, как у кнопки рядом */
.hdr.over-dark .hdr-soc-a{ color:#fff; border-color:rgba(255,255,255,0.32); }
.hdr.over-dark .hdr-soc-a:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.hdr-tel{
  /* flex:none обязателен. Без него телефон, как обычный гибкий элемент,
     сжимается уже своего текста, и номер выезжает вправо — прямо под
     значки мессенджеров. */
  flex:none;
  white-space:nowrap;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--tx-strong);
  text-align:right;
  line-height:1.3;
  transition:color .4s ease;
}
.hdr-tel span{
  display:block;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--tx-mute);
}

.burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  color:var(--tx-strong);
  cursor:pointer;
}
.nav.open{
  display:flex;
  position:fixed;
  top:76px; left:20px; right:20px;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:10px 24px 20px;
  background:var(--ink);
  border-radius:var(--r);
}
.nav.open a{ color:var(--tx-on-dark-soft); padding:14px 0; width:100%; border-bottom:1px solid var(--rule-dark); }
.nav.open a:last-child{ border-bottom:none; }

/* ─────────────────────────────────────────────
   HERO ГЛАВНОЙ
   ───────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
}
/* Снимок первого экрана.

   Раньше это был фон, и нужный размер выбирался медиазапросами по
   ширине окна. Так делать нельзя по двум причинам сразу.

   Первая: медиазапрос ничего не знает о плотности экрана. На мониторе
   с удвоенной плотностью в блок шириной 1280 точек CSS помещается
   2560 настоящих, а правило отдавало файл на 1440.

   Вторая, и она же ответ на «сдвинул окно на полэкрана — стало хуже»:
   под cover размер кадра диктует та сторона, которой не хватает. Первый
   экран высотой во всё окно, кадр 3:2 — стоит окну стать уже, чем
   полтора его высоты, и растягивать приходится ПО ВЫСОТЕ. Окно уже,
   файл по ширине выбирается меньше, а растяжение больше: на 1280×1400
   выходило ×1,46 против ×1,33 на полном экране, и ×2,92 на плотном.

   Обычная картинка с srcset учитывает и то, и другое: плотность —
   сама, высоту — через sizes в build.js (PHOTO_SIZES.hero). */
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  /* Пока снимок не пришёл, под вуалью должна быть та же темнота, что и
     у секции, — иначе на медленной связи мелькает белый прямоугольник. */
  background:var(--ink-deep);
}
.hero-art{ position:absolute; inset:0; width:100%; height:100%; }
/* затемняющая вуаль: держит контраст текста и оставляет кадр читаемым */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,12,20,.60) 0%,
      rgba(5,12,20,.26) 28%,
      rgba(5,12,20,.56) 56%,
      rgba(5,12,20,.84) 82%,
      rgba(5,12,20,.90) 100%),
    linear-gradient(90deg, rgba(5,12,20,.72) 0%, rgba(5,12,20,.20) 46%, rgba(5,12,20,0) 68%);
}

.hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  /* Горизонтальные поля — var(--gut), как у .wrap. Раньше здесь стоял
     ноль, и он затирал поля обёртки: заголовок экрана приветствия
     висел на 40px левее логотипа и подвала, а на экране уже 1000px
     упирался прямо в край окна. */
  padding:150px var(--gut) 108px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:60px;
  align-items:end;
}

.hero-copy .kicker{ color:var(--tx-on-dark-mute); margin-bottom:24px; }
.hero-copy .kicker::after{ background:var(--rule-dark); }
.hero-copy .kicker .num{ color:var(--bronze-lift); }

.hero-h1{
  font-size:clamp(36px,5vw,66px);
  line-height:1.06;
  letter-spacing:-0.02em;
  color:#fff;
  max-width:15ch;
  font-weight:300;
}
.hero-h1 em{ font-style:italic; color:var(--bronze-lift); }

.hero-sub{
  margin-top:26px;
  font-size:16.5px;
  line-height:1.6;
  color:var(--tx-on-dark-soft);
  max-width:46ch;
}
.hero-cta{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }

/* цифры под hero */
.hero-facts{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--rule-dark);
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.hero-facts b{
  display:block;
  font-family:var(--serif);
  font-size:30px;
  font-weight:400;
  color:#fff;
  line-height:1.1;
}
.hero-facts span{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--tx-on-dark-mute);
}

/* стек: Монтаж / Сервис / Проект — в столбик, одним шрифтом */
.stack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding-bottom:6px;
}
.stack-w{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,5.2vw,74px);
  line-height:1.04;
  letter-spacing:-0.015em;
  color:#fff;
  padding:12px 0;
  border-bottom:1px solid var(--rule-dark);
  min-width:clamp(200px,22vw,330px);
  text-align:right;
  opacity:0;
  transform:translateY(20px);
  animation:stackUp .95s cubic-bezier(.22,.75,.25,1) forwards;
}
.stack-w:first-child{ border-top:1px solid var(--rule-dark); }
.stack-w:nth-child(1){ animation-delay:.30s; }
.stack-w:nth-child(2){ animation-delay:.55s; color:var(--tx-on-dark-soft); }
.stack-w:nth-child(3){ animation-delay:.80s; color:var(--bronze-lift); }
@keyframes stackUp{ to{ opacity:1; transform:translateY(0); } }

.stack-note{
  margin-top:16px;
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--tx-on-dark-mute);
  text-align:right;
}

/* ─────────────────────────────────────────────
   HERO ВНУТРЕННИХ СТРАНИЦ
   ───────────────────────────────────────────── */
.phero{
  padding:186px 0 88px;
  background:var(--ink-deep);
  position:relative;
  overflow:hidden;
}
.phero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 82% 0%, rgba(27,75,143,0.30), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(168,131,77,0.12), transparent 60%);
}
.phero .wrap{ position:relative; z-index:2; }

/* ─────────────────────────────────────────────
   ЧЕРТЁЖ В ЗАГОЛОВКЕ СТРАНИЦЫ

   Ложится в пустой правый верхний угол шапки — там, где заканчивается
   заголовок и ещё не начался вводный абзац. Лежит ПОД текстом (z-index
   ниже .wrap) и приглушён: это фон, а не иллюстрация к статье. Если
   рисунок начнёт спорить с заголовком — уменьшайте opacity, а не
   двигайте текст.
   ───────────────────────────────────────────── */
/* Рисунок лежит ПОД текстом и приглушён до фона.

   Убрать перекрытие совсем не выйдет: справа от вводного абзаца до
   края страницы всего восемьдесят пикселей, а над ним просвет от 35 до
   75 — чертёж пришлось бы сплющить в нечитаемую полоску. Значит,
   перекрытие должно быть не случайным, а одинаковым.

   Поэтому рисунок сидит В ЯЧЕЙКЕ вводного абзаца и центрирован по
   нему. Раньше он центрировался по секции, а абзац прижат к её низу —
   на разных страницах они расходились, и площадь пересечения гуляла
   втрое. Теперь текст ложится на середину чертежа везде одинаково. */
.phero-side{ position:relative; }
.phero-art{
  position:absolute;
  left:50%;
  top:50%;
  /* Сдвиг вверх на 6% высоты рисунка — постоянный, поэтому отношение к
     тексту остаётся одинаковым на всех страницах. Без него у «Услуг»
     нижний участок трубы упирался в край шапки и срезался. */
  transform:translate(-50%,-58%);
  width:min(560px,44vw);
  z-index:0;
  color:var(--bronze-lift);
  opacity:.3;
  pointer-events:none;
}
.phero-art svg{ width:100%; height:auto; display:block; }
.phero-side .lede{ position:relative; z-index:1; }

/* Текст шапки обязан лежать поверх рисунка. */
.phero .kicker,.phero-grid,.phero-shop .hero-search,.phero-shop .hero-search-note{
  position:relative; z-index:1;
}

/* Линии прочерчиваются один раз при загрузке — будто чертёж рисуют у
   вас на глазах. Наружный контур с задержкой: сначала предмет, потом
   его толщина, как чертят от руки. 1600 — с запасом длиннее самого
   длинного пути. */
.pa-draw-1,.pa-draw-2{
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:pa-draw 2.4s cubic-bezier(.25,.8,.3,1) forwards;
}
.pa-draw-1{ animation-delay:.2s; }
.pa-draw-2{ animation-delay:.75s; }
@keyframes pa-draw{ to{ stroke-dashoffset:0; } }

/* Линия воды тихо колышется. Волна нарисована с запасом слева, поэтому
   сдвиг ровно на её период на краю незаметен. */
.pa-wave{ animation:pa-wave 7s ease-in-out infinite; }
@keyframes pa-wave{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-46px); }
}

/* Точка воды идёт по той же осевой, что нарисованы трубы: путь взят из
   генератора, поэтому не разъезжается с рисунком. Координаты — в
   единицах viewBox, потому что элемент лежит внутри <svg>. */
.pa-dot{
  offset-path:path("M150 106L150 77A11 11 0 0 1 161 66L381 66A11 11 0 0 1 392 77L392 187A11 11 0 0 1 381 198L201 198A11 11 0 0 1 190 187L190 142");
  offset-rotate:0deg;
  animation:pa-run 13s linear infinite;
}
@keyframes pa-run{ to{ offset-distance:100%; } }

/* Колба: уровень медленно подходит к отметке и отступает. */
.pa-fill{
  transform-box:view-box;
  transform-origin:196px 200px;
  animation:pa-fill 9s ease-in-out infinite;
}
@keyframes pa-fill{
  0%,100%{ transform:scaleY(.68); }
  50%{ transform:scaleY(1); }
}
/* Капля падает точно по оси колбы — её x задан в разметке. */
.pa-drop{
  transform-box:view-box;
  animation:pa-drop 5s ease-in infinite;
}
@keyframes pa-drop{
  0%{ transform:translateY(30px) scaleY(.7); opacity:0; }
  14%{ opacity:.9; }
  60%{ transform:translateY(140px) scaleY(1.5); opacity:.9; }
  68%{ transform:translateY(148px) scaleY(.4); opacity:0; }
  100%{ opacity:0; }
}

/* Обвязка: вода идёт по трубе. Штрих ползёт, а не мигает. */
.pa-flow path{ animation:pa-flow 3.6s linear infinite; }
@keyframes pa-flow{ to{ stroke-dashoffset:-36; } }

.pa-lbl text{ font-family:var(--sans); font-weight:600; }

/* На узких экранах шапка становится одноколоночной, свободного угла
   больше нет — рисунок только мешал бы тексту. */
@media (max-width:980px){
  .phero-art{ display:none; }
}
.phero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:56px;
  align-items:end;
  margin-top:30px;
}
.phero h1{
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.1;
  font-weight:300;
  letter-spacing:-0.02em;
  color:#fff;
  max-width:18ch;
}
.phero .lede{ color:var(--tx-on-dark-soft); }
.phero .kicker{ color:var(--tx-on-dark-mute); }
.phero .kicker::after{ background:var(--rule-dark); }
.phero .kicker .num{ color:var(--bronze-lift); }

/* ─────────────────────────────────────────────
   СЕКЦИИ
   ───────────────────────────────────────────── */
/* переход по якорю не должен прятать заголовок под шапкой и подменю */
section[id],.row-item[id]{ scroll-margin-top:142px; }

.sec{ padding:130px 0; }
.sec-sm{ padding:88px 0; }
.sec-alt{ background:var(--paper-alt); }
.sec-dark{ background:var(--ink); }
.sec-dark .h-sec,.sec-dark h3{ color:var(--tx-on-dark); }
.sec-dark p{ color:var(--tx-on-dark-soft); }
.sec-line-top{ border-top:1px solid var(--rule); }

/* ─────────────────────────────────────────────
   МАНИФЕСТ (асимметричный редакционный блок)
   ───────────────────────────────────────────── */
.manifest{
  display:grid;
  grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);
  gap:70px;
  align-items:start;
}
.manifest-quote{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.34;
  font-weight:300;
  color:var(--tx-strong);
  letter-spacing:-0.01em;
}
.manifest-body p + p{ margin-top:20px; }
.manifest-sign{
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tx-mute);
}

/* ─────────────────────────────────────────────
   ТИПЫ ЧАШ — редакционные строки с крупной цифрой
   ───────────────────────────────────────────── */
.rows{ border-top:1px solid var(--rule); }
.row-item{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) minmax(0,1.3fr) 186px;
  gap:36px;
  align-items:start;
  padding:40px 0;
  border-bottom:1px solid var(--rule);
  transition:background .35s ease;
}
.row-item:hover{ background:rgba(27,75,143,0.028); }
.row-num{
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  color:var(--bronze-ink);
  letter-spacing:0.04em;
  padding-top:3px;
}
.row-title{
  font-size:22px;
  line-height:1.28;
  font-weight:400;
  color:var(--tx-strong);
}
.row-desc{ font-size:15px; line-height:1.62; color:var(--tx-body); }
.row-meta{
  align-self:center;
  justify-self:end;
  text-align:center;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tx-mute);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:8px 14px;
  white-space:nowrap;
}
/* тёмный вариант строк */
.sec-dark .rows{ border-top-color:var(--rule-dark); }
.sec-dark .row-item{ border-bottom-color:var(--rule-dark); }
.sec-dark .row-item:hover{ background:rgba(255,255,255,0.028); }
.sec-dark .row-title{ color:var(--tx-on-dark); }
.sec-dark .row-desc{ color:var(--tx-on-dark-soft); }
.sec-dark .row-num{ color:var(--bronze-lift); }
.sec-dark .row-meta{ color:var(--tx-on-dark-mute); border-color:var(--rule-dark); }

/* ─────────────────────────────────────────────
   ЭТАПЫ РАБОТЫ — вертикальная шкала на линейках
   ───────────────────────────────────────────── */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule-dark);
  border:1px solid var(--rule-dark);
}
.step{
  background:var(--ink);
  padding:38px 32px 42px;
  position:relative;
}
.step-n{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:0.12em;
  color:var(--bronze-lift);
  display:block;
  margin-bottom:22px;
}
.step h3{
  font-size:19px;
  line-height:1.32;
  font-weight:400;
  color:var(--tx-on-dark);
  min-height:2.6em;
}
.step p{
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
  color:var(--tx-on-dark-mute);
}

/* ─────────────────────────────────────────────
   ПРЕИМУЩЕСТВА — сетка на линейках
   ───────────────────────────────────────────── */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.tile{ background:var(--paper); padding:38px 30px 42px; }
.sec-alt .tile{ background:var(--paper-alt); }
.tile-ic{
  width:34px; height:34px;
  color:var(--blue);
  margin-bottom:26px;
}
.tile h3{ font-size:18px; line-height:1.34; font-weight:400; }
.tile p{ margin-top:12px; font-size:14px; line-height:1.6; color:var(--tx-body); }

/* ─────────────────────────────────────────────
   ПОРТФОЛИО
   ───────────────────────────────────────────── */
.folio{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.folio-2{ grid-template-columns:repeat(2,1fr); }
.folio-card{ display:block; }
.folio-fig{
  position:relative;
  aspect-ratio:4/3.1;
  overflow:hidden;
  background:var(--ink-soft);
  border-radius:var(--r);
}
/* ▼ ФОТО ПРОЕКТА.
   Снимок обязан заполнять карточку целиком и обрезаться по её краям. Без
   object-fit фотография с другой пропорцией просто ложится сверху, и внизу
   остаётся пустая полоса цвета подложки — та самая серая.
   object-position задаёт, какая часть кадра остаётся видимой: 50% —
   середина, больше — окно съезжает вниз. У бассейна интересна нижняя часть
   кадра, вода и чаша, а не небо, поэтому 58%. Это одно число, крутите на
   вкус или переопределите у отдельной карточки инлайн-стилем.
   ВАЖНО: правило должно ловить и <img>, и старые SVG-заглушки. */
.folio-fig img,
.folio-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.folio-card:hover .folio-fig img,
.folio-card:hover .folio-art{ transform:scale(1.035); }
.folio-tag{
  position:absolute; top:0; left:0;
  background:var(--paper);
  color:var(--tx-strong);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:9px 14px;
}
.folio-body{ padding-top:18px; border-top:1px solid var(--rule); margin-top:18px; }
.folio-body h3{ font-size:19px; font-weight:400; line-height:1.32; }
.folio-body span{
  display:block;
  margin-top:7px;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tx-mute);
}
.sec-dark .folio-body{ border-top-color:var(--rule-dark); }
.sec-dark .folio-body h3{ color:var(--tx-on-dark); }
.sec-dark .folio-body span{ color:var(--tx-on-dark-mute); }
.sec-dark .folio-tag{ background:var(--ink); color:var(--tx-on-dark); }

/* ─────────────────────────────────────────────
   ОТЗЫВЫ — статичная сетка, без каруселей
   ───────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.quote{ background:var(--paper); padding:40px 34px; display:flex; flex-direction:column; }
.sec-alt .quote{ background:var(--paper-alt); }
.quote-mark{
  font-family:var(--serif);
  font-size:44px;
  line-height:.6;
  color:var(--bronze);
  margin-bottom:22px;
}
.quote p{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  font-weight:300;
  color:var(--tx-strong);
  flex:1;
}
.quote footer{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--tx-mute);
}
.quote footer b{ display:block; font-weight:600; color:var(--tx-strong); letter-spacing:0; font-size:14px; margin-bottom:3px; }

/* ─────────────────────────────────────────────
   АККОРДЕОН (FAQ, чек-листы, ошибки)
   ───────────────────────────────────────────── */
.acc{ border-top:1px solid var(--rule); }
.acc-i{ border-bottom:1px solid var(--rule); }
.acc-t{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  padding:26px 0;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--serif);
  font-size:19px;
  font-weight:400;
  line-height:1.38;
  color:var(--tx-strong);
  transition:color .3s ease;
}
.acc-t:hover{ color:var(--blue); }
.acc-sign{
  flex:none;
  position:relative;
  width:20px; height:20px;
  margin-top:6px;
}
.acc-sign::before,.acc-sign::after{
  content:"";
  position:absolute;
  background:var(--tx-strong);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.acc-sign::before{ top:9.5px; left:0; width:20px; height:1px; }
.acc-sign::after{ left:9.5px; top:0; width:1px; height:20px; }
.acc-i.open .acc-sign::after{ transform:scaleY(0); }
.acc-i.open .acc-sign::before{ background:var(--blue); }
.acc-p{ max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.2,.7,.3,1); }
.acc-in{ padding:0 0 30px; max-width:74ch; }
.acc-in p{ font-size:15.5px; line-height:1.66; }
.acc-in p + p{ margin-top:12px; }
.acc-in ul{ margin-top:2px; }
.acc-in li{
  position:relative;
  padding-left:26px;
  margin:11px 0;
  font-size:15.5px;
  line-height:1.55;
  color:var(--tx-body);
}
.acc-in li::before{
  content:"";
  position:absolute;
  left:0; top:11px;
  width:11px; height:1px;
  background:var(--bronze);
}
/* тёмный аккордеон */
.on-dark .acc,.sec-dark .acc{ border-top-color:var(--rule-dark); }
.on-dark .acc-i,.sec-dark .acc-i{ border-bottom-color:var(--rule-dark); }
.on-dark .acc-t,.sec-dark .acc-t{ color:var(--tx-on-dark); }
.on-dark .acc-sign::before,.on-dark .acc-sign::after,
.sec-dark .acc-sign::before,.sec-dark .acc-sign::after{ background:var(--tx-on-dark); }
.on-dark .acc-in li,.sec-dark .acc-in li,
.on-dark .acc-in p,.sec-dark .acc-in p{ color:var(--tx-on-dark-soft); }

/* разбор ошибок: три подписи внутри аккордеона */
.mist{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.mist div b{
  display:block;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bronze-ink);
  margin-bottom:10px;
}
.mist div p{ font-size:14.5px; line-height:1.6; }

/* ─────────────────────────────────────────────
   ТИПИЧНЫЕ ПРОБЛЕМЫ — 4 плашки на одном уровне
   ───────────────────────────────────────────── */
.probs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--rule-dark);
  border:1px solid var(--rule-dark);
}
.prob{ background:var(--ink); padding:36px 28px 40px; display:flex; flex-direction:column; gap:24px; }
.prob-h{ display:flex; align-items:flex-start; gap:12px; }
.prob-h i{
  flex:none;
  width:9px; height:9px;
  margin-top:9px;
  border-radius:50%;
  background:var(--bronze-lift);
}
.prob-h h3{ font-size:20px; font-weight:400; line-height:1.28; color:var(--tx-on-dark); }
.prob-b b{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--tx-on-dark-mute);
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--rule-dark);
}
.prob-b li{
  position:relative;
  padding-left:18px;
  margin:8px 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--tx-on-dark-soft);
}
.prob-b li::before{
  content:"";
  position:absolute; left:0; top:9px;
  width:8px; height:1px;
  background:var(--tx-on-dark-mute);
}

/* ─────────────────────────────────────────────
   КАЛЬКУЛЯТОРЫ
   ───────────────────────────────────────────── */
.calcs{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.calc{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:40px;
  display:flex;
  flex-direction:column;
}
.calc-h{ padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid var(--rule); }
.calc-h h3{ font-size:24px; font-weight:400; margin-top:18px; }
.calc-h p{ margin-top:10px; font-size:14.5px; color:var(--tx-body); }

.tabs{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:26px; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.tabs button{
  flex:1 1 auto;
  min-width:118px;
  padding:12px 14px;
  background:var(--white);
  border:none;
  border-right:1px solid var(--rule);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
  color:var(--tx-mute);
  cursor:pointer;
  transition:background .28s ease, color .28s ease;
}
.tabs button:last-child{ border-right:none; }
.tabs button:hover{ color:var(--tx-strong); }
.tabs button.on{ background:var(--ink); color:#fff; }

.fset{ display:none; }
.fset.on{ display:block; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.fld{ margin-bottom:18px; }
.fld label{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tx-mute);
  margin-bottom:9px;
}
.fld input,.fld select,.fld textarea{
  width:100%;
  padding:13px 15px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r);
  font-family:var(--sans);
  font-size:15px;
  color:var(--tx-strong);
  transition:border-color .25s ease, background .25s ease;
}
.fld input:hover,.fld textarea:hover{ border-color:var(--rule-strong); }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:var(--white);
}
.fld textarea{ resize:vertical; }

/* режимы дезинфекции */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
.modes label{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  font-size:13.5px;
  font-weight:500;
  color:var(--tx-body);
  cursor:pointer;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:background .25s ease, color .25s ease;
}
.modes label:nth-child(2n){ border-right:none; }
.modes label:nth-child(n+3){ border-bottom:none; }
.modes label:hover{ background:var(--paper); }
.modes label.sel{ background:var(--blue-pale); color:var(--tx-strong); }
.modes input{ accent-color:var(--blue); }

.out{
  margin-top:auto;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.out-l{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--tx-mute);
}
.out-v{
  font-family:var(--serif);
  font-size:42px;
  font-weight:400;
  line-height:1.1;
  color:var(--tx-strong);
  margin-top:12px;
  letter-spacing:-0.02em;
}
.out-s{ margin-top:9px; font-size:14px; line-height:1.55; color:var(--tx-body); }
.calc-note{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:12.5px;
  line-height:1.55;
  color:var(--tx-mute);
}

/* ─────────────────────────────────────────────
   ПОДНАВИГАЦИЯ БЛОГА
   ───────────────────────────────────────────── */
.subnav{
  position:sticky;
  top:73px;
  z-index:400;
  background:var(--paper-veil-soft);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.subnav .wrap{ display:flex; gap:0; overflow-x:auto; }
.subnav a{
  padding:19px 24px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tx-mute);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .28s ease, border-color .28s ease;
}
.subnav a:first-child{ padding-left:0; }
.subnav a:hover{ color:var(--tx-strong); border-bottom-color:var(--bronze); }

/* ─────────────────────────────────────────────
   ПОЛОСА ПРИЗЫВА
   ───────────────────────────────────────────── */
.band{
  background:var(--ink);
  padding:76px var(--gut);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:center;
}
.band .kicker{ color:var(--tx-on-dark-mute); }
.band .kicker::after{ background:var(--rule-dark); }
.band .kicker .num{ color:var(--bronze-lift); }
.band h3{
  font-size:clamp(24px,2.8vw,34px);
  font-weight:300;
  line-height:1.24;
  color:var(--tx-on-dark);
  max-width:22ch;
  margin-top:22px;
}
.band p{ margin-top:14px; font-size:15px; color:var(--tx-on-dark-mute); max-width:48ch; }

/* ─────────────────────────────────────────────
   ПОДВАЛ
   ───────────────────────────────────────────── */
.ftr{ background:var(--ink-deep); padding:96px 0 0; }
.ftr-top{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(0,0.9fr) minmax(0,1.3fr);
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid var(--rule-dark);
}
.ftr .logo-word{ color:#fff; }
.ftr-about{ margin-top:24px; font-size:14.5px; line-height:1.62; color:var(--tx-on-dark-mute); max-width:32ch; }
.ftr h3{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--tx-on-dark-mute);
  padding-bottom:14px;
  margin-bottom:18px;
  border-bottom:1px solid var(--rule-dark);
}
.ftr-col li{ margin:11px 0; font-size:14.5px; color:var(--tx-on-dark-soft); }
.ftr-col a{ transition:color .28s ease; }
.ftr-col a:hover{ color:#fff; }
.ftr-map{
  height:196px;
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:16px;
}
.ftr-map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(0.92) contrast(0.86); }

/* Заглушка вместо карты. Занимает ровно то же место, что и виджет,
   поэтому при нажатии подвал не прыгает. Подвал всегда тёмный — здесь
   можно опираться на цвета «поверх тёмного», они одинаковы в обеих
   темах. */
.map-open{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:14px;
  background:none; border:0; cursor:pointer;
  color:var(--tx-on-dark-soft);
  font-family:var(--sans);
  transition:background .25s ease, color .25s ease;
}
.map-open:hover,
.map-open:focus-visible{ background:rgba(255,255,255,0.04); color:var(--tx-on-dark); }
.map-pin svg{ width:26px; height:26px; display:block; }
.map-say{ font-size:13px; font-weight:500; letter-spacing:0.02em; }
/* Вторая строка говорит, что именно откроется: человек нажимает,
   понимая, что зовёт чужой сервис, а не просто «картинку». */
.map-note{ font-size:11px; line-height:1.4; color:var(--tx-on-dark-mute); text-align:center; }
.ftr-soc{ display:flex; gap:10px; margin-top:26px; }
.ftr-soc a{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--tx-on-dark-soft);
  transition:background .28s ease, color .28s ease, border-color .28s ease;
}
.ftr-soc a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.ftr-btm{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px 0;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--tx-on-dark-mute);
}

/* ─────────────────────────────────────────────
   ПОПАП ЗАЯВКИ
   ───────────────────────────────────────────── */
.ov{
  position:fixed; inset:0; z-index:900;
  background:var(--ov-veil);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.ov.show{ opacity:1; pointer-events:auto; }
.modal{
  position:relative;
  width:100%;
  max-width:940px;
  max-height:92vh;
  overflow:auto;
  background:var(--surface);
  border-radius:var(--r);
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  transform:translateY(16px);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.ov.show .modal{ transform:translateY(0); }
.modal-side{
  background:var(--ink-deep);
  padding:46px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
}
.modal-side h3{ font-size:26px; font-weight:300; line-height:1.24; color:#fff; margin-top:20px; }
.modal-side p{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--tx-on-dark-mute); }
.modal-side .kicker{ color:var(--tx-on-dark-mute); }
.modal-side .kicker::after{ background:var(--rule-dark); }
.modal-side .kicker .num{ color:var(--bronze-lift); }
.modal-side-facts{ padding-top:24px; border-top:1px solid var(--rule-dark); }
.modal-side-facts li{
  font-size:13px;
  color:var(--tx-on-dark-soft);
  padding-left:20px;
  position:relative;
  margin:9px 0;
}
.modal-side-facts li::before{
  content:"";
  position:absolute; left:0; top:10px;
  width:10px; height:1px; background:var(--bronze-lift);
}
.modal-body{ padding:46px 44px; }
.modal-body h3{ font-size:22px; font-weight:400; }
.modal-body .sub{ margin-top:9px; font-size:14px; color:var(--tx-body); margin-bottom:28px; }
.x{
  position:absolute; top:14px; right:14px; z-index:10;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r);
  color:var(--tx-strong);
  font-size:15px;
  cursor:pointer;
  transition:background .28s ease, color .28s ease;
}
.x:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.consent{ display:flex; align-items:flex-start; gap:11px; margin:6px 0 24px; }
.consent input{ margin-top:3px; accent-color:var(--blue); flex:none; }
.consent label{ font-size:12.5px; line-height:1.5; color:var(--tx-mute); }
.ok{ display:none; text-align:center; padding:36px 8px; }
.ok.show{ display:block; }
.ok-mark{
  width:58px; height:58px;
  margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--blue);
  border-radius:50%;
  color:var(--blue);
  font-size:22px;
}
.ok h3{ font-size:22px; font-weight:400; }
.ok p{ margin-top:10px; font-size:14.5px; color:var(--tx-body); }

/* постоянная кнопка вызова формы */
/* ─────────────────────────────────────────────
   ПЛАВАЮЩИЕ КНОПКИ: ЗАЯВКА И КОРЗИНА

   Были две широкие текстовые кнопки — «Оставить заявку» около 200 px
   и «Корзина 3» около 140. Вдвоём они занимали заметный кусок экрана
   и на телефоне налезали на содержимое. Стало два квадрата 52×52 с
   иконками; подпись выезжает рядом при наведении, так что понятность
   не потерялась.

   52 px выбраны не на глаз: минимальная надёжная цель для пальца —
   44 px, и запас нужен, потому что кнопка стоит у самого края экрана,
   где промахнуться легче всего.
   ───────────────────────────────────────────── */
.fab-wrap{
  position:fixed; right:28px; z-index:500;
  display:flex; align-items:center; justify-content:flex-end;
}
.fab-lead{ bottom:28px; }
.fab-cart{ bottom:96px; z-index:501; }

/* Пустая корзина прячется атрибутом hidden — и это правило обязано
   быть здесь. Свойство display из класса выше сильнее, чем display:none,
   который браузер даёт скрытым элементам по умолчанию, и без этой
   строки кнопка «Корзина 0» висела в углу всегда, даже когда класть в
   неё было нечего. */
.fab-wrap[hidden]{ display:none; }

.fab{
  position:relative;
  width:52px; height:52px; flex:none;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:var(--r);
  background:var(--ink); color:var(--tx-on-dark);
  cursor:pointer;
  /* Волосяная светлая обводка поверх тени. На бумажном фоне её не
     видно — тёмная кнопка и так контрастна. А когда страница
     прокручена до тёмного подвала, кнопка того же цвета, что и фон,
     сливалась с ним: оставался силуэт от тени и больше ничего.
     Обводка отделяет её в обоих случаях. */
  box-shadow:0 0 0 1px rgba(244,242,238,.18), 0 12px 34px rgba(10,21,32,.24);
  transition:background .2s ease;
}
.fab:hover{ background:var(--ink-soft); }
.fab svg{ width:22px; height:22px; }

/* Счётчик товаров. Остаётся на месте и когда подпись раскрыта: цифра
   полезнее, чем идеально чистая кнопка. */
.fab-cnt{
  position:absolute; top:6px; right:6px;
  min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bronze); color:var(--bronze-tx); border-radius:9px;
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1;
}

/* Ярлык с подписью. Сидит слева от кнопки и не перехватывает клики:
   иначе он накрывал бы собой ту самую кнопку, к которой человек ведёт
   курсор, и наведение срывалось бы на полпути. */
.fab-tag{
  position:absolute; right:64px;
  height:30px; display:flex; align-items:center; padding:0 12px;
  background:var(--white); color:var(--tx-strong);
  border:1px solid var(--rule-strong); border-radius:var(--r);
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 6px 18px rgba(10,21,32,.10);
  /* В покое ярлык не просто прозрачный, а именно скрытый. Разница не
     косметическая: прозрачный элемент остаётся для браузера и для
     программ чтения с экрана обычным блоком с текстом — он попадает в
     обход по странице и читается вслух, хотя глазами его никто не
     видит. visibility убирает его целиком, а задержка в переходе
     оставляет время на плавное исчезновение. */
  opacity:0; visibility:hidden; transform:translateX(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,.7,.3,1), visibility 0s linear .2s;
}

/* Показываем подпись только там, где курсор вообще бывает. На телефоне
   наведения нет, и без этого условия ярлык завис бы на экране навсегда
   после первого касания. */
@media (hover:hover){
  .fab-wrap:hover .fab-tag{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
}
/* Клавиатура: подпись должна появляться и при переходе табом, иначе
   кнопка остаётся безымянным квадратом для тех, кто не пользуется
   мышью. */
.fab:focus-visible + .fab-tag{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }

/* ── Стрелка «в начало» и «в конец» ──────────────────────────────────
   Нарочно тише плавающих кнопок справа. Те зовут что-то сделать —
   оставить заявку, открыть корзину; эта всего лишь помогает
   перемещаться, и требовать внимания ей незачем. Отсюда прозрачный
   фон, волосяная рамка и приглушённый значок: пока не нужна — почти
   не видна, под курсором становится обычной кнопкой сайта.

   Квадрат с радиусом --r и рамкой — тот же, что у значков мессенджеров
   в шапке и у переключателя темы. Ничего нового в язык не вводим.

   Про темы. Все цвета — токены, поэтому в тёмной теме кнопка
   становится светлой рамкой на тёмной бумаге сама, без отдельных
   правил. Полупрозрачная заливка бумагой нужна для случая, когда
   стрелка оказывается поверх фотографии: без неё значок пропадал на
   светлых участках снимка.                                           */
.jump{
  position:fixed;
  left:28px;
  z-index:500;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:1px solid var(--rule-strong);
  border-radius:var(--r);
  background:var(--paper-veil-soft);
  color:var(--tx-mute);
  cursor:pointer;
  opacity:0;
  transition:opacity .35s ease, color .25s ease, border-color .25s ease,
             background .25s ease, transform .25s ease;
}
.jump[hidden]{ display:none; }
.jump.show{ opacity:.62; }
.jump.show:hover,
.jump.show:focus-visible{
  opacity:1;
  color:var(--tx-strong);
  border-color:var(--ink);
  background:var(--paper-veil);
}
.jump svg{ width:19px; height:19px; display:block; }

/* Кнопка стоит там, куда ведёт. «Вверх» — у верхнего края, «вниз» — у
   нижнего; значок разворачивается поворотом, а не подменой файла. */
.jump-up{ top:96px; bottom:auto; }
.jump-down{ bottom:96px; top:auto; }
.jump-down svg{ transform:rotate(180deg); }

/* Уезжает в ту сторону, откуда появилась: это читается как «кнопка
   пришла сверху» и не отвлекает рывком. */
.jump-up:not(.show){ transform:translateY(-8px); }
.jump-down:not(.show){ transform:translateY(8px); }

@media (prefers-reduced-motion: reduce){
  .jump{ transition:opacity .35s ease, color .25s ease; }
  .jump-up:not(.show),
  .jump-down:not(.show){ transform:none; }
}

/* На узком экране правый угол и так занят двумя кнопками, а места по
   бокам нет вовсе — прижимаем к краю и делаем компактнее. */
@media (max-width:640px){
  .jump{ left:16px; width:38px; height:38px; }
  .jump svg{ width:17px; height:17px; }
  .jump-up{ top:76px; }
  .jump-down{ bottom:80px; }
}

/* Копия товара, летящая в корзину. Живёт доли секунды и должна быть
   поверх всего, включая открытую карточку товара, — иначе полёт
   начнётся из-под окна и первую половину пути его не видно. */
.fly{
  position:fixed; z-index:900; pointer-events:none;
  border-radius:var(--r);
  background:var(--paper-alt) center/cover no-repeat;
  box-shadow:0 10px 30px rgba(10,21,32,.22);
  will-change:transform, opacity;
}

/* Отклик кнопки в момент прилёта. Короткий и без отскока: кнопка не
   игрушка, а указатель, куда идти дальше. */
.fab-wrap.bump .fab{ animation:fabBump .32s ease; }
@keyframes fabBump{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .fab-tag{ transition:none; transform:none; }
  /* Движение выключено — остаётся счётчик на кнопке, его достаточно. */
  .fab-wrap.bump .fab{ animation:none; }
  .fly{ display:none; }
}

/* ─────────────────────────────────────────────
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ───────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.08s; }
.rv-3{ transition-delay:.16s; }
.rv-4{ transition-delay:.24s; }

/* декоративная анимация воды в SVG-иллюстрациях */
.wave{ animation:waveShift 7s ease-in-out infinite; }
.wave-b{ animation-duration:9s; animation-delay:.5s; }
.wave-c{ animation-duration:11s; animation-delay:1s; }
@keyframes waveShift{
  0%,100%{ transform:translateX(0); opacity:.5; }
  50%{ transform:translateX(16px); opacity:.85; }
}
.lit{ animation:litPulse 6s ease-in-out infinite; }
@keyframes litPulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .stack-w{ opacity:1; transform:none; }
  .rv{ opacity:1; transform:none; }
  /* Чертёж в шапке должен остаться дорисованным, а не оборванным
     на середине штриха. */
  .pa-draw-1,.pa-draw-2{ stroke-dashoffset:0; }
  .pa-drop,.pa-dot{ display:none; }
}

/* ─────────────────────────────────────────────
   АДАПТИВ
   ───────────────────────────────────────────── */
/* Шапка сжимается раньше остальной сетки: в ней пять пунктов меню,
   телефон, два значка мессенджеров и кнопка — она упирается в ширину
   первой. Порог подобран замером: с прежними 1180 строка переносилась
   ровно на 1200. */
@media (max-width:1260px){
  .hdr .wrap{ gap:16px; }
  .nav{ gap:20px; }
  .nav a{ font-size:12.5px; letter-spacing:0.04em; }
  .hdr-tel{ font-size:13px; }
  .hdr-side{ gap:10px; }
  .hdr-side .btn-sm{ padding:0 14px; height:40px; }
  .hdr-soc{ gap:6px; }
  .hdr-soc-a{ width:40px; height:40px; }
  .hdr-theme{ width:40px; height:40px; }
}

@media (max-width:1180px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .probs{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .folio{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .row-item{ grid-template-columns:66px minmax(0,1fr) minmax(0,1.15fr); }
  .row-meta{ display:none; }
}
@media (max-width:1100px){
  /* Телефон в шапке шире всего остального, а звонить с ноутбука по
     ссылке всё равно неудобно: убираем его первым, меню оставляем.
     Порог поднят с 980 до 1100 — после появления значков мессенджеров
     меню начинало переноситься уже на 1200. */
  .hdr-tel{ display:none; }
  .nav{ gap:18px; }
}

@media (max-width:980px){

  :root{ --gut:26px; }
  .hero-inner{ grid-template-columns:1fr; gap:52px; padding-top:132px; }
  .stack{ align-items:flex-start; }
  .stack-w{ text-align:left; min-width:0; width:100%; }
  .stack-note{ text-align:left; }
  .manifest{ grid-template-columns:1fr; gap:36px; }
  .sec-head-split{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .phero-grid{ grid-template-columns:1fr; gap:28px; align-items:start; }
  .calcs{ grid-template-columns:1fr; }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .band{ grid-template-columns:1fr; padding:56px var(--gut); }
  .mist{ grid-template-columns:1fr; gap:22px; }
}
/* Ниже этой ширины пять пунктов не помещаются никакими ухищрениями —
   пора в бургер. Порог подобран замером: перенос начинался на 1060px
   при исходных отступах, после поджатия держится до 900. */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:flex; }
}

@media (max-width:820px){
  /* в узкой строке шапки логотипу нужно меньше места, а не сжатие */
  .hdr .wrap{ gap:12px; }
  .logo{ gap:10px; }
  .logo-mark{ width:36px; height:36px; }
  .logo-word{ font-size:21px; }
  .hdr.stuck .logo-mark{ width:32px; height:32px; }
  .hdr.stuck .logo-word{ font-size:19px; }
  .hdr-side{ gap:10px; }
  .hdr-side .btn-sm{ height:40px; padding:0 14px; font-size:11px; }
  .hdr-soc-a{ width:40px; height:40px; }
  .hdr-theme{ width:40px; height:40px; }
  .sec{ padding:88px 0; }
  .sec-sm{ padding:64px 0; }
  .row-item{ grid-template-columns:44px minmax(0,1fr); gap:20px; padding:32px 0; }
  .row-desc{ grid-column:2; margin-top:-8px; }
  .modal{ grid-template-columns:1fr; }
  .modal-side{ display:none; }
  .modal-body{ padding:40px 28px; }
  .phero{ padding:140px 0 66px; }
}
@media (max-width:640px){
  /* На телефоне в строке шапки не помещаются и кнопка, и значки.
     Кнопку убираем: точно такая же висит плавающей внизу экрана на
     каждой странице. Мессенджеры оставляем — с телефона в них пишут
     охотнее, чем заполняют форму. */
  .hdr-side .btn-sm{ display:none; }
  .hdr-soc-a{ width:38px; height:38px; }
  .hdr-theme{ width:38px; height:38px; }
  .hdr-soc{ gap:5px; }
  .folio{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .probs{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .ftr-top{ grid-template-columns:1fr; }
  .f2{ grid-template-columns:1fr; }
  .modes{ grid-template-columns:1fr; }
  .modes label{ border-right:none; }
  .modes label:nth-child(n+3){ border-bottom:1px solid var(--rule); }
  .modes label:last-child{ border-bottom:none; }
  .calc{ padding:28px 24px; }
  .hero-facts{ gap:32px; }
  .fab-lead{ right:16px; bottom:16px; }
  .fab-cart{ right:16px; bottom:80px; }
}

/* Узкие телефоны — 360px и уже: iPhone SE, множество андроидов.
   Замер показал, что строка шапки здесь на 18px шире экрана, и
   бургер обрезается правым краем: нажать на него можно только
   наполовину. Поля и значки поджаты ровно настолько, чтобы строка
   уложилась целиком, — убирать из шапки ничего не пришлось. */
@media (max-width:400px){
  :root{ --gut:16px; }
  .logo{ gap:8px; }
  .logo-mark{ width:32px; height:32px; }
  .logo-word{ font-size:19px; }
  .hdr .wrap{ gap:8px; }
  .hdr-side{ gap:7px; }
  .hdr-soc{ gap:4px; }
  .hdr-soc-a{ width:34px; height:34px; }
  .hdr-theme{ width:34px; height:34px; }
  .burger{ width:34px; height:34px; }
}

/* доступность */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

/* ─────────────────────────────────────────────
   СЕЗОННЫЙ БЛОК

   Один разворот на всю ширину: это не «ещё один раздел», а
   напоминание, что прямо сейчас пора что-то сделать с бассейном.
   Скрытые варианты убирает атрибут hidden — своих display здесь нет,
   иначе он перестал бы работать.
   ───────────────────────────────────────────── */
.season-sec{ padding-top:56px; padding-bottom:56px; }
.season{ max-width:760px; }
.season .kicker .num{ color:var(--bronze-ink); }
.season .h-sec{ margin:14px 0 16px; }
.season .lede{ margin-bottom:30px; }
.season-cta{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:640px){
  .season-cta .btn{ width:100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   ПРАВОВЫЕ СТРАНИЦЫ — политика, оферта, реквизиты

   Отдельного «документного» вида на сайте не было: всё, что длиннее
   абзаца, жило внутри .row-desc одной строкой. Юридический текст так
   не читается — в нём списки, подпункты и определения, и человек ищет
   в нём конкретный абзац, а не читает подряд.

   Поэтому здесь та же сетка нумерованных строк, что в услугах, но в
   две колонки вместо четырёх: слева номер и название раздела, справа
   сам текст. Ни одного нового цвета и ни одного нового шрифта — всё
   из уже заведённых переменных.
   ═══════════════════════════════════════════════════════════════════ */

.legal-rows{ border-top:1px solid var(--rule); }

.legal-item{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) minmax(0,1.9fr);
  gap:36px;
  align-items:start;
  padding:38px 0;
  border-bottom:1px solid var(--rule);
}
/* Строку документа не подсвечиваем на наведении, в отличие от услуг:
   там строка — карточка, по которой кликают, здесь — просто текст. */

.legal-body{ font-size:15px; line-height:1.68; color:var(--tx-body); }
.legal-body > * + *{ margin-top:14px; }
.legal-body strong{ font-weight:500; color:var(--tx-strong); }
.legal-body a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.legal-body a:hover{ color:var(--blue-lift); }

.legal-body ul,
.legal-body ol{ padding-left:0; list-style:none; }
.legal-body li{ position:relative; padding-left:20px; margin-top:8px; }
.legal-body ul li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:5px; height:5px; background:var(--bronze); opacity:.75;
}
.legal-body ol{ counter-reset:lg; }
.legal-body ol li{ counter-increment:lg; padding-left:26px; }
.legal-body ol li::before{
  content:counter(lg) ".";
  position:absolute; left:0; top:0;
  font-family:var(--serif); color:var(--bronze-ink); font-size:14px;
}

/* Врезка: то, что человек чаще всего ищет глазами — сроки возврата,
   куда писать. Тем же приёмом, что .stack-note на других страницах. */
.legal-note{
  margin-top:18px;
  padding:16px 18px;
  background:var(--blue-pale);
  border-left:2px solid var(--blue);
  font-size:14px; line-height:1.6; color:var(--tx-strong);
}

/* ── Реквизиты таблицей ───────────────────────────────────────────── */
.legal-req{ border-top:1px solid var(--rule); margin:0; }
.legal-req > div{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:24px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.legal-req dt{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--tx-mute); padding-top:3px;
}
.legal-req dd{ margin:0; font-size:16px; line-height:1.5; color:var(--tx-strong); }
.legal-req dd a{ color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(27,75,143,.28); }
.legal-req dd a:hover{ color:var(--blue-lift); }

/* Незаполненное поле обязано быть видно. Это не оформление, а
   предохранитель: пустая строка в реквизитах читается как «так и
   задумано», и документ уезжает в продакшн ничьим. */
.legal-gap{
  display:inline-block;
  padding:2px 8px;
  background:#FBE9E7;
  border:1px dashed #C86B5A;
  color:#8E3B2A;
  font-size:13px; letter-spacing:0.02em;
  font-family:var(--sans);
}

/* ── Дата редакции и переходы между документами ───────────────────── */
.legal-upd{
  margin-top:26px;
  font-size:13px; color:var(--tx-mute);
}
.legal-nav{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:30px; padding-top:26px;
  border-top:1px solid var(--rule);
}

@media (max-width:980px){
  .legal-item{ grid-template-columns:56px minmax(0,1fr); gap:14px 20px; padding:30px 0; }
  .legal-item .legal-body{ grid-column:2 / -1; }
}
@media (max-width:640px){
  .legal-item{ grid-template-columns:1fr; gap:10px; }
  .legal-item .legal-body{ grid-column:1; }
  .legal-req > div{ grid-template-columns:1fr; gap:4px; padding:12px 0; }
  .legal-nav .btn{ width:100%; }
}

/* Второй заголовок в колонке подвала («Документы» под «Разделами»). */
.ftr-h2{ margin-top:26px; }

/* ── Оглавление документа ─────────────────────────────────────────
   Набрано как содержание книги, а не как меню: номер бронзой, точка в
   ту же линию, что и в нумерации разделов ниже. Колонки, чтобы десять
   пунктов не превращались в простыню на весь экран. */
.legal-toc{ margin-bottom:8px; }
.legal-toc ol{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:56px;
}
.legal-toc li{ break-inside:avoid; margin-bottom:2px; }
.legal-toc a{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:8px;
  padding:9px 0;
  font-size:15px; line-height:1.4; color:var(--tx-body);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:color .2s ease;
}
.legal-toc a span{ font-family:var(--serif); color:var(--bronze-ink); font-size:14px; }
.legal-toc a:hover{ color:var(--blue); }

@media (max-width:820px){
  .legal-toc ol{ columns:1; }
}


/* ── Пальцем, а не мышью ─────────────────────────────────────────────
   Ссылка высотой шестнадцать точек — это норма для курсора и промах
   для пальца: рекомендуемый минимум около сорока четырёх. На узких
   экранах разводим ссылки подвала и увеличиваем сам чекбокс согласия,
   по которому иначе приходится целиться. Разметка не меняется —
   только просвет вокруг цели. */
@media (max-width:760px){
  .ftr-col ul li{ margin-bottom:0; }
  .ftr-col ul a,
  .ftr-soc a{ display:inline-block; padding:10px 0; }
  .ftr-btm a{ display:inline-block; padding:6px 0; }

  .consent input[type="checkbox"],
  .agree input[type="checkbox"]{ width:22px; height:22px; }
  /* Метка рядом с чекбоксом — часть той же цели: по ней тоже попадают. */
  .consent label,
  .agree span{ padding:6px 0; }
}

/* Сообщение о незаполненном поле — рядом с формой, а не окном alert:
   окно закрывает то, что надо исправить, и требует лишнего клика. */
.lead-warn{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.5;
  color:#8E3B2A;
}
.lead-warn:empty{ display:none; }


/* ── Способы оплаты в подвале ────────────────────────────────────────
   Задача — показать логотипы платёжных систем, не превратив подвал в
   витрину с наклейками. Поэтому: одна строка над копирайтом, на той же
   разделительной линии, что и всё остальное; логотипы приглушены и
   выравнены по общей высоте; подпись набрана теми же микро-заглавными,
   что и прочие служебные подписи сайта.

   Пока официальных файлов нет, вместо картинок стоят названия систем —
   тем же кеглем и с тем же разрядкой. Строка выглядит одинаково
   осмысленно в обоих состояниях. */
.ftr-pay{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:22px 0 0;
  border-top:1px solid var(--rule-dark);
}
.ftr-pay-t{
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tx-on-dark-mute);
}
.ftr-pay-l{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
/* Цвет задаётся здесь и наследуется рисунком: логотипы вставлены в
   разметку и нарисованы currentColor. Отсюда же вся строка одинаково
   гаснет и оживает под курсором. */
.ftr-pay-l{ color:var(--tx-on-dark-soft); }
.ftr-pay-l > span{
  display:inline-flex;
  align-items:center;
  opacity:.62;
  transition:opacity .25s ease;
}
.ftr-pay-l > span:hover{ opacity:1; }
.ftr-pay-l svg{ display:block; width:auto; }

/* Выравниваем не по общей высоте, а по оптическому весу: «Мир» набран
   плотными заглавными и при одной высоте с Visa выглядит вдвое крупнее,
   а щит Т-Банка — цельная фигура и тяжелее любой надписи. Поэтому у
   каждого своя высота, подобранная на глаз в строке. */
.pay-mir svg{ height:14px; }
.pay-visa svg{ height:14px; }
.pay-mc svg{ height:22px; }
.pay-tb svg{ height:15px; }

/* Пока файла нет — название системы тем же набором, что и подпись
   слева. Не дырка в строке, а осмысленный текст. */
.ftr-pay-l > span:not([class]){
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:.75;
}

/* Подвал внизу теперь идёт сразу за строкой оплаты — вторая линия
   между ними была бы лишней. */
.ftr-pay + .ftr-btm{ border-top:0; }

@media (max-width:640px){
  .ftr-pay{ gap:12px; }
  .ftr-pay-l{ gap:14px; }
}

/* ─────────────────────────────────────────────
   ВИТРИНА «ОПЛАТА КАРТОЙ» НА ГЛАВНОЙ

   Собственные классы, а не .prod из shop.css: главная не грузит
   стили магазина, и тянуть их ради четырёх плиток было бы дороже
   самих плиток. Внешне карточки совпадают с каталожными, но
   рассчитаны на широкий ряд, а не на сетку из пяти колонок.

   Ни одного цвета вне токенов — поэтому тёмная тема включается сама,
   без отдельного блока правил.
   ───────────────────────────────────────────── */
.payrow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.paycard{
  display:flex;
  flex-direction:column;
  background:var(--white);
  padding:26px 24px 22px;
  text-decoration:none;
  transition:background .25s ease;
}
.paycard:hover{ background:var(--paper-alt); }
/* Подложка и рамка — ровно как у .prod-fig в магазине: фотографии
   поставщика лежат на белом, и в тёмной теме плитка тоже уходит в
   тёмное (--white там переназначен). Витрина на главной обязана
   выглядеть так же, как каталог, иначе переход со страницы на
   страницу читается как переход на другой сайт. */
.paycard-fig{
  display:block;
  aspect-ratio:1/1;
  background:var(--white);
  border:1px solid var(--rule);
  overflow:hidden;
  margin-bottom:22px;
}
.paycard-fig img{
  width:100%; height:100%;
  object-fit:contain;
  padding:16px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.paycard:hover .paycard-fig img{ transform:scale(1.04); }
.paycard-brand{
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bronze-ink);
}
.paycard-name{
  margin-top:10px;
  font-size:15px;
  line-height:1.45;
  color:var(--tx-strong);
  /* Три строки и многоточие: названия из выгрузки поставщика бывают
     по 120 знаков, и без обрезки одна плитка вытягивает весь ряд. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.paycard-btm{
  margin-top:auto;
  padding-top:20px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.paycard-price{
  font-family:var(--serif);
  font-size:20px;
  color:var(--tx-strong);
  white-space:nowrap;
}
.paycard-tag{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bronze-tx);
  background:var(--bronze-lift);
  padding:4px 8px;
  white-space:nowrap;
}
/* Картинка не открылась — оставляем ровное поле, а не крест. */
.paycard-fig-empty{ background:var(--paper-alt); }

@media (max-width:1080px){
  .payrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* На телефоне остаются две колонки, а не одна. В один столбец четыре
   плитки вытягиваются на три экрана прокрутки — для витрины, которая
   на этой странице не главная, это слишком много: человек листает
   мимо неё дольше, чем читает про строительство. */
@media (max-width:560px){
  .payrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .paycard{ padding:16px 14px 14px; }
  .paycard-fig{ margin-bottom:14px; }
  .paycard-fig img{ padding:10px; }
  .paycard-name{ font-size:13.5px; -webkit-line-clamp:2; }
  .paycard-btm{
    padding-top:14px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .paycard-price{ font-size:17px; }
}

/* ─────────────────────────────────────────────
   БЫСТРЫЙ ЗВОНОК В ТЁМНОЙ ПОЛОСЕ

   Живёт внутри .band, где фон всегда --ink, поэтому текст берёт
   токены «на тёмном» в обеих темах.
   ───────────────────────────────────────────── */
/* Форма стоит во второй колонке .band — там, где раньше была одна
   кнопка. Ширина фиксированная: растянутое на пол-полосы поле для
   одиннадцати цифр выглядит нелепо. */
.quick{ width:100%; max-width:400px; }
.quick-row{ display:flex; gap:10px; }
.quick-row input[type=tel]{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  padding:13px 15px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--tx-on-dark);
}
.quick-row input[type=tel]::placeholder{ color:var(--tx-on-dark-mute); }
.quick-row input[type=tel]:focus{
  outline:none;
  border-color:var(--bronze-lift);
}
.quick-row .btn{ flex:0 0 auto; }
.quick-consent{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:13px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--tx-on-dark-mute);
}
/* Свой флажок, а не системный. Системный на тёмной полосе рисуется
   белым квадратом — самым светлым пятном во всём блоке, хотя это
   наименее важный его элемент. */
.quick-consent input{
  flex:0 0 auto;
  margin-top:1px;
  width:15px; height:15px;
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  background:transparent;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.quick-consent input:hover{ border-color:var(--tx-on-dark-mute); }
.quick-consent input:checked{
  background:var(--bronze-lift);
  border-color:var(--bronze-lift);
}
.quick-consent input:checked::after{
  content:"";
  display:block;
  width:4px; height:8px;
  margin:1px auto 0;
  border:solid var(--bronze-tx);
  border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);
}
.quick-consent input:focus-visible{
  outline:2px solid var(--bronze-lift);
  outline-offset:2px;
}

/* Полная форма — текстовой ссылкой под блоком, а не второй кнопкой
   рядом: две одинаково заметные кнопки заставляют выбирать, а выбор
   здесь стоит дороже, чем любой из вариантов. */
.quick-full{
  display:inline-block;
  margin-top:18px;
  padding:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--rule-dark);
  font-family:var(--sans);
  font-size:13px;
  color:var(--tx-on-dark-soft);
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.quick-full:hover{ color:var(--tx-on-dark); border-color:var(--bronze-lift); }
.quick-consent a{ color:var(--tx-on-dark-soft); }
.quick-warn{
  margin-top:12px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
  color:var(--bronze-lift);
}
.quick-warn:empty{ display:none; }
.quick-done{
  font-family:var(--sans);
  font-size:15px;
  color:var(--tx-on-dark);
}
@media (max-width:560px){
  .quick-row{ flex-wrap:wrap; }
  .quick-row .btn{ width:100%; }
}