/* =========================================================
   Лендинг «Кредитная линия + сертификат Ozon»
   Цвета и размеры — в переменных ниже, менять удобно тут.
   ========================================================= */
:root {
  /* Браузеры на телефонах умеют сами перекрашивать сайты в тёмную тему
     (Auto Dark Theme в Chrome, «тёмная тема для сайтов» в Яндексе и
     Samsung Internet). Отключаются они не запретом, а обратным сигналом:
     «у страницы есть свой тёмный режим, не лезьте». Поэтому объявляем
     обе темы, а ниже, в блоке prefers-color-scheme: dark, закрепляем
     ровно те же фирменные цвета — внешне страница не меняется. */
  color-scheme: light dark;
  /* Все цвета ниже — коды из фирменного UI Kit, справа подписано, что это
     за позиция в палитре. Своих оттенков на странице нет. */
  --green: #005C32;        /* базовый зелёный */
  --green-hover: #002E19;  /* тёмно-зелёный 700 */
  --green-tint: rgba(0, 92, 50, .12); /* базовый зелёный, 12 % — для подложек */
  --red: #C9150D;          /* базовый красный */
  --red-hover: #8D0F09;    /* тёмно-красный 700 */    /* зелёный 300 — текст на тёмно-зелёном */
  --mint: #E6EFEB;         /* зелёный 100 */
  --page: #F7F7F7;         /* серый 100 */
  --white: #FFFFFF;        /* белый */
  --pill: #F0F3F7;         /* серый 300 */
  --text: #262726;         /* чёрный */
  --title: #262726;        /* чёрный */
  --muted: #565759;        /* серый 800 */
  --line: #C8C8C8;         /* серый 500 */
  --shadow: 0 0 20px rgba(0, 0, 0, .1);
  --container: 1380px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Основной текст. Заголовки переопределены ниже на Raleway. */
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--page);
  /* clip, а не hidden: hidden ломает прилипание шапки */
  overflow-x: clip;
  font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
/* отступ под прилипшую шапку, чтобы якоря не уезжали под неё */
section[id] { scroll-margin-top: 120px; }

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

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  /* Тут сознательное исключение из правила «Lato для всего, кроме
     заголовков». У Lato нет промежуточных начертаний — только 400 и 700:
     на 400 надпись выглядит бледной, на 700 — тяжёлой. Нужное «чуть
     жирнее» даёт Raleway 600, он уже подключён под заголовки. */
  font: 600 16px/1 "Raleway", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  /* Все три свойства разом: у кнопки с обводкой при наведении меняется
     ещё рамка и цвет текста, и без них они щёлкали мгновенно, пока фон
     плавно заливался — со стороны это читалось как рывок. */
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-hover); }
.btn--red { background: var(--red); color: #fff; font-weight: 600; }
.btn--red:hover { background: var(--red-hover); }
.btn--outline { background: var(--white); color: var(--text); border: 1px solid var(--line); }
/* При наведении кнопка заливается базовым зелёным, текст и иконка белеют.
   Иконка тянет цвет через currentColor, отдельного правила ей не нужно. */
.btn--outline:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 54px; min-width: 358px; font-size: 18px; font-weight: 700; }
.btn--wide { min-width: 290px; }
.btn svg { flex: none; }
.cta-row { margin-top: 48px; text-align: center; }
/* дубль кнопки под вопросами — включается только на телефоне */
.cta-row--mob { display: none; }

/* ---------- Шапка ---------- */
/* Шапка прилипает к верху при прокрутке */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  box-shadow: var(--shadow);
}
.header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Строка навигации убрана, поэтому единственный ряд шапки сделан выше —
     иначе шапка выглядела бы приплюснутой. */
  height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--title);
  text-decoration: none;
}
.logo__img { display: block; height: 38px; width: auto; }
.footer .logo__img { height: 34px; }
.header__actions { display: flex; align-items: center; gap: 10px; }
.header__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--pill);
  /* 15px, а не 14: на образце высота цифр 11 px, столько даёт Lato ровно
     на этом кегле. Подпись и номера там одного размера. */
  font-size: 15px;
  color: var(--muted);
}
.header__pill b { color: var(--green); font-weight: 700; }
/* Плашка с телефонами — она же кнопка «Перезвонить». При наведении
   содержимое гаснет, фон становится базовым зелёным, а поверх проявляется
   надпись. Размеры плашки не меняются, поэтому шапка не дёргается. */
