/* ================================================================== *
 * 0 Блок — прогрузочный экран
 * Макеты: 4443:80907 (веб, 1440×750), 4443:80473 (мобилка, 375×812)
 * ================================================================== */

/*
  Секция выше экрана на длину заливки плюс запас в конце. Пока прокручивают эти
  лишние 100svh, содержимое стоит приклеенным: сначала колосок наливается снизу
  вверх, а последнюю четверть пути стоит уже налитым — это пауза перед тем, как
  экран уедет. Пауза меряется прокруткой, а не временем, поэтому подчиняется
  руке и не выглядит зависанием.
*/
.intro {
  min-height: 200svh;
  background-image: var(--intro-gradient);
}

.intro__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  padding: 24px;
}

/*
  Ширина колонки в макете — 256.74px и на вебе, и на мобилке: колосок один и
  тот же, меняются только поля вокруг. Но по высоте контент занимает почти весь
  экран (644 из 750 на вебе), поэтому на низком окне колонка обязана ужиматься —
  иначе «Прокрутите» уезжает под нижний край. Отсюда третий аргумент min():
  сколько ширины колосок может себе позволить при оставшейся высоте, где
  0.6418 — его пропорция 256.74 / 400.
*/
.intro__content {
  --gap: clamp(28px, 10.7svh, 80px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: min(256.74px, 100vw - 48px, (100svh - 100px - 2 * var(--gap)) * 0.6418);
}

.intro__wordmark {
  width: 54.95%; /* 141.09 из 256.74 */
  height: auto;
}

/* ------------------------------------------------------------------ *
 * Колосок: белый силуэт и красная сердцевина поверх него
 * ------------------------------------------------------------------ */

/*
  Доля заливки, 0…1. Её выставляет скрипт по прокрутке; всё остальное —
  производные от неё.
*/
.wheat {
  --fill: 0;

  position: relative;
  width: 100%;
  aspect-ratio: 256.737 / 400;
  /* «И ещё при прокрутке сам колосок должен чуть-чуть увеличиваться». */
  transform: scale(calc(1 + var(--fill) * 0.16));
}

.wheat__outer {
  width: 100%;
  height: 100%;
  /* Мягкая тень под белыми лепестками — на светлом фоне без неё силуэт
     сливается с подложкой. */
  filter: drop-shadow(0 6px 18px rgba(57, 67, 77, 0.12));
}

/*
  Красная сердцевина видна не целиком, а снизу вверх на долю --fill: обрезаем
  сверху. Обрезка, а не масштаб, — иначе рисунок деформировался бы.

  Переходов здесь нет намеренно: плавность даёт скрипт, подтягивая долю к
  прокрученной каждый кадр. CSS-переход перезапускался бы на каждом событии
  прокрутки и дёргался.
*/
.wheat__inner {
  position: absolute;
  /* Доли от рамки белого силуэта: 31.25/256.737 и 37.17/400 */
  top: 9.29%;
  left: 12.17%;
  width: 75.66%; /* 194.254 из 256.737 */
  height: 90.71%; /* 362.833 из 400 */
  clip-path: inset(calc((1 - var(--fill)) * 100%) 0 0 0);
}

/*
  Без анимаций экран не приклеивается и колосок стоит залитым: держать
  страницу ради эффекта, который отключён, незачем.
*/
@media (prefers-reduced-motion: reduce) {
  .intro {
    min-height: 100svh;
  }

  .intro__sticky {
    position: static;
    height: auto;
    min-height: 100svh;
  }

  .wheat {
    --fill: 1;

    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Подсказка «Прокрутите»
 * ------------------------------------------------------------------ */

.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: opacity 0.4s ease;
}

/*
  Серая линия, растворяющаяся книзу, и короткий красный отрезок, скользящий по
  ней сверху вниз, — «зацикленная анимация цвета для имитации прокрутки».

  Красный никогда не закрывает линию целиком: он короче её и того же цвета по
  всей длине, без градиента. Углы у обоих прямые. Ширина 2, а не 4 из экспорта
  узла: в макете штрих тоньше, экспорт округлил.
*/
.scroll-hint__bar {
  position: relative;
  width: 1px;
  /*
    Длина — компромисс: красный отрезок должен быть заметно длиннее прежнего и
    при этом не закрывать линию целиком. На 44 серое остаётся видно с обоих
    краёв, буквальные «вдвое» (64) в укороченную линию уже не влезают.
  */
  height: 44px;
  background-image: linear-gradient(to bottom, rgba(57, 67, 77, 0.55), rgba(57, 67, 77, 0));
  overflow: hidden;
}

.scroll-hint__bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: var(--color-red-soft);
  animation: scroll-hint-run 1.65s ease-in-out infinite;
}

@keyframes scroll-hint-run {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(400%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__bar::after {
    animation: none;
  }
}

.scroll-hint__label {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .scroll-hint__label {
    font-size: 12px;
  }
}

/* Экран прогрузочный: подсказка живёт, пока страницу не тронули. */
.scroll-hint.is-hidden {
  opacity: 0;
}

/* ================================================================== *
 * Шапка
 * Макеты: 4443:81255 (веб, 1440×80), 4443:80499 (мобилка, 375×64)
 * ================================================================== */

/*
  Полупрозрачная и с размытием — значит рассчитана на то, что под ней едет
  контент. В макете она стоит сразу за прогрузочным экраном, поэтому липнет
  к верху, а не висит поверх интро.
*/
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 120px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.masthead__logo {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
  text-decoration: none;
}

/* Знак колоска: тот же силуэт, что на интро, только мелкий. */
.mark {
  position: relative;
  display: block;
  width: 32px;
  aspect-ratio: 256.737 / 400;
  flex-shrink: 0;
}

.mark__outer {
  width: 100%;
  height: 100%;
}

.mark__inner {
  position: absolute;
  top: 9.29%;
  left: 12.17%;
  width: 75.66%;
  height: 90.71%;
}

.masthead__wordmark {
  display: none;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  /* В макете у ряда ссылок собственные поля 64 поверх общих 120. */
  padding: 0 64px;
}

/*
  Под курсором ссылка жирнеет (комментарий к макету шапки). Жирное начертание
  шире обычного, поэтому ширину резервируем заранее — невидимой копией в
  ::before поверх той же ячейки сетки. Иначе соседние пункты дёргались бы.
*/
.masthead__link {
  display: inline-grid;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* :active — ответ на тап: подсветку тапа мы убрали, и без него на телефоне
   ссылка меню никак не отзывалась бы на нажатие. */
.masthead__link:hover,
.masthead__link:active,
.masthead__link:focus-visible {
  color: var(--color-red);
}

.masthead__link::before {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 700;
  visibility: hidden;
}

.masthead__link span {
  grid-area: 1 / 1;
}

.masthead__link:hover span {
  font-weight: 700;
}

.masthead__burger {
  position: relative;
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.masthead__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition:
    transform 220ms ease,
    opacity 140ms ease;
}

.masthead__bar:nth-child(1) {
  top: 5px;
}

.masthead__bar:nth-child(2) {
  top: 11px;
}

.masthead__bar:nth-child(3) {
  top: 17px;
}

/* Открытое меню — тот же значок, сложенный в крестик. */
.masthead__burger[aria-expanded='true'] .masthead__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.masthead__burger[aria-expanded='true'] .masthead__bar:nth-child(2) {
  opacity: 0;
}

.masthead__burger[aria-expanded='true'] .masthead__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023px) {
  /*
    На мобилке раскладка другая, а не ужатая: знак получает подпись, десять
    ссылок сворачиваются в бургер. Высота 64 против 80, поля 16 против 120.
  */
  .masthead {
    height: 64px;
    padding: 0 16px;
  }

  .mark {
    width: 15.4px;
  }

  .masthead__wordmark {
    display: block;
    width: 141.09px;
    height: auto;
  }

  /*
    Ссылки превращаются в панель под шапкой (макет 4443:79884): во всю ширину,
    поля 24, разрывы 16, свой градиент. Закрытая панель убрана из потока
    видимости, а не `display: none`, — иначе появление и уход нечем анимировать.
  */
  .masthead__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
    background-image: linear-gradient(-77.84deg, #c7d6e1 0%, #e6eef5 100%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
      opacity 220ms ease,
      transform 220ms ease,
      visibility 220ms;
  }

  .masthead__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .masthead__link {
    /* В панели ссылки прижаты к левому полю, а не выровнены по центру ряда. */
    text-align: left;
    font-size: 20px;
    line-height: 1.4;
  }

  .masthead__burger {
    display: block;
  }
}

/*
  Десять ссылок с полями и разрывами из макета занимают 1345 — ровно столько,
  сколько даёт окно 1440 с полем 120 слева. Ниже этой отметки ряд физически не
  помещается, поэтому шапка переходит на бургер раньше остальной мобильной
  вёрстки.
*/
@media (max-width: 1345px) {
  .masthead__wordmark {
    display: block;
  }

  /*
    Ссылки превращаются в панель под шапкой (макет 4443:79884): во всю ширину,
    поля 24, разрывы 16, свой градиент. Закрытая панель убрана из потока
    видимости, а не `display: none`, — иначе появление и уход нечем анимировать.
  */
  .masthead__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
    background-image: linear-gradient(-77.84deg, #c7d6e1 0%, #e6eef5 100%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
      opacity 220ms ease,
      transform 220ms ease,
      visibility 220ms;
  }

  .masthead__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .masthead__link {
    /* В панели ссылки прижаты к левому полю, а не выровнены по центру ряда. */
    text-align: left;
    font-size: 20px;
    line-height: 1.4;
  }

  .masthead__burger {
    display: block;
  }
}

/* ================================================================== *
 * Кнопки — общий компонент
 * В макете это Red Button / White Button, встречаются в блоках 1, 3, 10
 * и в поп-апе. Мобильные варианты мельче и с другим радиусом.
 * ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 32px;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* drop-shadow, а не box-shadow: в макете тень идёт по форме пилюли. */
  filter: drop-shadow(4px 4px 4px rgba(126, 138, 150, 0.5));
  /* transform не анимируем переходом: сдвиг за курсором сглаживает скрипт. */
  transition:
    background 0.2s ease,
    filter 0.2s ease;
}

/*
  Второе состояние кнопок (`4443:80040`, `4443:80035`) — именно нажатие, так в
  комментарии дизайнера: «при нажатии становится тёмной». Под курсором кнопка
  только приподнимается.
*/
.btn:active {
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
}

/*
  «Лёгкое движение при наведении и движении курсора»: элемент чуть тянется за
  курсором. Скрипт выставляет только смещение переменными, а сам transform
  собирается здесь — иначе он затирал бы собственные превращения элемента
  (наклон картинки в первом блоке именно так и выпрямлялся).
*/
[data-magnetic] {
  transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px));
  will-change: transform;
}

