/* ===== База ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 24rem;
  font-weight: 400;
  line-height: 31.5rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ===== Кнопки ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  height: 74rem;
  padding: 0 57.7rem;
  border-radius: 999rem;
  font-size: 24rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  /* Кнопки бывают и <a>, и <button>. У <button> браузер сам ставит
     рамку и системный шрифт: Chromium прячет рамку под фоном,
     а Safari рисует её поверх скругления — отсюда чёрный край. */
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  /* Заливка наезжает снизу собственным фоном кнопки, а не отдельным
     элементом: фон и так обрезается по скруглению, обрезать нечего.
     Прежний вариант с ::before Safari по скруглению не резал —
     из-под края вылезал тёмный серп. */
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1),
              color .28s ease,
              background-size .42s cubic-bezier(.65,0,.35,1);
}
.btn:hover { transform: translateY(-3rem); background-size: 100% 101%; }
.btn:active { transform: translateY(-1rem) scale(.985); }

.btn--orange {
  background-color: var(--c-orange);
  background-image: linear-gradient(var(--c-dark), var(--c-dark));
  color: var(--c-white);
}

.btn--outline {
  border: 2rem solid var(--c-orange);
  background-image: linear-gradient(var(--c-orange), var(--c-orange));
  color: var(--c-text);
  padding: 0 60.75rem;
}
.btn--outline:hover { color: var(--c-white); }
.btn__arrow {
  position: relative;
  width: 26rem;
  height: 25rem;
  flex: none;
  overflow: hidden;
}
.btn__arrow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* возврат — мгновенный: уехавшую стрелку подменяет вторая копия,
     поэтому на уходе курсора обратного хода не видно */
  transition: transform 0s;
}
.btn__arrow img:nth-child(2) { transform: translate(-100%, 100%); }

.btn:hover .btn__arrow img,
.scroll-hint:hover .btn__arrow img {
  transition: transform .44s cubic-bezier(.65, 0, .35, 1);
}
.btn:hover .btn__arrow img:nth-child(1),
.scroll-hint:hover .btn__arrow img:nth-child(1) { transform: translate(100%, -100%); }
.btn:hover .btn__arrow img:nth-child(2),
.scroll-hint:hover .btn__arrow img:nth-child(2) { transform: translate(0, 0); }

/* ===== 01 Первый экран ===== */
.hero {
  position: relative;
  height: 1230rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 66rem;
}
.hero__logo {
  display: flex;
  align-items: center;
  height: 151.5rem;
  margin-left: -11rem;
}
.hero__logo-word {
  font-size: 200rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--c-dark);
}
.hero__logo-mark { width: 100rem; height: 144.8rem; margin: 0 57rem 0 68.8rem; flex: none; }