.header__phones { position: relative; gap: 10px; padding: 0 16px; transition: background-color .2s; }
.header__phones > :not(.header__callback) { transition: opacity .15s; }
.header__phones:hover { background: var(--green); }
.header__phones:hover > :not(.header__callback) { opacity: 0; }
.header__callback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: inherit;
  color: var(--white);
  /* та же пара, что у обычных кнопок */
  font-family: "Raleway", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  /* visibility, а не только opacity: пока кнопка скрыта, по ней нельзя
     случайно нажать вместо номера телефона */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, visibility .18s;
}
.header__phones:hover .header__callback { opacity: 1; visibility: visible; }
/* Подпись мельче номеров и светлее: цвет — тот же серый 800 из палитры,
   но приглушённый прозрачностью, чтобы не вводить новый оттенок. */
.header__phones-label {
  color: var(--muted);
  opacity: .58;
  font-size: 14px;
  font-weight: 400;
}
/* На образце номера набраны базовым зелёным, а не почти чёрным. */
.header__phone { color: var(--green); font-weight: 700; text-decoration: none; white-space: nowrap; }
.header__phone:hover { color: var(--green-hover); }
.header__sep { color: var(--line); }

/* ---------- Мятные блоки ---------- */
.mint { background: var(--mint); }

/* У button/input/select браузер ставит свой системный шрифт: от body они
   его не наследуют. Без этой строки бургер-меню и поля выпали бы из Lato. */
button, input, select, textarea { font: inherit; }
.mint--round { border-radius: 0 0 115px 115px; }

/* ЗАГОЛОВКИ — Raleway. Сюда входят все h1–h3 страницы и те подписи,
   которые оформлены как заголовки, но свёрстаны другими тегами:
   логотип, названия карточек и вопросы в блоке «Вопросы и ответы».
   Остальной текст наследует Lato от body. */
h1, h2, h3, h4, h5, h6,
.faq__item summary {
  font-family: "Raleway", Arial, sans-serif;
}

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
}
.hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 70%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.hero__title {
  font-size: clamp(42px, 6.25vw, 90px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text);
}
/* Заголовок-оффер: текста больше, поэтому кегль меньше */
/* Заголовок-оффер: текста больше, поэтому кегль меньше */
.hero__title--offer { font-size: clamp(34px, 5.25vw, 77px); letter-spacing: -1.6px; line-height: 1.05; }
/* «Дарим сертификат» — единый кусок, рвать его нельзя */
.ttl__pair { white-space: nowrap; }
/* Зелёная строка под оффером */
.hero__content .btn { margin-top: 34px; }
/* Срок акции — отдельной строкой над рекламной маркировкой.
   Кегль крупнее, чем у маркировки: это условие акции, его читают. */
