/* ============================================
   ПЕРВЫЙ ЭКРАН (hero)
   Синий фон, декоративные дуги, заголовок,
   кнопки и три белые карточки внизу.
   ============================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Первый экран занимает всю высоту окна.
     svh вместо vh: на телефонах vh считается без учёта адресной
     строки браузера, и низ блока уезжает под неё. Первая строка —
     запасная для старых браузеров, второй они не поймут. */
  min-height: 100vh;
  min-height: 100svh;
  /* Дуги и карточки выходят за границы блока — обрезаем лишнее */
  overflow: hidden;
  padding-bottom: 0;
  background-color: var(--color-brand);
}

/* --------------------------------------------
   Декоративные дуги на фоне
   -------------------------------------------- */
.hero__decor {
  position: absolute;
  inset: 0;
  /* Не перехватывает клики — это чистая декорация */
  pointer-events: none;
}

.hero__ring {
  position: absolute;
  border: 1.5px solid var(--color-decor);
  border-radius: 50%;
}

.hero__ring--1 {
  width: 620px;
  aspect-ratio: 1;
  top: -330px;
  left: -230px;
}

.hero__ring--2 {
  width: 880px;
  aspect-ratio: 1;
  top: -430px;
  left: -330px;
}

.hero__ring--3 {
  width: 1000px;
  aspect-ratio: 1;
  top: 120px;
  right: -620px;
}

.hero__ring--4 {
  width: 1320px;
  aspect-ratio: 1;
  top: -60px;
  right: -800px;
}

/* --------------------------------------------
   Заголовок и кнопки
   -------------------------------------------- */
.hero__body {
  position: relative;
  z-index: 1;
  /* auto сверху и снизу забирает всё свободное место и делит поровну —
     заголовок с кнопками встаёт по центру между шапкой и карточками.
     Шапка при этом остаётся у верхнего края, карточки у нижнего. */
  margin-block: auto;
  padding-block: var(--space-8);
  text-align: center;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* Крупный текст выглядит просторнее с лёгким поджатием букв */
  letter-spacing: -0.02em;
  color: var(--color-on-brand);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* --------------------------------------------
   Три белые карточки
   Боковые повёрнуты и опущены, центральная поверх них.
   -------------------------------------------- */
.hero__cards {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Тонкий зазор — карточки не сливаются в одно белое пятно */
  gap: 8px;
  /* Отступ сверху не нужен: расстояние до кнопок задаёт
     auto-margin у .hero__body */
  /* Отрицательный отступ снизу затягивает карточки под границу
     секции. Вместе с overflow: hidden у .hero это даёт срез —
     карточки обрываются, не успев раствориться до конца, как в макете. */
  margin-bottom: -170px;
  /* Маска на всей группе, а не на каждой карточке отдельно:
     тогда все три растворяются на одном уровне. Если вешать её
     на карточки, центральная тает раньше боковых (она выше начинается)
     и кажется, будто лежит под ними. */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 105%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 105%);
}

.hero-card {
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

/* Ширина в процентах от контейнера, высота — через aspect-ratio.
   Так вся группа масштабируется вместе с экраном и никогда
   не вылезает за поля контента. */
.hero-card--center {
  /* position нужен, чтобы z-index сработал наверняка: у боковых
     карточек есть transform, а он создаёт собственный слой */
  position: relative;
  z-index: 2;
  width: 36%;
  aspect-ratio: 433 / 540;
}

/* 32 + 36 + 32 = ровно 100% — группа занимает контейнер целиком.
   Карточки стоят встык без нахлёста: из-за поворота боковых
   между ними книзу расходится синий клин, как в макете. */
.hero-card--left,
.hero-card--right {
  position: relative;
  /* Ниже центральной по слоям — она перекрывает их края */
  z-index: 1;
  /* Чуть меньше 32%, чтобы вместе с зазорами вышло ровно 100% */
  width: 31.3%;
  aspect-ratio: 400 / 470;
  /* Опущены относительно центральной, как в макете */
  margin-top: 11%;
}

.hero-card--left {
  /* Отрицательный угол = против часовой: внешний (левый) край
     опускается вниз, как в макете */
  transform: rotate(-10deg);
  /* Вращаем вокруг внешнего верхнего угла — он остаётся прижатым
     к краю контейнера, а к центру поднимается внутренний край.
     Если взять внутренний угол, карточка уедет к середине. */
  transform-origin: top left;
}

.hero-card--right {
  transform: rotate(10deg);
  transform-origin: top right;
}

/* ============================================
   АДАПТИВ
   ============================================ */

/* Планшеты: пропорционально уменьшаем карточки */
@media (max-width: 1024px) {
  .hero__body {
    padding-block: var(--space-6);
  }

  /* Размеры карточек заданы в процентах — они подстроятся сами */
}

/* Телефоны */
@media (max-width: 768px) {
  .hero__body {
    padding-block: var(--space-5);
  }

  .hero__title {
    /* На узком экране 15 символов в строке — слишком мало,
       заголовок разъезжается на много строк */
    max-width: 100%;
  }

  .hero__actions {
    /* Кнопки в столбик на всю доступную ширину */
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-8);
    /* Не даём кнопкам растянуться во весь экран на планшете-в-портрете */
    max-width: 360px;
    margin-inline: auto;
  }

  /* Боковые карточки убираем — на узком экране они
     превращаются в нечитаемые полоски по краям */
  .hero-card--left,
  .hero-card--right {
    display: none;
  }

  .hero-card--center {
    width: 82%;
    aspect-ratio: 320 / 380;
  }

  /* Дуги уменьшаем, иначе на маленьком экране они
     выглядят как прямые линии */
  .hero__ring--2,
  .hero__ring--4 {
    display: none;
  }

  .hero__ring--1 {
    width: 380px;
    top: -200px;
    left: -150px;
  }

  .hero__ring--3 {
    width: 460px;
    top: 200px;
    right: -280px;
  }
}