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

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

/* --------------------------------------------
   Декоративные дуги на фоне
   -------------------------------------------- */
.hero__decor {
  position: absolute;
  inset: 0;
  /* Не перехватывает клики — это чистая декорация */
  pointer-events: none;
  /* Обрезаем кольца по краю первого экрана. На мобильном у .hero стоит
     overflow: visible (чтобы не резать карточки-веер снизу), и без этой
     строки кольцо --3 (right: -280px) торчало на 280px за правый край —
     страница становилась шире экрана, контент «съезжал» влево.
     Карточки лежат в .hero__cards (не здесь), их обрезка не касается. */
  overflow: hidden;
}

.hero__ring {
  position: absolute;
  /* Мягкий синий вместо белого: на светлом фоне белые дуги не видны */
  border: 1.5px solid rgba(10, 40, 120, 0.08);
  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-ink);
}

/* Подпись-описание под заголовком (бывшая плашка «Срок 7–10 дней») */
.hero__subtitle {
  margin-top: var(--space-4);
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem); /* 17px → 24px */
  font-weight: var(--fw-medium);
  color: var(--color-ink-soft);
}

.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: -180px;
}

.hero-card {
  flex-shrink: 0;
  /* overflow обрезает фото по скруглённым углам карточки */
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  /* Мягкая тень вниз: на светлом фоне кольцевая чёрная выглядела бы
     грязно. Синеватый оттенок тени подходит к светло-голубому фону. */
  box-shadow: 0 24px 50px rgba(10, 30, 80, 0.16);
}

/* Фото заполняет карточку целиком, лишнее обрезается.
   Нижний край карточек уходит за границу секции (overflow: hidden
   у .hero), поэтому снизу фото просто срезается — как в макете. */
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ширина в процентах от контейнера, высота — через 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;
  }

  /* Три карточки в ряд, как на десктопе, только компактнее.
     На мелком экране НЕ режем их overflow'ом (десктопный срез -180px
     съел бы маленькие карточки целиком) — блок растёт, карточки видны
     полностью. Ширины/поворот берём из базовых правил (веер). */
  .hero {
    min-height: auto;
    overflow: visible;
    padding-bottom: var(--space-10);
  }

  .hero__cards {
    margin-bottom: 0;
    gap: 4px;
  }

  /* Чуть крупнее базовых процентов — чтобы «не слишком мелко».
     Небольшой перебор по сумме гасится поворотом боковых (веер). */
  .hero-card--center {
    width: 40%;
  }

  .hero-card--left,
  .hero-card--right {
    width: 34%;
  }

  /* Дуги уменьшаем, иначе на маленьком экране они
     выглядят как прямые линии */
  .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;
  }
}