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

   Шрифт — Onest: настоящая кириллица. Веса и трекинг подобраны
   по референсу: толщина штриха заголовка 0.25 от высоты прописных
   (Onest 900), надписи 0.20 (Onest 700), подписи 0.21 (Onest 700).

   Файл подключается только на главной и не влияет на другие
   разделы сайта. */

/* ─── Шапка и первый экран — одна композиция ─────────────────────── */
body.page-home{
  background: #131f7d;
}
body.page-home .mfv-header{
  background: #131f7d;
  border-bottom: 0;
  /* тонкая красная линия сверху — как на мобильной шапке */
  box-shadow: inset 0 3px 0 var(--gold);
}

body.page-home .home-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 150% at 6% 0%, #1d2c9c 0%, rgba(29,44,156,0) 62%),
    linear-gradient(165deg, #1b2a97 0%, #16228a 42%, #101a6d 100%);
  color: #fff;
}

/* ─── Мяч справа ─────────────────────────────────────────────────── */
/* Центр шара — 89% ширины баннера, диаметр 58% ширины: те же
   пропорции, что в референсе. Верхняя дуга уходит за верхний край. */
.home-hero-ball{
  position: absolute;
  left: 60.1%;
  top: 2.3vw;
  width: 58.2vw;
  max-width: 1050px;
  aspect-ratio: 1 / 1;
  background: url("/static/home-ball.webp?v=226d8471") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* ─── Полотно контента ──────────────────────────────────────────── */
/* На широком экране первый экран идёт во всю ширину: знак встаёт
   на ту же вертикаль, что и логотип в шапке. */
.home-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 24px 80px;
}
@media (min-width: 1024px){
  body.page-home .mfv-header-inner,
  .home-hero-inner{
    max-width: none;
    padding-left: clamp(24px, 7.57vw, 220px);
    padding-right: clamp(24px, 5vw, 150px);
  }
  .home-hero-inner{ padding-top: 4.4vw; padding-bottom: 5vw; }
}

/* ─── Знак, линейка и надпись ────────────────────────────────────── */
.home-hero-top{
  display: flex;
  align-items: flex-start;
  gap: 3.4vw;
  margin-bottom: 2.27vw;
}
.home-hero-sign{
  flex: 0 0 auto;
  width: 6.9vw;
  height: 11.7vw;
  background: url("/static/home-crest.webp?v=f96b58aa") center top / contain no-repeat;
}
.home-hero-rule{
  flex: 0 0 auto;
  width: 2px;
  height: 7.7vw;
  margin-top: 2.7vw;
  background: rgba(157, 164, 243, .85);
}
.home-hero-eyebrow{
  margin: 0;
  padding-top: 3.4vw;
  font-family: "Onest", Inter, Arial, sans-serif;
  font-size: 1.75vw;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b9c5fb;
  white-space: nowrap;
}

/* ─── Заголовок ─────────────────────────────────────────────────── */
.home-hero h1.home-hero-title{
  margin: 0 0 3.2vw;
  font-family: "Onest", Inter, Arial, sans-serif;
  font-size: 6.29vw;
  font-weight: 900;
  line-height: .99;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
}
.home-hero-title span{ display: block; }
.home-hero-title .home-hero-title-b{
  font-size: 1.083em;
  letter-spacing: .028em;
}

/* ─── Подпись с красной полосой ─────────────────────────────────── */
.home-hero-slogan{
  position: relative;
  margin: 0;
  padding-left: 2.7vw;
  font-family: "Onest", Inter, Arial, sans-serif;
  font-size: 1.98vw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .086em;
  text-transform: uppercase;
  color: #fff;
}
.home-hero-slogan::before{
  content: "";
  position: absolute;
  left: 0;
  top: -.9vw;
  bottom: -.9vw;
  width: .55vw;
  min-width: 4px;
  border-radius: 3px;
  background: var(--gold);
}

/* ─── Планшет ────────────────────────────────────────────────────── */
@media (max-width: 1023px){
  .home-hero-inner{ padding: 52px 24px 60px; }
  .home-hero-top{ gap: 24px; margin-bottom: 34px; }
  .home-hero-sign{ width: 74px; height: 126px; }
  .home-hero-rule{ height: 92px; margin-top: 14px; }
  .home-hero-eyebrow{ font-size: 13px; line-height: 1.45; }
  .home-hero h1.home-hero-title{ font-size: clamp(40px, 6.4vw, 66px); margin-bottom: 30px; }
  .home-hero-slogan{ font-size: 14px; padding-left: 22px; letter-spacing: .07em; }
  .home-hero-slogan::before{ top: -6px; bottom: -6px; width: 4px; }
  .home-hero-ball{ width: 74vw; max-width: 820px; left: 58%; top: 1vw; }
}
@media (max-width: 860px){
  body.page-home .home-hero-ball{
    left: 46%;
    top: auto;
    bottom: -6%;
    width: 108vw;
    max-width: none;
    opacity: .5;
  }
}
@media (max-width: 560px){
  .home-hero-top{ gap: 16px; margin-bottom: 26px; }
  .home-hero-sign{ width: 52px; height: 90px; }
  .home-hero-rule{ height: 70px; margin-top: 8px; }
  .home-hero-eyebrow{ font-size: 11px; letter-spacing: .03em; }
  .home-hero h1.home-hero-title{ font-size: clamp(28px, 8.6vw, 44px); margin-bottom: 24px; }
  .home-hero-title .home-hero-title-b{ font-size: 1.06em; }
  .home-hero-slogan{ font-size: 12px; padding-left: 20px; letter-spacing: .06em; }
}

/* ─── Заголовки секций на тёмно-синем фоне ───────────────────────
   Общие .section-title и .tour-next-title в portal.css красятся в
   фирменный индиго (--ink #25258E). На главной фон глубокий синий
   (#131f7d), и на нём тёмно-синий текст не виден вовсе — заголовок
   пропадал. Здесь перекрашиваем их в белый: файл подключается только
   на главной, поэтому разделы с белым фоном не затрагиваются. */
body.page-home .section-title,
body.page-home .tour-next-title{
  color: #fff;
}

/* Подпись под заголовком: серый --text-2 на синем фоне тоже гас. */
body.page-home .clubs-note{
  color: rgba(255,255,255,.78);
}