.hero__term { margin-top: 28px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.hero__legal {
  /* Три части — всегда друг под другом: в строку они читаются как
     сплошная серая полоса, а на узком экране ещё и рвутся посреди фразы.
     align-items, чтобы ссылка не растягивалась на всю ширину. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-transform: none;
}
.hero__legal a { color: var(--muted); text-decoration: none; }
.hero__legal a:hover { text-decoration: underline; }
/* Реквизиты рекламы не выделяются мышью — их незачем копировать */
.hero__legal-mark {
  -webkit-user-select: none;
  user-select: none;
}
/* Части строки разделены отступом, а не точкой */
.hero__legal-part { margin-left: 0; }
.hero__art { position: relative; }
.hero__svg { width: 100%; height: auto; overflow: visible; animation: float 6s ease-in-out infinite; will-change: transform; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Стрелка вниз под первым экраном. На телефоне не нужна: следующий
   блок там и так начинается сразу за кнопкой. */
.scroll-down {
  /* В потоке, а не absolute: первый экран на этой странице со статичным
     позиционированием — зелёную подложку он отдаёт под опору блоку main,
     и абсолютная стрелка улетела бы в самый низ страницы. */
  position: relative;
  z-index: 2;
  display: none;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: color .2s;
  animation: scrollHint 2.2s ease-in-out infinite;
}
.scroll-down:hover { color: #fff; }
.scroll-down svg { display: block; }
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ---------- Список с галочками ---------- */
.checklist li {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.checklist li + li { margin-top: 14px; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23005C32' stroke-width='1.6'/%3E%3Cpath d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='%23005C32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Строка списка не тянется на всю колонку: длинные пункты переносятся
   раньше, поэтому текст не подходит вплотную к картинке. */
/* Единственное место, где задаются размеры списка на первом экране.
   Раньше ниже по файлу лежал такой же набор правил — он перебивал этот,
   и правки кегля не срабатывали. */
.checklist--hero { margin-top: 26px; max-width: 665px; }
/* 400, а не 600: у Lato нет промежуточных начертаний — 600 браузер
   округлял до 700, и пункты выглядели тяжелее заголовка. */
.checklist--hero li { padding-left: 40px; font-size: 20px; font-weight: 400; }
.checklist--hero li::before { width: 24px; height: 24px; top: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23005C32'/%3E%3Cpath d='M7.3 12.3l3.1 3.1 6.3-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- Общее для секций ---------- */
.section { padding: 88px 0; }
.section-title {
  font-size: clamp(30px, 3.35vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--text);
}
.card {
  position: relative;
  padding: 30px;
  border-radius: 20px;
  background: var(--white);
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--green-tint);
  color: var(--green);
  font-size: 16px;
  font-weight: 500;
}

/* ---------- Преимущества: плитки с иконками ---------- */
.features { padding: 40px 0 88px; }
.tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.tile { text-align: center; }
.tile__icon {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--white);
  transition: transform .25s;
}
.tile:hover .tile__icon { transform: translateY(-6px); }
.tile__icon svg { width: 64px; height: 64px; }
.tile__text { margin-top: 20px; font-size: 17px; font-weight: 400; line-height: 1.35; }

/* ---------- 4 шага ---------- */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.step {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  overflow: hidden;
}
/* Декоративные линейки убраны: их место заняла картинка шага. */
.step__art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  margin: 10px 0 14px;
}
.step__art svg { width: 100%; max-width: 148px; height: auto; }
/* готовые рендеры: один холст 440x330 на все четыре, поэтому размер общий */
.step__art--img img { width: 100%; max-width: 224px; height: auto; }
.step .tag { align-self: flex-start; }
.step__title { margin-top: 20px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--title); }
.step__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}

/* ---------- Вопросы и ответы ---------- */
/* снизу у блока стояло общее поле секции в 88px — под припиской оно
   смотрелось больше, чем над ней, поэтому равняем на её же отступ */
.faq { padding-top: 0; padding-bottom: 28px; }
/* приписка под списком вопросов */
.faq__note { margin: 28px auto 0; max-width: 640px; text-align: center;
  font-size: 16px; line-height: 1.5; color: var(--muted); }
.faq__note a { color: var(--green); font-weight: 700; text-decoration: none;
  text-underline-offset: 2px; cursor: pointer; }
.faq__note a:hover { text-decoration: underline; }
.faq__list { max-width: 1280px; margin: 44px auto 0; }
.faq__item {
  border-radius: 12px;
  background: var(--white);
}
.faq__item + .faq__item { margin-top: 12px; }
.faq__item summary {
  position: relative;
  padding: 20px 56px 20px 22px;
  font-size: 18px;
  font-weight: 500;
  color: var(--title);
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
  /* Только transform: он считается на видеокарте. Раньше вместе с
     поворотом ехал margin-top, а это пересчёт вёрстки в каждом кадре —
     на слабой машине стрелка из-за этого подрагивала. Те же 5 px
     вниз теперь даёт translateY. */
  transition: transform .25s;
}
.faq__item[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq__item p { padding: 0 56px 22px 22px; font-size: 16px; color: var(--muted); }

/* ---------- Подвал ---------- */
.footer { padding: 44px 0 36px; background: var(--white); }
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.footer__legal { display: grid; gap: 12px; padding-top: 24px; font-size: 12px; line-height: 1.6; color: var(--muted); }
/* почта и телефон в реквизитах не должны выбиваться из серого текста */
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__copy { margin-top: 18px; font-size: 12px; color: var(--muted); }

/* ---------- Кнопка «наверх» и нижняя кнопка на телефоне ---------- */
.to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--green);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  /* Пять плиток в три столбца оставляют дыру в последнем ряду, поэтому
     здесь не сетка, а гибкая раскладка: две последние встают по центру,
     пустого места справа не остаётся. */
  .tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 40px;
  }
  .tile { flex: 0 1 calc(33.333% - 16px); }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { min-height: 280px; }
  .mint--round { border-radius: 0 0 60px 60px; }
}

@media (max-width: 900px) {
  
  .header__actions .btn--outline { display: none; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 520px; width: 100%; }
  .hero__content .btn--lg { min-width: 0; width: 100%; }
}

/* Ниже 660 px строка «Дарим сертификат» перестаёт помещаться целиком.
   Тут обёртка перестаёт быть отдельным элементом (display: contents),
   а каждое слово становится блоком — получается ровно три строки,
   по слову в каждой. */
