/* ============================================================================
   ОСНОВА ПОСАДОК RENTROP — общее для всех страниц.

   Что здесь есть: шрифт, палитра, сетка, заголовки, кнопки, поля формы,
   служебные вещи (приманка для роботов, скрытие переключателя офферов).

   Чего здесь НЕТ и быть не должно: дизайна блоков. Карточки, панели, графики,
   коллажи собираются под каждую посадку заново по закону 04 «Дизайн».
   Основа даёт одинаковую типографику и палитру, а не одинаковый вид.

   Откуда взяты значения. Спорные места решены 03.09.2026 подсчётом по живой
   посадке `rent-rop.com/upravlenie-prodazhami-nedvizhimost` — той самой, про
   которую Стас сказал «получилась хорошая». Правило: при расхождении источников
   канон тот, что стоит на боевой странице, а не в прототипе.

   Что этим закрыто (в скобках — сколько раз значение встречается на посадке):
     приглушённый текст  #5b6b82 (71), а не #60718a из прототипа
     золото как текст    #c9992f (143), а не #ae7d17 из прототипа
     подвал              #081221, а не #071322 из прототипа
     бумажный фон        #f5f7fb (19) — совпал с прототипом
     золото и синий      #e9c25b, #c9992f, #0b1c38 — совпали везде
     состояния           зелёный #1faa6b на светлом и #4fd487 на тёмном;
                         красный #c75050 на светлом и #e2574c на тёмном
                         (прежние #27c985 и #ee7666 на белом бледнели)
   ========================================================================== */

/* ---------- Шрифт: Manrope своими файлами, кириллица отдельно ------------
   Файлы лежат в rentrop-prod/static/fonts. Русскому посетителю грузится
   14 КБ вместо 38. Google Fonts подключать нельзя: два лишних соединения,
   а в России их серверы бывают медленными или недоступными. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Палитра и размеры ---------------------------------------------- */
:root {
  /* синий — основа бренда */
  --синий: #0b1c38;
  --синий-2: #12294d;
  --синий-3: #183963;
  --синий-светлее: #21466f;
  --синий-глубокий: #07152a;
  --синий-подвал: #081221;

  /* золото — акцент, кнопки, цифры */
  --золото: #e9c25b;
  --золото-верх: #f8e7b7;
  --золото-низ: #c9992f;
  --золото-текст: #c9992f;        /* золото как текст на светлом фоне */
  --на-золоте: #241705;           /* текст на золотой кнопке */

  /* фон и текст на светлом */
  --бумага: #f5f7fb;
  --бумага-2: #f1f4f9;
  --белый: #ffffff;
  --чернила: #0b1c38;
  --приглушённый: #5b6b82;
  --грань: rgba(11, 28, 56, 0.12);

  /* текст и грани на тёмном */
  --текст-на-тёмном: #edf3fa;
  --приглушённый-на-тёмном: #b7c5d7;
  --грань-на-тёмном: rgba(255, 255, 255, 0.12);

  /* состояния: свой оттенок для светлого фона и свой для тёмного,
     иначе на белом зелёный бледнеет и не читается */
  --тревога: #c75050;
  --тревога-на-тёмном: #e2574c;
  --успех: #1faa6b;
  --успех-на-тёмном: #4fd487;

  /* тени: глубокие и мягкие, как на утверждённых эталонах */
  --тень-малая: 0 10px 30px -20px rgba(11, 28, 56, 0.34);
  --тень: 0 30px 70px -38px rgba(11, 28, 56, 0.48);
  --тень-тёмная: 0 50px 110px -44px rgba(2, 9, 20, 0.86), 0 16px 34px -18px rgba(2, 9, 20, 0.62);
  --тень-золота: 0 14px 30px -18px rgba(163, 109, 7, 0.9);

  /* скругления */
  --радиус-карточки: 22px;
  --радиус-панели: 26px;
  --радиус-кнопки: 14px;
  --радиус-поля: 13px;

  /* движение и сетка */
  --плавность: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ширина: 1180px;
  --поле: 20px;
  --шапка: 66px;
}

