/* Good Boy! landing page — palette mirrors the game (GameConfig Palette) */
:root {
  --sky: #64B5F6;
  --sky-deep: #1E88E5;
  --grass: #43A047;
  --gold: #FFD54F;
  --navy: #1A237E;
  --ink: #20283a;
  --paper: #ffffff;
  --cloud: #eef6ff;
  --shadow: rgba(26, 35, 126, 0.18);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Luckiest Guy", "Nunito", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.05;
}

a { color: var(--sky-deep); }

.wrap { width: min(1080px, 92vw); margin: 0 auto; }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(180deg, var(--sky) 0%, #8fd0ff 55%, #cdeeb4 100%);
  padding: 28px 0 0;
  overflow: hidden;
  position: relative;
}
.nav { display: flex; align-items: center; gap: 12px; }
.nav img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 4px 12px var(--shadow); }
.nav .brand { font-family: "Luckiest Guy", sans-serif; font-size: 1.5rem; color: #fff;
  text-shadow: 0 2px 0 var(--navy); }
.nav .spacer { flex: 1; }
.nav a.navlink { color: #fff; text-decoration: none; font-weight: 800; opacity: 0.95; margin-left: 18px; }

.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center;
  padding: 36px 0 56px;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff; text-shadow: 0 4px 0 var(--navy); }
.hero .tagline { font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--navy); font-weight: 800;
  margin: 14px 0 8px; }
.hero .sub { font-size: 1.05rem; color: #1c3a5e; max-width: 42ch; margin-bottom: 24px; }

.badges { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Placeholder App Store badge — REPLACE with Apple's official badge SVG before launch.
   See marketing/landing-page/README.md. */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 13px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.appstore-badge .apple { font-size: 1.6rem; line-height: 1; }
.appstore-badge small { display: block; font-size: 0.65rem; font-weight: 600; opacity: 0.85; }
.appstore-badge strong { font-size: 1.05rem; font-weight: 800; }
.coming { color: var(--navy); font-weight: 800; font-size: 0.95rem; }

.hero-shot { justify-self: center; position: relative; }
.hero-shot img {
  width: clamp(220px, 30vw, 300px); border-radius: 30px;
  box-shadow: 0 24px 50px var(--shadow); border: 6px solid #fff;
}

.wave { display: block; width: 100%; height: 60px; }

/* ---- Trust strip ---- */
.trust { background: var(--navy); color: #fff; padding: 18px 0; }
.trust .wrap { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; font-weight: 800; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust .dot { color: var(--gold); }

/* ---- Sections ---- */
section { padding: 64px 0; }
.section-title { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--navy);
  margin-bottom: 10px; }
.section-lead { text-align: center; color: #4a5568; max-width: 60ch; margin: 0 auto 40px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--cloud); border-radius: 20px; padding: 26px 22px; text-align: center;
  border: 2px solid #dcecff;
}
.card .emoji { font-size: 2.4rem; }
.card h3 { font-size: 1.15rem; margin: 12px 0 6px; color: var(--navy); letter-spacing: 0.3px; }
.card p { color: #4a5568; font-size: 0.98rem; }

/* ---- Screenshot gallery ---- */
.gallery { background: linear-gradient(180deg, #fff, var(--cloud)); }
.shots { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.shots img {
  width: clamp(180px, 24vw, 240px); border-radius: 26px; border: 5px solid #fff;
  box-shadow: 0 16px 34px var(--shadow);
}

/* ---- Parents ---- */
.parents { background: var(--grass); color: #fff; }
.parents .section-title, .parents .section-lead { color: #fff; }
.parents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px;
  margin: 0 auto; }
.parents-grid li { background: rgba(255,255,255,0.14); border-radius: 14px; padding: 16px 18px;
  list-style: none; font-weight: 700; display: flex; gap: 10px; align-items: flex-start; }
.parents-grid li b { color: var(--gold); }

/* ---- Story ---- */
.story .wrap { max-width: 720px; text-align: center; }
.story p { font-size: 1.12rem; color: #36435a; margin-top: 14px; }
.story .paw { font-size: 2rem; }

/* ---- Footer ---- */
footer { background: var(--navy); color: #c8cef0; padding: 36px 0; text-align: center; font-size: 0.92rem; }
footer a { color: #fff; font-weight: 700; text-decoration: none; margin: 0 10px; }
footer .small { opacity: 0.7; margin-top: 12px; font-size: 0.82rem; }

/* ---- Legal pages ---- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 0; }
.legal h1 { color: var(--navy); font-size: 2.2rem; margin-bottom: 8px; }
.legal h2 { color: var(--navy); font-size: 1.3rem; margin: 28px 0 8px; font-family: "Nunito"; font-weight: 800; }
.legal p, .legal li { color: #36435a; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.legal .back { display: inline-block; margin-bottom: 24px; font-weight: 800; text-decoration: none; }
.legal .updated { color: #8a93a6; font-size: 0.9rem; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .badges { justify-content: center; }
  .features { grid-template-columns: 1fr; }
  .parents-grid { grid-template-columns: 1fr; }
  .nav a.navlink { display: none; }
}