@media (max-width: 660px) {
  .ttl__pair { display: contents; }
  .ttl__w { display: block; }
}

@media (max-width: 600px) {
  /* «Получить сертификат» — самая длинная надпись на странице, и она
     набрана в одну строку (nowrap). На узком экране ей переставало
     хватать места, поэтому здесь кегль тянется за шириной экрана,
     а поля кнопки уже: 18px сохраняются с 322px и шире. */
  .btn--lg { font-size: min(18px, 5.6vw); }
  .hero__content .btn--lg { padding: 0 14px; }

  .section { padding: 60px 0; }
  /* Рядом с логотипом кнопка ужимает его, поэтому в подвале её
     прячем, а показываем ту, что стоит под вопросами. Поле снизу
     равняем на отступ .cta-row, иначе под кнопкой пусто больше,
     чем над ней. */
  .footer__cta { display: none; }
  .cta-row--mob { display: block; }
  .faq { padding-bottom: 48px; }
  .features { padding: 8px 0 60px; }
  .tiles { gap: 28px 12px; margin-top: 32px; }
  .tile__icon { width: 96px; height: 96px; }
  .tile__icon svg { width: 50px; height: 50px; }
  .tile__text { font-size: 15px; }
  .steps__grid{ margin-top: 32px; }
  .steps__grid { grid-template-columns: 1fr; }
  .step { min-height: 0; gap: 0; }
  .step__art { min-height: 96px; }
  .step__meta { margin-top: 20px; }
  .card{ padding: 24px 20px; }
  .faq__item summary { padding: 18px 48px 18px 18px; font-size: 16px; }
  .faq__item p { padding: 0 18px 18px; font-size: 15px; }
  .cta-row .btn, .btn--wide { width: 100%; min-width: 0; }
  .header__actions .btn--green { display: none; }
  .to-top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-down { animation: none; }
  html { scroll-behavior: auto; }
  .hero__svg { animation: none; }
}

.btn--icon { width: 36px; padding: 0; }
.header__mob { display: none; }
/* ---------- Шарики по бокам карточки ---------- */
.hero__grid { z-index: 1; }
.hero__svg { position: relative; z-index: 2; }
/* считаем размеры украшений от ширины самой картинки, а не экрана */
.hero__art { container-type: inline-size; }
.balloon {
  position: absolute;
  z-index: 1;
  width: 88px;
  width: 15cqw;
  height: auto;
  pointer-events: none;
  animation: balloonFloat 7s ease-in-out infinite;
}
/* Опущен ниже: на широких экранах шарик вылезал влево и наезжал на
   последнюю строку заголовка. */
.balloon--left { left: -4%; top: 26%; }
/* белый шарик идёт поверх карточки */
.balloon--right { right: -5%; top: 32%; z-index: 3; width: 150px; width: 25cqw; animation-duration: 8.6s; animation-delay: -2.5s; }
@keyframes balloonFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