.btn--red {
  background: var(--color-red-soft);
  color: #fff;
}

.btn--red:active {
  background: var(--color-red-active);
}

.btn--white {
  background: #fff;
  color: var(--color-ink);
}

.btn--white:active {
  background: var(--color-white-active);
}

@media (max-width: 1023px) {
  .btn,
  .btn:hover,
  .btn:active {
    height: auto;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 17px;
    line-height: 1.1;
    /* На мобилке тень одинаковая в обоих состояниях — меняется только цвет. */
    filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
  }
}

/* ================================================================== *
 * 1 Блок — первый экран
 * Макеты: 4443:80933 (веб, 1200×541), 4443:80524 (мобилка, 343×714)
 * ================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: min(1200px, 100% - 240px);
  margin: 110px auto 0;
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 764px;
  flex-shrink: 0;
}

.hero__eyebrow {
  font-size: 15px;
  line-height: 1.1;
}

.hero__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.hero__line {
  display: block;
}

/*
  Рукописная строка занимает место третьей строки заголовка. В макете её
  бокс 471×66 при строке в 60 — шесть лишних пикселей забираем отрицательным
  полем, иначе последняя строка уезжает вниз.
*/
.hero__script {
  display: block;
  width: 471px;
  height: auto;
  margin: -3px 0;
}

.hero__lead {
  width: 617px;
  font-size: 20px;
  line-height: 1.4;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero__media {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  /* Высота группы из макета: сердечки сверху, под ними фото. */
  padding-top: 59px;
}

.hero__hearts {
  position: absolute;
  top: 0;
  /* 327.29 от левого края группы шириной 436. */
  left: 75%;
  width: 108.71px;
  height: auto;
}

.hero__photo {
  width: 420.38px;
  height: auto;
  margin-top: 33px;
  border-radius: 16px;
  box-shadow: 8px 8px 16px rgba(126, 138, 150, 0.5);
  /* Наклон из макета сохраняется и при движении за курсором. */
  transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)) rotate(-3deg);
}

@media (max-width: 1023px) {
  /*
    На мобилке порядок другой: картинка вклинивается между заголовком и
    описанием. `display: contents` распускает текстовую колонку, чтобы все
    части стали детьми одного флекса и слушались `order` — иначе картинку
    между ними не поставить, она лежит в соседнем контейнере.
    Отступы задаём полями, а не gap: между частями они разные (16, 8, 24).
  */
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(343px, 100% - 32px);
    margin-top: 45px;
  }

  .hero__text {
    display: contents;
  }

  .hero__eyebrow {
    order: 1;
    font-size: 12px;
  }

  .hero__title {
    order: 2;
    margin-top: 16px;
    font-size: 27px;
  }

  .hero__script {
    width: 217px;
    margin: -1px 0;
  }

  .hero__media {
    order: 3;
    margin-top: 8px;
    padding-top: 37px;
  }

  .hero__hearts {
    left: 0;
    width: 53px;
  }

  .hero__photo {
    width: 100%;
    max-width: 330.9px;
    margin-top: 0;
    box-shadow: 5px 5px 10px rgba(126, 138, 150, 0.7);
  }

  .hero__lead {
    order: 4;
    width: auto;
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.1;
  }

  .hero__actions {
    order: 5;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 24px;
  }
}

/* ================================================================== *
 * Поп-ап кнопка
 * Макеты: 4443:81336 (веб, 370×48), 4443:80540 (мобилка, 343×35)
 * ================================================================== */

/*
  «Поп-ап кнопка» из макета: в первом блоке она стоит ровно на одной строке с
  кнопками «Хочу в Колосок» — в Figma у обеих групп верх на отметке 1433. Поэтому
  на вебе это абсолют у правого нижнего угла секции, а не отдельная строка под
  ней. Никуда не закрепляется — уезжает вместе со страницей, а дальше её
  подхватывает плавающая кнопка ниже.
*/
.joincta {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
}

.joincta__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.joincta__script {
  width: 204px;
  height: auto;
}

/*
  Плавающая кнопка. Пара первого блока уезжает вместе со страницей, и как
  только она ушла за верхнюю кромку, снизу появляется эта — сразу в полном
  размере, без переездов: движение вслед за прокруткой читалось как деталь,
  которая не может определиться, где ей быть.

  Появление — тем же приёмом, что всходы в третьем блоке: короткий подъём с
  лёгким перелётом масштаба. `visibility` в переходе, чтобы скрытая кнопка
  выпадала и из порядка обхода клавиатурой, и из чтения скринридером.
*/
.joinfloat {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 60;
  height: 56px;
  padding: 0 28px;
  font-size: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.22, 1.2, 0.36, 1),
    visibility 380ms;
}

.joinfloat.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 1023px) {
  /* На мобилке пара стоит под блоком отдельной строкой — там она не в ряд. */
  .joincta {
    position: static;
    order: 6;
    margin-top: 24px;
  }

  /* На мобилке рукописи нет — только кнопка у правого края. */
  .joincta__script {
    display: none;
  }

  /* Плавающая кнопка мельче и с полями 16 — как всё на узком экране. */
  .joinfloat {
    right: 16px;
    bottom: 16px;
    height: auto;
    padding: 11px 20px;
    font-size: 19px;
  }
}

/* ================================================================== *
 * 2 Блок — ценности
 * Макеты: 4443:80968 (веб, 1198×827), 4443:80542 (мобилка, 343×1445)
 * ================================================================== */

.values {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: min(1198px, 100% - 240px);
  margin: 320px auto 0;
}

/*
  Заголовок: первое слово в макете прозрачное, его закрывает рукописная
  надпись. Здесь рукопись — это img в потоке, поэтому текст не дублируется,
  а alt отдаёт слово поиску и скринридеру.
*/
.values__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

/*
  В макете заголовок в две строки: рукопись сверху, текст под ней. Поэтому
  рукопись здесь блочная, а не в строке с текстом, — иначе на широком экране
  всё сходится в одну строку.

  Отрицательный отступ снизу подтягивает вторую строку: рукопись выше строки
  текста (89 против 60), и без него между ними появлялся бы лишний зазор.
*/
.values__script {
  display: block;
  width: 380px;
  height: auto;
  margin-bottom: -23px;
}

.values__body {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Доли колонки 1200 из макета: видео 612, карточки 570, разрыв 16. */
.values__video {
  flex: 0 0 51%;
  min-width: 0;
}

.values__note {
  width: 569px;
  height: auto;
  margin-bottom: 10px;
  transform: rotate(-0.64deg);
}

/* Плашка вместо ролика — в макете тоже заглушка с подписью. */
.videobox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 345px;
  border-radius: 32px;
  background: #7e8a96;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  filter: drop-shadow(8px 8px 8px rgba(126, 138, 150, 0.5));
}

/*
  Список прокручивается внутри себя: в макете у него своя полоса прокрутки,
  а высота колонки равна высоте видео рядом.
*/
/*
  Высоту не ограничиваем. В макете четыре карточки укладываются в 669 ровно,
  без прокрутки — но подменный шрифт выше настоящего, и с жёсткой высотой
  список начинал скроллиться со своей полосой. Список растёт по содержимому.
*/
.values__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 16px;
  list-style: none;
}

.valuecard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  border-radius: 16px;
  /*
    Цвет колоска — отдельной переменной, а не `color`: в макете под курсором
    красится только он, текст остаётся тёмным. Через `color` цвет утекал бы
    в заголовок и описание по наследованию.
  */
  --mark-color: var(--color-gray);
}

/*
  Подсветка лежит отдельным слоем и наезжает по ширине, а не появляется разом:
  `background-image` переходами не анимируется — градиенты браузер не смешивает.
  Слой уходит под текст отрицательным z-index.
*/
.valuecard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(77, 109, 154, 0.25), rgba(77, 109, 154, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms ease;
}

