/* Мир V5 «РЯДОМ» — вариант первого экрана главной V4 «Ролик».

   Всё, кроме героя, совпадает с V4; герой — свой (см. раздел «Герой»).
   Владелец выбирает лучший из вариантов V4–V7, остальные уйдут.

   Ниже — пояснения V4, они к этому миру тоже относятся:

   Объясняет не текст, а ролик: он стоит в первом экране, крупно, и всё
   остальное на странице ему служит. Отсюда скупость остального — ни карточек
   с иконками, ни блоков боли и возражений: владелец попросил «коротко, как
   работает, и один громкий лозунг».

   Палитра светлая, в цветах главной market.mosreg.ru: белый фон с голубым
   отливом, синий #2148B1, тёмно-синий подвал #253769 — посетитель узнаёт свою
   площадку (просьба владельца). Герба и логотипа портала здесь нет и быть не
   должно: это госсимвол, и сайт выглядел бы официальным. Заголовок и главная
   кнопка — синие, как на портале; оранжевый остался только в точке знака. */

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

/* Та же гарнитура и то же подмножество, что у V3, но своим файлом: миры друг
   о друге не знают, и удаление одного не должно ломать другой. */
@font-face {
  font-family: "Manrope v5";
  src: url("/site/fonts/v5-manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Значения ---------- */

:root {
  --fon: #ffffff;
  --karta: #ffffff;
  --karta-vyshe: #f6f8fc;
  --granica: #e4e9f2;
  --granica-yarche: #cdd6e6;
  --tekst: #212529;
  --tekst-2: #5b6576;
  --ogon: #ff5a1f;
  --ogon-svetlee: #ff7a45;
  /* Оранжевый для текста на белом: сам акцент даёт на нём только 3:1. */
  --ogon-tekst: #c2410c;
  /* Синий и тёмно-синий главной market.mosreg.ru — узнаваемость площадки. */
  --siniy: #2148b1;
  --siniy-temnyy: #253769;
  --pobeda: #16a064;
  --trevoga: #c62828;

  --shrift: "Manrope v5", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --skruglenie-karty: 20px;
  --skruglenie-knopki: 12px;
  --skruglenie-ekrana: 16px;

  --ritm: 120px;
  --polya: 24px;
  --krivaya: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Основа ---------- */

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

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

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font-family: var(--shrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--siniy);
  outline-offset: 3px;
  border-radius: 6px;
}

.obolochka {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--polya);
}

/* Ролик шире текста: он главный, и на широком экране ему нужно место. */
.obolochka--shire {
  max-width: 1320px;
}

.propusk {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--ogon);
  color: #140803;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.propusk:focus {
  top: 16px;
}

.zagolovok-2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}


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

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--skruglenie-knopki);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--krivaya), border-color 180ms var(--krivaya),
    color 180ms var(--krivaya), transform 180ms var(--krivaya);
}

/* Главная кнопка — синий градиент кнопок market.mosreg.ru («Стать поставщиком»):
   посетитель узнаёт привычное «куда нажимать». Белый текст на нём — 6,4:1. */