/* ---------- Подарочная коробка ---------- */
.gift {
  position: absolute;
  right: 3%;
  bottom: 5%;
  z-index: 3;
  width: 165px;
  width: 27cqw;
  height: auto;
  pointer-events: none;
  animation: giftRock 6.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes giftRock {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50% { transform: rotate(2.5deg) translateY(-6px); }
}

/* ---------- Салют вокруг карточки ---------- */
.fireworks,
.fw-glow {
  position: absolute;
  left: -18%;
  top: -44%;
  /* размер задаём явно: canvas — заменяемый элемент и от inset не растягивается.
     Слой шире самой картинки: маска гасит его к краям, и чем он больше,
     тем дальше кромка от карточки. */
  width: 136%;
  height: 190%;
  z-index: 0;
  pointer-events: none;
  /* Растворяем края холста. Центр пятна смещён вверх (46% высоты),
     поэтому вертикальный радиус тоже 46%: иначе у верхней кромки маска
     гасила свет лишь до 13%, и при вспышке была видна ровная линия. */
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 46%, #000 32%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 50% 46% at 50% 46%, #000 32%, rgba(0, 0, 0, 0) 100%);
}
/* блики поверх карточки */
.fw-glow {
  z-index: 4;
  /* на светлом фоне «перекрытие» подсвечивает карточку, не выбеливая фон */
  mix-blend-mode: overlay;
}

/* =========================================================
   Светлая версия с затенением за карточкой (класс page-dusk).
   Тёмное пятно под картинкой нужно, чтобы искры салюта светились:
   на светлом фоне складывать свет не с чем.
   ========================================================= */
/* Зелёная подложка первого экрана */
.green-pane {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: 47%;
  overflow: hidden;
  border-radius: 0 0 46px 46px;
  /* Базовый зелёный из UI Kit, ровной заливкой. */
  background: #005C32;
  pointer-events: none;
}
/* Салют внутри подложки. По горизонтали его ставит скрипт —
   ровно над карточкой, чтобы не лез под текст. */
.green-pane .fireworks {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* по умолчанию салют поверх облаков; изредка скрипт уводит его за них */
  z-index: 3;
  /* Низ окна растворяем, слева обрезаем по колонке с текстом (границу
     --fw-cut ставит скрипт). Верх не трогаем: искры там и так уходят
     под шапку, а мягкий край давал поперёк подложки видимую полосу. */
  --fw-cut: 0px;
  --fw-cut-end: 0px;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) var(--fw-cut), #000 var(--fw-cut-end), #000 100%);
  mask-image:
    linear-gradient(to bottom, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) var(--fw-cut), #000 var(--fw-cut-end), #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Пролёт через подложку. Длительность приходит из скрипта через переменную --fly,
   чтобы не перебивать вторую анимацию — мигание. */

/* ---------- Осенние листья ----------
   Лист летит по диагонали вниз, а картинка внутри него покачивается.
   Две анимации на разных элементах вместо одной сложной: обе двигают
   только transform, поэтому их считает видеокарта и это почти
   ничего не стоит даже на телефоне. */
.leaf {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  animation: leafFall linear infinite;
}
.leaf svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 45%;
  animation: leafSpin linear infinite;
}
/* Падение не по прямой: лист виляет из стороны в сторону, как настоящий. */
/* Ключевых кадров много намеренно. Раньше их было пять с ease-in-out на
   каждом участке — такое смягчение гасит скорость до нуля в каждой точке
   поворота, и лист на мгновение замирал на месте. Теперь смягчения нет,
   ход равномерный (linear), а плавность даёт частая сетка кадров: по
   вертикали лист идёт с постоянной скоростью, по горизонтали проходит
   полторы волны качания. */
@keyframes leafFall {
  0% { transform: translate3d(0, -90px, 0); }
  10% { transform: translate3d(calc(var(--dx, 140px) * 0.36), calc(var(--dy, 900px) * 0.1 - 81px), 0); }
  20% { transform: translate3d(calc(var(--dx, 140px) * 0.50), calc(var(--dy, 900px) * 0.2 - 72px), 0); }
  30% { transform: translate3d(calc(var(--dx, 140px) * 0.40), calc(var(--dy, 900px) * 0.3 - 63px), 0); }
  40% { transform: translate3d(calc(var(--dx, 140px) * 0.21), calc(var(--dy, 900px) * 0.4 - 54px), 0); }
  50% { transform: translate3d(calc(var(--dx, 140px) * 0.18), calc(var(--dy, 900px) * 0.5 - 45px), 0); }
  60% { transform: translate3d(calc(var(--dx, 140px) * 0.41), calc(var(--dy, 900px) * 0.6 - 36px), 0); }
  70% { transform: translate3d(calc(var(--dx, 140px) * 0.80), calc(var(--dy, 900px) * 0.7 - 27px), 0); }
  80% { transform: translate3d(calc(var(--dx, 140px) * 1.10), calc(var(--dy, 900px) * 0.8 - 18px), 0); }
  90% { transform: translate3d(calc(var(--dx, 140px) * 1.16), calc(var(--dy, 900px) * 0.9 - 9px), 0); }
  100% { transform: translate3d(var(--dx, 140px), var(--dy, 900px), 0); }
}
/* Кувырок так же: вращение в плоскости идёт равномерно, наклон качается
   в пределах ±26° — ребром лист не встаёт и нигде не останавливается. */
@keyframes leafSpin {
  0% { transform: rotate(0deg) rotate3d(1, 0.35, 0, 0deg); }
  12.5% { transform: rotate(45deg) rotate3d(1, 0.35, 0, 18deg); }
  25% { transform: rotate(90deg) rotate3d(1, 0.35, 0, 26deg); }
  37.5% { transform: rotate(135deg) rotate3d(1, 0.35, 0, 18deg); }
  50% { transform: rotate(180deg) rotate3d(1, 0.35, 0, 0deg); }
  62.5% { transform: rotate(225deg) rotate3d(1, 0.35, 0, -18deg); }
  75% { transform: rotate(270deg) rotate3d(1, 0.35, 0, -26deg); }
  87.5% { transform: rotate(315deg) rotate3d(1, 0.35, 0, -18deg); }
  100% { transform: rotate(360deg) rotate3d(1, 0.35, 0, 0deg); }
}


