/* ============================================================
   RIDEFOCUS · HERO REFINED (v1)
   ------------------------------------------------------------
   Подключать ПОСЛЕ ridefocus.css:
     <link rel="stylesheet" href="hero-refined.css?v=1">

   Что меняем и почему:
   1. Бейдж «СИТУАЦИЯ ГОТОВА» перестаёт быть плашкой-кнопкой.
      Раньше он визуально конкурировал с заголовком: рамка +
      блюр + фон + капс. Оставляем точку и тихий капс-лейбл.
   2. Заголовок: убираем двойной вес. Первая строка — светлая,
      акцент только на второй. Меньше letter-spacing-сжатия.
   3. Подзаголовок: 2 строки вместо 3, ниже контраст.
   4. Кнопка: спокойная плоская заливка, мягче тень.
   5. Больше воздуха снизу и по краям, единый вертикальный ритм.
   ============================================================ */

/* ── 1. Каркас: бейдж в потоке, а не абсолютом ─────────────── */

.hero{
  min-height: 316px !important;
  justify-content: flex-end !important;
}

.hero-badge{
  position: static !important;
  align-self: flex-start !important;
  z-index: 3 !important;

  /* убираем плашку */
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;

  margin: 0 0 12px 20px !important;
  gap: 7px !important;

  font: 600 10px/1 Inter, sans-serif !important;
  letter-spacing: 1.6px !important;
  color: rgba(255,255,255,.42) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.9) !important;
}

.dot-live{
  width: 5px !important;
  height: 5px !important;
  box-shadow: 0 0 7px rgba(190,242,100,.65) !important;
}

/* ── 2. Текстовый блок ────────────────────────────────────── */

.hero-body{
  padding: 0 20px 22px !important;
}

.hero-title{
  margin: 0 0 10px !important;
  font: 700 clamp(27px, 7.6vw, 35px)/1.14 Inter, sans-serif !important;
  letter-spacing: -.6px !important;
  color: #F4F7FB !important;
  text-shadow: 0 2px 30px rgba(0,0,0,.9) !important;
}

/* акцент — только вторая строка, без «двойного жирного» */
.hero-title em{
  display: inline-block !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: var(--rf-ac) !important;
}

.hero-sub{
  margin: 0 0 18px !important;
  max-width: 30ch !important;
  font: 400 13px/1.55 Inter, sans-serif !important;
  color: rgba(255,255,255,.52) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.85) !important;
}

/* ── 3. Кнопка ────────────────────────────────────────────── */

.btn-main{
  min-height: 50px !important;
  border-radius: 14px !important;
  background: var(--rf-ac) !important;
  color: #0A1200 !important;
  font: 700 14.5px/1 Inter, sans-serif !important;
  letter-spacing: -.1px !important;
  box-shadow: 0 4px 18px -10px rgba(163,230,53,.55) !important;
}
.btn-main:hover{ filter: brightness(1.04) !important; }
.btn-main:active{ transform: scale(.98) !important; }

.btn-main svg{
  opacity: .55 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── 4. Тише фоновая сцена, чтобы текст читался ───────────── */

.hero::after{
  background:
    linear-gradient(to top,
      var(--rf-s1) 0%,
      rgba(17,20,27,.97) 16%,
      rgba(17,20,27,.86) 32%,
      rgba(17,20,27,.5) 50%,
      rgba(17,20,27,.16) 66%,
      transparent 80%),
    linear-gradient(to bottom, rgba(8,10,14,.6) 0%, rgba(8,10,14,.14) 18%, transparent 34%),
    radial-gradient(120% 84% at 50% 32%, transparent 44%, rgba(4,6,10,.28) 78%, rgba(4,6,10,.55) 100%) !important;
}

/* ── 5. Адаптив ───────────────────────────────────────────── */

@media (min-width: 600px){
  .hero{ min-height: 392px !important; }
  .hero-body{ padding: 0 28px 28px !important; }
  .hero-badge{ margin: 0 0 14px 30px !important; }
  .hero-sub{ max-width: 36ch !important; font-size: 14px !important; }
  .btn-main{ width: auto !important; min-width: 232px !important; }
}

@media (max-width: 380px){
  .hero{ min-height: 286px !important; }
  .hero-body{ padding: 0 16px 18px !important; }
  .hero-badge{ margin: 0 0 10px 16px !important; }
  .hero-title{ font-size: 25px !important; }
  .hero-sub{ margin-bottom: 15px !important; font-size: 12.5px !important; }
}

body.big .hero-title{ font-size: clamp(29px, 8vw, 37px) !important; }
body.big .hero-sub{ font-size: 14.5px !important; }