/* 02 — Hero Main Block.
   Кегли, интерлиньяж и поля колонок — из Figma (oFtdKnfuDczuCj4v7e0emt,
   фреймы 320 / 375 / 430 / 768 / 1024 / 1200 / 1600).

   Главное правило блока: внутри диапазона кегль И ширина колонки заданы
   долей от ширины кадра. Их отношение постоянно, поэтому число знаков в
   строке не меняется при растягивании окна — разбиение строк остаётся
   макетным, а не разъезжается к правому краю диапазона.
   Значения в vw посчитаны от опорной ширины кадра: на ней получается ровно
   макетное число (например 68/320 = 21.25vw даёт 68px на 320).

   Трекинг во всех кадрах макета — ровно −5% кегля, поэтому он один на всё
   и задан в em: масштабируется вместе с кеглем сам.  */

.hero {
  color: #eaeaea;
  padding: 342px 0 198px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.hero-h1group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.hero-h1,
.hero-shl,
.hero-sub {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.05em;
}

/* Ручные переносы кадра — единственные допустимые. Своих браузер добавлять
   не должен: иначе разбиение перестаёт быть макетным. */
.hero-h1,
.hero-shl { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

.hero-h1 {
  padding: 0 12.5vw;
  font-weight: 700;
  font-size: 6.75vw;
  line-height: 6.75vw;
}

.hero-shl {
  padding: 0 12.5vw;
  font-weight: 700;
  font-size: 4.5vw;
  line-height: 4.5vw;
}

.hero-sub {
  padding: 0 25vw;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 2vw;
}

/* Выше кадра UHD пропорция замирает: кегль и колонка фиксируются в
   пикселях кадра 2100. Иначе потолок кегля наступает раньше, чем перестаёт
   расти колонка, отношение едет — и разбиение строк меняется на пустом месте. */
@media (min-width: 2100px) {
  .hero-h1,
  .hero-shl,
  .hero-sub { padding: 0; margin-inline: auto; }
  .hero-h1 { max-width: 1574px; font-size: 142px; line-height: 142px; }
  .hero-shl { max-width: 1574px; font-size: 95px; line-height: 95px; }
  .hero-sub { max-width: 1050px; font-size: 26px; line-height: 42px; }
}

/* Переносы строк отличаются по кадрам — переключаются вариантами */
.h1-br { display: none; }
.hero-shl-v { display: none; }
.hero-shl-v--1600 { display: block; }

/* ── кадр 1200: 1025–1200 ─────────────────────────────────── */
@media (max-width: 1200px) {
  .hero { padding: 224px 0 148px; }
  .hero-inner { gap: 40px; }
  .hero-h1group { gap: 8px; }
  .hero-h1 { padding: 0 7.3333vw; font-size: 9vw; line-height: 8.1667vw; }
  .hero-shl { padding: 0 7.3333vw; font-size: 5vw; line-height: 5.1667vw; }
  .hero-sub { padding: 0 17.3333vw; font-size: 1.6667vw; line-height: 2vw; }
  .hero-shl-v--1600 { display: none; }
  .hero-shl-v--1200 { display: block; }
}

/* ── кадр 1024: 769–1024 ──────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { padding: 144px 0; }
  .hero-inner { gap: 48px; }
  /* Кегль кадров 1024 и ниже больше, чем помещается в одну строку, — заголовок
     разбит макетом на три. Выше 1024 строка влезает целиком, там переносов нет. */
  .h1-br { display: inline; }
  .hero-h1 { padding: 0 8.5938vw; font-size: 16.0156vw; line-height: 14.8438vw; }
  .hero-shl { padding: 0 13.2813vw; font-size: 5.0781vw; line-height: 5.2734vw; }
  .hero-sub { padding: 0 22.2656vw; font-size: 1.9531vw; line-height: 2.3438vw; }
  .hero-shl-v--1200 { display: none; }
  .hero-shl-v--1024 { display: block; }
}

/* ── кадр 768: 431–768 ────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 146px 0 145px; }
  .hero-inner { gap: 32px; }
  .hero-h1 { padding: 0 8.5938vw; font-size: 17.7083vw; line-height: 16.1458vw; }
  .hero-shl { padding: 0 8.5938vw; font-size: 5.2083vw; line-height: 4.9479vw; }
  .hero-sub { padding: 0 15.3646vw; font-size: 2.6042vw; line-height: 3.125vw; }
}

/* ── кадр 430: 376–430 ────────────────────────────────────── */
@media (max-width: 430px) {
  .hero { padding: 132px 0 108px; }
  .hero-h1 { padding: 0 3.7209vw; font-size: 22.3256vw; line-height: 20.4651vw; }
  .hero-shl { padding: 0 3.7209vw; font-size: 6.5116vw; line-height: 6.5116vw; }
  .hero-sub { padding: 0 10.4651vw; font-size: 3.7209vw; line-height: 4.186vw; }
  .hero-shl-v--1024 { display: none; }
  .hero-shl-v--430 { display: block; }
}

/* ── кадр 375: 321–375 ────────────────────────────────────── */
@media (max-width: 375px) {
  .hero { padding: 98px 0; }
  .hero-h1 { padding: 0 4.2667vw; font-size: 19.2vw; line-height: 17.0667vw; }
  .hero-shl { padding: 0 10.6667vw; font-size: 7.4667vw; line-height: 7.4667vw; }
  .hero-sub { padding: 0 18.1333vw; font-size: 3.7333vw; line-height: 4.2667vw; }
  .hero-shl-v--430 { display: none; }
  .hero-shl-v--375 { display: block; }
}

/* ── кадр 320: до 320 ─────────────────────────────────────── */
@media (max-width: 320px) {
  .hero { padding: 56px 0; }
  .hero-inner { gap: 20px; }
  .hero-h1 { padding: 0; font-size: 21.25vw; line-height: 19.375vw; }
  .hero-shl { padding: 0; font-size: 7.5vw; line-height: 6.875vw; }
  .hero-sub { padding: 0 16.5625vw; font-size: 4.375vw; line-height: 5vw; }
  .hero-shl-v--375 { display: none; }
  .hero-shl-v--320 { display: block; }
}

/* ---------- Кадры Framer 640 и 720: типографика первого экрана ----------
   Замер живого референса firstone1.framer.website на 560…767: кегли там
   ФИКСИРОВАННЫЕ внутри полосы, а не плывущие. Вся типографика выше задана
   в vw от опорных ширин Figma, и на 638 это давало 113/33 против 116/46
   у Framer — подзаголовок был мельче на 28 %. Проценты здесь не годятся:
   внутри полосы размер не меняется, меняется только ширина коробки. */
@media (min-width: 540px) and (max-width: 719px) {
  .hero-h1  { padding: 0 24px; font-size: 116px; line-height: 111px; }
  .hero-shl { padding: 0 36px; font-size: 46px;  line-height: 44px; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .hero-h1  { padding: 0 24px; font-size: 154px; line-height: 147px; }
  .hero-shl { padding: 0 76px; font-size: 64px;  line-height: 64px; }
}