/*
  Состояние Active из макета: подсветка уходит вправо в прозрачность, колосок
  окрашивается. Скругление в экспорте у этого варианта пропало, но это похоже
  на артефакт (градиент лежит отдельным слоем) — 16 оставлены.

  `:hover` не закрыт в `@media (hover: hover)` намеренно: подсветка нужна и на
  мобилке, а тап в мобильных браузерах как раз даёт hover до следующего
  касания. Ничего, кроме подсветки, карточка не делает, поэтому «залипший»
  hover ничему не мешает.
*/
.valuecard:hover::before,
.valuecard.is-lit::before {
  transform: scaleX(1);
}

.valuecard--red:hover,
.valuecard--red.is-lit {
  --mark-color: var(--color-red-soft);
}

.valuecard--pink:hover,
.valuecard--pink.is-lit {
  --mark-color: var(--color-pink);
}

.valuecard--blue:hover,
.valuecard--blue.is-lit {
  --mark-color: var(--color-blue);
}

/* Колосок в карточке — тот же силуэт, что в шапке, но серый и мельче. */
.mark--leaf {
  width: 35px;
  align-self: center;
}

/*
  Фигура подключена маской, а не картинкой: цвет у неё меняется вместе с
  состоянием карточки, а <img> из CSS не перекрасить. Обе части одноцветные —
  просветы между лепестками даёт сама форма, а не второй цвет.
*/
.mark--leaf .mark__outer,
.mark--leaf .mark__inner {
  display: block;
  background: var(--mark-color);
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: background 200ms ease;
}

.mark--leaf .mark__outer {
  mask-image: url('../assets/block-2/mark-outer.svg');
}

.mark--leaf .mark__inner {
  mask-image: url('../assets/block-2/mark-inner.svg');
}

.valuecard__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.valuecard__title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.valuecard__body {
  font-size: 15px;
  line-height: 1.1;
}

@media (max-width: 1023px) {
  /*
    На мобилке порядок другой: карточки идут до видео, а не сбоку от него.
    Прокрутки у списка нет — он разворачивается целиком.
  */
  .values {
    width: min(343px, 100% - 32px);
    margin-top: 160px;
  }

  .values__title {
    font-size: 27px;
  }

  .values__script {
    width: 150px;
    margin-bottom: -8px;
  }

  .values__body {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .values__video {
    order: 2;
    width: auto;
  }

  .values__note {
    width: 100%;
    margin-bottom: 0;
  }

  .videobox {
    height: 610px;
    border-radius: 8px;
  }

  .values__list {
    order: 1;
    padding: 0;
    gap: 16px;
  }

  .valuecard {
    gap: 16px;
    padding: 8px 16px;
  }

  /*
    На мобилке подсветка зеркальная: тон набирается вправо, а не влево, и
    добавлена тень. Так в макете — расхождение с вебом намеренное.
  */
  .valuecard::before {
    background-image: linear-gradient(90deg, rgba(77, 109, 154, 0), rgba(77, 109, 154, 0.25));
    transform-origin: right center;
  }

  /*
    Тап в мобильном браузере оставляет залипший `:hover` — он держался бы до
    следующего касания. Подсветкой здесь управляет скрипт: зажигает по нажатию
    и снимает через время, как просил дизайнер.
  */
  .valuecard:hover {
    --mark-color: var(--color-gray);
  }

  .valuecard:hover::before {
    transform: scaleX(0);
  }

  .valuecard.is-lit {
    box-shadow: 4px 4px 8px rgba(126, 138, 150, 0.5);
  }

  .valuecard.is-lit::before {
    transform: scaleX(1);
  }

  .valuecard--red.is-lit {
    --mark-color: var(--color-red-soft);
  }

  .valuecard--pink.is-lit {
    --mark-color: var(--color-pink);
  }

  .valuecard--blue.is-lit {
    --mark-color: var(--color-blue);
  }

  .valuecard__title {
    font-size: 20px;
  }

  .valuecard__body {
    font-size: 12px;
  }
}

/* ================================================================== *
 * Общее для рукописных надписей и якорей
 * ================================================================== */

/*
  Рукописи выгружаются из Figma с запечённой светлой подложкой — на фоне
  страницы она видна прямоугольником. Подложка выжжена в альфу при сборке
  ассетов (непрозрачность по самому тёмному каналу), поэтому в CSS ничего
  компенсировать не нужно. `mix-blend-mode` здесь пробовался и не подошёл:
  фон экспорта не чисто белый, и плашка всё равно просвечивала.
*/

/* Липкая шапка перекрывала бы заголовок при переходе по якорю. */
[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 1023px) {
  [id] {
    scroll-margin-top: 80px;
  }
}

/* ================================================================== *
 * 3 Блок — земля и вода
 * Макеты: 4443:81072 (веб, 1440×986), 4443:80645 (мобилка, 375×1345)
 * ================================================================== */

.elements {
  margin-top: 320px;
}

.elements__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: min(1200px, 100% - 240px);
  margin: 0 auto;
}

.elements__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.elements__script {
  display: inline-block;
  width: 673px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -12px;
}

.elements__lead {
  font-size: 20px;
  line-height: 1.4;
}

/*
  Сцена во всю ширину. Смещения заданы в vw, а не в пикселях: блок
  полноширинный, и в макете всё привязано к его ширине — на 1440 совпадает
  пиксель в пиксель, а на экране уже сцена сжимается пропорционально, вместе
  с волной и колосками.
*/
/*
  Сцена — контейнер отсчёта для всего декора: единицы cqw считаются от её
  фактической ширины, а не от вьюпорта. Разница принципиальная — vw включает
  ширину полосы прокрутки, и декор уезжал бы от волны примерно на процент.

  Отступ сверху процентами: проценты у padding берутся от ширины родителя,
  то есть тоже от реальной ширины, и волна не съезжает по вертикали.
*/
.elements__scene {
  position: relative;
  container-type: inline-size;
  margin-top: 26px;
  padding-top: 7.153%; /* 103 из 1440 */
  font-size: 0;
}