.knopka--glavnaya {
  background: linear-gradient(92.55deg, #2b4fb0 0%, #005ac5 100%);
  color: #ffffff;
}

.knopka--glavnaya:hover {
  background: linear-gradient(92.55deg, #233f8f 0%, #004ca8 100%);
}

.knopka--glavnaya:active {
  transform: translateY(1px);
}

.knopka--kontur {
  border-color: var(--granica-yarche);
  color: var(--tekst);
}

.knopka--kontur:hover {
  border-color: var(--siniy);
  color: var(--siniy);
}

.knopka--krupno {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 17px;
}

.knopka[disabled],
.knopka[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Шапка ---------- */

.shapka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--granica);
  /* Тень шапки — как у портала: белое на белом отделяется только ею. */
  box-shadow: 0 1px 18px 2px rgba(0, 0, 0, 0.04);
}

.shapka__polosa {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

/* На телефоне полное «Бесплатный тест 7 дней!» ломает кнопку шапки на две
   строки — там показывается короткое. Имя кнопки для диктора одно, полное:
   оно в aria-label, а обе надписи от диктора скрыты. */
.shapka__knopka {
  white-space: nowrap;
}

.shapka__korotko {
  display: none;
}

@media (max-width: 640px) {
  .shapka__polno {
    display: none;
  }

  .shapka__korotko {
    display: inline;
  }
}

.znak {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.znak__tochka {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ogon);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.18);
}

.znak__ai {
  color: var(--tekst-2);
  font-weight: 600;
}

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

.geroy__zagolovok {
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* «БОТ» — того же синего, что и весь заголовок (просьба владельца). Обёртка
   оставлена: слово выделяется заглавными, и ему может понадобиться своё. */
.geroy__bot {
  color: inherit;
}

/* Адрес площадки не рвётся переносом: «market.mosreg.ru» по кускам не узнать. */
.geroy__domen {
  white-space: nowrap;
}

.geroy__gromko {
  display: block;
  color: var(--siniy);
}

.geroy__gde {
  display: block;
  margin-top: 14px;
  max-width: 32ch;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--tekst);
  text-wrap: balance;
}

.geroy__tekst {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: 18px;
  color: var(--tekst);
  text-wrap: balance;
}

.geroy__k-roliku {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: var(--siniy);
  font-weight: 700;
  text-decoration: none;
}

.geroy__k-roliku::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--krivaya);
}

.geroy__k-roliku:hover::after {
  transform: translateY(1px) rotate(45deg);
}

.karta-formy {
  padding: 32px;
  border: 1px solid var(--granica);
  border-radius: var(--skruglenie-karty);
  background: var(--karta);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.karta-formy__zag {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.karta-formy__tekst {
  margin: 8px 0 24px;
  color: var(--tekst-2);
  font-size: 16px;
}

.karta-formy .forma__ryad {
  margin-bottom: 14px;
}

.karta-formy .forma__vvod {
  min-height: 48px;
}

/* Вариант «Рядом»: две колонки, ролик справа на всю высоту колонки. Области
   сетки заданы именами, чтобы на узком экране ролик встал между лозунгом
   и формой, а не после формы. */
.geroy {
  padding: 48px 0 var(--ritm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--fon) 100%),
    linear-gradient(90deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.08) 100%),
    var(--fon);
}

.geroy__verh {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas:
    "slovo rolik"
    "forma rolik";
  column-gap: 56px;
  row-gap: 28px;
  align-items: center;
}

.geroy__slovo {
  grid-area: slovo;
  align-self: end;
}

.geroy__gromko {
  font-size: clamp(40px, 4.4vw, 60px);
}

.karta-formy.karta-formy--kompakt {
  grid-area: forma;
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.geroy__verh .rolik {
  grid-area: rolik;
  margin: 0;
}

/* Поля — по нижнему краю: подпись контакта длиннее и переносится на вторую
   строку, и без этого поле контакта стояло бы ниже поля имени. */
.forma__para {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  align-items: end;
}

@media (max-width: 960px) {
  .geroy__verh {
    grid-template-areas:
      "slovo"
      "rolik"
      "forma";
  }
}

@media (max-width: 640px) {
  .forma__para {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Ролик ---------- */

.rolik {
  margin: 64px 0 0;
}

.rolik__okno {
  overflow: hidden;
  border: 1px solid var(--granica-yarche);
  border-radius: var(--skruglenie-ekrana);
  background: var(--karta);
  box-shadow:
    0 24px 60px -24px rgba(33, 72, 177, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

.rolik__polosa {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--granica);
}

.rolik__tochki {
  display: inline-flex;
  gap: 7px;
}

.rolik__tochki i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #cfd6e4;
}

.rolik__adres {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  padding: 3px 12px;
  border-radius: 7px;
  background: #eef2f8;
  color: var(--tekst-2);
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rolik__video {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  background: #f4f5f7;
}

.rolik__zapas {
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  color: #1a1a1d;
}

.rolik__podpis {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tekst-2);
  text-align: center;
}

/* ---------- Как работает ---------- */

.kak {
  padding: 0 0 var(--ritm);
}

.shagi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.shagi__punkt {
  display: flex;
}

.shag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 28px 28px 32px;
  overflow: hidden;
  border: 1px solid var(--granica);
  border-radius: var(--skruglenie-karty);
  background: var(--karta);
  text-decoration: none;
  transition: border-color 180ms var(--krivaya), background-color 180ms var(--krivaya);
}

.shag:hover {
  border-color: var(--granica-yarche);
  background: var(--karta-vyshe);
}

/* Полоса снизу — сколько главы уже прошло. Долю пишет app.js, пока ролик идёт;
   без скрипта полоса пустая, и шаг выглядит как обычная карточка. */
.shag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--dolya, 0) * 100%);
  background: var(--siniy);
}

