/* Global styles for Roxxon placeholder */
:root { --hero-shift: -100px; --gap: 80px; --teaser-offset: -310px; --hero-w: min(120vw, 320px); --hero-h: 160px; --nudge-down: 160px; --teaser-bump: 120px; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background-color: #000; /* black background */
  color: white; /* white text for contrast */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  min-height: 100dvh; /* mobile-friendly viewport height */
  display: flex;
  flex-direction: column;
  align-items: center;  /* center horizontally */
  justify-content: flex-start; /* stick to top */
  /* Respect notches and system UI on iOS/Android */
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}
main {
  text-align: center;
  padding: 0; /* ensure teaser sits directly under hero */
}
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .5rem; }
p { font-size: clamp(1rem, 2.5vw, 1.25rem); margin: 0; opacity: 0.9; }
/* Top-centered hero video */
.top-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 1rem 0;
  margin-top: calc(var(--hero-shift) + var(--nudge-down));
  margin-bottom: var(--gap); /* ensure space for teaser below */
  position: relative; /* enable z-index */
  z-index: 3; /* keep ROXXON logo above teaser */
}
.hero-video {
  width: var(--hero-w);
  height: auto; /* allow natural video height */
  max-height: var(--hero-h); /* constrain if very tall */
  object-fit: contain; /* show entire logo area */
  object-position: center;
  display: block;
  border-radius: 8px;
  background: transparent;
}
/* Teaser directly under the hero */
.teaser {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Move teaser independently; allows negative to rise under the hero */
  margin-top: calc(var(--teaser-offset) + var(--nudge-down) - var(--teaser-bump)) !important;
  position: relative;
  z-index: 1; /* keep below the hero */
}
.teaser-video {
  width: min(1500px, 120vw); /* cap at 1000px, prevent horizontal overflow */
  aspect-ratio: 16 / 9; /* reserve space even before metadata loads */
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Responsive adjustments for mobile/tablet while preserving layout intent */
@media (max-width: 768px) {
  :root { --hero-shift: -30px; --gap: 80px; --teaser-offset: -140px; --hero-w: min(140vw, 280px); --hero-h: 120px; }
  .teaser-video { width: min(95vw, 720px); }
}

@media (max-width: 480px) {
  :root { --hero-shift: -20px; --gap: 80px; --teaser-offset: -90px; --hero-w: 72vw; --hero-h: 96px; }
  .teaser-video { width: 92vw; }
}

/* Landscape phones/tablets: slightly reduce offsets/sizes to fit height */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --hero-shift: -10px; --gap: 80px; --teaser-offset: -60px; --hero-w: min(60vh, 240px); --hero-h: 60px; }
  .teaser-video { width: min(70vh, 800px); }
}

/* removed conflicting duplicate teaser rules */