/* =========================================================================
   «Прораб»: графит + сигнальный жёлтый.

   Цвета взяты со стройплощадки, а не из палитры «для сайтов сантехников».
   Расчёт на владельца частного дома 35-60 лет, который смотрит с телефона
   и должен всё понять за две секунды.

   Главное правило палитры: СПЛОШНЫМ ЖЁЛТЫМ ЗАЛИТА ТОЛЬКО КНОПКА РАСЧЁТА.
   Всё остальное жёлтое на странице (плашка скидки, надзаголовки, иконки)
   работает контуром, текстом или тонкой полосой. Как только жёлтых пятен
   становится больше одного, кнопка перестаёт быть точкой притяжения,
   и никакая подсветка этого уже не чинит.

   Капслоком набраны только h1, кнопки и надзаголовки. Заголовки разделов
   идут обычным регистром: половине аудитории за 55, а сплошной капслок
   они читают заметно медленнее.
   ========================================================================= */

:root {
  --graphite:      #17191c;
  --graphite-2:    #1d2024;   /* поверхность героя */
  --graphite-3:    #24282d;   /* карточки на тёмном */
  --graphite-line: #343941;

  --signal:        #ffc400;
  --signal-hi:     #ffd233;
  --signal-lo:     #e0ac00;   /* для жёлтого по белому */

  --paper:         #ffffff;
  --paper-2:       #f2f4f6;
  --line:          #e2e5e8;
  --line-strong:   #ccd2d8;

  --ink:           #17191c;
  --ink-2:         #4d545b;
  --ink-3:         #6d747b;

  --on-dark:       #ffffff;
  --on-dark-2:     #a9b0b7;
  --on-dark-3:     #7d858d;

  --ok:            #23a26d;
  --bad:           #d8483c;

  --r:             4px;   /* углы почти прямые: инструмент, а не приложение */
  --r-lg:          6px;

  --shadow-sm:     0 1px 2px rgba(23, 25, 28, .06);
  --shadow-md:     0 2px 8px rgba(23, 25, 28, .07), 0 10px 28px rgba(23, 25, 28, .07);
  --shadow-lg:     0 4px 14px rgba(23, 25, 28, .09), 0 22px 50px rgba(23, 25, 28, .13);

  /* Подсветка кнопки расчёта. Значение зависит от того, на чём кнопка
     лежит: жёлтое свечение по белому превращается в грязь. */
  --cta-glow: 0 2px 4px rgba(23, 25, 28, .14), 0 14px 30px -12px rgba(23, 25, 28, .5);
  --cta-ring: var(--signal-lo);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1180px;
  --header-h: 70px;
}

/* тёмные поверхности переопределяют подсветку под себя */
.on-dark-surface {
  --cta-glow: 0 0 0 1px rgba(255, 196, 0, .5), 0 12px 34px -8px rgba(255, 196, 0, .55);
  --cta-ring: var(--signal);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; }

