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

html {
  height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT: Single flex column fills the viewport.
   .content-area grows to fill all space above the rover.
   .rover-wrap is a natural flow item — always last, always
   sits flush at the bottom. Nothing can overlap.
───────────────────────────────────────────────────────────── */

body {
  height: 100vh;
  overflow: hidden;

  background-color: #141414;
  /* Figma exact: upper-right lighter (#2b2a2a) → lower-left darker (#121212)
     mirrors the rover's physical lighting direction */
  background-image: linear-gradient(215.9deg, #2b2a2a 3.77%, #121212 75.11%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Content area — stretches to fill space above rover ── */

.content-area {
  flex: 1;        /* grow to fill all remaining space */
  min-height: 0;  /* allow shrinking without overflow */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* logo top, tagline bottom */

  width: 100%;
  padding-top: clamp(32px, 14vh, 120px);
  /* Bottom padding = guaranteed air gap between tagline and rover top */
  padding-bottom: clamp(48px, 10vh, 100px);
}

/* ── Logo ─────────────────────────────────────────── */

.logo {
  /* Rectangular PNG — width drives everything, height follows naturally */
  width: clamp(240px, 30vw, 480px);
  height: auto;
  display: block;

  /* Soft lime-green glow — radii kept small so glow stays
     within the PNG's transparent padding, no visible square */
  filter:
    drop-shadow(0 0 6px rgba(174, 218, 0, 0.50))
    drop-shadow(0 0 18px rgba(155, 198, 0, 0.22))
    drop-shadow(0 0 32px rgba(135, 175, 0, 0.10));
}

/* ── Tagline ──────────────────────────────────────── */

.tagline {
  font-size: clamp(13px, 1.6vw, 24px);
  font-weight: 400;
  color: #424242;
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Rover — natural flow, anchored to bottom ─────── */

.rover-wrap {
  flex-shrink: 1;
  min-height: 0;
  /* min() caps rover width so its height never exceeds ~45vh.
     Rover aspect ratio = 1088÷2126 = 0.5117 (h/w).
     To keep height ≤ 45vh → max width = 45vh ÷ 0.5117 = 87.93vh.
     This scales the rover down proportionally on short/landscape viewports. */
  width: min(clamp(300px, 66vw, 1100px), 87.93vh);
  align-self: center;
}

.rover {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width: 600px) {
  .rover-wrap {
    /* Same height cap logic for mobile — rover goes full width
       but still won't exceed 45vh tall */
    width: min(100vw, 87.93vh);
  }

  .logo {
    width: clamp(180px, 68vw, 300px);
  }

  .tagline {
    font-size: clamp(13px, 4vw, 18px);
    white-space: normal;
    padding: 0 2rem;
  }
}

/* ── Very small screens (iPhone SE) ── */

@media (max-width: 375px) {
  .content-area {
    padding-top: clamp(20px, 8vh, 50px);
  }

  .logo {
    width: clamp(150px, 65vw, 220px);
  }
}

/* ── Landscape: short viewport — everything scales via vh ── */

@media (max-height: 500px) {
  .content-area {
    padding-top: clamp(6px, 2vh, 20px);
    padding-bottom: clamp(28px, 5vh, 48px);
  }

  .logo {
    width: clamp(160px, 38vw, 340px);
  }

  .tagline {
    font-size: clamp(10px, 2.5vh, 15px);
    white-space: nowrap;
  }
}