/* Подключение Tilda Sans */
@import url('https://static.tildacdn.com/css/tilda-sans.css');

/* Основной контейнер видео */
.video-hero-block {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 29.0625% !important; /* 558/1920*100% */
  overflow: hidden !important;
  max-width: 3840px !important; /* Поддержка до 4K */
  margin: 0 auto !important;
  z-index: 1 !important;
  background: #000 !important; /* Фон для сверхшироких экранов */
}

/* Видео-элемент */
.video-hero {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 1920px !important; /* Минимальная ширина оригинала */
  object-fit: cover !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}

/* Наложение (30% прозрачности) */
.video-hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

/* Текст PRODUCTS */
.video-hero-title {
  font-family: 'Tilda Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Адаптивность */
@media (max-width: 768px) {
  .video-hero-title {
    font-size: 24px !important;
  }
}

/* Оптимизация для экранов шире 1920px */
@media (min-width: 1921px) {
  .video-hero {
    width: auto !important;
    min-width: 100% !important;
    height: 100% !important;
  }
}

/* Фикс для Safari */
@supports (-webkit-touch-callout: none) {
  .video-hero-title {
    font-weight: 500 !important;
    -webkit-text-stroke: 0.2px !important;
  }
}

/* Для экранов сверхвысокого разрешения (5K/8K) */
@media (min-width: 3841px) {
  .video-hero-block {
    max-width: none !important;
  }
  .video-hero {
    min-width: 3840px !important;
  }
}