h1 {
  font-size: clamp(30px, 5.2vw, 54px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}
h2 {
  font-size: clamp(25px, 3.3vw, 37px);
  font-weight: 900;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h3 { font-size: clamp(18px, 2vw, 21px); font-weight: 800; letter-spacing: -.015em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.section { padding: 76px 0; }
.section--tight { padding: 0; }
.section--soft { background: var(--paper-2); }
.section--dark { background: var(--graphite); color: var(--on-dark); }
.section--dark h2 { color: var(--on-dark); }

.section-head { max-width: 720px; margin-bottom: 40px; }
/* Для длинных заголовков, которые обязаны уместиться в строку.
   Снимаем ограничение с самой шапки, но абзац под ней оставляем узким:
   строка во всю ширину контейнера читается тяжело. */
.section-head--wide { max-width: none; }
.section-head--wide .lead { max-width: 720px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Надзаголовок: жёлтая насечка вместо жёлтой плашки. Плашка была бы
   вторым сплошным пятном и отбирала бы внимание у кнопки. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 20px; height: 3px; background: var(--signal); flex-shrink: 0; }
.section--dark .eyebrow { color: var(--signal); }

.lead { font-size: 18px; color: var(--ink-2); }
.section--dark .lead { color: var(--on-dark-2); }

/* Разметка стройплощадки. Ровно два раза на странице, иначе превращается
   в обои и перестаёт работать. */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(115deg, var(--signal) 0 15px, var(--graphite) 15px 30px);
}

/* ------------------------------------------------------------------ кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  /* Тексты кнопок правятся руками, и слишком длинный из них не должен
     ломать вёрстку: шире родителя кнопка не станет в любом случае. */
  max-width: 100%;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              transform .12s ease, box-shadow .18s ease;
  min-height: 54px;
}
.btn:active { transform: translateY(1px); }

/* ─── Кнопка расчёта. Единственный сплошной жёлтый на странице ─────────
   Три приёма разом: заливка, постоянное свечение и медленное кольцо,
   которое раз в три с половиной секунды расходится наружу. Кольцо
   работает как проблесковый маячок: боковое зрение его ловит, чтение
   не сбивает. */
.btn--cta {
  position: relative;
  background: var(--signal);
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 900;
  box-shadow: var(--cta-glow);
}
.btn--cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--r);
  border: 2px solid var(--cta-ring);
  opacity: 0;
  pointer-events: none;
  animation: ctaPulse 3.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes ctaPulse {
  0%        { transform: scale(1);    opacity: .6; }
  60%, 100% { transform: scale(1.11); opacity: 0; }
}
.btn--cta:hover { background: var(--signal-hi); transform: translateY(-2px); }
.btn--cta:hover::after { animation-play-state: paused; opacity: 0; }
.btn--cta svg { transition: transform .16s ease; }
.btn--cta:hover svg { transform: translateX(3px); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--graphite); }
.section--dark .btn--outline,
.hero .btn--outline { color: var(--on-dark); border-color: rgba(255, 255, 255, .28); }
.section--dark .btn--outline:hover,
.hero .btn--outline:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }

.btn--block { width: 100%; }
.btn--lg { padding: 19px 32px; font-size: 17px; min-height: 60px; }
.btn--xl { padding: 23px 40px; font-size: 19px; min-height: 68px; }

/* ------------------------------------------------------------------- шапка */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--graphite);
  border-bottom: 1px solid var(--graphite-line);
  color: var(--on-dark);
}
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 22px; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); flex-shrink: 0; }
.logo__mark {
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--signal); color: var(--graphite);
  display: grid; place-items: center; flex-shrink: 0;
}
.logo__name {
  font-weight: 900; font-size: 17px;
  letter-spacing: .01em; line-height: 1.05; text-transform: uppercase;
}

.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a {
  color: var(--on-dark-2); text-decoration: none;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  padding: 5px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--on-dark); border-bottom-color: var(--signal); }

.header__contact { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header__phone { text-align: right; text-decoration: none; color: var(--on-dark); line-height: 1.1; }
.header__phone b {
  font-size: 18px; font-weight: 900; white-space: nowrap;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.header__phone span { display: block; font-size: 11.5px; color: var(--on-dark-3); font-weight: 600; margin-top: 2px; }
.header__cta { padding: 11px 18px; min-height: 44px; font-size: 13.5px; }

/* --------------------------------------------------------------------- hero */

.hero {
  background: var(--graphite-2);
  color: var(--on-dark);
  padding: 60px 0 66px;
  position: relative;
}

.hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: start; }

.hero__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(255, 196, 0, .35);
  border-radius: 100px;
  padding: 7px 15px;
  margin-bottom: 22px;
}
.hero__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }

.hero h1 { color: var(--on-dark); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--signal); }

.hero__sub { font-size: 17.5px; color: var(--on-dark-2); max-width: 50ch; margin-bottom: 26px; }

.hero__adv { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0 0 26px; padding: 0; }
.hero__adv li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 15px;
  background: var(--graphite-3);
  border: 1px solid var(--graphite-line);
  border-radius: var(--r);
  color: #dfe4e8;
}
.hero__adv svg { color: var(--signal); flex-shrink: 0; }

/* Скидка. Намеренно НЕ залита жёлтым: контур и крупная цифра дают
   тот же вес, но не спорят с кнопкой. */