/* ---------- Светлый первый экран ----------
body:not(.page-green-hero) .green-pane {
  background: none;
  border-radius: 0;
  overflow: visible;
}
/* маску холста в светлом режиме задаёт общее правило .fireworks */
body:not(.page-green-hero) .green-pane .fireworks {
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 46%, #000 32%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 50% 46% at 50% 46%, #000 32%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  z-index: 0;
}
/* Отрицательная задержка сдвигает анимацию «в прошлое»: при открытии
   страницы облака уже расставлены по всему небу, в том числе над салютом. */
/* размеры, высоту, скорость и плотность каждому клубу задаёт скрипт */

/* Горит ровным красным, а поверх — короткие белая и синяя вспышки,
   как проблесковые огни на борту. */
/* Точка ровно горит белым, а поверх быстрой очередью проскакивают вспышки:
   яркая белая, синяя, красная и зелёная. Цикл 1 с, каждая по 40 мс. */

/* Подложка тянется на первый экран и блок «Что даёт кредитная линия».
   Для этого она считает своей опорой main, а секции становятся
   прозрачными — фон им даёт подложка. */
main { position: relative; }
.page-green-hero .hero,
.page-green-hero .features { position: static; background: transparent; }
.page-green-hero .hero__grid,
.page-green-hero .features > .container { position: relative; z-index: 1; }

