/* =====================================================================
   Playmo Landing — Design tokens
   ===================================================================== */
:root {
  /* Brand colors */
  --teal: #81c9c0;
  --orange: #faab5c;
  --dark-teal: #458d84;
  --dark-orange: #da7007;
  --gray: #8e8e93;
  --white: #ffffff;

  /* Secondary tints */
  --light-blue: #f1f9f8;
  --light-yellow: #fef7ef;
  --light-pink: #fdebf1;
  --light-purple: #f5f3f9;

  /* Text */
  --text-muted: #666c8d;
  --teal-text: #37716a;

  /* Effects */
  --mint: #dbf0ed;
  --shadow-mint: rgba(219, 240, 237, 0.5);
  --shadow-soft: 8px 8px 0 var(--shadow-mint);
  --shadow-soft-lg: 16px 16px 0 var(--shadow-mint);
  --shadow-btn: 4px 4px 0 var(--mint);
  --ts-teal: 2px 2px 0 rgba(69, 141, 132, 0.25);
  --ts-gray: 2px 2px 0 rgba(142, 142, 147, 0.25);

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --pad: clamp(1rem, 4vw, 2.25rem);
  --nav-h: 52px;

  /* Responsive type scale (min, fluid, max) */
  --fs-display: clamp(2.1rem, 6vw, 4rem);     /* hero / 64px */
  --fs-h1: clamp(2rem, 5.4vw, 4.5rem);        /* big section / 72px */
  --fs-h2: clamp(1.7rem, 4.2vw, 2.625rem);    /* 42px */
  --fs-h3: clamp(1.4rem, 3vw, 2.25rem);       /* 36px */
  --fs-card: clamp(1.3rem, 2.4vw, 1.75rem);   /* 28px bubbles/cards */
  --fs-lead: clamp(1.15rem, 1.8vw, 1.5rem);   /* 24px */
  --fs-body: clamp(1rem, 1.3vw, 1.25rem);     /* 20px */
  --fs-nav: 1rem;                             /* 16px */
}

/* =====================================================================
   Reset / base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-muted);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Offset anchor jumps so the sticky navbar never covers a heading */
#hero, #masalah, #solusi, #faq { scroll-margin-top: 72px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 999;
  background: var(--orange);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Color helpers */
.text-orange { color: var(--orange); }
.text-dark-teal { color: var(--dark-teal); }
.text-dark-orange { color: var(--dark-orange); }
.text-gray { color: var(--gray); }
.text-white { color: var(--white); }

/* Reveal animation base (Motion enhances; this is the fallback) */
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(28px); }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn-playmo {
  --pad-y: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--white);
  background: var(--orange);
  border: 4px solid var(--white);
  border-radius: var(--r-pill);
  padding: var(--pad-y) 36px;
  text-shadow: 1px 1px 0 var(--dark-orange);
  box-shadow: var(--shadow-btn);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-playmo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mint);
}
.btn-playmo:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--mint); }
.btn-playmo--sm {
  font-size: var(--fs-nav);
  padding: 8px 16px;
  border-width: 2px;
  text-shadow: .5px .5px 0 var(--dark-orange);
  box-shadow: 2px 2px 0 var(--mint);
}

/* =====================================================================
   Theme strip
   ===================================================================== */
.theme-strip {
  position: relative;
  height: 34px;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  overflow: hidden;
}
.theme-strip img { height: 13px; width: auto; opacity: .9; }
.theme-strip__right { height: 16px; }

/* =====================================================================
   Navbar
   ===================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--teal);
}
.navbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4rem);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Logo sits in a white "ribbon" that hangs below the navbar bar. */
.navbar__logo {
  align-self: flex-start;
  position: relative;
  z-index: 1;
  background: var(--white);
  border: .5px solid var(--teal);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 12px 16px 12px;
  box-shadow: 2px 3px 0 rgba(69, 141, 132, 0.25);
}
.navbar__logo img { height: 40px; width: auto; }

