/* ============================================================
   Скин «blue» холодильников — «ледяной» лендинг связки 02-holodilnik-pro.ru.
   Вырос из скина blue стиралок, но палитра сдвинута в холодный
   бирюзово-голубой, сетки и часть блоков свои.
   Один файл на всю страницу и /spasibo. Mobile-first: 360 → 768 → 1200.

   Правила те же, что у base, по смыслу:
   — цвет действия (--cta) только у основных кнопок;
   — контраст текста ≥ 4.5:1, зоны нажатия ≥ 48px, кнопки и поля 56px;
   — без градиентов и без цветных полосок сбоку у карточек.
   Свои: палитра на ледяном голубом и тёмно-сине-зелёном, плашка-маркер
   ледяная, «0 ₽» — на маркере, а не на жёлтом.
   ============================================================ */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../fonts/golos-text-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ——————————————————————————— Токены ——————————————————————————— */

:root {
  /* Поверхности */
  --bg:          #f1f8fa;   /* фон страницы */
  --panel:       #ffffff;   /* карточки, форма, шапка */
  --tint:        #e1f2f6;   /* полоса секции через одну */
  --tint-2:      #c9e7ef;   /* плитки под иконками, выделенные блоки */
  --rule:        #cde2e9;   /* разделители, декор */
  --rule-strong: #7a96a1;   /* рамка поля в покое, 3:1 к белому */

  /* Текст */
  --ink:         #0b2a3a;   /* заголовки, цены, телефон */
  --text:        #1d3a47;
  --muted:       #4a6470;   /* 6.3:1 к белому, 5.4:1 к --tint */

  /* Действие: только основные кнопки */
  --cta:         #0b6e8f;   /* 5.8:1 с белым */
  --cta-hover:   #095b76;
  --cta-press:   #07495f;
  --on-cta:      #ffffff;
  --cta-shadow:  0 8px 20px rgba(11, 110, 143, 0.28);

  /* Голубой акцент: иконки, ссылки, маркер в H1 и под «0 ₽» */
  --accent:      #0b6e8f;   /* 5:1 к --tint */
  --mark:        #c4ecf5;

  /* Тёмные полосы и верхняя строка */
  --deep:        #0b2a3a;
  --deep-2:      #123f50;
  --on-deep:     #e4f3f7;
  --on-deep-mut: #9fc2cd;   /* 7.9:1 к --deep */

  /* Состояния */
  --success:     #127a52;
  --success-soft:#e3f5ec;
  --error:       #c62828;
  --error-soft:  #fdecec;
  --focus:       #0b2a3a;

  /* Форма и размеры */
  --font: "Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm:    10px;
  --r-ctl:   14px;
  --r-card:  18px;
  --r-pill:  999px;
  --shadow:  0 1px 2px rgba(11, 42, 58, 0.06), 0 8px 24px rgba(11, 42, 58, 0.07);
  --shadow-up: 0 2px 6px rgba(11, 42, 58, 0.08), 0 16px 36px rgba(11, 42, 58, 0.12);
  --tap:     48px;
  --ctl:     56px;
  --gutter:  16px;
  --band:    44px;
  --bar-h:   60px;
  --wrap:    1160px;

  /* Шрифт: мобильные размеры, ниже — переопределения по ширине */
  --h1: 28px;   --h1-lh: 34px;
  --h2: 25px;   --h2-lh: 31px;
  --h3: 18px;   --h3-lh: 24px;
  --body: 16px; --body-lh: 25px;
  --small: 14px; --small-lh: 20px;
}

@media (min-width: 768px) {
  :root {
    --h1: 44px;  --h1-lh: 52px;
    --h2: 34px;  --h2-lh: 42px;
    --h3: 20px;  --h3-lh: 26px;
    --gutter: 24px;
    --band:   72px;
    --bar-h:  76px;
  }
}
@media (min-width: 1200px) {
  :root {
    --h1: 50px;  --h1-lh: 58px;
    --h2: 38px;  --h2-lh: 46px;
    --band: 88px;
  }
}