.hero__promo {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border: 2px solid var(--signal);
  border-radius: var(--r);
  background: rgba(255, 196, 0, .07);
  max-width: 480px;
  margin-bottom: 28px;
}
.hero__promo-num {
  font-size: 34px; font-weight: 900; color: var(--signal);
  line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.hero__promo-txt { font-size: 14px; line-height: 1.4; color: var(--on-dark-2); }
.hero__promo-txt b { color: var(--on-dark); }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.hero__note { font-size: 13.5px; color: var(--on-dark-3); margin-top: 20px; }

/* карточка «что входит» справа */
.hero__card {
  background: var(--graphite-3);
  border: 1px solid var(--graphite-line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.hero__card h3 { color: var(--on-dark); margin-bottom: 16px; font-size: 17px; }
.hero__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hero__card li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--on-dark-2); line-height: 1.4;
}
.hero__card svg { color: var(--signal); flex-shrink: 0; margin-top: 3px; }
.hero__card-foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--graphite-line);
  font-size: 13px; color: var(--on-dark-3);
}

/* мессенджеры */
.msgs { display: flex; gap: 9px; }
.msg {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--graphite-3);
  border: 1px solid var(--graphite-line);
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 900; font-size: 15px;
  transition: border-color .16s ease, background-color .16s ease;
}
.msg:hover { border-color: var(--signal); background: #2b3036; }
.msgs--light .msg { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.msgs--light .msg:hover { border-color: var(--graphite); }

/* ------------------------------------------------------------------ цифры */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--graphite);
  color: var(--on-dark);
}
.stats__item { padding: 26px 22px; border-left: 1px solid var(--graphite-line); }
.stats__item:first-child { border-left: 0; }
.stats__num {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 900;
  color: var(--signal); letter-spacing: -.035em; line-height: 1;
  margin-bottom: 7px; font-variant-numeric: tabular-nums;
}
.stats__label { font-size: 13px; color: var(--on-dark-2); line-height: 1.3; }

/* ---------------------------------------------------------------- услуги */

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }

.service {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--graphite);
  border-radius: 0 0 var(--r) var(--r);
  padding: 26px 24px;
  display: flex; flex-direction: column;
  transition: border-top-color .16s ease, box-shadow .16s ease;
}
.service:hover { border-top-color: var(--signal); box-shadow: var(--shadow-md); }
.service__icon {
  width: 46px; height: 46px; border-radius: var(--r);
  background: var(--graphite); color: var(--signal);
  display: grid; place-items: center; margin-bottom: 16px;
}
.service h3 { margin-bottom: 9px; }
.service p { font-size: 15px; color: var(--ink-2); }
.service__list { list-style: none; padding: 0; margin: 13px 0 0; font-size: 14.5px; color: var(--ink-2); }
.service__list li { padding-left: 17px; position: relative; margin-bottom: 6px; line-height: 1.4; }
.service__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 3px; background: var(--signal);
}

/* ----------------------------------------------------------------- цены */

.prices { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.price-row {
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row:nth-child(odd) { background: var(--paper-2); }
.price-row__title { font-weight: 800; margin-bottom: 2px; }
.price-row__note { font-size: 13.5px; color: var(--ink-3); }
.price-row__value {
  font-size: 19px; font-weight: 900; letter-spacing: -.02em;
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

.price-note {
  margin-top: 18px;
  border-left: 3px solid var(--signal);
  background: var(--paper-2);
  padding: 18px 22px;
  font-size: 15px;
  color: var(--ink-2);
}
.price-note b { color: var(--ink); }
.price-note p { margin: 0 0 10px; }
.price-note p:last-child { margin-bottom: 0; }
.price-note__q {
  display: block;
  margin-bottom: 10px;
  font-size: 16.5px; font-weight: 800;
}

.section-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.section-cta__note { font-size: 14.5px; color: var(--ink-3); }

/* -------------------------------------------------------------- почему мы */

.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }
.why__item {
  background: var(--graphite-2);
  border: 1px solid var(--graphite-line);
  border-radius: var(--r);
  padding: 24px 22px;
}
.why__icon {
  width: 44px; height: 44px; border-radius: var(--r);
  border: 2px solid var(--signal); color: var(--signal);
  display: grid; place-items: center; margin-bottom: 16px;
}
.why__item h3 { font-size: 17px; margin-bottom: 8px; color: var(--on-dark); }
.why__item p { font-size: 14.5px; color: var(--on-dark-2); }

/* ----------------------------------------------------------------- шаги */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 20px; }
.step { border-top: 3px solid var(--line); padding-top: 18px; }
.step:first-child { border-top-color: var(--signal); }
.step__n {
  font-size: 13px; font-weight: 900; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 7px; font-size: 18px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* --------------------------------------------------------------- Сергей */

.master { display: grid; grid-template-columns: 400px 1fr; gap: 46px; align-items: center; }
.master__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--graphite-3);
  border: 1px solid var(--graphite-line);
  display: grid; place-items: center; text-align: center;
  color: var(--on-dark-3); padding: 24px; overflow: hidden;
}
.master__photo img { width: 100%; height: 100%; object-fit: cover; }
.master__hint { font-size: 13px; margin-top: 12px; }