.navbar__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.navbar__link {
  font-weight: 700;
  font-size: var(--fs-nav);
  color: var(--white);
  text-shadow: var(--ts-teal);
  letter-spacing: -0.32px;
  padding: 6px 4px;
  transition: opacity .15s ease;
}
.navbar__link:hover { opacity: .8; }
.navbar__link.is-active {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 8px;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-self: center;
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.navbar__toggle span {
  display: block;
  width: 22px;
  height: 3px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 3px;
  transition: transform .25s ease, opacity .2s ease;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  background: var(--teal);
  /* Hero + navbar together fill exactly one viewport. */
  height: calc(100vh - var(--nav-h));
  padding: 8px 32px 32px;
  display: flex;
}
.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(123deg, rgba(129,201,192,1) 6%, rgba(129,201,192,0) 76%),
    url("../assets/hero-bg.jpg") center/cover no-repeat,
    var(--teal);
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
}
.hero__card-wrap {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-inline: 0;
}
.hero__card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hero__title {
  font-size: var(--fs-display);
  line-height: 1.15;
  color: var(--dark-teal);
  text-shadow: var(--ts-teal);
  letter-spacing: -1.28px;
}
.hero__desc {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.75;
  color: var(--text-muted);
  opacity: .8;
  max-width: 46ch;
}
.hero__cta { margin-top: -1.5rem; padding-left: clamp(0px, 2vw, 48px); }

.hero__art {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: clamp(504px, 64.4vw, 1008px);
  z-index: 3;
  margin-bottom: -20px;
  pointer-events: none;
}
.hero__photo { width: 100%; height: auto; margin-bottom: -20px; }
.hero__rings {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%) scaleY(-1) rotate(-12deg);
  width: 92%;
  opacity: .9;
}
.hero__rings--2 { bottom: 2%; width: 96%; }
.hero__char { position: absolute; width: clamp(70px, 9vw, 120px); }
.hero__char--1 { left: 2%; top: 50%; transform: rotate(-12deg); }
.hero__char--2 { right: 2%; top: 28%; transform: rotate(6deg); }

/* =====================================================================
   Interlude (light blue note)
   ===================================================================== */
.interlude {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) var(--pad);
  border: none;
  overflow: hidden;
}
.interlude--blue { background: var(--light-blue); border-bottom: none; }
.interlude__wave {
  position: absolute;
  inset: auto 0 -2px 0;
  width: 100%;
  height: auto;
  z-index: 0;
}
.interlude__inner { position: relative; z-index: 1; display: flex; justify-content: flex-end; }

.note-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  max-width: 716px;
  width: 100%;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.note-card__eyebrow { font-size: var(--fs-h3); text-shadow: var(--ts-teal); line-height: 1.2; }
.note-card__title { font-size: var(--fs-h2); text-shadow: var(--ts-gray); line-height: 1.2; letter-spacing: -0.84px; }
.note-card__body { display: flex; flex-direction: column; gap: .5rem; font-size: var(--fs-body); font-weight: 500; line-height: 1.75; opacity: .8; }
.pill-quote {
  background: var(--light-blue);
  border-radius: var(--r-md);
  padding: 24px clamp(1rem, 3vw, 48px);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-lead);
  color: var(--dark-teal);
  letter-spacing: -0.48px;
}

/* =====================================================================
   Section head (shared)
   ===================================================================== */
.section-head { text-align: center; max-width: 900px; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); display: flex; flex-direction: column; gap: .5rem; }
.section-head__title { font-size: var(--fs-display); letter-spacing: -1.28px; line-height: 1.2; }
.section-head__sub { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.84px; font-weight: 700; }

/* =====================================================================
   Problem / Timeline
   ===================================================================== */
.problem {
  background: var(--teal);
  border: 8px solid var(--teal);
  padding: clamp(3.5rem, 7vw, 4.5rem) var(--pad);
}
.problem__sub { color: var(--teal-text); }