/* текст на зелёном во втором блоке */
.page-green-hero .features .section-title { color: #fff; }
.page-green-hero .tile__text { color: var(--mint); }
.page-green-hero .hero__term { color: rgba(255, 255, 255, .72); }
.page-green-hero .hero__legal,
.page-green-hero .hero__legal a { color: rgba(255, 255, 255, .45); }

/* На зелёном белая подсветка из светлой версии выглядит как дымка — убираем */
.page-green-hero .hero::before { display: none; }
/* Плоские кружки из светлой версии на зелёном читаются серыми пятнами:
   зелёные круги и кольца гасим, оставляем только тёплые точки-конфетти. */
.page-green-hero .hero__svg > g:first-of-type { opacity: .9; }

/* запас между зелёной строкой и краем блока, чтобы он не резал текст */
.page-green-hero .checklist--hero { margin-top: 46px; }
/* В светлой версии кружок галочки залит базовым зелёным — на зелёном
   экране он сливался с фоном, оставалась одна галочка. Здесь кружок
   белым контуром, галочка тоже белая. */
.page-green-hero .checklist--hero li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23fff' stroke-width='1.7'/%3E%3Cpath d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* цвет пунктов списка расставляет скрипт: что попало на тёмное — светлым */
/* карточка опущена ниже — над ней остаётся больше места для салюта */
.page-green-hero .hero__art { margin-top: 40px; }

/* Текст на зелёном экране — белый, без тени и обводки: белое на
   #005C32 читается и так, а тень давала вокруг букв грязный ореол. */
.page-green-hero .hero__title {
  color: #fff;
}
.page-green-hero .fw-glow { mix-blend-mode: screen; }

@media (max-width: 900px) {
  .balloon--left { left: 0; top: -1%; }
  .balloon--right { right: 0; top: 40%; }
  .gift { right: 2%; bottom: 4%; }
}
@media (max-width: 600px) {
  /* на телефоне украшения делаем чуть скромнее, иначе лезут на карточку */
  .balloon { width: 12cqw; }
  .balloon--left { left: 1%; top: -2%; }
  /* белый шарик покрупнее и чуть выше — чтобы не прятался за коробку */
  .balloon--right { right: 1%; top: 38%; width: 22cqw; }
  /* коробка покрупнее и чуть заходит на угол карточки */
  .gift { right: 3%; bottom: 7%; width: 25cqw; }

  /* заголовок выше, отступы плотнее */
  .page-green-hero .hero { padding-top: 22px; }
  .page-green-hero .hero__grid { gap: 16px; }
  .page-green-hero .hero__art { margin-top: 2px; }
}

/* Воздух между шапкой и заголовком. Только на широком экране —
   на телефоне свои, более плотные отступы в медиазапросах ниже. */
@media (min-width: 901px) {
  /* Первый экран занимает окно целиком, поэтому заголовок следующего
     блока уходит под сгиб — показывать его наполовину некрасиво. Вниз
     ведёт стрелка. 68px — высота шапки, она прилипает к верху. */
  .page-green-hero .hero {
    padding-top: 88px;
    padding-bottom: 28px;
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
  }
  .page-green-hero .hero__grid { width: 100%; }
  .scroll-down { display: block; }
}

/* Совсем узкие экраны: заголовок мельче и выше, отступы плотнее */
@media (max-width: 480px) {
  .hero__title--offer { letter-spacing: -.6px; }
  .page-green-hero .hero { padding-top: 14px; }
  .page-green-hero .hero__grid { gap: 14px; }
  .page-green-hero .hero__art { margin-top: 0; }
}

@media (max-width: 900px) {
  /* поля по краям экрана вдвое шире */
  :root { --gutter: clamp(20px, 4vw, 32px); }
  /* Планшет и телефон: сетка в два столбца и четыре плитки. В три
     столбца пятая висела бы одна в ряду, в два — сетка ровная 2×2. */
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { flex: none; }
  .tile--pc { display: none; }
  /* Плашка с телефонами прячется только здесь: ниже 900 в шапке
     включается мобильный набор — кнопка-трубка и «Вход». Выше она
     помещается целиком, считал по ширинам: логотип 143 + плашка 469
     + кнопка входа 223 + зазоры 32 = 867 при контейнере 985. */
  .header__pill { display: none; }
  .header__pc { display: none; }
  .header__actions { gap: 8px; }
  .header__actions .btn--green.header__mob { display: inline-flex; }
  .hero { padding: 14px 0 44px; }
  .hero__grid { gap: 26px; }
  .hero__art { margin: -16px auto 0; }
  /* Кегль тянем почти до края колонки: «Дарим сертификат» должно
     остаться одной строкой, поэтому 9vw и потолок 62px. */
  /* На телефоне заголовок крупный и ложится в три строки: «Дарим /
     сертификат / OZON». Предел держит самое длинное слово —
     «сертификат», оно занимает 5,93 px ширины на каждый пункт кегля. */
  .hero__title--offer { font-size: clamp(34px, 13vw, 62px); }
  /* на телефоне подложка закрывает ровно картинку, текст ниже — тёмный.
     Высота считается от ширины экрана: картинка занимает её целиком. */
  .green-pane { height: calc(min(83vw, 440px) + 26px); border-radius: 0 0 26px 26px; }
  /* На узком экране заголовок уходит наверх, внутрь подложки,
     а карточка опускается под него. Для этого дети .hero__content
     становятся ячейками сетки и выстраиваются в нужном порядке. */
  .page-green-hero .hero { padding-top: 54px; }
  .page-green-hero .hero__grid { gap: 20px; }
  .page-green-hero .hero__content { display: contents; }
  .page-green-hero .hero__title { order: 1; color: #fff; text-align: center; }
  .page-green-hero .hero__art { order: 2; margin: 6px auto 0; }
  /* кнопка — сразу под карточкой, срок акции при ней; пояснения ниже */
  /* на телефоне кнопка чуть отступает от карточки */
  .page-green-hero .hero__content .btn { order: 3; margin-top: 18px; }
  .page-green-hero .checklist--hero { order: 6; margin-top: 0; }
  /* С этой ширины первый экран идёт одной колонкой и заголовок стоит
     по центру — срок акции и маркировку равняем так же. */
  .hero__term { text-align: center; }
  .hero__legal { align-items: center; text-align: center; }
  .page-green-hero .hero__term { order: 7; margin-top: 10px; }
  .page-green-hero .hero__legal { order: 8; margin-top: 6px; }
}

@media (max-width: 600px) {
  .header__actions .btn--green.header__mob { display: inline-flex; }
  .checklist--hero li { font-size: 15px; }
}

/* =========================================================
   ТЁМНАЯ СИСТЕМНАЯ ТЕМА
   Собственного тёмного оформления у лендинга нет: первый экран и так
   тёмно-зелёный, остальное — светлое по макету. Этот блок нужен для
   другого: он показывает браузеру, что страница свой тёмный режим уже
   обрабатывает. Без него Chrome, Яндекс и Samsung Internet включают
   алгоритм авто-затемнения и перекрашивают светлые секции в серый
   #212121 — вместе с текстом, который на нём пропадает.
   Значения здесь — те же переменные, что и в светлой теме.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  /* Переопределять нечего: цвета лендинга одинаковы при любой системной
     теме. Повторяем те же значения, что и в светлой, — важно само
     наличие правила, по нему браузер понимает, что тёмную тему страница
     разбирает сама. */
  body {
    background: var(--page);
    color: var(--text);
  }
}

/* =========================================================
   ОБРАТНЫЙ ЗВОНОК
   Окно повторяет попап с dobrozaim.ru. Цвета — из палитры UI Kit.
   ========================================================= */
.cb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
  overflow-y: auto;
}
.cb[hidden] { display: none; }
.cb__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 40px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.cb__dialog--msg { max-width: 460px; text-align: center; }
.cb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
/* крестик рисуем двумя линиями, отдельной картинки не нужно */
.cb__close::before,
.cb__close::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 15px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--muted);
}
.cb__close::before { transform: rotate(45deg); }
.cb__close::after { transform: rotate(-45deg); }
.cb__close:hover::before,
.cb__close:hover::after { background: var(--text); }

