/* ============================================================
   SCREEN 1 — HERO
   ============================================================ */
/* position/z-index обязательны: .orb — позиционированный сосед, и без
   этого он рисовался поверх текста (позиционированное всегда выше
   статического в порядке отрисовки), приглушая заголовок и лид. */
.s1-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 60px;
  align-items: center;
}

/* Ширина снята с макета «Экран 1. Позиционирование»: подзаголовок
   занимает 561px при окне 1440 и ложится в две строки. */
.s1-left {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: clamp(420px, 39vw, 640px);
  flex-shrink: 0;
}

.s1-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.s1-title {
  font-size: var(--fs-home-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  position: relative;
}

.s1-title .blurred { filter: blur(2.5px); }

.s1-title .sharp {
  display: inline-block;
  filter: none;
  color: var(--text);
  position: relative;
  z-index: 2;
}

.s1-title .line { display: block; }

.s1-subtitle {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s1-buttons {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.s1-btn-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.s1-btn-col .btn { width: 100%; }

/* right — video */
/* СЕЙЧАС НЕ ИСПОЛЬЗУЕТСЯ. Видео-панель из hero убрана: правую половину
   первого экрана занимает сквозной поток линий (см. flow.css / flow.js).
   Стили и токены --card-*-hero-vid оставлены на случай возврата панели —
   разметки .s1-video в index.html больше нет. */
.s1-video {
  width: var(--card-w-hero-vid);
  height: var(--card-h-hero-vid);
  border-radius: var(--r-hero);
  border: 0.5px solid var(--text-20);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: #0d1117;
}

.s1-video video,
.s1-video .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s1-video video { z-index: 1; }
.s1-video .video-poster { z-index: 0; }

.s1-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-49);
  mix-blend-mode: hue;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--r-hero);
}

.s1-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-56.83deg, rgba(18, 20, 26, 0) 49.967%, rgba(18, 20, 26, 1) 100%),
    linear-gradient(126.52deg, rgba(18, 20, 26, 0) 59.899%, rgba(18, 20, 26, 1) 100%);
  pointer-events: none;
  z-index: 3;
  border-radius: var(--r-hero);
}

/* ---------- Мобильная раскладка ---------- */
@media (max-width: 1024px) {
  /* Первый экран занимает всё окно, текст с кнопками — по центру.
     hero.css подключён только на главной, поэтому :first-child здесь
     безопасен: на остальных страницах правило не появляется.
     svh вторым: 100vh на телефоне считается по окну БЕЗ адресной строки,
     и когда она видна, низ блока уезжает за экран. */
  .screen:first-child {
    min-height: 100vh;
    min-height: 100svh;
  }
  .screen:first-child > .screen-inner {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    padding-top: var(--header-h);
    padding-bottom: clamp(24px, 6vw, 40px);
  }

  .s1-content {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(32px, 8vw, 48px);
  }
  /* Макет Reconversia_18: заголовок, лид и кнопки по центру. */
  .s1-left {
    width: 100%;
    gap: clamp(28px, 6vw, 40px);
    align-items: center;
    text-align: center;
  }
  .s1-text { align-items: center; }
  .s1-title,
  .s1-subtitle { text-align: center; }
  .s1-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .s1-btn-col { width: 100%; }
  /* На мобильной версии (по Figma) подписи под кнопками не показываются —
     оставляем только сами кнопки, друг под другом. */
  .s1-btn-col .caption { display: none; }

  .s1-video {
    width: 100%;
    height: clamp(220px, 62vw, 340px);
  }
}

/* Ambient glow orb behind text */
.orb {
  position: absolute;
  width: 551px;
  height: 257px;
  left: calc(50% + 5px);
  top: 200px;
  background: radial-gradient(ellipse, rgba(77, 107, 255, 0.35) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}