/* Flow wrapper: holds the timeline, the "did you know" card and the dashed
   note, and draws one continuous vertical line that runs from the first node
   all the way down into the dashed-note card. */
.problem__flow {
  position: relative;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.problem__flow::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, var(--teal), var(--dark-teal) 52%, var(--teal));
  z-index: 0;
}
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: 1.5rem 0;
}
.timeline__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.timeline__node {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 113px;
  height: 113px;
}
.timeline__node img { width: 100%; height: 100%; object-fit: contain; }
.timeline__node--char {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 4px 4px 0 var(--shadow-mint);
  padding: 20px;
}
.timeline__row--right .info-card { grid-column: 3; justify-self: start; }
.timeline__row--left .info-card { grid-column: 1; justify-self: end; }

.info-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
}
.info-card__title { font-size: var(--fs-h3); color: var(--gray); text-shadow: var(--ts-gray); line-height: 1.2; letter-spacing: -0.64px; }
.info-card__text { font-size: var(--fs-body); font-weight: 500; line-height: 1.75; opacity: .8; }

.did-you-know {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.did-you-know__badge {
  position: relative;
  z-index: 2;
  transform: translateY(50%);
  background: var(--orange);
  border: 3px solid var(--white);
  border-radius: var(--r-pill);
  box-shadow: 4px 4px 0 rgba(250,171,92,.5);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-lead);
  text-shadow: var(--ts-gray);
  padding: 16px 36px;
  white-space: nowrap;
}
.did-you-know__card {
  background: var(--light-yellow);
  border: 3px solid var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(2.5rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.did-you-know__lead { font-size: var(--fs-lead); font-weight: 700; color: var(--dark-orange); line-height: 1.3; letter-spacing: -0.56px; }
.did-you-know__text { font-size: var(--fs-body); font-weight: 500; line-height: 1.75; opacity: .8; }

.dashed-note {
  position: relative;
  z-index: 1;
  max-width: 662px;
  margin: 0 auto;
  background: rgba(69,141,132,.2);
  border: 4px dashed var(--dark-teal);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 2.25rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.dashed-note__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.dashed-note__sub { font-size: var(--fs-card); font-weight: 700; color: var(--teal-text); line-height: 1.2; }

/* =====================================================================
   Solution / Demo
   ===================================================================== */
.solution {
  position: relative;
  background: var(--white);
  padding: clamp(5rem, 12vw, 15rem) var(--pad) clamp(4rem, 8vw, 7.5rem);
  overflow: hidden;
}
.solution__wave-end {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%) scaleY(-1);
  width: 110%;
  max-width: none;
  z-index: 0;
}
.solution__accent {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.solution__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; }
.solution__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  flex-wrap: wrap;
  font-size: var(--fs-h1);
  color: var(--dark-teal);
  text-shadow: var(--ts-teal);
  letter-spacing: -1.44px;
  line-height: 1.2;
}
.solution__logo { height: clamp(54px, 8vw, 100px); width: auto; }
.solution__title-2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  text-align: center;
  text-shadow: var(--ts-teal);
  letter-spacing: -1.44px;
  line-height: 1.2;
}
.solution__desc { margin-top: 1rem; text-align: center; font-size: var(--fs-body); font-weight: 500; line-height: 1.75; opacity: .8; }

.demo {
  width: 100%;
  max-width: 920px;
  display: flex;
  justify-content: center;
  padding-block: 0;
}
.demo__lottie {
  width: 400px;
  max-width: 100%;
  height: auto;
}
.demo__lottie svg,
.demo__lottie canvas { width: 100% !important; height: auto !important; }

/* =====================================================================
   Feature marquee bar
   ===================================================================== */