.nav { display: flex; gap: 31rem; margin-top: 32.5rem; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 48rem;
  padding: 0 24rem;
  border: 1.5rem solid var(--c-orange);
  border-radius: 999rem;
  font-size: 20rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-dark);
  transition: background-color .18s ease, color .18s ease;
}
.pill:hover { background: rgba(255,122,26,.1); }
.pill--solid { background: var(--c-orange); color: var(--c-white); }
.pill--solid:hover { background: #F56D0B; color: var(--c-white); }

/* Пустое место под анимацию первого экрана */
.hero__stage { flex: none; height: 440.2rem; width: 100%; }

.hero__title {
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
}
.hero__lead {
  margin-top: 30.5rem;
  text-align: center;
}
.hero__actions { display: flex; gap: 24rem; margin-top: 62.7rem; }

/* ===== 02 Проблемы ===== */
.problems {
  position: relative;
  height: 1328rem;
  background: var(--c-dark);
  color: var(--c-cream);
}
.problem { position: absolute; z-index: 1; }
.problem--1 { left: 60rem; top: 108rem; }
.problem--2 { left: 1272rem; top: 294rem; }
.problem--3 { left: 60rem; top: 674rem; }
.problem--4 { left: 1122rem; top: 796rem; }

.tags { display: flex; gap: 0; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 37.5rem;
  padding: 0 19rem;
  border: 0.75rem solid var(--c-cream);
  border-radius: 999rem;
  color: var(--c-cream);
  font-size: 20rem;
  font-weight: 400;
  line-height: 1;
}
.tag--num {
  width: 60.5rem;
  padding: 0;
  justify-content: center;
  background: var(--c-cream);
  color: var(--c-dark);
}

.problem__title {
  margin-top: 9rem;
  font-size: 80rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Анимация смайла. Свет отделён от фона ролика и положен на фон экрана
   ещё при кодировании (.tools/glow.py): где света нет, в кадре ровно
   #1F1F1F. Слабый хвост погашен по яркости, а не рамкой, — граница идёт
   по форме свечения.
   Кадры рисует canvas, а не сам <video>: видеослой браузер проводит
   через собственное управление цветом, и тот же #1F1F1F показывается
   не тем же цветом, что фон страницы, — кадр становится виден. Canvas
   же обычный элемент страницы и совпадает с фоном точно.
   Размер подобран так, чтобы свет не доставал до текста. */
.problems__stage {
  position: absolute;
  left: 573rem; top: 294rem;
  width: 610rem; height: 610rem;
  z-index: 0;
}
.problems__src,
.problems__smile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.problems__src { opacity: 0; }   /* источник кадров, сам не показывается */

.problems__footer {
  position: absolute;
  left: 60rem; top: 1194rem;
  display: flex;
  align-items: center;
  gap: 28rem;
}
.scroll-hint {
  position: relative;
  display: flex;
  align-items: center;
}
.scroll-hint__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70rem; height: 70rem;
  border-radius: 50%;
  background: var(--c-orange);
  flex: none;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
/* стрелка вниз — тот же ассет, повёрнут; движение тем же приёмом */
.scroll-hint__circle .btn__arrow { transform: rotate(135deg); }
.scroll-hint:hover .scroll-hint__circle { transform: translateY(4rem); }

.scroll-hint__label {
  display: inline-flex;
  align-items: center;
  height: 74rem;
  padding: 0 43.5rem;
  border: 2.5rem solid var(--c-orange);
  border-radius: 999rem;
  color: var(--c-cream);
  font-size: 24rem;
  line-height: 1;
  transition: background-color .3s ease;
}
.scroll-hint:hover .scroll-hint__label { background: rgba(255,122,26,.12); }

.problems__note { font-size: 24rem; line-height: 30.5rem; }

/* ===== 03 Как получить ===== */
.how { position: relative; height: 1502rem; background: var(--c-bg); }
.how__title {
  position: absolute;
  left: 0; right: 0; top: 96.6rem;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.078em;
  line-height: 1.05;
  text-align: center;
}

.how__row {
  position: absolute;
  left: 60rem; right: 60rem;
  display: grid;
  grid-template-columns: 1062rem 1fr;
}
.how__row--1 { top: 307.7rem; }
.how__row--2 { top: 547.5rem; }
.how__row--3 { top: 780.6rem; }

.how__num {
  position: absolute;
  left: 0; top: 61.8rem;
  font-size: 24rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.how__step {
  margin-left: 80rem;
  font-size: 200rem;
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1.26;
}
.how__text { padding-top: 58.4rem; letter-spacing: -0.03em; color: #9A9A9A; }

.how__divider {
  position: absolute;
  left: 60rem; right: 60rem;
  height: 2rem;
  background: #ECECEC;
}
.how__divider--1 { top: 560rem; }
.how__divider--2 { top: 793.5rem; }
/* третий разделитель был без позиции и рисовался у верхнего края секции */
.how__divider--3 { top: 1033rem; }

.quote {
  position: absolute;
  left: 479rem; top: 1193.5rem;
  display: flex;
  align-items: center;
  gap: 5rem;
  width: 961.5rem;
  height: 127.5rem;
  padding: 0 14rem 0 14.5rem;
  border: 0.5rem solid #BDBDBD;
  border-radius: 45rem;
  background: #F9F9F9;
}
.quote__avatar { width: 100rem; height: 100rem; border-radius: 31rem; object-fit: cover; flex: none; }
.quote__text {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100rem;
  padding: 0 60rem;
  border: 2rem solid #FFAB00;
  border-radius: 31rem;
  letter-spacing: -0.05em;
  line-height: 30rem;
}
.how__signature { position: absolute; left: 846rem; top: 1366rem; width: 228rem; }

/* ===== 04 Откуда база ===== */
.story { position: relative; height: 1230rem; }
.story__title {
  position: absolute;
  left: 60rem; top: 59.7rem;
  width: 1800rem;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.story__cols {
  position: absolute;
  left: 60rem; top: 737.8rem;
  display: grid;
  grid-template-columns: 1062rem 738rem;
}
.story__note, .story__body p { color: #C9C9C9; }
.story__body p + p { margin-top: 41rem; }

/* ===== 05 Витрина ===== */
.showcase {
  position: relative;
  height: 1230rem;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.showcase.is-dragging { cursor: grabbing; }

.card {
  --u: 1rem;
  position: absolute;
  left: 0;
  top: 50%;
  width: 403rem;
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(21 * var(--u));
  background: var(--c-white);
  transform-origin: 50% 50%;
  will-change: transform;
}

.card__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(286 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--panel);
}
.card--1 .card__panel img { width: 35.9%; }
.card--2 .card__panel img { width: 42.2%; }
.card--3 .card__panel img { width: 36.2%; }
.card--4 .card__panel img { width: 34.5%; }
.card--5 .card__panel img { width: 23.1%; }

.card__title {
  margin-top: calc(18 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1.25;
}
.card__text {
  margin-top: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(17.5 * var(--u));
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(22 * var(--u));
}
.chip {
  display: inline-flex;
  align-items: center;
  height: calc(30 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: 999px;
  background: var(--c-dark);
  color: var(--c-white);
  font-size: calc(12 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== 06 Что ты получишь ===== */
.receive { position: relative; height: 1458rem; }
.receive__title {
  position: absolute;
  left: 60rem; top: 59.7rem;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.receive__lead { position: absolute; left: 60rem; top: 196rem; }

.receive__row {
  position: absolute;
  left: 60rem;
  right: 60rem;
  pointer-events: none;
}
.receive__row--1 { top: 412rem; height: 400rem; }
.receive__row--2 { top: 633rem; height: 400rem; }
.receive__row--3 { top: 854rem; height: 420rem; }

.receive__hit {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: auto;
}
.receive__row--1 .receive__hit { top: 88rem; height: 170rem; }
.receive__row--2 .receive__hit { top: 142rem; height: 170rem; }
.receive__row--3 .receive__hit { top: 146rem; height: 225rem; }

.receive__item {
  position: absolute;
  left: 0;
  pointer-events: auto;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.receive__row--1 .receive__item { top: 113.7rem; }
.receive__row--2 .receive__item { top: 164.7rem; }
.receive__row--3 .receive__item { top: 147.7rem; }

.receive__text {
  position: absolute;
  left: 1062rem;
  pointer-events: auto;
}
.receive__row--1 .receive__text { top: 102.5rem; }
.receive__row--2 .receive__text { top: 153.5rem; }
.receive__row--3 .receive__text { top: 202.5rem; }

/* карточка появляется только при наведении на пункт */
.receive__card {
  position: absolute;
  left: 740rem;
  top: 0;
  width: 306rem;
  opacity: 0;
  transform: rotate(var(--tilt)) translateY(18rem) scale(.97);
  transition: opacity .38s ease, transform .48s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.receive__row--1 .receive__card { --tilt: 7.8deg; }
.receive__row--2 .receive__card { --tilt: -7.8deg; }
.receive__row--3 .receive__card { --tilt: 7.8deg; }

.receive__hit:hover ~ .receive__card,
.receive__item:hover ~ .receive__card,
.receive__text:hover ~ .receive__card {
  opacity: 1;
  transform: rotate(var(--tilt)) translateY(0) scale(1);
}

/* ===== 07 FAQ ===== */
/* высота по контенту: ответы раскрываются и сворачиваются */
.faq {
  display: grid;
  grid-template-columns: 456rem 1344rem;
  align-content: start;
  padding: 59.2rem 60rem 110rem;
  background: var(--c-dark);
  color: var(--c-cream);
}
.faq__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: rgba(255, 247, 237, .3);
}
.faq__list { grid-column: 2; grid-row: 1 / span 2; width: 1344rem; }
.faq__item { border-bottom: 1rem solid rgba(255, 247, 237, .16); }
.faq__q {
  display: block;
  width: 100%;
  padding: 26rem 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font-family: inherit;
  font-size: 52rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--c-orange); }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__a {
  padding-bottom: 30rem;
  line-height: 32rem;
  color: rgba(255, 247, 237, .62);
  opacity: 0;
  transform: translateY(-8rem);
  transition: opacity .3s ease .08s, transform .35s ease .08s;
}
.faq__item.is-open .faq__a { opacity: 1; transform: none; }


.faq__author {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-top: 120rem;
}
.faq__author img { width: 258rem; height: 272rem; object-fit: cover; border-radius: 6rem; }
.faq__author figcaption {
  margin-top: 17rem;
  font-size: 24rem;
  font-weight: 700;
  line-height: 30rem;
}

/* ===== 08 Финальный призыв ===== */
.cta {
  position: relative;
  height: 1141rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta__title {
  margin-top: 60.2rem;
  font-size: 96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
}
.cta__lead {
  margin-top: 36.4rem;
  font-weight: 700;
  line-height: 30rem;
  letter-spacing: 0;
  text-align: center;
}
.cta__actions {
  position: absolute;
  left: 0; right: 0; top: 1006rem;
  display: flex;
  justify-content: center;
  gap: 24rem;
}

/* ===== 11 Подвал ===== */
.footer {
  position: relative;
  height: 1002rem;
  background: var(--c-dark);
  color: var(--c-cream);
}
.footer__cols {
  position: absolute;
  left: 516rem; top: 56.6rem;
  display: grid;
  grid-template-columns: 607rem 517rem auto;
  font-size: 20rem;
  line-height: 32rem;
  color: rgba(255, 247, 237, .45);
}
.footer__col { display: flex; flex-direction: column; }
.footer__col a { transition: color .18s ease; }
.footer__col a:hover { color: var(--c-cream); }
.footer__logo { position: absolute; left: 60rem; top: 648.5rem; width: 1800rem; }

/* ==================================================================
   МОБИЛЬНАЯ ВЕРСИЯ — макет 390
   ================================================================== */

.only-m { display: none; }

@media (max-width: 1199px) {
  .only-d { display: none !important; }
  .only-m { display: revert; }

  body { font-size: 15.4rem; line-height: 21.25rem; }

  /* Кнопки */
  .btn {
    height: 39.5rem;
    padding: 0 20rem;
    gap: 6rem;
    font-size: 13rem;
    border-radius: 999rem;
  }
  .btn--outline { border-width: 1.5rem; }
  .btn__arrow { width: 14rem; height: 13.5rem; }

  /* 01 Первый экран */
  .hero { height: 770rem; padding-top: 50.5rem; }
  .hero__logo { height: 44.8rem; margin-left: -3.25rem; }
  .hero__logo-word { font-size: 59.2rem; }
  .hero__logo-mark { width: 29.6rem; height: 42.8rem; margin: 0 16.9rem 0 20.35rem; }

  .nav {
    width: 349.5rem;
    margin-top: 12.2rem;
    gap: 0;
    justify-content: space-between;
  }
  .pill { height: 23rem; padding: 0 11rem; font-size: 7.5rem; border-width: 1rem; }

  .hero__stage { height: 289.5rem; }
  .hero__title { font-size: 39.5rem; line-height: 38.75rem; letter-spacing: -0.02em; }
  .hero__lead { margin-top: 11.3rem; font-size: 15.4rem; line-height: 21.25rem; }

  .hero__actions {
    flex-direction: column;
    width: 349.5rem;
    gap: 9.5rem;
    margin-top: 17.7rem;
  }
  .hero__actions .btn { width: 100%; }

  /* 02 Проблемы */
  .problems { height: 760rem; }
  .problem--1 { left: 20rem; top: 54rem; }
  .problem--2 { left: 20rem; top: 159rem; }
  .problem--3 { left: auto; right: 20rem; top: 393rem; text-align: right; }
  .problem--4 { left: auto; right: 20rem; top: 498rem; text-align: right; }
  .problem--3 .tags, .problem--4 .tags { justify-content: flex-end; }

  .tag {
    height: 16.5rem;
    padding: 0 8rem;
    font-size: 9rem;
    background: transparent;
    color: var(--c-cream);
    border: 1rem solid var(--c-orange);
  }
  /* ширина 60.5 осталась от десктопа и растягивала плашку */
  .tag--num { width: auto; padding: 0 7rem; }

  .problem__title {
    margin-top: 7.8rem;
    font-size: 24rem;
    line-height: 27rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .problems__stage { left: 103rem; top: 228rem; width: 178rem; height: 178rem; }

  .problems__footer {
    left: 0; right: 0; top: 626.5rem;
    flex-direction: column;
    align-items: center;
    gap: 11.8rem;
  }
  .scroll-hint__circle { width: 34rem; height: 34rem; }
  .scroll-hint__circle .btn__arrow { width: 13rem; height: 12.5rem; }
  .scroll-hint__label {
    height: 37rem;
    padding: 0 22.7rem;
    font-size: 11.7rem;
    border-width: 1.2rem;
  }
  .problems__note { font-size: 12rem; line-height: 14rem; text-align: center; }

  /* 03 Как получить */
  .how { height: 944rem; }
  .how__title {
    top: 53.9rem;
    font-size: 33.5rem;
    line-height: 40rem;
    letter-spacing: -0.02em;
  }

  .how__row {
    left: 20rem; right: 20rem;
    display: block;
  }
  .how__row--1 { top: 166.3rem; }
  .how__row--2 { top: 394.1rem; }
  .how__row--3 { top: 561.4rem; }

  .how__num {
    position: static;
    font-size: 12rem;
    font-weight: 500;
    vertical-align: 14rem;
    margin-right: 5rem;
  }
  .how__step {
    display: inline;
    margin-left: 0;
    font-size: 45rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .how__text {
    padding-top: 0;
    margin-top: -1.7rem;
    font-size: 15.4rem;
    line-height: 20rem;
  }

  .how__divider { left: 20rem; right: 20rem; height: 1rem; background: #D9D9D9; }
  .how__divider--1 { top: 362rem; }
  .how__divider--2 { top: 529rem; }
  .how__divider--3 { top: 716rem; }

  /* Геометрия снята с мобильного макета. Скругления по формуле:
     внешнее = внутреннее + отступ, то есть 17 = 7 + 10. */
  .quote {
    left: 21rem; right: 21.5rem;
    width: auto;
    top: 749rem;
    height: 64.5rem;
    gap: 10rem;
    padding: 0 16rem 0 10rem;
    border-radius: 17rem;
  }
  .quote__avatar { width: 44.5rem; height: 44.5rem; border-radius: 7rem; }
  .quote__text {
    height: 44.5rem;
    padding: 0 12rem;
    border: 1rem solid #FFAB00;
    border-radius: 7rem;
    font-size: 11rem;
    line-height: 15rem;
  }
  .how__signature { left: 125.5rem; top: 828rem; width: 138.5rem; }

  /* 04 Откуда база */
  .story { height: 694rem; }
  .story__title {
    left: 20rem; top: 51.4rem;
    width: 350rem;
    font-size: 30rem;
    line-height: 37rem;
    letter-spacing: -0.01em;
  }
  .story__cols {
    left: 20rem; right: 20rem;
    top: 390rem;
    display: block;
    width: 350rem;
  }
  .story__note {
    font-size: 17rem;
    line-height: 23rem;
    font-weight: 700;
    color: var(--c-dark);
  }
  .story__body { margin-top: 61.2rem; }
  .story__body p { font-size: 15rem; line-height: 19rem; }

  /* 05 Витрина */
  .showcase { height: 357rem; }
  /* в мобильном макете лента опущена ниже заголовка */
  .showcase .card { top: 57.7%; }
  .showcase__title {
    position: absolute;
    left: 20rem; top: 57.1rem;
    z-index: 2;
    font-size: 25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  /* 06 Что ты получишь */
  .receive { height: 622rem; }
  .receive__title {
    left: 20rem; top: 57.9rem;
    font-size: 34rem;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .receive__lead {
    left: 20rem; top: 126.1rem;
    width: 330rem;
    font-size: 15rem;
    line-height: 21.25rem;
    color: #9A9A9A;
  }

  .receive__row { left: 20rem; right: 20rem; }
  .receive__row--1 { top: 237rem; height: 100rem; }
  .receive__row--2 { top: 343rem; height: 100rem; }
  .receive__row--3 { top: 449rem; height: 110rem; }

  .receive__item {
    left: 75rem;
    font-size: 23rem;
    line-height: 26rem;
    letter-spacing: -0.01em;
  }
  .receive__row--1 .receive__item { top: 6rem; }
  .receive__row--2 .receive__item { top: 14rem; }
  .receive__row--3 .receive__item { top: 6rem; }

  .receive__text {
    left: 75rem;
    width: 255rem;
    font-size: 11rem;
    line-height: 16rem;
    color: #9A9A9A;
  }
  .receive__row--1 .receive__text { top: 37rem; }
  .receive__row--2 .receive__text { top: 45rem; }
  .receive__row--3 .receive__text { top: 37rem; }

  /* на телефоне наведения нет — карточки видны всегда, без наклона */
  .receive__card {
    left: 0;
    top: 0;
    width: 57.5rem;
    opacity: 1;
    transform: none;
  }

  /* 07 FAQ */
  .faq {
    grid-template-columns: 1fr;
    padding: 58.8rem 20rem 60rem;
  }
  .faq__label {
    font-size: 40rem;
    line-height: 1;
    color: rgba(255, 247, 237, .3);
  }
  .faq__list { grid-column: 1; grid-row: auto; width: 100%; margin-top: 30rem; }
  .faq__q { padding: 14rem 0; font-size: 16rem; line-height: 21rem; letter-spacing: 0; }
  .faq__a { padding-bottom: 16rem; font-size: 15rem; line-height: 21.25rem; }

  .faq__author { grid-row: auto; margin-top: 44rem; }
  .faq__author img { width: 112rem; height: 151rem; border-radius: 4rem; }
  .faq__author figcaption { margin-top: 10rem; font-size: 11rem; line-height: 14rem; }

  /* 08 Финальный призыв */
  .cta { height: 618rem; }
  .cta__title {
    margin-top: 61.4rem;
    font-size: 34rem;
    line-height: 41rem;
    letter-spacing: -0.02em;
  }
  .cta__lead {
    margin-top: 13rem;
    width: 340rem;
    font-size: 15rem;
    line-height: 21.25rem;
    font-weight: 400;
    color: #9A9A9A;
  }
  .cta__stage {
    width: 349.5rem;
    height: 177.5rem;
    margin-top: 29rem;
  }
  .cta__actions {
    position: static;
    width: 351.5rem;
    margin-top: 26.5rem;
    gap: 14rem;
  }
  .cta__actions .btn { flex: 1; padding: 0; height: 51.5rem; }

  /* 11 Подвал */
  .footer { height: 343rem; }
  .footer__cols {
    left: 20rem; top: 62.2rem;
    width: 350rem;
    grid-template-columns: 214rem 94rem auto;
    font-size: 9rem;
    line-height: 16rem;
  }
  .footer__logo { left: 20rem; top: 214rem; width: 349.5rem; }
}

/* Реквизиты самозанятого в подвале — требование закона и модерации эквайринга */
.footer__req {
  position: absolute;
  left: 60rem; top: 56.6rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  width: 420rem;
  font-size: 20rem;
  font-style: normal;
  line-height: 32rem;
  color: rgba(255, 247, 237, .45);
}
.footer__req a { transition: color .18s ease; }
.footer__req a:hover { color: var(--c-cream); }

/* Иконки площадок в подвале. Пустая метка у внутренних ссылок держит
   общую левую границу текста, иначе колонка расходится. */
.footer__col a {
  display: flex;
  align-items: center;
  gap: 10rem;
}
.footer__icon {
  width: 22rem;
  height: 22rem;
  flex: none;
  opacity: .45;
  transition: opacity .18s ease;
}
/* PNG-знаки тёмные, их нужно вывернуть; SVG уже светлые */
.footer__icon[src$=".png"] { filter: invert(1); }
.footer__col a:hover .footer__icon { opacity: 1; }

/* Мобильный подвал. Блок идёт после самих правил, иначе они перебивают
   его обратно: специфичность одинаковая, побеждает то, что ниже. */
@media (max-width: 1199px) {
  .footer { height: 400rem; }

  /* При кегле 9 иконки превращаются в кашу и распирают колонки */
  .footer__col a { display: block; }
  .footer__icon { display: none; }

  /* Реквизиты стоят под логотипом, поэтому выровнены по центру блока */
  .footer__req {
    left: 20rem; top: 288rem;
    width: 350rem;
    align-items: center;
    text-align: center;
    gap: 0;
    font-size: 9rem;
    line-height: 14rem;
  }

}

/* Цена внизу «Что ты получишь» — справочно, без нажима */
.receive__price {
  position: absolute;
  left: 60rem; top: 1380rem;
  font-size: 20rem;
  line-height: 1.4;
  color: #B4B4B4;
}

/* Мобильная цена — после десктопного правила, иначе оно перебивает */
@media (max-width: 1199px) {
  .receive__price { left: 20rem; right: 20rem; top: 582rem; font-size: 11rem; }
}

/* ==================================================================
   Мобильный экран «Как получить» — поток вместо фиксированных позиций.
   В макете разделители стоят не на заданных отметках, а на одинаковом
   расстоянии от текста: подпись через 47.5 после шага, линия через
   12.5 после текста, следующий шаг через 33 после линии. С жёсткими
   координатами это держалось только при исходной длине текстов.
   ================================================================== */
@media (max-width: 1199px) {
  .how { height: auto; padding: 53.9rem 20rem 54.5rem; }

  .how__title { position: static; left: auto; right: auto; top: auto; margin-bottom: 31.5rem; }

  .how__row { position: static; left: auto; right: auto; top: auto; }
  .how__text { margin-top: 7.5rem; }

  .how__divider { position: static; left: auto; right: auto; top: auto; margin: 12.5rem 0 33rem; }

  .quote { position: static; left: auto; right: auto; top: auto; width: 100%; }

  .how__signature { position: static; left: auto; top: auto; margin: 20rem auto 0; }

  /* Фото и цитата стоят вплотную, как на десктопе */
  .quote { gap: 5rem; padding: 0 10rem; }
  /* .only-m переключает display на block и гасит центрирование плашки */
  .quote__text.only-m {
    display: flex;
    align-items: center;      /* по вертикали — по центру */
    justify-content: flex-start;
    text-align: left;         /* по горизонтали — левая выключка */
    padding: 0 12rem;
  }
}

/* Область наведения из «Что ты получишь» тянула десктопную высоту
   и на мобильной вылезала за секцию, перекрывая первый вопрос FAQ.
   На тач-экранах наведения нет, поэтому она там не нужна. */
@media (max-width: 1199px) {
  .receive__hit { display: none; }
}

/* Экран «Откуда база» на мобильной — тоже поток.
   В макете заголовок, заметка и текст разделены равными 37;
   с фиксированными отметками это держалось только пока заголовок
   умещался в 11 строк. */
@media (max-width: 1199px) {
  .story { height: auto; padding: 51.4rem 20rem 55rem; }
  .story__title { position: static; left: auto; top: auto; width: auto; }
  .story__cols { position: static; left: auto; right: auto; top: auto; width: auto; margin-top: 24rem; }
  .story__body { margin-top: 28rem; }
}