/* ===== Positioning & Layout ===== */
.hero-section { height: 100vh; position: relative; overflow: hidden; }
.hero-video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 80%, #0f172a 0%, #020617 100%); }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: bottom; animation: heroFadeIn 1.2s ease-out forwards; }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; }

/* ===== Liquid glass ===== */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01) !important;
  background-blend-mode: luminosity !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.liquid-glass::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.4px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}