.shag[aria-current="step"] {
  border-color: rgba(33, 72, 177, 0.45);
  background: var(--karta-vyshe);
}

.shag__nomer {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--granica-yarche);
  font-weight: 800;
  font-size: 16px;
  color: var(--tekst-2);
  transition: background-color 180ms var(--krivaya), color 180ms var(--krivaya), border-color 180ms var(--krivaya);
}

.shag[aria-current="step"] .shag__nomer {
  background: var(--siniy);
  border-color: var(--siniy);
  color: #ffffff;
}

.shag__zag {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.shag__tekst {
  font-size: 16px;
  color: var(--tekst-2);
}

.kak__vvod {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--tekst-2);
  font-size: 18px;
}

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

.voprosy {
  padding: 0 0 var(--ritm);
}

.voprosy__setka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 64px;
  align-items: start;
}

.vopros {
  border-bottom: 1px solid var(--granica);
}

.vopros:first-child {
  border-top: 1px solid var(--granica);
}

.vopros__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.vopros__q::-webkit-details-marker {
  display: none;
}

/* Плюс, который поворачивается в крестик: открыт вопрос или нет — видно сразу. */
.vopros__q::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--granica-yarche);
  border-radius: 50%;
  color: var(--tekst-2);
  font-weight: 600;
  transition: transform 180ms var(--krivaya), color 180ms var(--krivaya), border-color 180ms var(--krivaya);
}

.vopros__q:hover::after,
.vopros[open] .vopros__q::after {
  color: var(--siniy);
  border-color: var(--siniy);
}

.vopros[open] .vopros__q::after {
  transform: rotate(45deg);
}

.vopros__a {
  margin: 0;
  padding: 0 48px 22px 0;
  color: var(--tekst-2);
}

/* ---------- Что умеет ---------- */

.umeet {
  --mezhdu: 112px;
  padding: var(--ritm) 0;
  border-top: 1px solid var(--granica);
}

.etapy {
  display: grid;
  gap: var(--mezhdu);
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

/* Этап — строки слева, снимок справа, и так на всех четырёх: взгляд не прыгает
   зигзагом, а идёт вниз по одной линии, как сама закупка. */
.etap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: start;
}

/* Линия пути: от точки этапа до точки следующего, сквозь промежуток между ними.
   Порядок этапов и есть смысл блока, поэтому линия, а не номера: номера
   на странице уже заняты тремя шагами ролика. */
.etap:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: calc(-1 * var(--mezhdu) - 17px);
  width: 2px;
  background: var(--granica-yarche);
}

.etap__tekst {
  position: relative;
  padding-left: 44px;
}

.etap__tekst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--siniy);
  border-radius: 50%;
  background: var(--fon);
}

.etap__zag {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--siniy);
  text-wrap: balance;
}