.elements__half {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

.elements__half img,
.elements__wheat img,
.elements__ripple img {
  width: 100%;
  height: auto;
}

/* Вода — та же форма, отражённая: в макете это поворот со сменой знака. */
.elements__half--water {
  transform: scaleX(-1);
}

.elements__wheat,
.elements__ripple {
  position: absolute;
  z-index: 1;
}

/*
  Координаты сняты из макета (фрейм «3 Блок», 1440 в ширину) и переведены в
  cqw — доли ширины сцены. Так декор едет вместе с волной: половины стихий
  занимают по 50% сцены и масштабируются вслед за окном.

  Считается всё от сцены, но элементы лежат внутри .elements__content, левый
  край которой отбит от края сцены на --gutter — отсюда вычитание в left.
  Верх колонки в макете стоит на отметке 553, поэтому top отрицательные:
  декор выходит вверх, на саму волну.

  Из макета: Колосок 1 — x 319 y 316, Колосок 2 — x 504 y 275,
  Колосок 3 — x 418 y 298, Круг 1 — x 1004 y 416, Круг 2 — x 848 y 485.
*/
.elements__wheat {
  width: 3.125cqw; /* 45 из 1440 */
}

.elements__wheat--1 {
  left: calc(22.153cqw - var(--gutter));
  top: -16.458cqw;
}

.elements__wheat--2 {
  left: calc(35cqw - var(--gutter));
  top: -19.306cqw;
}

.elements__wheat--3 {
  left: calc(29.028cqw - var(--gutter));
  top: -17.708cqw;
}

.elements__ripple--1 {
  left: calc(69.722cqw - var(--gutter));
  top: -9.514cqw;
  width: 25cqw; /* 360 из 1440 */
}

.elements__ripple--2 {
  left: calc(58.889cqw - var(--gutter));
  top: -4.722cqw;
  width: 14.444cqw; /* 208 из 1440 */
}

/*
  Всходы и круги, которые появляются по нажатию, — те же картинки макета.
  Точка привязки задаётся через left/top скриптом, а translate ставит на неё
  низ колоска и центр круга. Масштаб считается от той же точки, поэтому
  колосок растёт из земли снизу вверх, а круг расходится из середины.
*/
.elements__grown {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.elements__grown--wheat {
  width: 3.125cqw;
  transform-origin: bottom center;
  animation: elements-sprout 0.85s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.elements__grown--wheat.is-leaving {
  animation: elements-wither 0.6s ease-in both;
}

.elements__grown--ripple {
  transform-origin: center;
  animation: elements-ripple 3.4s cubic-bezier(0.16, 0.7, 0.3, 1) both;
}

.elements__grown--ripple1 {
  width: 25cqw;
}

.elements__grown--ripple2 {
  width: 14.444cqw;
}

@keyframes elements-sprout {
  from {
    transform: translate(-50%, -100%) scale(0.04);
  }

  to {
    transform: translate(-50%, -100%) scale(1);
  }
}

@keyframes elements-wither {
  from {
    transform: translate(-50%, -100%) scale(1);
    opacity: 1;
  }

  to {
    transform: translate(-50%, -100%) scale(0.04);
    opacity: 0;
  }
}

/* Круг расходится и тает — так же, как круг по настоящей воде. */
@keyframes elements-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.12);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.elements__content {
  /* Отбивка колонки от края сцены — она же точка отсчёта для декора. */
  --gutter: max(120px, (100cqw - 1200px) / 2);

  position: absolute;
  left: var(--gutter);
  top: 19.306cqw; /* 278 из 1440 */
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: min(1200px, 100% - 240px);
  font-size: 15px;
}

/* Доли колонки 1200 из макета: 528 + 144 + 528. */
.elements__columns {
  display: flex;
  gap: 12%;
}

.elements__col {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* На вебе декор привязан к сцене, а не к колонке — колонка его не обрезает. */
.elements__wheat,
.elements__ripple {
  z-index: 1;
}

/* Рукопись и приписка стоят на одной строке, приписка ниже базовой линии. */
.elements__subtitle {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.elements__subtitle img {
  width: 212px;
  height: auto;
}

.elements__subtitle span {
  padding-bottom: 12px;
}

.elements__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  font-size: 15px;
  line-height: 1.1;
}

/*
  В макете кнопки вынесены в отдельный ряд под текстом и стоят на одной
  отметке. В разметке они остались внутри колонок — так они нужны на мобилке,
  где у каждой стихии свой текст и своя кнопка. На вебе колонки тянутся до
  общей высоты, `margin-top: auto` прижимает кнопки к их низу, и обе
  оказываются на одной линии. Отбивка от текста — 56 (16 от gap колонки
  плюс 40 снизу у текста), как в макете.
*/
.elements__body {
  margin-bottom: 40px;
}

.elements__btn {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1023px) {
  /*
    На мобилке стихии идут друг под другом, у каждой свой текст и своя кнопка,
    а формы волн другие — не масштаб десктопных, поэтому подменяются через
    <picture>. Смещения снова в vw, но от ширины 375.
  */
  .elements {
    margin-top: 160px;
  }

  .elements__intro {
    width: auto;
    margin: 0;
    padding: 0 16px;
    gap: 16px;
  }

  .elements__title {
    font-size: 27px;
  }

  .elements__script {
    width: 307px;
    max-width: 100%;
    margin-bottom: -5px;
  }

  .elements__lead {
    font-size: 17px;
    line-height: 1.1;
  }

  /*
    Отбивка от текста — 75 из макета (237 у кромки земли минус 162 у текста).
    Столько нужно, чтобы колоски торчали из грунта и не налезали на подзаголовок:
    самый высокий поднимается над кромкой на 55.
  */
  .elements__scene {
    margin-top: 20vw;
    padding-top: 14.667vw; /* 55 из 375 */
  }

  .elements__half {
    display: block;
    width: 100%;
  }

  /* Вода на мобилке — своя форма, отражать не нужно. */
  .elements__half--water {
    transform: none;
  }

  .elements__wheat {
    width: 7.374vw; /* 27.65 из 375 */
  }

  .elements__wheat--1 {
    left: 37.6vw;
    top: 21.387vw; /* 55 + 25.2 */
  }

  .elements__wheat--2 {
    left: 67.917vw;
    top: 14.667vw;
  }

  .elements__wheat--3 {
    left: 53.824vw;
    top: 18.435vw; /* 55 + 14.13 */
  }

  .elements__ripple--1 {
    left: 31.92vw;
    top: 200.427vw; /* 55 + 696.6 */
    width: 63.814vw;
  }

  .elements__ripple--2 {
    left: 4.267vw;
    top: 212.656vw; /* 55 + 742.46 */
    width: 36.87vw;
  }

  /*
    Текст возвращается в поток, а стихии становятся фоном своих колонок.
    Пиксельная привязка из макета здесь не держится: шрифт пока подменный,
    высота текста другая, и вторая колонка вылезала за сцену — наезжая на
    следующий блок. Фоном высота считается от содержимого и не разъезжается.
  */
  .elements__scene {
    padding-top: 0;
  }

  .elements__half {
    display: none;
  }

  .elements__content {
    position: static;
    width: auto;
    display: block;
  }

  .elements__columns {
    display: block;
  }

  .elements__col {
    /*
      На мобилке декор отсчитывается от своей колонки: высота колонки зависит
      от текста, и только так колоски и круги остаются на кромке волны.
      На вебе колонка намеренно не позиционирована — там отсчёт от сцены.
    */
    position: relative;
    width: auto;
    padding: 27.2vw 16px 64px; /* волна занимает верх фона */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }

  .elements__col:first-child {
    background-image: url('../assets/block-3/earth-mob.svg');
    /* 64 из макета плюс 56, которые уходят под воду. */
    padding-bottom: 120px;
  }

  /*
    Вода заходит на землю с перекрытием. Над гребнем волны у картинки воды
    прозрачная полоса — без перекрытия сквозь неё светил фон страницы, и стык
    читался светлой щелью, хотя в макете граница — сама волна. Перекрытие с
    запасом: полоса тем глубже, чем выше колонка, потому что фон растянут по
    её высоте. Поля сверху и снизу увеличены на ту же величину, поэтому
    видимые отступы остались макетными.
  */
  .elements__col:last-child {
    background-image: url('../assets/block-3/water-mob.svg');
    margin-top: -56px;
    padding-top: calc(27.2vw + 56px);
  }

  /*
    Декор считается долями ВЫСОТЫ колонки, а не ширины экрана. Фон растянут по
    высоте колонки (`background-size: 100% 100%`), и кромка волны едет вместе с
    текстом: в долях ширины декор от неё отрывался — колоски оказывались втрое
    ниже, чем в макете. Проценты у `top` берутся как раз от высоты колонки,
    поэтому декор держится за волну при любой высоте текста.

    Из макета (земля 375×583, вода 375×559): низ всех трёх колосков стоит на
    55 — это 9.43% высоты; круги на 92.6 и 138.5 — 16.56% и 24.78%.
  */
  .elements__wheat {
    width: 7.374%; /* 27.65 из 375 */
    top: 9.434%;
    /* Привязка по низу: колоски разной высоты, а корни у всех на одной линии. */
    transform: translateY(-100%);
  }

  .elements__wheat--1 {
    left: 37.6%; /* 141 из 375 */
  }

  .elements__wheat--2 {
    left: 67.917%; /* 254.7 */
  }

  .elements__wheat--3 {
    left: 53.824%; /* 201.8 */
  }

  .elements__ripple--1 {
    left: 31.92%; /* 119.7 из 375 */
    top: 16.564%;
    width: 63.814%; /* 239.3 */
  }

  .elements__ripple--2 {
    left: 4.267%; /* 16 из 375 */
    top: 24.776%;
    width: 36.87%; /* 138.3 */
  }

  .elements__subtitle {
    font-size: 20px;
    gap: 7px;
  }

  .elements__subtitle img {
    width: 156px;
  }

  .elements__subtitle span {
    padding-bottom: 8px;
  }

  .elements__body {
    margin-bottom: 48px; /* 48 + 16 от gap = 64 из макета */
    font-size: 12px;
  }

  /* На мобилке колонка по содержимому, прижимать кнопку не к чему. */
  .elements__btn {
    margin-top: 0;
  }

  /* Всходы и круги по нажатию — свои картинки и свои размеры. */
  .elements__grown--wheat {
    width: 7.374%;
  }

  .elements__grown--ripple1 {
    width: 63.814%;
  }

  .elements__grown--ripple2 {
    width: 36.87%;
  }
}

/* ================================================================== *
 * 4 Блок — кому полезно и кто внутри
 * Макеты: 4443:81148 (веб, 1198×537), 4443:80721 (мобилка, 375×635)
 * ================================================================== */

.audience {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(1198px, 100% - 240px);
  margin: 320px auto 0;
}

.audience__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 47.412%; /* 568 из 1198 */
}

.audience__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.audience__script {
  display: inline-block;
  height: auto;
  vertical-align: baseline;
  /* Обе рукописи в макете чуть повёрнуты и заходят на строку сверху. */
  transform: rotate(1.3deg);
}

.audience__script--polezno {
  width: 251px;
  margin-bottom: -14px;
}

.audience__script--sostoit {
  width: 281px;
  margin-bottom: -10px;
  transform: none;
}

/* ---- Карточка-карусель ---- */

/*
  Высота из макета — минимальная, а не жёсткая: шрифт пока подменный, и самый
  длинный текст в неё не влезает. Клик по карточке ведёт на следующую, отсюда
  курсор.
*/
.usecase {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 380px;
  padding: 48px;
  border-radius: 32px;
  background-image: linear-gradient(-67.93deg, #c7d6e1 0%, #e6eef5 100%);
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.7));
  cursor: pointer;
}

/*
  Все шесть текстов лежат в одной ячейке сетки: так высота считается по самому
  длинному, и карточка не прыгает при перелистывании.
*/
.usecase__slides {
  display: grid;
}

.usecase__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 400ms ease,
    visibility 400ms;
}

.usecase__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.usecase__title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.usecase__body {
  font-size: 20px;
  line-height: 1.4;
}

.cardnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cardnav__dot {
  position: relative;
  width: 64px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--color-gray);
  cursor: pointer;
}

/*
  Активный отрезок наливается красным за время показа карточки — в макете он
  закрашен наполовину, то есть застигнут в середине отсчёта. Переключение
  карточки повешено на конец этой анимации, чтобы полоска и текст не
  разъезжались. Наведение на карточку ставит отсчёт на паузу.
*/
.cardnav__dot--active::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 10px;
  background: var(--color-red);
  animation: cardnav-fill var(--usecase-interval, 8s) linear forwards;
}