.master__role {
  display: inline-block;
  font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphite); background: var(--signal);
  padding: 5px 11px; border-radius: 3px; margin-bottom: 16px;
}
.master blockquote {
  margin: 0 0 22px;
  font-size: 19px; line-height: 1.5;
  color: var(--on-dark);
  border-left: 3px solid var(--signal);
  padding-left: 20px;
}
.master__text {
  margin: 0 0 22px;
  border-left: 3px solid var(--signal);
  padding-left: 20px;
  font-size: 17px; line-height: 1.6;
  color: var(--on-dark-2);
}
.master__text p { margin: 0 0 12px; }
.master__text p:first-child { color: var(--on-dark); font-size: 19px; }
.master__text p:last-child { margin-bottom: 0; }

.master__sign { font-size: 14.5px; color: var(--on-dark-2); }
.master__sign b { color: var(--on-dark); display: block; font-size: 17px; margin-bottom: 2px; }

.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--graphite-line);
  background: var(--graphite-3);
  border-radius: var(--r);
  padding: 9px 15px;
  font-size: 13.5px; font-weight: 700;
  color: var(--on-dark-2);
}
.badge svg { color: var(--signal); flex-shrink: 0; }

/* Вариант бейджа на две строки: что делаем и коротко почему это важно.
   align-items: flex-start, чтобы галочка держалась у заголовка, а не
   уезжала в середину, когда пояснение переносится. */
.badge--stack {
  align-items: flex-start;
  padding: 12px 15px;
  font-weight: 400;
  line-height: 1.45;
}
.badge--stack svg { margin-top: 2px; }
.badge--stack b { display: block; font-weight: 700; color: var(--on-dark); }

/* ---------------------------------------------------------------- работы */

.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.work { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); margin: 0; }
.work__img {
  aspect-ratio: 4 / 3; background: var(--paper-2);
  display: grid; place-items: center; color: var(--ink-3); position: relative;
}
.work__img img { width: 100%; height: 100%; object-fit: cover; }
.work__hint { display: grid; justify-items: center; gap: 7px; font-size: 12.5px; }
.work__cap { padding: 15px 17px; font-size: 14.5px; font-weight: 800; }
.work__cap span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }

/* -------------------------------------------------------------- география */

