@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */
:root {
  --btn-w-m: 120px;             /* mobile button width */
  --btn-w-d: 130px;             /* desktop button width */
  --btn-aspect: 279.8 / 81.32;  /* SVG frame aspect ratio */
}

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  color: #e6eef5;
  background: #0f2740;
}

/* Hero */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 100svh; /* default for portrait/mobile */
}

/* Apply 120svh only for desktop and landscape mobile */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 799px)  {
  .hero {
    min-height: 120svh;
  }
}

/* Apply 120svh for desktops with short height,
   but still require min-width: 600px */
@media (min-width: 600px) and (min-width: 1024px) and (max-height: 799px) {
  .hero {
    min-height: 120svh;
  }
}



/* Video background */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  transition: opacity .6s ease;
}
@media (orientation: portrait) {
  .bg-video { object-position: center top; }
}

/* Overlay content */
.content {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: end;
  padding-bottom: 12vh; /* default desktop padding */
  gap: 16px;
  text-align: center;
}

/* Mobile: smaller bottom spacing */
@media (max-width: 899px) {
  .content {
    padding-bottom: 8vh;
  }
}

/* CTAs */
.cta {
  display: grid;
  gap: 10px;
  justify-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.cta.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Skip button */
.skip-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(0,0,0,.4);
  color: #e6eef5;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .2s ease, opacity .2s ease;
}
.skip-btn:hover { background: rgba(255,255,255,.08); }
.skip-btn.hide { opacity: 0; pointer-events: none; }

/* SVG-framed buttons */
.svg-btn {
  --svg-url: url('assets/button.svg');
  position: relative;
  display: grid;
  place-items: center;
  width: var(--btn-w-m);
  max-width: 90vw;
  aspect-ratio: var(--btn-aspect);
  text-decoration: none;
  color: #e8f1f7;
  font-size: 13px;               /* smaller text for mobile buttons */
  letter-spacing: .4px;
  background-image: var(--svg-url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transition: transform .18s ease, color .18s ease;
}
.svg-btn .btn-label { padding-inline: 6px; white-space: nowrap; }
.svg-btn:hover, .svg-btn:focus-visible { color: #fff; transform: translateY(-1px); }
.svg-btn:focus-visible { outline: none; }

/* Desktop */
@media (min-width: 900px) {
  .cta {
    grid-template-columns: repeat(3, var(--btn-w-d));
    justify-content: center;
    gap: 8px;
  }
  .svg-btn {
    width: var(--btn-w-d);
    font-size: 14px;
  }
}


/* === Poster + single-video layering for iOS fast-start === */
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;                 /* above video, below .content */
  opacity: 1;
  transition: opacity .5s ease;
}
.hero-poster.is-hidden { opacity: 0; }

/* Put video one layer below the poster, fade it in only when playing */
.bg-video {
  z-index: -2 !important;      /* override previous -1 so poster sits on top */
  opacity: 0;                  /* start hidden */
}
.bg-video.is-visible { opacity: 1; }

/* Optional: keep top-crop on portrait (your existing rule keeps working) */
@media (orientation: portrait) {
  .hero-poster { object-position: center top; }
}