/* ——————————————————————————— Сброс ——————————————————————————— */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: var(--sticky-bar-space, 0px);
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--bar-h) + 12px); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.band--deep :focus-visible, .topline :focus-visible { outline-color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.num { font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.icon { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.icon--lg { width: 36px; height: 36px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Плашка-маркер в H1 и под нулями. */
.accent, .zero {
  background: var(--mark);
  color: var(--ink);
  padding: 0 6px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.zero { font-weight: 800; white-space: nowrap; }

/* ——————————————————————————— Кнопка действия ——————————————————————————— */

.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ctl);
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--cta);
  color: var(--on-cta);
  box-shadow: var(--cta-shadow);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.go:hover { background: var(--cta-hover); }
.go:active, .go.is-sending { background: var(--cta-press); }
.go--block { display: flex; width: 100%; }
.go[disabled] { cursor: progress; }

/* ——————————————————————————— Верхняя строка ——————————————————————————— */

.topline { display: none; background: var(--deep); color: var(--on-deep-mut); font-size: 13px; line-height: 18px; }
.topline__in { display: flex; align-items: center; gap: 24px; min-height: 40px; }
.topline__item { display: inline-flex; align-items: center; gap: 6px; }
.topline__item .icon { width: 18px; height: 18px; color: var(--mark); }
.topline__city {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0; border: 0; background: none;
  color: var(--on-deep); font-size: 13px; cursor: pointer;
}
.topline__city .icon { width: 18px; height: 18px; color: var(--mark); }
.topline__change { color: var(--on-deep-mut); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .topline { display: block; } }

/* ——————————————————————————— Шапка ——————————————————————————— */

.bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.bar__in { display: flex; align-items: center; gap: 12px; min-height: var(--bar-h); }
.bar__logo { display: block; margin-right: auto; }
.bar__logo img { width: auto; height: 34px; }
.bar__nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column;
  padding: 8px var(--gutter) 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.bar__nav.is-open { display: flex; }
.bar__link {
  display: flex; align-items: center; min-height: var(--tap);
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.bar__link:last-child { border-bottom: 0; }
.bar__phone { display: none; color: var(--ink); font-size: 19px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.bar__phone--always { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 17px; }
.bar__round {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%;
  background: var(--tint); color: var(--accent);
  cursor: pointer; text-decoration: none;
}
.bar__call { background: var(--cta); color: var(--on-cta); }

@media (min-width: 768px) {
  .bar__logo img { height: 44px; }
  .bar__phone { display: inline-flex; align-items: center; min-height: var(--tap); }
  .bar__call { display: none; }
}
@media (min-width: 1200px) {
  .bar__logo { margin-right: 0; }
  .bar__nav {
    display: flex; position: static; flex-direction: row; gap: 4px;
    margin: 0 auto; padding: 0; border: 0; box-shadow: none; background: none;
  }
  .bar__link { border: 0; padding: 0 10px; font-size: 15px; border-radius: var(--r-sm); }
  .bar__link:hover { background: var(--tint); }
  .bar__menu { display: none; }
}

/* ——————————————————————————— Первый экран ——————————————————————————— */

.intro {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  padding: 16px 0 28px;
}
/* Декоративное «окно люка» — два кольца на фоне, без градиента. */
.intro::before, .intro::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.intro::before { width: 460px; height: 460px; right: -200px; top: -160px; border: 56px solid var(--tint-2); }
.intro::after  { width: 220px; height: 220px; right: -80px; top: -40px; border: 2px solid var(--panel); opacity: 0.8; }

.intro__in { position: relative; z-index: 1; display: grid; gap: 28px; }
.intro__badge {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; line-height: 18px; color: var(--muted);
  margin-bottom: 10px;
}
.intro__badge b { color: var(--ink); font-size: 15px; }
.intro__star { width: 18px; height: 18px; color: #e8a400; }
.intro__h1 {
  font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -0.015em;
  font-weight: 800; color: var(--ink);
}
.intro__sub { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--text); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.facts__item {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--rule);
}
.facts__big { font-size: 18px; line-height: 22px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.facts__cap { font-size: 12px; line-height: 15px; color: var(--muted); }

.intro__act { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.intro__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  color: var(--ink); font-size: 20px; font-weight: 800; text-decoration: none;
}
.intro__tel-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel); color: var(--accent);
}
.intro__tel-ico .icon { width: 20px; height: 20px; }
.intro__micro { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted); text-align: center; }

/* Фото первого экрана. На телефоне — широкой полосой после номера. */
.intro__media { position: relative; margin: 0; }
.intro__photo {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-up);
}
.intro__chip {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--panel); box-shadow: var(--shadow-up);
  font-size: 13px; line-height: 17px; color: var(--text);
}
.intro__chip b { display: block; color: var(--ink); font-size: 14px; }
.intro__chip-sub { display: block; color: var(--muted); }
.intro__chip-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cta); color: var(--on-cta);
}
.intro__chip-ico .icon { width: 20px; height: 20px; }
.intro__chip-ico--ok { background: var(--success-soft); color: var(--success); }
.intro__chip--top { left: 12px; bottom: 12px; }
.intro__chip--bottom { display: none; }