.geo { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.geo__group { margin-top: 24px; }
.geo__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.geo__title--free { color: var(--ok); }
.geo__title--paid { color: var(--ink-3); }
.geo__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.geo__list li {
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 7px 13px; font-size: 14px; font-weight: 700;
}
.geo__list--muted li { border-color: var(--line); color: var(--ink-3); font-weight: 500; background: transparent; }
.geo__note { margin-top: 20px; color: var(--ink-2); font-size: 15px; }
.geo__map { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.geo__map svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- отзывы */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.review {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 22px;
  display: flex; flex-direction: column;
}
.review__stars { color: var(--signal-lo); letter-spacing: 2px; font-size: 16px; margin-bottom: 12px; }
.review p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.review__who { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 11px; font-size: 14px; }
.review__ava {
  width: 40px; height: 40px; border-radius: var(--r); flex-shrink: 0;
  background: var(--graphite); color: var(--signal);
  display: grid; place-items: center; font-weight: 900;
}
.review__who b { display: block; }
.review__who span { color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------------- FAQ */

.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--paper);
  margin-bottom: 10px;
}
.faq details[open] { border-left-color: var(--signal); }
.faq summary {
  padding: 18px 52px 18px 22px;
  font-weight: 800; font-size: 16.5px;
  cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__body { padding: 0 22px 20px; color: var(--ink-2); font-size: 15.5px; }

/* -------------------------------------------------------- финальный блок */

.final { background: var(--graphite-2); color: var(--on-dark); padding: 70px 0; }
.final__inner { max-width: 620px; margin: 0 auto; text-align: center; }
.final h2 { color: var(--on-dark); }
.final__lead { font-size: 18px; color: var(--on-dark-2); margin-bottom: 30px; }
.final__or {
  display: flex; align-items: center; gap: 14px;
  color: var(--on-dark-3); font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  margin: 32px 0 18px;
}
.final__or::before, .final__or::after { content: ""; height: 1px; flex: 1; background: var(--graphite-line); }
.final__direct { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.final__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 900; color: var(--on-dark); text-decoration: none;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  padding: 12px 20px; border: 1px solid var(--graphite-line); border-radius: var(--r);
}
.final__phone:hover { border-color: var(--signal); }

/* ---------------------------------------------------------------- подвал */

.footer { background: var(--graphite); color: var(--on-dark-2); padding: 54px 0 26px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 38px; margin-bottom: 36px; }
.footer h4 {
  color: var(--on-dark); font-size: 13px; margin-bottom: 15px;
  font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.footer a { color: var(--on-dark-2); text-decoration: none; }
.footer a:hover { color: var(--signal); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer__phone {
  font-size: 22px; font-weight: 900; color: var(--on-dark) !important;
  display: inline-block; margin-bottom: 5px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.footer__bottom {
  border-top: 1px solid var(--graphite-line); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12.5px; color: var(--on-dark-3);
}

/* -------------------------------------------- нижняя панель для телефона */

.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--graphite);
  border-top: 1px solid var(--graphite-line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-bar .btn { flex: 1; padding: 14px 10px; font-size: 15px; min-height: 52px; }
.mobile-bar .btn--outline { color: var(--on-dark); border-color: rgba(255, 255, 255, .3); flex: 0 0 40%; }

/* ------------------------------------------------------- уведомление cookie */

/* Кнопки баннера намеренно НЕ жёлтые: сплошной жёлтый на странице
   зарезервирован за кнопкой расчёта. Иначе баннер, который вылезает
   поверх всего, перетягивал бы на себя главное действие. */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--graphite);
  border-top: 3px solid var(--signal);
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
  color: var(--on-dark-2);
  animation: cookieUp .28s cubic-bezier(.2, .8, .3, 1);
}
.cookie[hidden] { display: none; }
@keyframes cookieUp { from { transform: translateY(100%); } }

.cookie__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 26px;
}
.cookie__text { font-size: 14px; line-height: 1.5; max-width: 76ch; }
.cookie__text b { color: var(--on-dark); }
.cookie__text a { color: var(--signal); }
.cookie__actions { display: flex; gap: 10px; margin-left: auto; flex-shrink: 0; }

.btn--light {
  background: var(--paper);
  color: var(--graphite);
  padding: 13px 22px;
  min-height: 48px;
  font-size: 15px;
}
.btn--light:hover { background: #e4e8ec; }

.btn--quiet {
  background: transparent;
  color: var(--on-dark-2);
  border-color: var(--graphite-line);
  padding: 13px 20px;
  min-height: 48px;
  font-size: 15px;
}
.btn--quiet:hover { color: var(--on-dark); border-color: var(--on-dark-3); }

.footer__sep { margin: 0 8px; color: var(--on-dark-3); }

/* Пока висит баннер, нижнюю панель прячем: два закреплённых бруска
   друг на друге на телефоне съедают пол-экрана. */
@media (max-width: 700px) {
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie__actions { margin-left: 0; }
  .cookie__actions .btn { flex: 1; padding: 13px 10px; }
  .cookie__text { font-size: 13.5px; }
  body.cookie-open .mobile-bar { display: none; }
}

/* ------------------------------------------------------------------ квиз */

.quiz { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.quiz[hidden] { display: none; }

.quiz__overlay { position: absolute; inset: 0; background: rgba(10, 12, 14, .78); animation: quizFade .18s ease; }

.quiz__dialog {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  border-top: 5px solid var(--signal);
  padding: 30px 32px 24px;
  box-shadow: var(--shadow-lg);
  animation: quizUp .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes quizFade { from { opacity: 0; } }
@keyframes quizUp { from { opacity: 0; transform: translateY(14px); } }

.quiz__close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--ink-3); cursor: pointer;
}
.quiz__close:hover { background: var(--paper-2); color: var(--ink); }

.quiz__progress { height: 4px; background: var(--line); margin: 4px 46px 12px 0; }
.quiz__progress-bar { height: 100%; width: 0; background: var(--signal); transition: width .28s ease; }
.quiz__counter {
  font-size: 12px; font-weight: 900; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
}

.quiz__step { display: none; }
.quiz__step--active { display: block; animation: quizStep .2s ease; }
@keyframes quizStep { from { opacity: 0; transform: translateX(9px); } }

.quiz__title { font-size: clamp(21px, 4.2vw, 26px); font-weight: 900; letter-spacing: -.025em; margin-bottom: 6px; }
.quiz__hint { font-size: 14.5px; color: var(--ink-3); margin-bottom: 16px; }
.quiz__title + .quiz__options { margin-top: 20px; }

.quiz__options { display: grid; gap: 10px; }

.quiz__opt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 62px; padding: 15px 18px;
  text-align: left; font-family: inherit;
  font-size: 16.5px; font-weight: 700; line-height: 1.25;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--r);
  cursor: pointer;
  transition: border-color .13s ease, background-color .13s ease;
}
.quiz__opt::before {
  content: ""; flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--line-strong); border-radius: 3px;
  transition: inherit;
}
.quiz__opt:hover { border-color: var(--graphite); }
.quiz__opt--picked { border-color: var(--graphite); background: var(--paper-2); }
.quiz__opt--picked::before {
  border-color: var(--graphite); background: var(--signal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317191c' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.quiz__next { margin-top: 16px; }
.quiz__next[disabled] { opacity: .4; pointer-events: none; }
.quiz__next[disabled]::after { display: none; }

.quiz__back {
  display: flex; align-items: center; gap: 7px;
  margin: 18px auto 0; padding: 8px 14px;
  background: transparent; border: 0; border-radius: var(--r);
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--ink-3); cursor: pointer;
}
.quiz__back:hover { background: var(--paper-2); color: var(--ink); }
.quiz__back[hidden] { display: none; }

.quiz__step--contacts .field:first-of-type { margin-top: 20px; }
.quiz__step--done { text-align: center; }
.quiz__done-text { color: var(--ink-2); margin-bottom: 22px; }

body.quiz-open { overflow: hidden; }

/* ------------------------------------------------------------------ поля */

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; padding: 15px 15px;
  font-family: inherit; font-size: 17px; /* 17px и больше: iOS не зумит при фокусе */
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--r);
  transition: border-color .13s ease;
  -webkit-appearance: none; appearance: none;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--graphite); }