.cb__title {
  margin: 0 0 26px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--title);
}
.cb__row { margin-bottom: 18px; }
.cb__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}
.cb__label--req::after { content: "*"; color: var(--red); }
.cb__input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 16px;
  color: var(--text);
}
.cb__input::placeholder { color: #A9ACAE; }
.cb__input:focus { outline: none; border-color: var(--green); }
.cb__input._error { border-color: var(--red); }

.cb__agree { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
/* Ошибка согласия — отдельной строкой под галочкой. Без этого она
   вставала третьей колонкой справа от текста и ужимала его в столбик. */
.cb__agree .cb__err { flex: 1 1 100%; margin-top: 2px; }
.cb__check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.cb__check.is-on {
  border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px;
}
.cb__check._error { border-color: var(--red); }
/* flex: 1 — чтобы подпись ужималась и оставалась рядом с галочкой.
   Без этого при переносе строк она целиком уезжала под неё. */
.cb__agree-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--text); cursor: pointer; }
.cb__agree-text a { color: var(--text); }

.cb__note {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}
/* Первый абзац отделяем от второго — слитно они читались одним куском */
.cb__note-ask { display: block; margin-bottom: 12px; }
.cb__note-ok {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--green);
}

.cb__captcha { display: flex; align-items: center; gap: 20px; }
.cb__captcha-img {
  flex: none;
  width: 140px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
}
.cb__captcha-input { flex: 1; }
/* в проекте есть общее правило img { display: block }, оно перебивает
   атрибут hidden — возвращаем ему силу */
.cb__captcha-img[hidden] { display: none; }
/* ошибка под капчей встаёт своей строкой, а не третьей колонкой */
.cb__captcha .cb__err { flex: 1 1 100%; margin-top: 0; }

.cb__submit-row { margin-top: 26px; text-align: center; }
.cb__submit { min-width: 200px; }
.cb__submit.is-load { opacity: .6; pointer-events: none; }

/* сообщение об ошибке под полем */
.cb__err {
  margin-top: 6px;
  font-size: 13px;
  color: var(--red);
}
.cb__done-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text); }

@media (max-width: 600px) {
  .cb__dialog { padding: 28px 20px 24px; }
  .cb__title { font-size: 20px; margin-bottom: 20px; }
  .cb__captcha { flex-wrap: wrap; gap: 12px; }
  .cb__captcha-input { flex: 1 1 100%; }
}

/* Окно согласия открывается поверх «Обратного звонка» */
.cb--top { z-index: 110; }
.cb__dialog--notice {
  max-width: 620px;
  max-height: 86vh;
  padding: 34px 16px 28px 34px;
  display: flex;
  flex-direction: column;
}
.cb__notice-title {
  margin: 0 30px 18px 0;
  font-size: 22px;
  line-height: 1.25;
}
.cb__notice-body {
  overflow-y: auto;
  padding-right: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.cb__notice-body p { margin: 0 0 12px; text-indent: 20px; }
.cb__notice-body p:last-child { margin-bottom: 0; }
/* аккуратная полоса прокрутки, чтобы длинный текст не выглядел обрубком */
.cb__notice-body::-webkit-scrollbar { width: 6px; }
.cb__notice-body::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line); }

@media (max-width: 600px) {
  .cb__dialog--notice { padding: 26px 10px 22px 20px; max-height: 88vh; }
  .cb__notice-title { font-size: 18px; }
  .cb__notice-body { font-size: 13px; padding-right: 12px; }
}

/* кнопка «Ок» под текстом согласия */
.cb__notice-foot {
  flex: none;
  margin-top: 22px;
  padding-right: 18px;
  text-align: center;
}
.cb__notice-ok { min-width: 160px; }

/* картинка с телефоном шире остальных, ей нужен свой предел */