/* Полоса с формой под первым экраном — с 768px. */
.quick { display: none; background: var(--panel); border-bottom: 1px solid var(--rule); }
.quick__in { display: grid; gap: 16px; padding-block: 24px; }
.quick__title { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--ink); }
.quick__note { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--muted); }
.req--inline { padding: 0; box-shadow: none; background: none; }

@media (min-width: 768px) {
  .intro { padding: 48px 0 64px; }
  .intro::before { width: 720px; height: 720px; right: -260px; top: -260px; border-width: 90px; }
  .intro::after  { width: 380px; height: 380px; right: -60px; top: -80px; }
  .intro__badge { font-size: 14px; margin-bottom: 16px; }
  .intro__sub { margin-top: 16px; font-size: 18px; line-height: 28px; max-width: 600px; }
  .facts { margin-top: 24px; gap: 12px; max-width: 600px; }
  .facts__item { padding: 14px 16px; }
  .facts__big { font-size: 26px; line-height: 30px; }
  .facts__cap { font-size: 14px; line-height: 18px; }
  .intro__act { flex-direction: row; align-items: center; gap: 24px; margin-top: 28px; }
  .intro__micro { text-align: left; }
  /* Обе плашки внизу: в верхней половине кадра лицо мастера. */
  .intro__chip--top { left: 16px; bottom: 16px; }
  .intro__chip--bottom { display: flex; right: 16px; bottom: 16px; }
  .quick { display: block; }
  .req--inline {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 0 12px; align-items: start;
  }
  .req--inline .inp { margin-bottom: 0; }
  .req--inline .req__send { margin-top: 0; padding: 0 28px; }
  .req--inline .req__consent,
  .req--inline .req__consent-err,
  .req--inline .req__fail { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .intro__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 56px; }
  .intro__photo { aspect-ratio: 5 / 6; }
  .intro__chip--top { left: -20px; bottom: 116px; }
  .intro__chip--bottom { right: -16px; bottom: 32px; }
  .quick__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: 40px; }
}

/* ——————————————————————————— Полосы и заголовки ——————————————————————————— */

.band { padding-block: var(--band); }
.band--tint { background: var(--tint); }
.band--deep { background: var(--deep); color: var(--on-deep); }
.band__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.band__act-note { color: var(--muted); }
.band__act-note a { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }

