* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Chomsky';
  src: url('assets/fonts/Chomsky.woff2') format('woff2'),
       url('assets/fonts/Chomsky.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background: linear-gradient(135deg, #0d0206 0%, #1a0b12 40%, #2e0a1a 100%);
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #ffffff;
}

/* HERO: full-bleed video with the name/CTAs floating on top, one treatment
   at every screen size — no separate desktop split-screen layout. */
.page-wrap {
  position: relative;
  overflow: hidden;
  /* Three fallbacks, least to most reliable. 100vh: baseline for very old
     browsers, but iOS Safari measures it with the address bar hidden, so
     it overshoots the real visible viewport and pushes content below the
     fold. 100dvh: correct on iOS Safari 15.4+, but silently no-ops (falls
     through to the 100vh above) on older versions. calc(var(--vh)*100):
     set from script.js's actual window.innerHeight — wins in any browser
     new enough to support custom properties, regardless of dvh support. */
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
}

/* A gradient border frames the video, and a scrim darkens its top/bottom
   edges (not the CTA area) for legibility of the unmute button and
   general framing. */
.video-panel {
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-image: linear-gradient(160deg, #ff2d4e, #7d2ae8) 1;
}

/* The source footage is 9:16 vertical. Full-bleed (inset:0) is correct on
   phone-shaped viewports, but stretched across a wide desktop window it
   crops down to an unrecognizable close-up. Above ~700px, cap the panel to
   a phone-shaped width (still scaling with viewport height) and center it,
   letting the page's background gradient show on either side instead of
   forcing the video to fill space it was never shot for. */
@media (min-width: 700px) {
  .video-panel {
    left: 50%;
    right: auto;
    width: min(420px, calc(100vh * 9 / 16));
    transform: translateX(-50%);
  }
}

.video-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 2, 6, 0.75) 0%,
    transparent 20%,
    transparent 80%,
    rgba(13, 2, 6, 0.75) 100%
  );
  pointer-events: none;
}

#unmute-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}

.link-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 32px 20px;
  /* No card background behind the CTAs — text relies on the shadow below
     for contrast against whatever the video shows here. */
}

.link-panel h1,
.link-panel .subtitle,
.link-panel .age-notice {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.link-panel h1 {
  font-family: 'Chomsky', 'Segoe UI', system-ui, sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.02em;
}

.subtitle {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 16px;
}

.btn {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 16px 24px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.btn-tiktok {
  border: 1px solid #ff2d4e;
  box-shadow: 0 0 10px #ff2d4e;
}

.btn-onlyfans {
  border: 1px solid #7d2ae8;
  box-shadow: 0 0 10px #7d2ae8;
}

.age-notice {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  max-width: 360px;
  margin-top: 8px;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: scroll-hint-bob 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scroll-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* BELOW THE FOLD: trust-building FAQ, in normal document flow beneath
   the full-viewport hero above. */
.below-fold {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.below-fold__blurb {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.5;
}

.faq h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  text-align: center;
}

.faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq__q {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.faq__a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .link-panel h1 {
    font-size: 2rem;
  }
}