.feature-bar {
  background: var(--orange);
  border-block: 3px solid var(--white);
  box-shadow: 4px 4px 0 rgba(250,171,92,.5);
  padding: 24px 0;
  overflow: hidden;
}
.feature-bar__track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.feature-bar__set {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--white);
  text-shadow: var(--ts-gray);
  letter-spacing: -0.96px;
  white-space: nowrap;
}
.feature-bar__dot { width: 12px; height: 12px; background: var(--white); transform: rotate(45deg); border-radius: 2px; flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   Photo gallery — static layered composition (not a slider)
   Sizes/positions are proportional to the 1512px Figma frame via
   min(px, vw): they scale down on smaller screens but cap at native
   size on screens wider than the design, so the layout never breaks.
   ===================================================================== */
.gallery {
  position: relative;
  background: var(--white) url("../assets/gallery-playmo.png") center / cover no-repeat;
  height: 90vh;
  overflow: hidden;
}
.gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gallery__row {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
}
.gallery__track { display: flex; flex: none; }
.gallery__row--back  { top: min(8px, 0.53vw);   opacity: .35; filter: blur(5px); }
.gallery__row--mid   { top: min(92px, 6.08vw);  opacity: .8;  filter: blur(4px); }
.gallery__row--front { top: min(216px, 14.29vw); }
.gallery__row--back  .gallery__track { gap: min(10px, 0.64vw); }
.gallery__row--mid   .gallery__track { gap: min(13px, 0.86vw); }
.gallery__row--front .gallery__track { gap: min(19px, 1.29vw); }

.tile {
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--light-blue);
}
.gallery__row--back .tile  { width: min(120px, 7.94vw);  height: min(120px, 7.94vw); }
.gallery__row--mid .tile   { width: min(160px, 10.58vw); height: min(160px, 10.58vw); }
.gallery__row--front .tile {
  width: min(240px, 15.87vw);
  height: min(406px, 26.85vw);
  display: grid;
  place-items: center;
}
/* back / mid: small blurred thumbnails fill their square */
.gallery__row--back .tile img,
.gallery__row--mid .tile img { width: 100%; height: 100%; object-fit: cover; }
/* front: full phone screen sits inside a soft colour card (matches Figma) */
.gallery__row--front .tile img {
  width: 73%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 22px rgba(45, 90, 90, .12);
}
.tile--blue { background: var(--light-blue); }
.tile--yellow { background: var(--light-yellow); }
.tile--pink { background: var(--light-pink); }
.tile--purple { background: var(--light-purple); }

/* =====================================================================
   Comic / Story
   ===================================================================== */
.comic { background: var(--white); padding: clamp(2.5rem, 5vw, 3rem) var(--pad) 0; overflow: hidden; }
.comic__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); flex-wrap: wrap; }
.comic__title { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-h1); text-shadow: var(--ts-teal); letter-spacing: -1.44px; line-height: 1.2; }
.comic__chars { display: flex; align-items: flex-end; }
.comic__chars img { width: clamp(70px, 9vw, 120px); height: auto; }
.comic__chars img:first-child { transform: rotate(-32deg); }
.comic__chars img:last-child { transform: rotate(-10deg); margin-left: -10px; }