.etap__spisok {
  margin: 0;
}

/* Итоги — без снимка: строки встают в ряд на всю ширину, а не жмутся
   в левую половину рядом с пустотой. */
.etap--bez-snimka {
  grid-template-columns: minmax(0, 1fr);
}

.etap--bez-snimka .etap__spisok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.etap__punkt {
  padding: 18px 0;
  border-top: 1px solid var(--granica);
}

.etap__punkt dt {
  font-weight: 800;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.etap__punkt dd {
  margin: 6px 0 0;
  color: var(--tekst-2);
  text-wrap: pretty;
}

/* Снимок кабинета — целиком и в своих пропорциях: не обрезан, не растянут
   и не крупнее своих 640px по ширине. Рамки лежат в .snimok__kadr вместе
   с картинкой, поэтому их проценты — это проценты снимка. */
.snimok {
  max-width: 640px;
}

.snimok__okno {
  overflow: hidden;
  border: 1px solid var(--granica-yarche);
  border-radius: var(--skruglenie-ekrana);
  background: var(--karta);
  box-shadow:
    0 24px 60px -28px rgba(33, 72, 177, 0.32),
    0 6px 18px rgba(0, 0, 0, 0.06);
}

.snimok__kadr {
  position: relative;
}

.snimok__kadr img {
  display: block;
  width: 100%;
  height: auto;
}

.snimok__obvod {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 2px solid var(--siniy);
  border-radius: 8px;
  background: rgba(33, 72, 177, 0.06);
  box-shadow: 0 6px 16px -6px rgba(33, 72, 177, 0.55);
}

@media (max-width: 960px) {
  .umeet {
    --mezhdu: 80px;
  }

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

  /* Снимок уходит под строки; линия пути прошла бы сквозь него,
     поэтому остаются одни точки. */
  .etap:not(:last-child)::before {
    display: none;
  }

  .etap--bez-snimka .etap__spisok {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .umeet {
    --mezhdu: 64px;
  }

  .etapy {
    margin-top: 40px;
  }

  .etap__tekst {
    padding-left: 30px;
  }

  .etap__tekst::before {
    top: 8px;
    width: 12px;
    height: 12px;
  }

  .etap__zag {
    font-size: 26px;
  }

  .etap__punkt dt {
    font-size: 19px;
  }

  .snimok__okno {
    border-radius: 12px;
  }

  .snimok__obvod {
    border-radius: 6px;
  }
}

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

.zayavka {
  padding: 0 0 var(--ritm);
}

.zayavka__karta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 56px;
  border: 1px solid var(--granica-yarche);
  border-radius: var(--skruglenie-karty);
  background:
    linear-gradient(90deg, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0.06) 100%),
    var(--karta);
}

.zayavka__tekst {
  margin: 16px 0 0;
  max-width: 34ch;
  color: var(--tekst-2);
  font-size: 18px;
}

.lovushka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.forma__ryad {
  margin: 0 0 18px;
}

.forma__podpis {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.forma__vvod {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--granica-yarche);
  border-radius: var(--skruglenie-knopki);
  background: var(--fon);
  color: var(--tekst);
  font: inherit;
  font-size: 17px;
  transition: border-color 160ms var(--krivaya);
}

.forma__vvod::placeholder {
  color: #8a93a3;
}

.forma__vvod:hover {
  border-color: #b7c3da;
}

.forma__vvod:focus {
  outline: none;
  border-color: var(--siniy);
  box-shadow: 0 0 0 3px rgba(33, 72, 177, 0.18);
}

.forma__vvod.is-invalid,
.forma__vvod[aria-invalid="true"] {
  border-color: var(--trevoga);
}

.forma__oshibka {
  display: block;
  margin-top: 6px;
  color: var(--trevoga);
  font-size: 14px;
}

.forma__oshibka[hidden] {
  display: none;
}

.soglasie {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--tekst-2);
  cursor: pointer;
}