.field input::placeholder { color: #a8b0b7; }
.field--error input, .field--error textarea { border-color: var(--bad); }
.field__error { display: none; font-size: 13.5px; color: var(--bad); margin-top: 5px; font-weight: 700; }
.field--error .field__error { display: block; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Согласие на обработку ПД. Галочка не предустановлена (152-ФЗ), поэтому
   промах по ней происходит часто: даём заметное, но не орущее состояние
   ошибки прямо у чекбокса, а не только в общей строке статуса. */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
  margin: 4px 0 16px; padding: 10px;
  border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.consent input {
  width: 22px; height: 22px; margin: 0; flex-shrink: 0;
  accent-color: var(--graphite); cursor: pointer;
}
.consent a { color: var(--ink); }
.consent--error {
  border-color: var(--bad);
  background: #fdecea;
  color: #8f2318;
}
.consent--error a { color: #8f2318; }

.form-status { display: none; margin-top: 14px; padding: 13px 15px; border-radius: var(--r); font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.form-status--error { display: block; background: #fdecea; color: #a5281c; }
.form-status--ok { display: block; background: #e7f6ee; color: #146845; }

.form-success__icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--signal); color: var(--graphite);
  display: grid; place-items: center; margin: 6px auto 16px;
}

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn[aria-busy="true"]::after { display: none; }

/* ------------------------------------------------------------- адаптив */

@media (max-width: 1080px) { .nav { display: none; } }

@media (max-width: 940px) {
  :root { --header-h: 62px; }
  .section { padding: 56px 0; }
  .hero { padding: 40px 0 50px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .master { grid-template-columns: 1fr; gap: 28px; }
  .master__photo { max-width: 320px; }
  .geo { grid-template-columns: 1fr; gap: 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(3) { border-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--graphite-line); }
}

@media (max-width: 700px) {
  body { font-size: 16px; padding-bottom: 74px; }
  .header__cta { display: none; }
  .header__phone b { font-size: 16px; }
  .mobile-bar { display: flex; }
  .hero__sub, .lead, .final__lead { font-size: 16.5px; }
  .hero__cta .btn--cta { width: 100%; }
  .hero__promo { max-width: none; }
  .price-row { grid-template-columns: 1fr; gap: 5px; padding: 16px 18px; }
  .price-row__value { text-align: left; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .master__text { font-size: 16px; padding-left: 15px; }
  .master__text p:first-child { font-size: 17px; }
  .section-cta .btn { width: 100%; }
  .section-cta__note { width: 100%; text-align: center; }

  /* Длинная подпись на кнопке распирала страницу вбок: у .btn стоит
     white-space: nowrap, и на узком экране кнопка становилась шире окна.
     На десктопе перенос не нужен — там кнопки стоят в ряд и места хватает,
     поэтому разрешаем его только здесь. */
  .btn { white-space: normal; }
  .btn--lg, .btn--xl { padding-left: 18px; padding-right: 18px; }
  .final .btn--xl { width: 100%; }

  /* Шапка тоже распирала страницу вбок. Логотип стоял с flex-shrink: 0,
     а телефон не мог сжаться из-за min-width: auto, которое во flex-строке
     держит элемент по ширине содержимого. Вдвоём они не влезали в узкий
     экран, и вся страница уезжала на несколько десятков пикселей. */
  .header__inner { gap: 12px; }
  .logo { flex-shrink: 1; min-width: 0; }
  /* Название чуть мельче, чтобы на типовом телефоне помещалось целиком.
     Многоточие оставлено страховкой на совсем узкие экраны и на случай,
     если в конфиге окажется имя длиннее нынешнего. */
  .logo__name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header__contact { flex-shrink: 0; }
  /* Часы работы дублируются в подвале, в шапке они только занимают место. */
  .header__phone span { display: none; }
}

@media (max-width: 400px) {
  /* Имя рядом с телефоном сюда уже не влезает, а обрезанное многоточием
     оно выглядит хуже, чем его отсутствие. Оставляем знак: телефон важнее,
     он и есть цель шапки. Само название всё равно стоит в первом экране. */
  .logo__name { display: none; }
}

@media (max-width: 560px) {
  .quiz { padding: 0; place-items: stretch; }
  .quiz__dialog {
    max-width: none; max-height: 100vh; min-height: 100vh;
    border-radius: 0;
    padding: 24px 18px calc(22px + env(safe-area-inset-bottom));
  }
  .quiz__opt { font-size: 16px; min-height: 58px; padding: 14px 15px; }
}

/* --------------------------------------------------------------- прочее */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--cta::after { animation: none; opacity: 0; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.section--dark :focus-visible, .hero :focus-visible, .final :focus-visible { outline-color: var(--signal); }

@media print {
  .header, .mobile-bar, .final, .btn { display: none !important; }
}