.comic__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.panel {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  min-height: clamp(360px, 50vw, 600px);
  padding: clamp(1.25rem, 2.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}
.panel--bottom { justify-content: flex-end; align-items: flex-end; text-align: right; }
.panel--stack { gap: 1rem; }
.panel--wide { grid-column: 1 / -1; min-height: clamp(320px, 40vw, 500px); border: 4px solid var(--light-purple); }

.bubble {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  max-width: 505px;
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--gray);
  text-shadow: var(--ts-gray);
  line-height: 1.2;
  letter-spacing: -0.56px;
}
.bubble--shadow-orange { box-shadow: 8px 8px 0 #eed7c0; }
.bubble--shadow-blue { box-shadow: 8px 8px 0 #e1eff9; }
.bubble--shadow-teal { box-shadow: 8px 8px 0 #d4ece9; }
.bubble--shadow-orange2 { box-shadow: 8px 8px 0 #fdba86; }

.finale { position: relative; margin-top: clamp(1rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; align-items: center; }
.finale__panel {
  width: 100%;
  border-radius: var(--r-xl);
  background-image: linear-gradient(to bottom, var(--light-blue) 19%, rgba(241,249,248,0) 55%), var(--bg);
  background-size: cover;
  background-position: center;
  min-height: clamp(420px, 55vw, 800px);
  display: grid;
  place-items: start center;
  padding: clamp(2rem, 5vw, 3rem);
}
.finale__title { display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: var(--fs-h2); text-shadow: var(--ts-teal); letter-spacing: -0.84px; line-height: 1.2; max-width: 1000px; }
.finale__wave { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); width: 100vw; max-width: none; margin-bottom: -64px; }
.finale__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -96px;
  margin-bottom: 0;
  padding-bottom: 40px;
  /* Full-bleed teal plinth so there is no white gap below the wave —
     the top overlaps the wave's solid teal (same colour, seamless) and
     the bottom meets the footer. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--pad);
  background: linear-gradient(0deg, var(--teal) 0%, var(--teal) 70%, transparent 70%);
}
.finale__cta-card {
  background: var(--white);
  border: 8px solid var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 48px clamp(1.5rem, 4vw, 3rem) 72px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-h3);
  text-shadow: var(--ts-teal);
  line-height: 1.2;
  letter-spacing: -0.96px;
  max-width: 632px;
}
.finale__cta-card span { display: block; }
.finale__cta .btn-playmo { margin-top: -44px; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer__top { background: var(--teal); padding: 24px 0; }
.footer__top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__logo img { height: 48px; width: auto; }
.footer__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); font-weight: 700; color: var(--dark-teal); }
.footer__nav a { transition: opacity .15s ease; }
.footer__nav a:hover { opacity: .7; }

.footer__bottom { background: var(--dark-teal); border-top: 4px solid var(--teal); padding: 16px 0; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2vw, 1.5rem); flex-wrap: wrap; color: var(--white); font-weight: 700; font-size: var(--fs-nav); text-align: center; }
.footer__copy { display: inline-flex; gap: 4px; }
.footer__dot { width: 4px; height: 4px; background: var(--white); transform: rotate(45deg); flex: none; }
.footer__mark { height: 22px; width: auto; }

/* =====================================================================
   Tablet  (<= 1024px)
   ===================================================================== */
@media (max-width: 1024px) {
  .hero { height: auto; padding: 16px; }
  .hero__card-wrap { max-width: 640px; }
  /* Stack the card over the photo and let the photo sit flush with the
     bottom edge of the rounded frame (no bottom padding, no gap). */
  .hero__inner { flex-direction: column; padding-bottom: 0; }
  .hero__art {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 560px;
    margin: 2rem auto 0;
    z-index: 3;
  }
  .hero__photo { display: block; width: 100%; height: auto; }

  .solution__accent { width: 200%; bottom: 0; }
}

/* =====================================================================
   Mobile  (<= 720px)
   ===================================================================== */
@media (max-width: 720px) {
  /* Nav becomes a slide-down menu */
  .navbar__toggle { display: flex; }
  .navbar__nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--teal);
    padding: 0 var(--pad);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
  }
  .navbar__nav.is-open { max-height: 420px; padding: .5rem var(--pad) 1.25rem; }
  .navbar__links { flex-direction: column; align-items: stretch; gap: 0; }
  .navbar__link { padding: 14px 8px; border-bottom: 1px solid rgba(255,255,255,.18); text-align: left; }
  .navbar__link.is-active { background: rgba(255,255,255,.18); border-radius: 8px; }
  .navbar__nav .btn-playmo { margin-top: 1rem; align-self: flex-start; }

  /* Hero CTA aligns + smaller heading so the card stays compact */
  .hero__cta { padding-left: 0; }
  /* Tighter padding + smaller type so the text block is more compact. */
  .hero__inner {
    padding: 1.1rem 1rem 0;
    background:
      linear-gradient(180deg, var(--teal) 8%, rgba(129,201,192,0) 42%),
      url("../assets/hero-bg.jpg") center bottom / 150% auto no-repeat,
      var(--teal);
  }
  .hero__card { padding: 1.25rem; gap: 0.85rem; }
  .hero__title { font-size: clamp(1.45rem, 5.4vw, 1.9rem); letter-spacing: -0.5px; }
  .hero__desc { font-size: 0.95rem; line-height: 1.6; }
  /* Enlarge the people photo (full-bleed) so it reads larger and more
     realistic against the smaller background scene. */
  .hero__art { max-width: none; width: calc(100% + 2rem); margin: 1.25rem -1rem 0; }

  /* Interlude card full width */
  .interlude__inner { justify-content: center; }
  .pill-quote { white-space: normal; }
  /* Enlarge the wave silhouette and anchor it to the left so the children
     read bigger; add bottom space so there's a gap to the text card. */
  .interlude { padding-bottom: clamp(7rem, 36vw, 12rem); }
  .interlude__wave { width: 200%; left: 0; right: auto; }

  /* Timeline collapses to single rail on the left */
  .timeline { gap: 2rem; }
  .problem__flow::before { left: 22px; }
  .timeline__row { grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
  /* Pin node + card to the same grid row so left rows (card-first in the
     DOM) don't push the illustration onto a second row below the card. */
  .timeline__node { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .timeline__node--char { padding: 8px; border-radius: 12px; }
  .timeline__row--right .info-card,
  .timeline__row--left .info-card { grid-column: 2; grid-row: 1; max-width: none; justify-self: stretch; }
  .did-you-know__badge { white-space: normal; text-align: center; }

  /* Comic to single column. On mobile, keep the photo fully visible and
     drop the caption to the bottom of each panel (smaller + tighter) so it
     reads like a caption instead of covering the image. */
  .comic__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .panel {
    min-height: clamp(300px, 78vw, 440px);
    justify-content: flex-end;
    align-items: stretch;
    text-align: left;
    padding: 0.85rem;
  }
  .panel--bottom { text-align: left; align-items: stretch; }
  .panel--stack { gap: 0.6rem; }
  .bubble {
    padding: 14px 16px;
    font-size: 1rem;
    max-width: none;
    align-self: stretch;
  }
  .comic__title { width: 100%; }

  /* Gallery: taller band on mobile (~2x) with the image filling the frame
     (cover) instead of the short letterboxed strip. */
  .gallery { height: min(90vw, 460px); aspect-ratio: auto; }

  .finale__cta-card { white-space: normal; }
  /* Stack the footer top row and center the logo on mobile. */
  .footer__top-inner { flex-direction: column; align-items: center; }
  .footer__logo { display: flex; justify-content: center; width: 100%; }
  .footer__nav { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   Small phones  (<= 480px) — tighten the fluid type scale so headings
   stay proportional and don't dominate the screen.
   ===================================================================== */
@media (max-width: 480px) {
  :root {
    --fs-display: 1.95rem;  /* ~31px hero / section titles */
    --fs-h1: 1.9rem;        /* ~30px solution / comic titles */
    --fs-h2: 1.55rem;       /* ~25px */
    --fs-h3: 1.3rem;        /* ~21px */
    --fs-card: 1.2rem;      /* ~19px bubbles */
    --fs-lead: 1.05rem;     /* ~17px */
    --fs-body: 1rem;        /* 16px body — keep readable */
  }
  .hero__title { letter-spacing: -0.6px; }
  .btn-playmo { font-size: 1.2rem; --pad-y: 16px; padding: 16px 28px; }
  .feature-bar__set { font-size: 1.5rem; }
  .did-you-know__badge { font-size: 1rem; padding: 12px 22px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}