.usecase:hover .cardnav__dot--active::after {
  animation-play-state: paused;
}

@keyframes cardnav-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/*
  Без анимаций карусель сама не листается — двигать её нечему. Отрезок просто
  показывает выбранную карточку, перелистывание остаётся на кнопках и клике.
*/
@media (prefers-reduced-motion: reduce) {
  .cardnav__dot--active::after {
    width: 100%;
    animation: none;
  }
}

/* ---- Бегущие строки ---- */

.whorows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 372px;
  overflow: hidden;
}

/*
  Каждая строка едет бесконечно: сдвигается ровно на один набор пилюль и
  возвращается в начало. И сдвиг, и длительность, и число копий набора считает
  скрипт — см. initWhoRows. Разрыв справа входит в период, поэтому он здесь,
  а не только между пилюлями.
*/
.whorow {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  flex-shrink: 0;
  white-space: nowrap;
  animation: whorow-run var(--whorow-duration, 60s) linear infinite;
  /* Слой готовится заранее — иначе въезжающие пилюли дорисовываются рывком. */
  will-change: transform;
}

/* Соседние строки едут навстречу друг другу. */
.whorow:nth-child(even) {
  animation-direction: reverse;
}

@keyframes whorow-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--whorow-shift, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .whorow {
    animation: none;
  }
}

/*
  Тень именно box-shadow, а не drop-shadow, как у остальных элементов макета:
  пилюля — обычный скруглённый прямоугольник, и выглядят они одинаково, но
  фильтр рисуется в отдельный буфер и пересчитывается на каждом кадре. На
  едущей ленте из двадцати с лишним пилюль это давало рывки и подвисания, а
  въезжающие пилюли появлялись не сразу, а уже наполовину внутри.
*/
.whorow__chip {
  flex-shrink: 0;
  padding: 16px;
  border-radius: 56px;
  background: #fff;
  font-size: 20px;
  line-height: 1.4;
  box-shadow: 4px 4px 4px rgba(126, 138, 150, 0.5);
  transition: background 200ms ease;
}

/* Состояние Active из макета — розовая заливка под курсором. Сама лента при
   этом тормозит, скорость гасит initWhoRows. */
.whorow__chip:hover {
  background: var(--color-pink);
}

@media (max-width: 1023px) {
  /* На мобилке половины идут друг под другом. */
  .audience {
    flex-direction: column;
    gap: 80px;
    width: 100%;
    margin-top: 160px;
  }

  .audience__col {
    width: 100%;
    gap: 16px;
    padding: 0 16px;
  }

  .audience__title {
    font-size: 27px;
  }

  .audience__script--polezno {
    width: 123px;
    margin-bottom: -6px;
  }

  .audience__script--sostoit {
    width: 128px;
    margin-bottom: -3px;
  }

  .usecase {
    /* Тоже минимум, а не жёсткая высота: см. веб. */
    min-height: 224px;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
  }

  .usecase__title {
    font-size: 20px;
  }

  .usecase__body {
    font-size: 12px;
    line-height: 1.1;
  }

  /* Отрезки мельче и стоят подряд, а не враспор. */
  .cardnav {
    justify-content: flex-start;
    gap: 16px;
  }

  .cardnav__dot {
    width: 32px;
  }

  .whorows {
    height: 188px;
    gap: 8px;
    /* Строки выходят за края экрана, поэтому поле снимаем. */
    margin: 0 -16px;
    padding: 0 16px;
  }

  .whorow {
    gap: 8px;
  }

  .whorow__chip {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1.1;
    box-shadow: 5px 5px 5px rgba(126, 138, 150, 0.5);
  }
}

/* ================================================================== *
 * 5 Блок — отзывы
 * Макеты: 4443:81207 (веб, 1200×1235), 4443:80771 (мобилка, 343×366)
 * ================================================================== */

.quotes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

/*
  Гроздь отзывов: карточки лежат по координатам макета, каждая в своей
  ячейке — ячейка задаёт габарит с учётом поворота, а карточка внутри
  центрируется. Так поворот не съезжает, когда текст набирается другой
  высоты подменным шрифтом.
*/
.quotes__cluster {
  position: relative;
  width: 100%;
  max-width: 1200px;
}

.quotes__cluster--top {
  height: 480px;
}

.quotes__cluster--bottom {
  height: 511px;
}

/*
  Слот качается, карточка внутри тянется за курсором. Раздельно, потому что
  оба движения — transform: на одном элементе второе затирало бы первое.
  Покачивание считает initQuoteFloat.
*/
.quotes__slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--float-y, 0px));
}

/*
  Наклон карточки лежит в переменной, а не в transform: движение за курсором
  собирается здесь же, и запись в transform выпрямляла бы карточку.
*/
.quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 380px;
  margin: 0;
  padding: 32px;
  border-radius: 32px;
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.7));
  transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)) rotate(var(--tilt, 0deg));
}

/*
  Три темы карточек. Углы градиента в макете гуляют в пределах пары градусов
  от карточки к карточке — здесь по одному углу на тему: разница неразличима,
  а правил втрое меньше.
*/
.quote--light {
  background-image: linear-gradient(-68deg, #c7d6e1 0%, #e6eef5 100%);
  color: var(--color-ink);
}

.quote--light .quote__course {
  color: var(--color-red);
}

.quote--dark {
  background-image: linear-gradient(148deg, #2c3a44 0%, #a7b8c5 100%);
  color: #fff;
}

.quote--dark .quote__course {
  color: var(--color-pink);
}

.quote--pink {
  background-image: linear-gradient(141deg, #f6e3e7 0%, #eaf3f8 100%);
  color: var(--color-ink);
}

.quote--pink .quote__course {
  color: var(--color-blue);
}

.quote__who {
  display: flex;
  flex-direction: column;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.quote__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
}

.quotes__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 970px;
  max-width: 100%;
  text-align: center;
}

.quotes__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.quotes__script {
  display: inline-block;
  width: 390px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -10px;
}

.quotes__lead {
  width: 880px;
  max-width: 100%;
  font-size: 20px;
  line-height: 1.4;
}

/* Стрелки — только для карусели на мобилке. */
.quotes__arrows {
  display: none;
}

@media (max-width: 1023px) {
  /*
    Механика другая: вместо разброса одна карточка и стрелки. Пока показываем
    первую, перелистывание появится вместе с остальной интерактивностью.
  */
  .quotes {
    display: grid;
    grid-template-areas:
      'head'
      'cards'
      'nav';
    /* На вебе блок центрирует содержимое; здесь карточка должна растягиваться
       на всю область, иначе она не выберет её высоту. */
    align-items: stretch;
    width: min(343px, 100% - 32px);
    gap: 16px;
    margin-top: 160px;
    /* Смахивание по карточке не должно уводить страницу вбок. */
    touch-action: pan-y;
  }

  .quotes__slot {
    position: static;
    width: auto !important;
    height: auto !important;
  }

  /*
    Карусель из всех десяти отзывов. Грозди распускаются (`display: contents`),
    их слоты становятся ячейками сетки блока и ложатся в одну область — стопкой.
    Высота считается по самой длинной карточке и не скачет при листании.

    Порядок в разметке задан гроздьями веба и на мобилке другой — его знает
    скрипт по `data-order`.
  */
  .quotes__cluster {
    display: contents;
  }

  /*
    Все карточки лежат в одной области сетки и остаются в потоке даже спрятанные,
    поэтому высота области равна самому длинному отзыву и не меняется при
    листании — стрелки под ней стоят намертво.

    Карточка растянута на всю область: иначе под короткими отзывами зияла бы
    пустота высотой с самый длинный.
  */
  .quotes__slot {
    position: static;
    grid-area: cards;
    align-items: stretch;
    width: auto !important;
    height: auto !important;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 260ms ease,
      transform 260ms ease,
      visibility 260ms;
  }

  .quotes__slot.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Въезд с той стороны, куда листаем: без этого смена читается как мигание. */
  .quotes__slot.is-entering-next {
    transform: translateX(32px);
  }

  .quotes__slot.is-entering-prev {
    transform: translateX(-32px);
  }

  .quote {
    width: 100%;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    transform: none !important;
  }

  .quote__who {
    font-size: 20px;
  }

  .quote__text {
    font-size: 12px;
  }

  /* Заголовок идёт перед карточкой. */
  .quotes__intro {
    grid-area: head;
    align-items: flex-start;
    width: auto;
    gap: 16px;
    text-align: left;
  }

  .quotes__title {
    font-size: 27px;
  }

  .quotes__script {
    width: 178px;
    margin-bottom: -4px;
  }

  .quotes__lead {
    width: auto;
    font-size: 17px;
    line-height: 1.1;
  }

  .quotes__arrows {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }

  .quotes__arrow {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .quotes__arrow img {
    width: 35px;
    height: auto;
  }

  .quotes__arrow--prev img {
    transform: scaleX(-1);
  }
}

/* ================================================================== *
 * 6 Блок — что есть в Колоске
 * Макеты: 4443:80948 (веб, 1200×1211), 4443:80785 (мобилка, 375×1419)
 * ================================================================== */

.platform {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

.platform__intro,
.platform__outro {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.platform__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.platform__script--est {
  display: inline-block;
  width: 149px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -9px;
}

.platform__lead {
  font-size: 20px;
  line-height: 1.4;
}

/* Доли колонки 1200 из макета: 816 + 80 + 295. */
.platform__body {
  display: flex;
  align-items: flex-start;
  gap: 6.667%;
}

.platform__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 68%;
  min-width: 0;
}

.platform__note img {
  width: 644px;
  height: auto;
}

/*
  Ровно два ряда по две вкладки, как в макете. На `flex-wrap` полагаться
  нельзя: перенос зависит от ширины шрифта, а он пока подменный — вкладки
  разъезжались на три ряда.
*/
.platform__tabs {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px;
  justify-content: start;
  margin-top: 16px;
}

.platform__tab {
  height: 48px;
  padding: 8px 24px;
  border: 0;
  border-radius: 32px;
  transition:
    background 200ms ease,
    color 200ms ease;
  background: #fff;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
}

.platform__tab--active {
  background: var(--color-red-soft);
  color: #fff;
}

.platform__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.platform__item {
  padding: 24px 32px;
  color: #7e8a96;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

/*
  Списки разделов лежат стопкой в одной ячейке сетки: высота колонки считается
  по самому длинному, и блок не прыгает при переключении вкладки.
*/
.platform__lists {
  display: grid;
  margin-top: 16px;
}

/* На время замера высот переходы выключены — иначе мерялось бы промежуточное. */
.platform__lists.is-measuring .platform__item-note {
  transition: none;
}

.platform__list {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 220ms ease,
    visibility 220ms;
}

.platform__list.is-active {
  visibility: visible;
  opacity: 1;
}

.platform__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 32px;
  border: 0;
  /* Скругление как у карточек ценностей во втором блоке. */
  border-radius: 16px;
  background: none;
  color: var(--color-gray);
  font-family: inherit;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease;
}

/*
  Подсветка отдельным слоем и наезжает с той стороны, откуда набирается тон:
  `background-image` переходами не анимируется, градиенты браузер не смешивает.
*/
.platform__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(77, 109, 154, 0), rgba(77, 109, 154, 0.25));
  transform: scaleX(0);
  transform-origin: right center;
  transition:
    transform 300ms ease,
    opacity 220ms ease;
}

/*
  Под курсором пункт подсвечивается вполсилы. Раскрывать по наведению нельзя —
  пока ведёшь курсор к телефону, мышь проходит по соседним пунктам и экран
  успевает смениться. Но и оставлять наведение без ответа плохо: список
  выглядел бы нерабочим, и о спрятанных подписях никто бы не догадался.
  Приглушённая подсветка отвечает на курсор и при этом не спорит с выбранным.
*/
.platform__item:hover::before {
  transform: scaleX(1);
  opacity: 0.45;
}

.platform__item:hover {
  color: var(--color-ink);
}

/*
  Выбранный пункт: подсветка уходит вправо (не влево, как у карточек ценностей
  на вебе), заголовок темнеет, под ним появляется вторая строка.
*/
.platform__item.is-active::before,
.platform__item:hover.is-active::before {
  transform: scaleX(1);
  opacity: 1;
}

.platform__item.is-active {
  color: var(--color-ink);
}

/*
  Подпись свёрнута, пока пункт не выбран. Высота анимируется через строку
  сетки 0fr → 1fr: так не нужно ни измерять текст скриптом, ни знать его
  высоту заранее, а перенос строк при другой ширине ничего не ломает.
*/
.platform__item-note {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 260ms ease,
    margin-top 260ms ease,
    opacity 200ms ease;
}

.platform__item.is-active .platform__item-note {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
}

/*
  Отбивка от заголовка внутри схлопываемой части, а не разрывом у пункта:
  иначе в свёрнутом виде осталась бы полоса пустого места в 16 пикселей.
*/
.platform__note-line {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.1;
}

/*
  Рамка телефона рисуется здесь (макет 4443:80959), а у экспортированных
  экранов своя была срезана при сборке ассетов — иначе выходила рамка в рамке.
*/
.platform__phone {
  position: relative;
  flex-shrink: 0;
  width: 24.583%;
  /* Пропорции рамки из макета — высота считается от ширины, а не задаётся. */
  aspect-ratio: 295 / 640;
  border: 8px solid var(--color-ink);
  border-radius: 32px;
  overflow: hidden;
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.7));
}

