/* ============================
   landing.css  (landing.html only)
   ============================ */

/* --- Theme tokens --- */
:root {
  --bg: #000;               /* deep black */
  --text: #fff;             /* primary text */
  --muted: #b9c2cf;         /* secondary text */
  --blue: #1e90ff;          /* accent blue */
  --red: #ff3b30;           /* accent red (sparingly) */

  --radius: 12px;
  --shadow: 0 0 16px rgba(30,144,255,.35), inset 0 0 10px rgba(30,144,255,.22);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* --- Base reset / layout --- */
* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--text); }
body {
  margin: 0;
  font: 16px/1.45 "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100dvh; /* mobile-friendly viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Links --- */
a { color: var(--blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* --- Container for everything above the fold --- */
.hero {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Tight top padding so CTAs are visible immediately */
  padding: max(8px, calc(2vh + var(--safe-top))) 16px max(12px, var(--safe-bottom));
  gap: clamp(8px, 2vh, 20px);
}

/* --- Logo + title --- */
.hero .logo {
  width: clamp(120px, 22vw, 220px);
  height: auto;
  display: block;
  margin-bottom: 6px;
}

.hero h1 {
  margin: 4px 0 2px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
}

.hero .intro {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: center;
  max-width: 60ch;
}

/* --- Rover CTA row --- */
.rover-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 8px 0 0;  /* no big spacer above */
}

/* --- Rover CTA buttons --- */
.rover-cta .btn {
  flex: 1 1 120px;     /* adapts 2–3 per row */
  max-width: 240px;
  padding: 12px 16px;
  border: 1px solid var(--blue);
  background: linear-gradient(180deg, rgba(30,144,255,0.18), rgba(30,144,255,0.06));
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 150ms ease, box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}
.rover-cta .btn:hover,
.rover-cta .btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(30,144,255,.5), inset 0 0 12px rgba(30,144,255,.28);
  border-color: #6ab5ff;
}
.rover-cta .btn:active { transform: translateY(0); }

/* Optional: give each rover a tiny accent edge using a data attribute or class */
.btn.curiosity { border-image: linear-gradient(90deg, var(--blue), transparent) 1; }
.btn.opportunity { border-image: linear-gradient(90deg, #5ad1ff, transparent) 1; }
.btn.spirit { border-image: linear-gradient(90deg, var(--red), transparent) 1; }

/* --- Kill any old large CTA spacer if it exists --- */
.cta-btn { margin-top: 8px !important; }

/* --- Footer (if present) --- */
.footer {
  margin-top: auto;
  width: 100%;
  padding: 16px 0 calc(12px + var(--safe-bottom));
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* --- Mobile tweaks --- */
@media (max-width: 480px) {
  .hero { padding-top: max(6px, calc(1.5vh + var(--safe-top))); }
  .hero .logo { width: clamp(110px, 28vw, 170px); margin-bottom: 4px; }
  .hero .intro { font-size: 0.95rem; }
  .rover-cta .btn { padding: 10px 12px; font-size: 0.98rem; }
}

/* --- Respect "reduce motion" --- */
@media (prefers-reduced-motion: reduce) {
  .rover-cta .btn { transition: none; }
}