:root {
  --gold: #c9a84c;
  --gold-d: #b08c2e;
  --txt2: #e0e0e0;
  --txt3: #a0a0a0;
  --bg: #0a0e17;
  --t: all 0.3s ease
}

/* УБРАН тяжелый фоновый градиент, оставлен чистый цвет для быстрого FCP */
.he-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0a1628; /* Быстрая заливка без ожидания градиента */
  contain: layout paint; /* Изолируем блок от остальной страницы для ускорения */
}

.he-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  animation: he-video-appear 1s ease forwards;
  /* Добавляем transform для аппаратного ускорения видео */
  transform: translateZ(0); 
  will-change: opacity;
}

@keyframes he-video-appear {
  to { opacity: 1 }
}

.he-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,22,40,.7), rgba(13,33,55,.6) 40%, rgba(10,22,40,.7) 70%, rgba(7,16,24,.8));
  z-index: 1;
  pointer-events: none;
}

.he-bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.he-bubble {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: rgba(201,168,76,.12);
  animation: he-rise linear infinite;
  will-change: transform, opacity;
  /* Добавляем изоляцию для каждой пузырьки */
  contain: layout style;
}

@keyframes he-rise {
  0% { transform: translateY(0) scale(1); opacity: 0 }
  10% { opacity: .5 }
  50% { opacity: .3 }
  90% { opacity: .2 }
  100% { transform: translateY(-120vh) scale(.8); opacity: 0 }
}

.he-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 120px 24px 80px;
  max-width: 1000px;
  width: 100%;
  /* Предотвращаем сдвиг макета, если текст вдруг станет шире */
  overflow-wrap: break-word;
}

.he-badge {
  display: inline-block;
  background: rgba(201,169,98,.2);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 32px;
  /* УБРАН backdrop-filter: blur() - убивает производительность */
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

.he-hero h1 {
  font-size: 80px;
  color: #fff;
  margin-bottom: 24px;
  text-transform: uppercase;
  line-height: 1.1;
  /* УБРАН text-shadow - ускоряет отрисовку текста (FCP) */
  font-weight: 700;
  animation: he-h1-appear 0.8s ease-out both; 
}

@keyframes he-h1-appear {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.he-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #fff;
  max-width: 700px;
  margin: 0 auto 40px;
  /* УБРАН text-shadow */
  line-height: 1.6;
  opacity: .95;
}

/* ОПТИМИЗАЦИЯ КНОПКИ: градиент теперь не анимируется, анимируется прозрачность псевдоэлемента */
.he-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0a0e17;
  padding: 16px 40px;
  border-radius: 50px;
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Убрано all */
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,168,76,.3);
  z-index: 1;
  overflow: hidden; /* Обрезаем псевдоэлемент */
  /* Базовый фон кнопки */
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
}

/* Псевдоэлемент для плавного затемнения при наведении без пересчета градиента */
.he-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold-d), var(--gold));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.he-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(201,168,76,.5);
}

.he-cta:hover::before {
  opacity: 1; /* Плавно показываем темный градиент */
}

.he-cta svg {
  transition: transform 0.3s ease;
}

.he-cta:hover svg {
  transform: translateX(5px);
}

.he-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  padding: 40px 40px 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  /* УБРАН backdrop-filter: blur() */
  background: rgba(0,0,0,.3); /* Чуть затемнил фон в качестве компенсации */
  border-radius: 30px;
}

.he-stat { text-align: center }

.he-stat-number {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
  /* УБРАН text-shadow */
}

.he-stat-label {
  font-size: .8rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .9;
  font-weight: 500;
}

/* --- МЕДИА-ЗАПРОСЫ --- */

@media (max-width: 768px) {
  .he-hero-video { display: none }
  
  /* Для мобильных картинка загружается, НО убедись, что она сжата до 50-100кб! */
  .he-hero {
    background-image: url("../../videos/hero_poster.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .he-overlay {
    background: linear-gradient(135deg, rgba(10,22,40,.9), rgba(13,33,55,.85) 40%, rgba(10,22,40,.9) 70%, rgba(7,16,24,.95))
  }
  .he-content { padding: 100px 20px 60px }
  .he-badge { font-size: .7rem; padding: 6px 16px }
  .he-subtitle { margin-bottom: 30px }
  .he-cta { padding: 14px 30px; font-size: .9rem }
  .he-stats {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
    margin-top: 40px;
    background: rgba(0,0,0,.4);
  }
  .he-stat-number { font-size: 2.2rem }
}

@media (max-width: 480px) {
  .he-content { padding: 80px 16px 40px }
  .he-badge { margin-bottom: 24px }
  .he-hero h1 { font-size: 40px; margin-bottom: 16px }
  .he-stats { gap: 25px; padding: 25px 16px }
}

@media (prefers-reduced-motion: reduce) {
  .he-hero-video { display: none }
  .he-bubble { animation: none; display: none }
  .he-hero { background-color: #0a1628 }
}

/* УДАЛЕН ЭТОТ БЛОК ПОЛНОСТЬЮ! */
/*
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .he-hero{background-image:url('../../videos/hero_poster.webp')}
}
*/