html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #d5d5d5;
}

.page {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
}

/* ─── Background Elliptical Rings ─────────────────────────────────────── */
.bg-rings {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg-rings);
  pointer-events: none;
  overflow: hidden;
}

.bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
}

.bg-ring--outer {
  width: 130%;
  height: 130%;
  top: 30%;
  right: -15%;
  border-color: rgba(180, 200, 180, 0.3);
}

.bg-ring--inner {
  width: 110%;
  height: 110%;
  top: 35%;
  right: -10%;
  border-color: rgba(200, 180, 160, 0.25);
}

/* ─── Video / Poster Background ───────────────────────────────────────── */
.video-wrap {
  position: absolute;
  inset: 0;
  z-index: var(--z-video);
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
}

/* ─── Yellow Circle ───────────────────────────────────────────────────── */
.yellow-circle {
  position: absolute;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-yellow);
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-yellow);
}

/* ─── Headline (BEHIND Fahad) ─────────────────────────────────────────── */
.headline-wrap {
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  z-index: var(--z-headline);
  text-align: center;
  pointer-events: none;
}

.headline {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(70px, 9vw, 140px);
  color: var(--color-green);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ─── Fahad Figure (IN FRONT of headline) ─────────────────────────────── */
.fahad-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-fahad);
  width: 46%;
  max-width: 740px;
  pointer-events: none;
}

.fahad-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
}

/* ─── Ground ──────────────────────────────────────────────────────────── */
.ground {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 22%;
  background: var(--color-ground);
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  z-index: var(--z-ground);
}

.ground-dots {
  position: absolute;
  inset: 0;
  z-index: var(--z-ground);
}

.ground-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.5);
}