.platform__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Экран заполняет рамку целиком: пропорции у него и у рамки почти совпадают. */
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 300ms ease;
}

.platform__screen.is-active {
  opacity: 1;
}

.platform__closing {
  position: relative;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.platform__closing-script img {
  width: 652px;
  height: auto;
}

/* Росчерк после рукописи — продолжение строки, не отдельный элемент. */
.platform__dash {
  position: absolute;
  left: 652px;
  top: 27px;
}

.platform__dash img {
  width: 159px;
  height: auto;
}

.platform__closing-text {
  display: block;
  margin-top: 8px;
}

@media (max-width: 1023px) {
  .platform {
    width: 100%;
    gap: 64px;
    margin-top: 160px;
  }

  .platform__intro,
  .platform__outro {
    gap: 16px;
    padding: 0 16px;
  }

  .platform__title {
    font-size: 27px;
  }

  .platform__script--est {
    width: 66px;
    margin-bottom: -4px;
  }

  .platform__lead {
    font-size: 17px;
    line-height: 1.1;
  }

  /* Телефон уходит под рукопись, а не вбок. */
  .platform__body {
    flex-direction: column;
    /*
      На вебе колонка прижата к левому краю, на мобилке — растягивается. Без
      этого элементы получают ширину по содержимому: строка вкладок разъезжалась
      до 774 и тянула за собой всю страницу вбок.
    */
    align-items: stretch;
    gap: 8px;
    padding: 0 16px;
  }

  /*
    Колонка распускается: рукопись, вкладки и список должны встать по разные
    стороны от телефона, а он лежит в соседнем контейнере — `order` внутри
    разных родителей их не переставит.
  */
  .platform__main {
    display: contents;
  }

  .platform__note {
    order: 1;
  }

  .platform__note img {
    width: 100%;
  }

  .platform__phone {
    order: 2;
    align-self: center;
    width: 227px;
    height: 480px;
    margin-top: -8px;
  }

  /*
    Разделы в одну строку с горизонтальной прокруткой: в макете они обрезаны
    краем экрана, то есть предполагается смахивание.
  */
  .platform__tabs {
    order: 3;
    display: flex;
    flex-wrap: nowrap;
    /*
      Без min-width флекс-элемент не сжимается ниже своего содержимого
      (min-width: auto), строка вкладок растягивала страницу на 774 и вся
      мобилка ехала вбок.
    */
    min-width: 0;
    gap: 16px;
    margin: 0 -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .platform__tabs::-webkit-scrollbar {
    display: none;
  }

  .platform__tab {
    height: auto;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 12px;
    line-height: 1.1;
  }

  /* Пункты на мобилке разделены линиями — в макете это «аккордеон». */
  .platform__lists {
    order: 4;
    margin: 16px -16px 0;
  }

  /*
    На мобилке пункты идут во всю ширину экрана и разделены линиями (макет
    4443:80278) — скругления у подсветки нет, оно только на вебе.
  */
  .platform__item {
    border-radius: 0;
    border-bottom: 1px solid rgba(77, 109, 154, 0.2);
    font-size: 20px;
  }

  /* Подпись отбита от заголовка на 8, а не на 16 как на вебе. */
  .platform__item.is-active .platform__item-note {
    margin-top: 8px;
  }

  .platform__note-line {
    font-size: 12px;
  }

  .platform__closing {
    font-size: 27px;
  }

  .platform__closing-script img {
    width: 288px;
  }

  /* На мобилке рукопись в две строки, росчерк встаёт в её конец. */
  .platform__dash {
    position: static;
    display: inline-block;
    vertical-align: baseline;
  }

  .platform__dash img {
    width: 38px;
  }

  .platform__closing-text {
    display: inline;
    margin-top: 0;
  }
}

/* ================================================================== *
 * 7 Блок — афиша
 * Макеты: 4443:81378 (веб, 1440×1046), 4443:80893 (мобилка, 375×568)
 * ================================================================== */

/*
  Блок во всю ширину с собственным градиентом — в отличие от остальных,
  которые стоят на фоне страницы. Угол свой, -69.52°, поэтому общий
  --intro-gradient не подходит.
*/
.events {
  margin-top: 320px;
  padding: 120px 0;
  background: linear-gradient(-69.52deg, var(--color-bg-deep) 0%, var(--color-bg-light) 100%);
}

/*
  Отступ только слева: ряд карточек уходит за правый край — так в макете
  показано, что за второй карточкой есть третья.
*/
.events__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: max(120px, (100% - 1200px) / 2);
}

.events__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.events__eyebrow {
  padding: 8px 16px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(126, 138, 150, 0.5);
  font-size: 20px;
  line-height: 1.4;
}

.events__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

/* Рукопись стоит вместо слова «события» — в макете сам текст прозрачный. */
.events__script {
  display: inline-block;
  width: 275px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -8px;
}

/*
  Ряд карточек и стрелки живут в колонке 1152 (560 + 32 + 560), прижатой к
  левому полю: справа в макете остаётся 168 незанятых. Стрелки центрируются
  именно по этой колонке, а не по строке целиком.
*/
.events__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: min(1152px, 100%);
}

