/* Токены макета Figma (файл iH69kei9n98YzAOIni4Q43, холст «new»).
   Объявлены один раз здесь: перекрашивать сайт правкой значения, а не
   поиском по всем файлам. */
:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F4F5F7;
  --bg-dark:   #1D222A;
  --ink:       #111111;
  --ink-2:     #5B6371;
  --ink-3:     #98A0AC;
  --line:      #DCE0E6;
  --accent:    #EE6321;
  --accent-2:  #C74A18;
  --accent-bg: #FFF4EE;
  --green:     #00AE45;

  --r-card: 20px;
  --r-fld:  12px;
  --r-pill: 999px;

  --shadow: 0 2px 8px rgba(20,18,15,.05), 0 14px 36px -6px rgba(20,18,15,.07);

  /* Колонка контента 1440 px — по макету (кадр 1920, поля по 240).
     Весь сайт живёт в ней, карта тоже: без ограничения ширины карта
     растягивается до 2350 px на мониторе 2560 и выглядит как дыра
     в вёрстке (§8). --side — боковые поля внутри колонки. */
  --wrap: 1680px;
  /* Часть секций макета живёт в колонке 1680 при полях 120 — им нужен
     контейнер во всю ширину кадра. */
  --wrap-wide: 1920px;
  /* Поля тянутся вместе с окном: на 1920 это 120 px как в макете, на
     ноутбуке 1280 — 80, на телефоне 20. Ступенька в медиазапросе давала
     на промежуточных ширинах поля шире содержимого, и правый край уезжал
     за экран. */
  --side: clamp(20px, 6.25vw, 120px);
  --gap:  24px;

  /* Высота липкой шапки. Числом она уже стояла в двух местах — в отступе
     якорей и в расчётах карты, — и одно из них однажды осталось бы старым.
     На телефоне переопределяется в mobile.css. */
  --hdr-h: 82px;

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Manrope — переменный шрифт, лежит у нас. Диапазон весов объявлен целиком:
   если запросить вес вне диапазона, браузер молча зажмёт его к ближайшему,
   и текст выйдет жирнее макета. */
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  /* Кириллица отдельным файлом: браузер скачает только тот диапазон, который
     реально нужен странице. Сайт русский, поэтому эта часть идёт первой. */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

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

/* Переходы по якорям (шапка, квиз, «показать ещё», сброс фильтров) едут
   плавно, а не прыжком. scroll-margin-top под шапку уже стоит на section[id]
   в hero.css — здесь только сама плавность. Гасится вместе со всей остальной
   анимацией ниже по файлу для prefers-reduced-motion. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  /* Горизонтальной прокрутки не должно быть ни на одной ширине — проверка
     из §13, этап 4: 390 px без горизонтальной прокрутки.

     Именно clip, а не hidden: hidden делает body контейнером прокрутки,
     и position: sticky у шапки перестаёт цепляться за окно — шапка просто
     уезжает вверх вместе со страницей. clip обрезает так же, но контейнера
     прокрутки не создаёт. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Поля и кнопки: свои рамки задаются внутренней тенью, поэтому рамку
   браузера снимаем явно. Иначе у кнопки остаётся её рамка по умолчанию —
   чёрная в два пикселя, и на светлой карточке это сразу видно. */
button, input, select, textarea { font: inherit; border: 0; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }

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

/* Скрыто визуально, но доступно программам чтения с экрана. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.h2 { font-size: 40px; }
.h3 { font-size: 24px; }

/* ─── Кнопки ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--r-fld); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); }

/* ─── Поля ────────────────────────────────────────────────────────────── */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld--grow { flex: 1 1 240px; }
.fld__l { font-size: 13px; color: var(--ink-2); }
.fld__c {
  width: 100%; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-fld); background: #fff; font: inherit; font-weight: 600;
  font-size: 16px; color: var(--ink); min-width: 0;
}
.fld__c:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ─── Смена фильтра без перезагрузки ──────────────────────────────────── */
/*
   Кусок, который сейчас перезапрашивается (swap.js ставит data-busy), гаснет
   и перестаёт принимать нажатия. Гасить нужно: без признака ожидания человек
   на медленной сети успевает нажать второе условие поверх первого и видит
   выдачу, которую не заказывал.

   🔴 Гаснет, но НЕ пропадает и не схлопывается. Подмена занимает доли
   секунды, и если убрать содержимое, страница дёрнется вверх, а человек
   потеряет место, где читал. Прозрачность 0.55 — видно, что идёт работа,
   и видно, что было. Движение уважает системную настройку: общее правило
   в конце файла сводит длительность к нулю. */
[data-busy] { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* ─── Планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
}

/* ─── Телефон 390 ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .h2 { font-size: 28px; }
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}