.head { margin-bottom: 24px; max-width: 760px; }
.head__kicker {
  margin-bottom: 8px;
  font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.head__title { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.head__sub { margin-top: 10px; color: var(--muted); }
.head--light .head__title { color: #ffffff; }
.head--light .head__kicker { color: var(--mark); }
@media (min-width: 768px) {
  .head { margin-bottom: 36px; }
  .head__sub { font-size: 18px; line-height: 28px; }
}

/* ——————————————————————————— Неисправности ——————————————————————————— */

.faults { display: grid; gap: 10px; }
.fault {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  grid-template-areas: "ico body go" "ico price go";
  column-gap: 14px; row-gap: 6px;
  align-items: start;
  height: 100%;
  padding: 14px 14px 14px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fault:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.fault__ico {
  grid-area: ico;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint); color: var(--accent);
}
.fault__body { grid-area: body; display: flex; flex-direction: column; gap: 4px; }
.fault__title { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink); }
.fault__text { font-size: 14px; line-height: 20px; color: var(--muted); }
.fault__price { grid-area: price; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fault__price .icon { width: 20px; height: 20px; color: var(--accent); }
.fault__from { font-weight: 500; color: var(--muted); }
.fault__go { grid-area: go; align-self: center; color: var(--accent); }
.fault--call { border-style: dashed; background: transparent; grid-template-areas: "ico body body" "ico price price"; }

.faults__note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 22px;
}
.faults__note .icon { color: var(--accent); }

@media (min-width: 900px) {
  .faults { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .fault {
    grid-template-columns: 48px minmax(0, 1fr) auto 24px;
    grid-template-areas: "ico body price go";
    align-items: center; padding: 18px 18px 18px 16px;
  }
  .fault__ico { width: 48px; height: 48px; }
  .fault--call { grid-template-areas: "ico body price price"; }
}

/* Сетка карточек: иконка и цена сверху, текст ниже. 1 → 2 → 3 колонки. */
.faults--grid .fault {
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  grid-template-areas: "ico price go" "body body body";
  align-items: center; row-gap: 12px;
}
.faults--grid .fault__price { justify-self: end; }
.faults--grid .fault--call { grid-template-areas: "ico price price" "body body body"; }
@media (min-width: 640px) {
  .faults--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 900px) {
  .faults--grid .fault {
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    grid-template-areas: "ico price go" "body body body";
    align-items: center; padding: 18px;
  }
  .faults--grid .fault--call { grid-template-areas: "ico price price" "body body body"; }
}
@media (min-width: 1200px) {
  .faults--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ——————————————————————————— До приезда мастера ——————————————————————————— */

.tips { display: grid; gap: 12px; }
.tips__item {
  padding: 20px; border-radius: var(--r-card);
  background: var(--panel); border: 1px solid var(--rule);
}
.tips__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--r-sm);
  background: var(--tint-2); color: var(--accent);
}
.tips__title { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.tips__text { color: var(--text); }
@media (min-width: 768px) {
  .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ——————————————————————————— Порядок работы ——————————————————————————— */

.route { position: relative; display: grid; gap: 22px; counter-reset: route; }
/* Линия между шагами: вертикальная на телефоне, горизонтальная на десктопе. */
.route::before {
  content: "";
  position: absolute; left: 21px; top: 22px; bottom: 22px;
  border-left: 2px dashed var(--rule-strong);
}
.route__step { position: relative; padding-left: 64px; }
.route__dot {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cta); color: var(--on-cta);
  font-size: 18px; font-weight: 800;
  box-shadow: 0 0 0 6px var(--tint);
}
.route__title { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: var(--ink); margin: 8px 0 6px; }
.route__text { color: var(--text); }
.route--compact .route__step { padding-left: 56px; min-height: 44px; display: flex; align-items: center; }
.route--compact::before { left: 21px; }
.route--compact .route__dot { box-shadow: 0 0 0 6px var(--panel); }

@media (min-width: 1000px) {
  .route:not(.route--compact) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .route:not(.route--compact)::before {
    left: 22px; right: 22px; top: 21px; bottom: auto;
    border-left: 0; border-top: 2px dashed var(--rule-strong);
  }
  .route:not(.route--compact) .route__step { padding: 64px 0 0; }
  .route:not(.route--compact) .route__title { margin-top: 0; }
}

/* ——————————————————————————— Стоимость ——————————————————————————— */

.popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.popular__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: var(--r-card);
  background: var(--panel); box-shadow: var(--shadow);
}
.popular__ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--tint); color: var(--accent);
}
.popular__name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); flex: 1; }
.popular__sum { font-size: 19px; line-height: 24px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.popular__sum--zero { align-self: flex-start; background: var(--mark); padding: 0 8px; border-radius: 6px; }
.popular__from { font-size: 14px; font-weight: 500; color: var(--muted); }
@media (min-width: 768px) {
  .popular { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .popular__item { flex-direction: row; align-items: center; padding: 18px; gap: 14px; }
  .popular__sum--zero { align-self: center; }
  .popular__sum { font-size: 20px; }
}

.pricelist {
  margin-top: 16px;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pricelist__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--ctl); padding: 0 18px;
  font-weight: 700; color: var(--accent);
  cursor: pointer; list-style: none;
}
.pricelist__sum::-webkit-details-marker { display: none; }
.pricelist__chev { transition: transform 0.2s ease; }
.pricelist[open] .pricelist__chev { transform: rotate(180deg); }
.pricelist__scroll { border-top: 1px solid var(--rule); }
.pricelist__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.pricelist__table th {
  padding: 10px 18px; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--tint);
}
.pricelist__table td { padding: 11px 18px; border-top: 1px solid var(--rule); vertical-align: top; }
.pricelist__table tbody tr:nth-child(even) td { background: #f6fbfc; }
.pricelist__bold td { font-weight: 700; color: var(--ink); }
.pricelist__price { font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.pricelist__table th:nth-child(2) { text-align: right; }
.pricelist__time { display: none; color: var(--muted); white-space: nowrap; }
@media (min-width: 640px) {
  .pricelist__time { display: table-cell; }
}

.tariff-cta {
  display: grid; gap: 14px; align-items: center;
  margin-top: 16px; padding: 18px;
  border-radius: var(--r-card); background: var(--tint-2);
}
.tariff-cta__ico {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--panel); color: var(--accent);
}
.tariff-cta__text b { color: var(--ink); }
@media (min-width: 900px) {
  .tariff-cta { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; padding: 20px 24px; }
}

/* ——————————————————————————— Тёмная полоса: обещания и цифры ——————————————————————————— */

.promise { display: grid; gap: 14px; }
.promise__item { padding: 20px; border-radius: var(--r-card); background: var(--deep-2); }
.promise__ico {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--mark); color: var(--deep);
  margin-bottom: 14px;
}
.promise__title { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.promise__text { color: var(--on-deep); }
.promise__text b { color: #ffffff; }
@media (min-width: 900px) {
  .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .promise__item { padding: 28px; }
}

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.stats__item {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px;
  padding: 18px 12px 0 0;
}
.stats dd { font-size: 30px; line-height: 36px; font-weight: 800; color: #ffffff; }
.stats dt { font-size: 14px; line-height: 20px; color: var(--on-deep-mut); }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; }
  .stats dd { font-size: 40px; line-height: 46px; }
}

/* ——————————————————————————— Кто приедет ——————————————————————————— */

.crew { display: grid; gap: 28px; align-items: center; }
.crew__img { width: 100%; height: auto; border-radius: var(--r-card); object-fit: cover; aspect-ratio: 600 / 584; }
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks__ico { color: var(--success); }
.crew__types-title { margin: 28px 0 12px; font-weight: 700; color: var(--ink); }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kinds__item {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 10px;
  border-radius: var(--r-pill); background: var(--panel);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.kinds__item .icon { width: 20px; height: 20px; color: var(--accent); }
@media (min-width: 900px) {
  .crew { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
  /* Фото справа от текста. */
  .crew--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .crew--flip .crew__photo { order: 2; }
}

/* ——————————————————————————— Гарантии и талон ——————————————————————————— */

.ticket { display: grid; gap: 32px; align-items: center; }
.ticket__card {
  position: relative;
  max-width: 440px; width: 100%; margin: 0 auto;
  padding: 22px 22px 84px;
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-up);
  transform: rotate(-2deg);
}
.ticket__top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.ticket__label { font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.ticket__no { font-size: 13px; color: var(--muted); }
.ticket__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dotted var(--rule-strong);
  font-size: 14px; line-height: 20px;
}
.ticket__row span { color: var(--muted); }
.ticket__row b { color: var(--ink); text-align: right; }
.ticket__stamp {
  position: absolute; right: 18px; bottom: -22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 104px; height: 104px; border-radius: 50%;
  border: 3px solid var(--accent); background: var(--panel);
  color: var(--accent); font-size: 11px; line-height: 13px; font-weight: 700; text-align: center;
  text-transform: uppercase;
  transform: rotate(12deg);
}
.assure { display: grid; gap: 18px; }
.assure__item { display: flex; gap: 14px; align-items: flex-start; }
.assure__ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: var(--r-sm);
  background: var(--tint); color: var(--accent);
}
.assure__title { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.assure__text { color: var(--text); }
@media (min-width: 900px) {
  .ticket { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ——————————————————————————— Отзывы ——————————————————————————— */

.voices { display: grid; gap: 24px; }
.voices__big { margin-top: 16px; font-size: 56px; line-height: 60px; font-weight: 800; color: var(--ink); }
.voices__big span { font-size: 24px; color: var(--muted); font-weight: 600; }
.voices__stars { display: flex; gap: 2px; margin-top: 6px; color: #e8a400; }
.voices__count { margin-top: 8px; color: var(--muted); font-size: 15px; }
/* Телефон: карточки листаются вбок. */
.voices__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.voice {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: var(--r-card);
  background: var(--panel); box-shadow: var(--shadow);
  scroll-snap-align: start;
}
.voice__topic {
  align-self: flex-start;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--accent);
  font-size: 13px; font-weight: 700;
}
.voice__text { flex: 1; color: var(--text); }
.voice__text::before { content: "«"; }
.voice__text::after { content: "»"; }
.voice__who { display: flex; align-items: center; gap: 12px; }
.voice__who b { display: block; color: var(--ink); }
.voice__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--deep); color: #ffffff; font-weight: 700;
}
.voice__city { display: block; font-size: 13px; color: var(--muted); }
@media (min-width: 900px) {
  .voices__list { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 16px; }
}
@media (min-width: 1100px) {
  .voices { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
}

/* ——————————————————————————— Марки ——————————————————————————— */

.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.marks__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 15px; font-weight: 700; color: var(--ink); text-align: center;
}
@media (min-width: 768px) {
  .marks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .marks__item { font-size: 16px; }
}
.marks--more { margin-top: 8px; }
.marks-more__sum {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); margin-top: 8px;
  color: var(--accent); font-weight: 700; cursor: pointer; list-style: none;
}
.marks-more__sum::-webkit-details-marker { display: none; }
.marks-more[open] .marks-more__sum .icon { transform: rotate(180deg); }
.marks__note { margin-top: 16px; color: var(--muted); }
.marks__note a { color: var(--accent); font-weight: 700; }

/* ——————————————————————————— Ограничения ——————————————————————————— */

.limits { display: grid; gap: 14px; }
.limits__box { padding: 20px; border-radius: var(--r-card); background: var(--panel); }
.limits__box--accent { background: var(--tint-2); }
.limits__title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: var(--ink);
  margin-bottom: 12px;
}
.limits__title .icon { color: var(--accent); }
.limits__list { display: grid; gap: 8px; }
.limits__list li { padding-left: 18px; position: relative; }
.limits__list li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong);
}
.limits__tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); margin-top: 8px;
  color: var(--ink); font-size: 19px; font-weight: 800; text-decoration: none;
}
.limits__tel .icon { color: var(--accent); }
@media (min-width: 900px) {
  .limits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .limits__box { padding: 26px; }
}

