/* Критический CSS для стабильной вёрстки до загрузки Tailwind (исключаем дергание) */
:root { --header-h: 4rem; --header-gap: 0.5rem; }
html { scroll-padding-top: var(--header-h); }
/* Не поднимаем контент вниз, чтобы не было белой полосы под фиксированным хедером */
body { padding-top: 0; }
/* По умолчанию показываем брендинг и скрываем компактную версию хедера до JS/Tailwind */
.header__brand { display: flex; }
.header__compact { display: none; }
/* Отступ для первой секции (герой) ниже хедера */
.mt-header { margin-top: calc(var(--header-h) + var(--header-gap)); }
/* Стабильная высота героя до загрузки Tailwind */
.hero { height: 60vh; }
@media (min-width: 640px) { .hero { height: 72vh; } }
@media (min-width: 1024px) { .hero { height: 92vh; } }
/* Сброс зума у видео героя */
.hero > video {
  object-fit: cover;
  transform: none;
  transform-origin: center center;
}
/* Плавный кроссфейд постер -> видео */
.hero-video { opacity: 0; transition: opacity .35s ease; }
.hero-video.is-ready { opacity: 1; }
.hero-poster { opacity: 1; transition: opacity .35s ease; }
.hero-poster.is-hidden { opacity: 0; }

/* Фикс «флэша» SVG-логотипа до загрузки Tailwind
   Без утилит w-11/h-11 SVG получает авторазмер и может растягиваться
   на всю ширину. Жестко задаем размер, соответствующий w-11 (2.75rem). */
.header__brand svg {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
}