.soglasie__flazhok {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--siniy);
}

.soglasie a {
  color: var(--tekst);
}

/* Строка о политике — под галочкой и вровень с её текстом, но вне <label>:
   политика не часть согласия, и щелчок по строке не должен ставить галочку. */
.soglasie__politika {
  display: block;
  margin: 6px 0 0 32px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tekst-2);
}

.soglasie__politika a {
  color: var(--tekst-2);
}

.forma__knopka {
  width: 100%;
  margin-top: 6px;
}

/* Цена — сразу под кнопкой теста: человек видит, во что обойдётся после семи
   дней, до того как оставит контакт. Мелко и спокойно — это справка, не призыв. */
.forma__cena {
  margin: 10px 0 0;
  color: var(--tekst-2);
  font-size: 14px;
  text-align: center;
  text-wrap: balance;
}

.forma__cena strong {
  color: var(--tekst);
  font-weight: 700;
}

.karta-formy__slovo .forma__cena {
  margin-top: 10px;
  text-align: left;
}

.js-form.is-sending .forma__knopka {
  opacity: 0.7;
  cursor: progress;
}

.js-form.is-done {
  display: none;
}

.uspeh {
  padding: 32px 0;
}

.uspeh[hidden] {
  display: none;
}

.uspeh__znak {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(62, 207, 142, 0.14);
  color: var(--pobeda);
}

.uspeh__znak svg {
  width: 26px;
  height: 26px;
}

.uspeh__zagolovok {
  margin: 18px 0 4px;
  font-size: 24px;
  font-weight: 800;
}

.uspeh__tekst {
  margin: 0;
  color: var(--tekst-2);
}

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

/* Подвал — тёмно-синий, как у портала: на светлой странице это вторая его
   узнаваемая черта. Цвета внутри меняются переопределением токенов, а не
   правкой каждого правила. */
.podval {
  --tekst: #ffffff;
  --tekst-2: rgba(255, 255, 255, 0.74);
  --granica: rgba(255, 255, 255, 0.14);
  --ogon-tekst: #ffb08a;
  padding: 56px 0 40px;
  background: var(--siniy-temnyy);
  color: var(--tekst);
  font-size: 15px;
}

/* Две колонки: о сервисе и документы. Контактов в подвале нет — связь с
   посетителем только через заявку (решение владельца 11.09.2026). */
.podval__setka {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
}

.podval__stroka {
  margin: 12px 0 0;
  max-width: 34ch;
  color: var(--tekst-2);
}

.podval__ssylki {
  display: grid;
  gap: 10px;
  align-content: start;
}

.podval__ssylki a {
  color: var(--tekst-2);
}

.podval__ssylki a:hover {
  color: var(--tekst);
}

.podval__niz {
  margin-top: 40px;
  color: var(--tekst-2);
  font-size: 14px;
}

.podval__niz p {
  margin: 0;
}

/* ---------- Ширины ---------- */

@media (max-width: 960px) {
  :root {
    --ritm: 88px;
  }

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

  .geroy__verh,
  .voprosy__setka,
  .zayavka__karta {
    grid-template-columns: minmax(0, 1fr);
  }

  .zayavka__karta {
    gap: 28px;
  }

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

@media (max-width: 640px) {
  :root {
    --ritm: 72px;
    --polya: 16px;
  }

  .geroy {
    padding-top: 48px;
  }

  .karta-formy {
    padding: 24px 20px;
  }

  .geroy__tekst {
    font-size: 17px;
  }

  .rolik {
    margin-top: 40px;
  }

  .rolik__polosa {
    height: 32px;
  }

  .rolik__adres {
    display: none;
  }

  .zayavka__karta {
    padding-top: 32px;
    padding-bottom: 32px;
  }

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

}

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

/* Выключенное движение: без переходов и плавной прокрутки. Ролик при этом
   сам не стартует — это решает app.js, а без скрипта автозапуска нет вовсе. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}