/* ——————————————————————————— Вопросы ——————————————————————————— */

.ask { display: grid; gap: 8px; }
.ask__hint { color: var(--muted); }
.ask__tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); margin-top: 6px;
  color: var(--ink); font-size: 20px; font-weight: 800; text-decoration: none;
}
.ask__tel .icon { color: var(--accent); }
.ask__list { margin-top: 16px; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 12px 0;
  font-size: 17px; line-height: 23px; font-weight: 700; color: var(--ink);
  cursor: pointer; list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__chev {
  flex-shrink: 0; width: 32px; height: 32px; padding: 4px;
  border-radius: 50%; background: var(--tint); color: var(--accent);
  transition: transform 0.2s ease;
}
.qa[open] .qa__chev { transform: rotate(180deg); }
.qa__a { padding: 0 48px 18px 0; color: var(--text); }
@media (min-width: 1000px) {
  .ask { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
  .ask__side { position: sticky; top: calc(var(--bar-h) + 24px); }
  .ask__list { margin-top: 0; }
}

/* ——————————————————————————— Города ——————————————————————————— */

.region { display: grid; gap: 8px; }
.region__lead { color: var(--text); }
.region__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.town {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--panel); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.town:hover { border-color: var(--accent); }
.town .icon { width: 18px; height: 18px; }
.town--on { background: var(--deep); border-color: var(--deep); color: #ffffff; }
@media (min-width: 1000px) {
  .region { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .region__list { margin-top: 0; }
}

/* ——————————————————————————— Финальная заявка ——————————————————————————— */

.callback__in { display: grid; gap: 28px; }
.callback__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--mark);
  margin-bottom: 12px;
}
.callback__kicker .icon { width: 20px; height: 20px; }
.callback__title { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 800; color: #ffffff; }
.callback__lead { margin-top: 14px; color: var(--on-deep); }
.callback__tel {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap); margin-top: 18px;
  color: #ffffff; font-size: 26px; font-weight: 800; text-decoration: none;
}
.callback__tel .icon { color: var(--mark); width: 28px; height: 28px; }
.callback__hours { font-size: 14px; color: var(--on-deep-mut); }
.callback__photo { display: none; margin-top: 28px; }
.callback__img { width: 100%; height: 280px; object-fit: cover; object-position: 50% 45%; border-radius: var(--r-card); }
@media (min-width: 1000px) {
  .callback__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
  .callback__photo { display: block; }
}

/* ——————————————————————————— Форма ——————————————————————————— */

.req {
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-up);
  color: var(--text);
}
.req__title { font-size: 22px; line-height: 28px; font-weight: 800; color: var(--ink); }
.req__note { margin: 6px 0 16px; font-size: 15px; line-height: 22px; color: var(--muted); }
.pop .req { padding: 0; box-shadow: none; }

.inp { position: relative; margin-bottom: 12px; }
.inp__ctl {
  width: 100%; height: var(--ctl);
  padding: 22px 16px 6px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-ctl);
  background: var(--panel);
  font-size: 17px;
}
.inp__ctl:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--mark); }
/* Подпись лежит в поле, пока оно пустое, и уезжает вверх при вводе. */
.inp__lbl {
  position: absolute; left: 17px; top: 17px;
  font-size: 16px; line-height: 22px; color: var(--muted);
  pointer-events: none;
  transition: transform 0.15s ease, font-size 0.15s ease, top 0.15s ease;
}
.inp__ctl:focus + .inp__lbl,
.inp__ctl:not(:placeholder-shown) + .inp__lbl { top: 7px; font-size: 12px; line-height: 16px; font-weight: 600; }
.inp__err { display: none; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--error); }
.field--error .inp__ctl { border-color: var(--error); }
.field--error .inp__err { display: block; }