/* ---------- Сброс и база ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--шапка) + 18px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--бумага);
  color: var(--чернила);
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Раньше здесь стояло `body, button, input, textarea, select`. Из-за `body` вся посадка
   набиралась Times New Roman: `font: inherit` у тела наследует от <html>, то есть берёт
   браузерное по умолчанию, и стирает Manrope, кегль и межстрочное, заданные строчкой выше.
   Нашёл верстальщик на первой же собранной посадке 03.09.2026, померив в браузере.
   Полям и кнопкам наследование нужно — они наследуют от тела и получают Manrope. */
button, input, textarea, select { font: inherit; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button, a { touch-action: manipulation; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
strong, b { font-weight: 800; }

/* Видимый фокус для клавиатуры — золотое кольцо */
:focus-visible { outline: 3px solid rgba(233, 194, 91, 0.7); outline-offset: 3px; }

/* ---------- Сетка ----------------------------------------------------------- */
.контейнер { width: min(var(--ширина), calc(100% - var(--поле) * 2)); margin-inline: auto; }
.секция { position: relative; padding: 82px 0; background: var(--белый); }
.секция--бумага { background: var(--бумага-2); }
.секция--тёмная {
  color: var(--текст-на-тёмном);
  background: radial-gradient(820px 430px at 90% -5%, rgba(233, 194, 91, 0.16), transparent 58%),
    linear-gradient(150deg, #112a4c, var(--синий) 62%, #08162b);
}
.секция--тёмная .приглушённый { color: var(--приглушённый-на-тёмном); }

/* ---------- Типографика ------------------------------------------------------
   Кегли — с прототипа v6. Заголовки плотные, с отрицательным трекингом.
   h1 на странице ровно один. h2 — заголовок каждого блока. */
h1 { font-size: clamp(38px, 4.15vw, 62px); line-height: 1.01; letter-spacing: -0.045em; font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; font-weight: 800; }
.надзаголовок { color: var(--золото-текст); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.секция--тёмная .надзаголовок { color: var(--золото); }
.дескриптор { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #273a55; font-weight: 600; max-width: 760px; }
.секция--тёмная .дескриптор { color: var(--приглушённый-на-тёмном); }
.приглушённый { color: var(--приглушённый); }
.шапка-блока { max-width: 900px; margin-bottom: 34px; }
.шапка-блока > p { max-width: 740px; margin-top: 12px; font-size: 17px; color: var(--приглушённый); }
.секция--тёмная .шапка-блока > p { color: var(--приглушённый-на-тёмном); }
.золото { color: var(--золото); }

/* ---------- Кнопки ------------------------------------------------------------
   Золотая — одно главное действие на экран. Вторая — сдержанная, для «посмотреть». */
.кнопка {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid #b88722;
  border-radius: var(--радиус-кнопки);
  background: linear-gradient(180deg, var(--золото-верх) 0%, var(--золото) 45%, var(--золото-низ) 100%);
  color: var(--на-золоте);
  font-weight: 800; font-size: 16px; text-align: center; white-space: nowrap;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.75), var(--тень-золота);
  transition: transform 0.2s var(--плавность), box-shadow 0.2s var(--плавность);
}
.кнопка:hover { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 18px 34px -16px rgba(163, 109, 7, 0.95); }
.кнопка:active { transform: translateY(0); }
.кнопка:disabled { opacity: 0.65; cursor: wait; transform: none; }
.кнопка--вторая {
  color: var(--синий);
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(11, 28, 56, 0.16);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), var(--тень-малая);
}
.секция--тёмная .кнопка--вторая { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.кнопка--малая { min-height: 44px; padding: 9px 18px; font-size: 14px; }
.кнопка--широкая { width: 100%; }

/* Плашка под кнопкой: короткие куски через разделитель, не список */
.плашка { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #334760; }
.плашка span + span::before { content: '·'; margin-right: 14px; color: var(--золото-низ); }
.секция--тёмная .плашка { color: var(--приглушённый-на-тёмном); }

/* ---------- Форма: имя и телефон, ничего больше ----------------------------- */
.форма { display: grid; gap: 12px; }
.форма--в-строку { grid-template-columns: 1fr 1fr auto; align-items: end; }
.поле { display: grid; gap: 6px; }
.поле > span { font-size: 12px; font-weight: 700; color: #52647c; }
.секция--тёмная .поле > span { color: #d7e0ec; }
.поле input {
  width: 100%; height: 52px; padding: 0 15px;
  border: 1px solid rgba(11, 28, 56, 0.16);
  border-radius: var(--радиус-поля);
  background: #fff; color: var(--чернила);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.поле input::placeholder { color: #96a0b0; }
.поле input:focus { border-color: var(--золото); box-shadow: 0 0 0 3px rgba(233, 194, 91, 0.2); }
.поле input[aria-invalid="true"] { border-color: var(--тревога); box-shadow: 0 0 0 3px rgba(238, 118, 102, 0.14); }
.секция--тёмная .поле input { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.секция--тёмная .поле input::placeholder { color: #96a8bd; }
.согласие { display: block; margin-top: 8px; font-size: 11px; line-height: 1.4; color: #7a8aa0; }
.согласие a { text-decoration: underline; }
.секция--тёмная .согласие { color: #9fb0c7; }

/* Приманка для роботов: поле есть в разметке, человек его не видит и не заполнит.
   Проверяется в lead.js по имени company-site. */
.приманка { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- Служебное: переключатель офферов ---------------------------------
   Посетителю не показывается никогда. Виден только с ?preview=1 — для показа
   Стасу пяти первых экранов на одной странице. Правило Стаса: «не должно быть
   видно никакого переключателя для посетителя». */
[data-переключатель-офферов] { display: none; gap: 8px; margin-bottom: 12px; }
html[data-предпросмотр] [data-переключатель-офферов] { display: flex; }
[data-переключатель-офферов] a {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid var(--грань); border-radius: 8px; font-size: 12px; font-weight: 800;
}
[data-переключатель-офферов] a.активен { background: var(--золото); border-color: var(--золото-низ); color: var(--на-золоте); }

/* ---------- Подвал ---------------------------------------------------------- */
.подвал { padding: 34px 0; color: #c8d3e1; background: var(--синий-подвал); font-size: 13px; }
.подвал a:hover { color: var(--золото); }
.подвал-ссылки { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 16px; }
.подвал-реквизиты { color: #91a4bc; font-size: 12px; line-height: 1.6; }

/* ---------- Прочее ------------------------------------------------------------ */
.скрыто { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ссылка-пропуска { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--золото); color: var(--на-золоте); padding: 12px 18px; border-radius: 10px; font-weight: 800; }
.ссылка-пропуска:focus { top: 12px; }

/* ---------- Адаптив: планшет и телефон ---------------------------------------
   Точки — с прототипа v6. Телефон — обязательная версия, не дополнение:
   большая часть трафика РСЯ и таргета приходит с телефонов. */
@media (max-width: 1080px) {
  .форма--в-строку { grid-template-columns: 1fr 1fr; }
  .форма--в-строку .кнопка { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --шапка: 58px; --поле: 14px; }
  .секция { padding: 54px 0; }
  .шапка-блока { margin-bottom: 24px; }
  h1 { font-size: clamp(31px, 9.2vw, 39px); line-height: 1.02; }
  h2 { font-size: clamp(30px, 9vw, 40px); }
  .дескриптор { font-size: 15px; }
  .шапка-блока > p { font-size: 14px; }
  .кнопка { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 15px; white-space: normal; }
  .форма--в-строку { grid-template-columns: 1fr; }
  .плашка { font-size: 12px; }
}
@media (max-width: 430px) and (max-height: 780px) {
  h1 { font-size: 30px; }
}

/* Кто попросил меньше движения — тому без движения */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .кнопка { transition: none !important; }
  .кнопка:hover { transform: none; }
}