.events__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.events__track::-webkit-scrollbar {
  display: none;
}

/* ---- Карточка события ---- */

.event {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 auto;
  width: 560px;
  padding: 32px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(126, 138, 150, 0.7);
  text-align: left;
}

.event__head,
.event__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event__chips {
  display: flex;
  align-items: center;
  gap: 16px;
}

.event__chip {
  padding: 8px 16px;
  border-radius: 32px;
  box-shadow: 5px 5px 10px rgba(126, 138, 150, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
}

.event__chip--place {
  background: var(--color-blue);
}

/* На вебе формат события не показан — метка только в мобильном макете. */
.event__chip--format {
  display: none;
}

.event__date {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.event__name {
  color: var(--color-red-soft);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

/* Подпись выровнена по нижнему краю фото, а не по верхнему. */
.event__speaker {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

/*
  Подложка нужна, потому что самого файла в репозитории нет: фото реальных
  людей не коммитим (assets/people/ в .gitignore) — без неё пустой кадр
  читался бы как поломка вёрстки.
*/
.event__photo {
  flex: 0 0 auto;
  background: var(--color-bg-light);
  width: 160px;
  height: 160px;
  border-radius: 16px;
  object-fit: cover;
}

.event__person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.event__person-name {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.event__person-role {
  font-size: 20px;
  line-height: 1.4;
}

/*
  Спикер ещё не назначен — в макете на месте фото серый квадрат.
*/
.event__photo--empty {
  background: var(--color-gray);
}

.event__more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Кнопка белая на белой карточке — отделена только тенью. */
.event__toggle {
  align-self: flex-start;
  padding: 8px 16px;
  border: 0;
  border-radius: 32px;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(126, 138, 150, 0.5);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.1;
  cursor: pointer;
}

/* Подпись на кнопке меняется вместе с состоянием: «Подробнее» ↔ «Скрыть». */
.event__toggle-hide,
.event__toggle[aria-expanded='true'] .event__toggle-show {
  display: none;
}

.event__toggle[aria-expanded='true'] .event__toggle-hide {
  display: inline;
}

/*
  Описание раскрывается строкой сетки, как подписи в шестом блоке: высоту
  текста не нужно ни знать заранее, ни измерять скриптом.
*/
.event__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}

.event__toggle[aria-expanded='true'] + .event__details {
  grid-template-rows: 1fr;
}

.event__details-text {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.1;
}

.events__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.events__arrow {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.events__arrow img {
  width: 100px;
  height: auto;
}

.events__arrow--prev img {
  transform: scaleX(-1);
}

@media (max-width: 1023px) {
  /* На мобилке блок без своей подложки — стоит на фоне страницы. */
  .events {
    margin-top: 160px;
    padding: 0;
    background: none;
  }

  .events__content {
    width: 100%;
  }

  .events__inner {
    width: min(343px, 100% - 32px);
    margin: 0 auto;
    padding-left: 0;
  }

  /* Плашка розовая вместо белой — единственная в макетах с таким цветом. */
  .events__eyebrow {
    background: var(--color-pink);
    color: #fff;
    font-size: 12px;
    line-height: 1.1;
  }

  .events__title {
    font-size: 27px;
  }

  .events__script {
    width: 128px;
    margin-bottom: -3px;
  }

  /* Карточка одна на ширину экрана, остальные — за краем. */
  .events__track {
    margin: 0 -16px;
    padding: 0 16px 8px;
  }

  .event {
    width: min(343px, calc(100vw - 32px));
    padding: 16px;
    border-radius: 16px;
  }

  .event__chip {
    font-size: 12px;
    line-height: 1.1;
  }

  .event__chip--place {
    background: var(--color-pink);
  }

  .event__chip--format {
    display: block;
    background: var(--color-blue);
  }

  .event__date {
    font-size: 20px;
  }

  .event__name {
    font-size: 27px;
  }

  .event__speaker {
    gap: 8px;
  }

  .event__photo {
    width: 128px;
    height: 128px;
  }

  .event__person-name {
    font-size: 20px;
  }

  .event__person-role {
    font-size: 12px;
    line-height: 1.1;
  }

  .event__toggle,
  .event__details-text {
    font-size: 12px;
  }

  .events__arrow img {
    width: 35px;
  }
}

/* ================================================================== *
 * 8 Блок — как попасть
 * Макеты: 4443:81291 (веб, 1200×806), 4443:80809 (мобилка, 375×938)
 * ================================================================== */

.join {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

.join__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.join__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.join__script {
  display: inline-block;
  width: 243px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -9px;
}

.join__lead {
  font-size: 20px;
  line-height: 1.4;
}

/*
  Колонки заполняются сверху вниз: 1–3 слева, 4–6 справа. Отсюда поток по
  колонкам — порядок в разметке остаётся сквозным, 1–6.

  Ряды фиксированной высоты (116 в макете) не годятся: шрифт пока подменный,
  и длинный шестой пункт вылезал из ряда. Минимум держим, дальше по тексту.
*/
.join__steps {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 55.833% 44.167%; /* 670 и 530 из 1200 */
  grid-template-rows: repeat(3, minmax(116px, auto));
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  transition: background-image 200ms ease;
}

/* Левая колонка шире правой и отбита от неё справа, правая — слева. */
.step:nth-child(-n + 3) {
  padding-right: 16px;
}

.step:nth-child(n + 4) {
  padding-left: 16px;
}

/*
  Номер приподнят над серединой пункта: в макете у него отступ снизу 40 при
  высоте 44 — цифра встаёт к заголовку, а не к середине текста.
*/
.step__num {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  margin-bottom: 40px;
}

/*
  Вариант Variant2 у пунктов (`4443:80326`, `4443:80352`, на мобилке
  `4443:80339`) — та же подсветка градиентом вправо, что у карточек ценностей.
  Ничего не раскрывает, поэтому по наведению.
*/
.step:hover {
  background-image: linear-gradient(90deg, rgba(77, 109, 154, 0), rgba(77, 109, 154, 0.25));
}

/*
  Скругление там, где у подсветки есть край: тон набирается вправо, и справа
  она обрывается отвесно. Слева край не нужен — там она уже прозрачная.
*/
.step {
  border-radius: 0 32px 32px 0;
}

.step__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.step__title {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.step__note {
  font-size: 15px;
  line-height: 1.1;
}

.join__footnote {
  font-size: 15px;
  line-height: 1.1;
}

@media (max-width: 1023px) {
  .join {
    width: 100%;
    margin-top: 160px;
    gap: 64px;
  }

  .join__head {
    gap: 16px;
    padding: 0 16px;
  }

  .join__title {
    font-size: 27px;
  }

  .join__script {
    width: 116px;
    margin-bottom: -4px;
  }

  .join__lead {
    font-size: 17px;
    line-height: 1.1;
  }

  /* Один столбец во всю ширину, отступы у каждого пункта свои. */
  .join__steps {
    display: flex;
    flex-direction: column;
  }

  .step,
  .step:nth-child(-n + 3),
  .step:nth-child(n + 4) {
    align-items: flex-start;
    padding: 24px 16px;
    border-radius: 0 16px 16px 0;
  }

  /* На мобилке номер стоит вровень с заголовком, без подъёма. */
  .step__num {
    margin-bottom: 0;
  }

  .step__title {
    font-size: 20px;
  }

  .step__note {
    font-size: 12px;
  }

  .join__footnote {
    padding: 0 16px;
    font-size: 12px;
  }
}

/* ================================================================== *
 * 9 Блок — что входит в подписку
 * Макеты: 4443:81305 (веб, 1200×572), 4443:80824 (мобилка, 343×1041)
 * ================================================================== */

.pricing {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

.pricing__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.pricing__script {
  display: inline-block;
  width: 236px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -10px;
}

.pricing__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pricing__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 504px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.1;
}

.pricing__item img {
  flex: 0 0 auto;
  width: 24px;
  height: 27px;
}

/* ---- Карточка тарифа ---- */

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 624px;
  height: 480px;
  padding: 32px;
  border-radius: 32px;
  background: #fff;
  /*
    Тень задана по контуру, а не прямоугольником: drop-shadow, а не box-shadow —
    у карточки скруглённые углы, и разница на них видна.
  */
  filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.7));
}

.plan__periods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* На вебе четыре периода лежат в одной серой подложке. */
.plan__row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  border-radius: 32px;
  background: var(--color-chip);
}

.plan__period {
  padding: 8px 24px;
  border: 0;
  border-radius: 32px;
  background: none;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

/*
  У каждого тарифа свой цвет выбранной пилюли — серый, розовый, синий, красный
  и снова синий у оплаты картой не РФ.
*/
.plan__period.is-active {
  color: #fff;
}

.plan__period[data-plan='0'].is-active {
  background: var(--color-gray);
}

.plan__period[data-plan='1'].is-active {
  background: var(--color-pink);
}

.plan__period[data-plan='2'].is-active,
.plan__period[data-plan='4'].is-active {
  background: var(--color-blue);
}

.plan__period[data-plan='3'].is-active {
  background: var(--color-red-soft);
}

.plan__period--foreign {
  background: var(--color-chip);
}

/*
  Описания тарифов лежат стопкой в одной ячейке сетки: карточка фиксированной
  высоты, и так при переключении ничего не прыгает.
*/
.plan__bodies {
  display: grid;
}

.plan__price {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease,
    visibility 200ms;
}

.plan__price.is-active {
  opacity: 1;
  visibility: visible;
}

.plan__note {
  font-size: 20px;
  line-height: 1.4;
}

/* Приписка про налог есть только у оплаты картой не РФ. */
.plan__fineprint {
  font-size: 15px;
  line-height: 1.1;
}

.plan__name {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.plan__sum {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.plan__amount {
  font-size: 60px;
}

.plan__currency {
  font-size: 25px;
}

.plan__cta {
  filter: drop-shadow(4px 4px 4px rgba(126, 138, 150, 0.5));
}

@media (max-width: 1023px) {
  .pricing {
    width: min(343px, 100% - 32px);
    margin-top: 160px;
  }

  .pricing__title {
    font-size: 27px;
  }

  .pricing__script {
    width: 104px;
    margin-bottom: -4px;
  }

  /* Список и карточка идут друг под другом. */
  .pricing__content {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .pricing__list {
    width: 100%;
  }

  .pricing__item {
    font-size: 12px;
  }

  .plan {
    width: 100%;
    height: 554px;
  }

  /*
    Подложки под рядом периодов нет — фон у каждой пилюли свой, и они разбиты
    по две в ряд. Ровно два столбца, а не `flex-wrap`: перенос зависит от
    ширины шрифта, а он пока подменный.
  */
  .plan__row {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    background: none;
    border-radius: 0;
  }

  .plan__period {
    padding: 8px 16px;
    background: var(--color-chip);
    font-size: 17px;
    line-height: 1.1;
  }

  .plan__period--foreign {
    font-size: 12px;
  }

  .plan__name {
    font-size: 20px;
  }

  .plan__currency {
    font-size: 20px;
  }

  .plan__note {
    font-size: 17px;
    line-height: 1.1;
  }

  .plan__fineprint {
    font-size: 12px;
  }

  /* Кнопка тарифа шире общей мобильной: во всю карточку и с большими полями. */
  .plan__cta {
    width: 100%;
    padding: 16px 24px;
    filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
  }
}

/* ================================================================== *
 * 10 Блок — «давайте оставаться в одном поле»
 * Макеты: 4443:81339 (веб, 1200×239), 4443:80854 (мобилка, 375×156)
 * ================================================================== */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

.closing__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.closing__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* Вторая строка заголовка целиком рукописная — текстом её в макете нет. */
.closing__script {
  width: 632px;
  height: auto;
}

.closing__cta {
  filter: drop-shadow(4px 4px 4px rgba(126, 138, 150, 0.5));
}

@media (max-width: 1023px) {
  .closing {
    width: min(343px, 100% - 32px);
    margin-top: 320px;
  }

  /* На мобилке строки стоят вплотную, без разрыва. */
  .closing__text {
    gap: 0;
  }

  .closing__title {
    font-size: 27px;
  }

  .closing__script {
    width: 100%;
  }

  .closing__cta {
    width: 279px;
    padding: 16px 24px;
    filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
  }
}

/* ================================================================== *
 * 11 Блок — вопросы и ответы
 * Макеты: 4443:81345 (веб, 1200×418), 4443:80860 (мобилка, 375×297)
 * ================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: min(1200px, 100% - 240px);
  margin: 320px auto 0;
}

.faq__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.faq__script {
  display: inline-block;
  width: 343px;
  height: auto;
  vertical-align: baseline;
  margin-bottom: -10px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строки идут вплотную, без разделителей — так в макете. */
.faq__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  /* Тон набирается слева, там у подсветки край — его и скругляем. */
  border-radius: 32px 0 0 32px;
}

/* Вся строка — кнопка: раскрывает нажатие в любом её месте. */
.faq__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  cursor: pointer;
}

/*
  Подсветка и под курсором, и у раскрытого вопроса — в макете это состояния
  Active и Open, фон у них одинаковый. Тон набирается слева; на мобилке
  наоборот, справа.

  По комментарию дизайнера заливка должна наезжать, а не появляться разом.
  Лежит она отдельным слоем и раздвигается по ширине: `background-image`
  переходами не анимируется — градиенты браузер не смешивает, и до этого
  подсветка просто щёлкала. Слой уезжает под текст отрицательным z-index,
  растёт от той стороны, с которой набирается тон.
*/
.faq__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(77, 109, 154, 0.25), rgba(77, 109, 154, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms ease;
}

.faq__item:hover::before,
.faq__item:has(.faq__toggle[aria-expanded='true'])::before {
  transform: scaleX(1);
}

/*
  Ответ раскрывается строкой сетки — высоту текста не нужно измерять. Отбивка
  от вопроса лежит внутри схлопываемой части, иначе в свёрнутом виде осталась
  бы полоса пустого места.
*/
/*
  Отбивка от вопроса — внешним отступом, а не внутри схлопываемой части:
  строка сетки 0fr обнуляет содержимое, но не собственные поля элемента, и в
  свёрнутом виде оставалась бы полоса в 16 пикселей. Оба свойства
  анимируются вместе, поэтому раскрытие остаётся плавным.
*/
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  transition:
    grid-template-rows 260ms ease,
    margin-top 260ms ease;
}

.faq__row:has(.faq__toggle[aria-expanded='true']) + .faq__answer {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.faq__answer-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.1;
}

.faq__answer-text p {
  margin: 0;
}

/* Раскрытый вопрос — стрелка переворачивается вверх, с поворотом на глазах. */
.faq__toggle img {
  transition: transform 240ms ease;
}

.faq__toggle[aria-expanded='true'] img {
  transform: scaleY(-1);
}

.faq__question {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.faq__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 45px;
  background: #fff;
  filter: drop-shadow(4px 4px 4px rgba(126, 138, 150, 0.5));
  cursor: pointer;
}

.faq__toggle img {
  width: 23px;
  height: auto;
  transition: transform 200ms ease;
}

@media (max-width: 1023px) {
  .faq {
    width: 100%;
    gap: 32px;
    margin-top: 320px;
  }

  .faq__title {
    padding: 0 16px;
    font-size: 27px;
  }

  .faq__script {
    width: 154px;
    margin-bottom: -3px;
  }

  .faq__item {
    padding: 16px;
    /* На мобилке тон набирается вправо, значит и край справа. */
    border-radius: 0 16px 16px 0;
  }

  .faq__row {
    gap: 16px;
  }

  /* На мобилке тон набирается вправо — как у карточек ценностей. */
  .faq__item::before {
    background-image: linear-gradient(90deg, rgba(77, 109, 154, 0), rgba(77, 109, 154, 0.25));
    transform-origin: right center;
  }

  .faq__answer-text {
    font-size: 12px;
  }

  .faq__question {
    font-size: 20px;
  }

  /* На мобилке кнопка строго круглая, 48×48. */
  .faq__toggle {
    width: 48px;
    height: 48px;
    padding: 0;
    filter: drop-shadow(5px 5px 5px rgba(126, 138, 150, 0.5));
  }

  .faq__toggle img {
    width: 21px;
  }
}

/* ================================================================== *
 * 12 Блок — подвал
 * Макеты: 4443:81352 (веб, 1440×918), 4443:80867 (мобилка, 375×787)
 * ================================================================== */

/*
  Единственный тёмный блок страницы, во всю ширину. Отступ сверху здесь
  больше обычных 320 — в макете между вопросами и подвалом пустого поля
  примерно на 560.
*/
.footer {
  display: flex;
  flex-direction: column;
  gap: 120px;
  margin-top: 560px;
  /*
    Поля по вертикали 83, а не 120 из экспорта: у фрейма фиксированная высота
    918 и содержимое отцентровано, поэтому заданные 120 сжимаются до 83.
  */
  padding: 83px 120px;
  background: linear-gradient(142.26deg, #2c3a44 0%, #a7b8c5 100%);
  color: #fff;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 434px;
}

.footer__mark {
  width: 64px;
  height: auto;
}

/* Рукопись здесь белая — она лежит на тёмном, а не на фоне страницы. */
.footer__script {
  width: 434px;
  height: auto;
}

.footer__text {
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__heading {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.footer__lines {
  font-size: 20px;
  line-height: 1.4;
}

.footer__value {
  color: var(--color-pink);
  text-decoration: none;
}

.footer__docs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 752px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__docs a {
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  text-decoration: none;
}

.footer__docs a:hover,
.footer__value:hover {
  text-decoration: underline;
}

@media (max-width: 1023px) {
  /*
    Экспорт отдаёт мобильный фон радиальным градиентом, но по его матрице одна
    ось растянута почти в десять раз сильнее другой — цвет вдоль неё не
    меняется, и на деле это линейный переход по диагонали кадра (375×787,
    отсюда 154.5°). Радиальный градиент вместо него давал пятно.
  */
  .footer {
    gap: 56px;
    margin-top: 555px;
    padding: 80px 16px;
    background: linear-gradient(154.5deg, #2c3a44 0%, #a7b8c5 100%);
  }

  .footer__brand,
  .footer__docs {
    width: 100%;
  }

  .footer__script {
    width: 226px;
  }

  .footer__heading {
    font-size: 20px;
  }

  .footer__lines {
    font-size: 17px;
    line-height: 1.1;
  }

  .footer__docs a {
    font-size: 17px;
    line-height: 1.1;
  }
}