.req__send { margin-top: 4px; }
.req__consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted);
}
.req__consent input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.req__consent label { cursor: pointer; }
.req__consent a { color: var(--accent); }
.req__consent-err { margin-top: 6px; }
.req__fail {
  display: none; margin-top: 12px; padding: 12px;
  border-radius: var(--r-sm); background: var(--error-soft); color: var(--error);
  font-size: 14px; line-height: 20px;
}
.req.has-error .req__fail { display: block; }

.req-ok {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 20px; border-radius: var(--r-card);
  background: var(--success-soft); color: var(--text); text-align: center;
}
.req-ok__icon { color: var(--success); }
.req-ok__title { font-size: 22px; line-height: 28px; font-weight: 800; color: var(--ink); }
.req-ok a { color: var(--ink); font-weight: 700; }

/* ——————————————————————————— Подвал ——————————————————————————— */

.foot { background: #dcedf2; color: var(--text); padding: 40px 0 24px; font-size: 15px; }
.foot__grid { display: grid; gap: 24px; }
.foot__logo { width: auto; height: 40px; }
.foot__muted { display: block; margin-top: 8px; color: var(--muted); }
.foot__contacts { display: flex; flex-direction: column; }
.foot__phone { color: var(--ink); font-size: 22px; font-weight: 800; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.foot__link { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.foot__nav { display: flex; flex-direction: column; }
.foot__legal {
  display: grid; gap: 6px;
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 19px; color: var(--muted);
}
.foot__docs { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
.foot__docs .foot__link { font-size: 13px; }
.foot--plain { padding-top: 0; }
.foot--plain .foot__legal { margin-top: 0; border-top: 0; }
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
}

/* ——————————————————————————— Нижняя панель (телефон) ——————————————————————————— */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  box-shadow: 0 -6px 20px rgba(11, 42, 58, 0.12);
}
.dock__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl); padding: 0 18px;
  border: 2px solid var(--ink); border-radius: var(--r-ctl);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.dock__go { padding: 0 12px; }
@media (min-width: 768px) { .dock { display: none; } }

/* ——————————————————————————— Окна ——————————————————————————— */

.pop {
  width: 100%; max-width: 100%; max-height: 92vh;
  margin: auto 0 0; padding: 0;
  border: 0; border-radius: 22px 22px 0 0;
  background: var(--panel); color: var(--text);
  overflow-y: auto;
}
.pop::backdrop { background: rgba(11, 42, 58, 0.6); }
.pop__box { padding: 20px var(--gutter) 24px; }
.pop__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pop__ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint); color: var(--accent);
}
.pop__ico:empty { display: none; }
.pop__title { flex: 1; font-size: 20px; line-height: 26px; font-weight: 800; color: var(--ink); }
.pop__title--lg { font-size: 26px; line-height: 32px; }
.pop__x {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); cursor: pointer;
}
.pop__text { color: var(--text); margin-bottom: 12px; }
.pop__text b { display: block; margin-top: 8px; color: var(--ink); font-size: 18px; }
.pop__note {
  margin-bottom: 16px; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--tint);
  font-size: 14px; line-height: 20px;
}
.pop__note b { color: var(--ink); }
.pop__towns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) {
  .pop { max-width: 500px; margin: auto; border-radius: var(--r-card); }
  .pop__box { padding: 28px; }
}

/* ——————————————————————————— /spasibo ——————————————————————————— */

.bar--plain { position: static; }
.thanks__in { max-width: 920px; }
.thanks__mark { color: var(--success); }
.thanks__mark .icon { width: 56px; height: 56px; }
.thanks__h1 { margin-top: 12px; font-size: var(--h1); line-height: var(--h1-lh); font-weight: 800; color: var(--ink); }
.thanks__lead { margin-top: 14px; font-size: 18px; line-height: 28px; }
.thanks__lead a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.thanks__cols { display: grid; gap: 16px; margin-top: 28px; }
.thanks__box { padding: 22px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow); }
.thanks__h2 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.thanks .ticks__ico { color: var(--accent); }
@media (min-width: 900px) {
  .thanks__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ============================================================
   Оттенки хостов связки — класс на <body>, ключ body_class
   в config/hosts/<хост>.php. Меняют цвет действия, акцент, маркер,
   скругления и тёмную полосу. Контраст кнопки с белым ≥ 4.5:1.
   ============================================================ */

/* Иней: холодный синий, строгие углы. Кнопка 5.9:1. */
.tone-frost {
  --cta:        #1f63b8;
  --cta-hover:  #1a539a;
  --cta-press:  #15447e;
  --cta-shadow: 0 6px 16px rgba(31, 99, 184, 0.28);
  --accent:     #1f63b8;
  --mark:       #d2e4fb;
  --tint:       #e8f0fb;
  --tint-2:     #d3e2f6;
  --deep:       #0f2747;
  --deep-2:     #19375f;
  --r-sm:       8px;
  --r-ctl:      10px;
  --r-card:     12px;
}

/* Полярный: стальной сине-серый, круглые кнопки. Кнопка 7.1:1. */
.tone-polar {
  --cta:        #2c5d7c;
  --cta-hover:  #244d67;
  --cta-press:  #1d3f54;
  --cta-shadow: 0 10px 24px rgba(44, 93, 124, 0.24);
  --accent:     #2c5d7c;
  --mark:       #d4e6f0;
  --bg:         #f5f9fb;
  --tint:       #e9f1f5;
  --tint-2:     #d5e4ec;
  --deep:       #13283a;
  --deep-2:     #1d3a52;
  --r-ctl:      999px;
  --r-card:     26px;
}

/* Ледник: зелёно-бирюзовый, мягкие углы. Кнопка 5.2:1. */
.tone-glacier {
  --cta:        #0b7a78;
  --cta-hover:  #09625f;
  --cta-press:  #074f4d;
  --cta-shadow: 0 8px 20px rgba(11, 122, 120, 0.26);
  --accent:     #086a68;   /* текстом на --tint темнее кнопки: 5.6:1 */
  --mark:       #c2efe9;
  --tint:       #e0f4f2;
  --tint-2:     #c6ebe6;
  --deep:       #0a2e33;
  --deep-2:     #114148;
  --r-ctl:      18px;
  --r-card:     20px;
}