:root {
  --lumi: #b89cff;
  --lumi-deep: #4b2a7a;
  --lumi-heart: #ffe6a6;
  --lumi-blush: #ffb3c6;
  --lumi-soft: #f3ecff;
  --suno: #ffd54d;
  --suno-petal: #ffb724;
  --suno-ember: #ff8a1c;
  --suno-cream: #fff7e6;
  --suno-eye: #8b5a2b;
  --zippy: #7fd45a;
  --zippy-lime: #a6ea70;
  --zippy-spot: #56c05a;
  --zippy-blue: #2ea7d8;
  --zippy-pack: #ff8c2a;
  --zippy-soft: #e9fbe3;
  --ink: #2a1848;
  --ink-soft: #4a2f78;
  --paper: #fff4fb;
  --sky: #7ad7ff;
  --sky-deep: #3ec6f0;
  --yt: #ff2d2d;
  --pink: #ff6ad5;
  --candy: #ff8ab8;
  --shadow: 0 16px 0 rgba(42, 24, 72, 0.12);
  --radius: 32px;
  --header-h: 88px;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --rainbow: linear-gradient(90deg, #ff4d8d, #ffb724, #7fd45a, #2ea7d8, #b89cff, #ff6ad5);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 8% 12%, #ff9de2 0%, transparent 55%),
    radial-gradient(800px 480px at 96% 8%, #7ad7ff 0%, transparent 50%),
    radial-gradient(720px 420px at 80% 70%, #ffe36a 0%, transparent 52%),
    radial-gradient(680px 400px at 10% 78%, #9dff8a 0%, transparent 50%),
    linear-gradient(180deg, #7ad7ff 0%, #ffd6f3 28%, #fff38a 52%, #c8ffb0 74%, #d7b8ff 100%);
  line-height: 1.55;
  overflow-x: hidden;
}

.blob-field {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  animation: blob-float 10s ease-in-out infinite;
}

.b1 { width: 180px; height: 180px; left: -40px; top: 22%; background: #ff6ad5; }
.b2 { width: 220px; height: 220px; right: -60px; top: 48%; background: #ffd54d; animation-delay: 1.4s; }
.b3 { width: 160px; height: 160px; left: 18%; bottom: 8%; background: #7fd45a; animation-delay: 2.2s; }
.b4 { width: 140px; height: 140px; right: 22%; top: 12%; background: #7c5cff; animation-delay: 0.6s; }

@keyframes blob-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.08); }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 80;
  background: #fff;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
}

.skip-link:focus {
  top: 12px;
}

main {
  position: relative;
  z-index: 1;
}

.container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ff2d8a;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 42px;
}

.section-head h2,
.character-copy h2,
.together-copy h2,
.world-copy h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.section-lead {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 1.12rem;
}

.rainbow-text {
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head.light,
.section-head.light .eyebrow,
.section-head.light .section-lead {
  color: #fff8ee;
}

.section-head.light .section-lead {
  opacity: 0.88;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 800;
  padding: 12px 20px;
  min-height: 48px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn-xl {
  padding: 14px 24px;
  min-height: 54px;
  font-size: 1.05rem;
}

.btn-yt {
  background: linear-gradient(180deg, #ff5b5b, #ff1f1f);
  color: #fff;
  box-shadow: 0 6px 0 #b40000;
}

.btn-ghost {
  background: #fff;
  color: #7c3aed;
  border: 3px solid #fff;
  box-shadow: 0 6px 0 #c084fc;
}

.btn-ghost-dark {
  background: #ffe36a;
  color: #7c2d12;
  box-shadow: 0 6px 0 #e0a100;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.btn:focus-visible,
.site-nav a:focus-visible,
.friend-card:focus-visible,
.watch-hero:focus-visible {
  outline: 3px solid var(--suno);
  outline-offset: 3px;
}

/* Floating sky decorations */
.sky-notes {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
}

.float-note,
.sparkle {
  position: absolute;
  opacity: 0.28;
  animation: drift 11s ease-in-out infinite;
}

.float-note { font-size: 2rem; color: #ff2d8a; opacity: 0.7; }
.sparkle { font-size: 1.4rem; color: #ffe36a; opacity: 0.8; }

.n1 { left: 6%; top: 18%; animation-delay: 0s; }
.n2 { right: 8%; top: 28%; color: #60a5fa; animation-delay: 1.4s; }
.n3 { left: 14%; bottom: 16%; color: #f59e0b; animation-delay: 2.2s; }
.n4 { right: 16%; bottom: 22%; animation-delay: 3s; }
.s1 { left: 40%; top: 14%; animation-delay: 0.6s; }
.s2 { right: 28%; top: 12%; animation-delay: 1.8s; }
.s3 { left: 30%; bottom: 10%; animation-delay: 2.6s; }
.s4 { right: 40%; bottom: 18%; animation-delay: 0.9s; }

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: linear-gradient(90deg, #ff8ad8, #ffd54d 35%, #7ef0a0 65%, #7ad7ff);
  box-shadow: 0 6px 0 rgba(42, 24, 72, 0.12);
}

.nav-wrap {
  width: min(1180px, calc(100% - 24px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lumi);
}

.brand picture {
  display: block;
  min-width: 0;
  line-height: 0;
}

.brand-wordmark {
  height: 68px;
  width: auto;
  max-width: min(320px, 42vw);
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(42, 24, 72, 0.18));
}

@media (max-width: 1100px) {
  .brand-wordmark {
    height: 56px;
    max-width: min(240px, 34vw);
  }
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 0 #7c3aed;
  position: relative;
}

.burger,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 99px;
  background: var(--ink);
  transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
}

.burger { top: 22px; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { top: 0; transform: rotate(-45deg); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  text-decoration: none;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  color: #3b0764;
  background: rgba(255, 255, 255, 0.55);
}

.site-nav a:hover {
  background: #fff;
  transform: translateY(-2px);
}

.site-nav a.nav-lumi { background: #e9d5ff; color: #5b21b6; }
.site-nav a.nav-suno { background: #fef08a; color: #b45309; }
.site-nav a.nav-zippy { background: #bbf7d0; color: #15803d; }

.nav-cta {
  margin-left: 6px;
  padding-inline: 16px;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
}

.hero-art picture,
.hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-art img {
  object-fit: cover;
  object-position: center 58%;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 24, 72, 0.08) 0%, rgba(42, 24, 72, 0.05) 42%, rgba(42, 24, 72, 0.55) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(820px, calc(100% - 32px));
  margin: -58px auto 0;
  text-align: center;
  color: var(--ink);
  padding: 28px 30px 30px;
  border-radius: 36px;
  background:
    linear-gradient(#fff7ff, #fff7ff) padding-box,
    var(--rainbow) border-box;
  border: 6px solid transparent;
  box-shadow: 0 14px 0 rgba(124, 58, 237, 0.22);
}

.hero-copy .eyebrow {
  color: #d946ef;
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tag {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: #7c3aed;
}

.hero-lead {
  margin: 12px auto 0;
  max-width: 640px;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  color: #4c1d95;
}

.handle {
  margin: 14px 0 0;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7c3aed;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* Pillars */
.pillars {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 86px 0 40px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pillar {
  border-radius: var(--radius);
  padding: 28px 22px 26px;
  box-shadow: 0 10px 0 rgba(42, 24, 72, 0.16);
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.7);
}

.pillar h2 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.pillar p {
  margin: 0;
  color: inherit;
}

.pillar-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}

.pillar-lumi { background: linear-gradient(180deg, #f3e8ff, #c084fc); color: #4c1d95; }
.pillar-suno { background: linear-gradient(180deg, #fff7cc, #ffb724); color: #9a3412; }
.pillar-zippy { background: linear-gradient(180deg, #dcfce7, #4ade80); color: #14532d; }

/* Friends */
.friends {
  padding: 72px 0 56px;
  background:
    radial-gradient(circle at 12% 20%, #ffe36a 0 90px, transparent 91px),
    radial-gradient(circle at 88% 18%, #ff8ad8 0 70px, transparent 71px),
    linear-gradient(180deg, #ff7ad9 0%, #ffb3ec 40%, #ffd6f6 100%);
}

.friends .section-head h2 {
  color: #fff;
  text-shadow: 0 4px 0 #c026d3;
}

.friends .section-lead,
.friends .eyebrow {
  color: #fff7fb;
}

.friend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.friend-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 12px 0 rgba(42, 24, 72, 0.16);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.friend-card:hover {
  transform: translateY(-8px) rotate(-1deg);
}

.friend-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.friend-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.friend-photo.cutout {
  display: grid;
  place-items: center;
  padding: 16px 10px 8px;
}

.friend-photo.cutout img {
  object-fit: contain;
  object-position: center;
  height: 100%;
}

.lumi-photo {
  background:
    radial-gradient(circle at 50% 70%, #ffe6a6 0 28%, transparent 52%),
    linear-gradient(180deg, #f0abfc, #7c3aed);
}

.suno-photo {
  background:
    radial-gradient(circle at 50% 70%, #fff 0 26%, transparent 50%),
    linear-gradient(180deg, #fde047, #f97316);
}

.zippy-photo {
  background:
    radial-gradient(circle at 50% 70%, #7dd3fc 0 24%, transparent 50%),
    linear-gradient(180deg, #bbf7d0, #22c55e 55%, #0284c7);
}

.friend-card:hover .friend-photo img {
  transform: scale(1.05);
}

.friend-card.lumi { background: linear-gradient(180deg, #fff, #f3e8ff); box-shadow: 0 12px 0 #7c3aed; }
.friend-card.suno { background: linear-gradient(180deg, #fff, #fef9c3); box-shadow: 0 12px 0 #ea580c; }
.friend-card.zippy { background: linear-gradient(180deg, #fff, #dcfce7); box-shadow: 0 12px 0 #16a34a; }

.friend-body {
  padding: 20px 20px 24px;
}

.friend-role {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.friend-card.lumi .friend-role { color: var(--lumi-deep); }
.friend-card.suno .friend-role { color: var(--suno-ember); }
.friend-card.zippy .friend-role { color: var(--zippy-blue); }

.friend-body h3 {
  font-size: 2rem;
  margin: 4px 0 8px;
}

.friend-card.lumi h3 { color: var(--lumi-deep); }
.friend-card.suno h3 { color: #b45309; }
.friend-card.zippy h3 { color: #157a38; }

.friend-body p {
  margin: 0 0 12px;
  color: #4c1d95;
}

.text-link {
  font-weight: 800;
  color: #db2777;
}

.text-link::after {
  content: " →";
}

/* Character pages */
.character {
  padding: 72px 0;
}

.character-copy {
  background: rgba(255, 255, 255, 0.42);
  border: 4px solid #fff;
  border-radius: 32px;
  padding: 28px 26px;
  box-shadow: 0 10px 0 rgba(42, 24, 72, 0.12);
}

.lumi-theme {
  background:
    radial-gradient(circle at 90% 10%, #ffe6a6 0 90px, transparent 91px),
    radial-gradient(circle at 8% 80%, #ff6ad5 0 120px, transparent 121px),
    linear-gradient(160deg, #f0abfc, #d946ef 40%, #7c3aed);
}
.suno-theme {
  background:
    radial-gradient(circle at 8% 12%, #fff 0 80px, transparent 81px),
    radial-gradient(circle at 92% 78%, #fb7185 0 110px, transparent 111px),
    linear-gradient(160deg, #fde047, #facc15 42%, #f97316);
}
.zippy-theme {
  background:
    radial-gradient(circle at 88% 14%, #38bdf8 0 90px, transparent 91px),
    radial-gradient(circle at 10% 82%, #4ade80 0 120px, transparent 121px),
    linear-gradient(160deg, #86efac, #22c55e 45%, #0ea5e9);
}

.character-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: center;
}

.character-layout.flip {
  grid-template-columns: 1.1fr 0.9fr;
}

.character-layout.flip .character-copy { order: 2; }
.character-layout.flip .character-art { order: 1; }

.character-copy h2 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
}

.lumi-theme .character-copy h2 { color: var(--lumi-deep); }
.suno-theme .character-copy h2 { color: #c2410c; }
.zippy-theme .character-copy h2 { color: #15803d; }

.character-role {
  margin: 6px 0 16px;
  font-weight: 800;
}

.quote {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.35;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
}

.character-copy > p {
  color: inherit;
}

.trait-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trait-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(42, 24, 72, 0.12);
}

.mantra {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.character-art {
  margin: 0;
}

.character-art > picture,
.character-art > picture img,
.character-art > img {
  border-radius: 28px;
  box-shadow: 0 12px 0 rgba(42, 24, 72, 0.16);
  background: #fff;
  border: 6px solid #fff;
}

.character-art figcaption,
.art-caption {
  text-align: center;
  margin-top: 12px;
  font-weight: 800;
}

.pose-hero {
  margin: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 60%, #ffe6a6 0 22%, transparent 48%),
    linear-gradient(180deg, #f5d0fe, #7c3aed);
  box-shadow: 0 12px 0 rgba(42, 24, 72, 0.16);
  border: 6px solid #fff;
  overflow: hidden;
}

.suno-theme .pose-hero {
  background:
    radial-gradient(circle at 50% 58%, #fff 0 20%, transparent 46%),
    linear-gradient(180deg, #fde047, #ea580c);
}

.suno-theme .pose-row figure {
  background: linear-gradient(180deg, #fef9c3, #fb923c);
}

.zippy-theme .pose-hero {
  background:
    radial-gradient(circle at 50% 58%, #7dd3fc 0 20%, transparent 46%),
    linear-gradient(180deg, #86efac, #16a34a 50%, #0284c7);
}

.zippy-theme .pose-row figure {
  background: linear-gradient(180deg, #dcfce7, #38bdf8);
}

.pose-hero img {
  width: 100%;
  height: min(560px, 70vw);
  object-fit: contain;
  object-position: center;
}

.pose-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.pose-row figure {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 8px 0 rgba(42, 24, 72, 0.14);
  background: linear-gradient(180deg, #fce7ff, #c084fc);
}

.pose-row img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
}

/* Together */
.together {
  padding: 64px 0 80px;
  background:
    linear-gradient(120deg, #ffe36a, #ff8ad8 35%, #7c5cff 68%, #2ea7d8);
  color: #fff;
}

.together .eyebrow,
.together h2,
.together p {
  color: #fff;
}

.together .check-list li {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 10px 16px 10px 40px;
  margin-bottom: 8px;
}

.together-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: center;
}

.together-art {
  margin: 0;
}

.together-art img {
  width: min(460px, 100%);
  margin-inline: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 10px #fff,
    0 0 0 18px #ffd54d,
    0 0 0 28px #ff6ad5,
    0 0 0 38px #7c5cff;
}

.check-list {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding: 8px 0 8px 36px;
  font-weight: 700;
}

.check-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--suno-ember);
}

/* World */
.world {
  padding: 0 0 20px;
}

.world-art {
  position: relative;
  min-height: min(82svh, 880px);
  overflow: hidden;
}

.world-art img {
  width: 100%;
  height: min(82svh, 880px);
  object-fit: cover;
  object-position: center 45%;
}

.world-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 24, 72, 0.02) 35%, rgba(42, 24, 72, 0.55) 100%);
}

.world-copy {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  color: #4c1d95;
  text-align: center;
  background: linear-gradient(180deg, #fff7ff, #ffe36a);
  border: 5px solid #fff;
  border-radius: 28px;
  padding: 22px 20px;
  box-shadow: 0 10px 0 rgba(124, 58, 237, 0.25);
}

.world-copy .eyebrow { color: #db2777; }
.world-copy h2 { color: #7c3aed; }
.world-copy p { color: #4c1d95; }

/* About + FAQ */
.about {
  padding: 72px 0 48px;
  background: linear-gradient(180deg, #7ad7ff, #c4b5fd 55%, #fbcfe8);
}

.about-grid {
  display: flex;
  flex-direction: column;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.about-card {
  background: #fff;
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: 0 8px 0 rgba(42, 24, 72, 0.12);
  border: 4px solid #fff;
}

.about-card h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: #6d28d9;
}

.about-card p {
  margin: 0;
  color: #4c1d95;
}

.faq {
  padding: 40px 0 72px;
  background: linear-gradient(180deg, #fbcfe8, #ffe36a);
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 20px;
  padding: 6px 18px 6px;
  box-shadow: 0 6px 0 rgba(42, 24, 72, 0.1);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  padding: 14px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #db2777;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0 0 16px;
  color: #4c1d95;
}

.faq-item a { color: #db2777; }

/* Watch */
.watch {
  padding: 84px 0 72px;
  background:
    radial-gradient(circle at 15% 20%, #ffe36a 0 120px, transparent 121px),
    radial-gradient(circle at 90% 80%, #7ad7ff 0 140px, transparent 141px),
    linear-gradient(160deg, #7c3aed, #db2777 55%, #ea580c);
  color: #fff;
}

.watch-panel {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 22px;
}

.watch-hero {
  position: relative;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.watch-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
}

.play-btn {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--yt);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease;
}

.watch-hero:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.08);
}

.watch-side {
  background: rgba(255, 255, 255, 0.16);
  border: 4px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(8px);
}

.watch-side h3 {
  font-size: 1.8rem;
}

.watch-side p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.watch-side .tiny {
  margin-top: auto;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Footer */
.site-footer {
  background: linear-gradient(90deg, #ff8ad8, #ffd54d, #7ef0a0, #7ad7ff, #c084fc);
  color: #3b0764;
  padding: 40px 0 32px;
}

.footer-grid {
  display: grid;
  gap: 18px;
  text-align: center;
  justify-items: center;
}

.footer-brand img {
  margin: 0 auto 10px;
  border-radius: 50%;
}

.footer-slogan {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.footer-nav a {
  color: #3b0764;
  font-weight: 800;
  text-decoration: none;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(42, 24, 72, 0.12);
}

.footer-note {
  margin: 0;
  max-width: 460px;
  color: #4c1d95;
  font-weight: 800;
}

.footer-note a {
  color: #7c3aed;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 700ms ease forwards;
}

.reveal:nth-child(2) { animation-delay: 80ms; }
.reveal:nth-child(3) { animation-delay: 160ms; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Tablets */
@media (max-width: 980px) {
  .pillars-grid,
  .friend-grid,
  .character-layout,
  .character-layout.flip,
  .together-grid,
  .watch-panel,
  .about-cards {
    grid-template-columns: 1fr;
  }

  .character-layout.flip .character-copy,
  .character-layout.flip .character-art {
    order: unset;
  }

  .hero-art {
    max-height: none;
  }
}

/* Phones / small tablets */
@media (max-width: 800px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: inline-block; }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, #fff7ff, #ffe4f4);
    padding: 12px;
    border-radius: 22px;
    box-shadow: 0 10px 0 rgba(124, 58, 237, 0.2);
  }

  .site-nav.is-open { display: flex; }

  .site-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-cta { margin-left: 0; }

  .hero-art {
    aspect-ratio: 3 / 4;
    max-height: 86svh;
  }

  .hero-copy {
    margin-top: -36px;
    padding: 22px 18px 24px;
  }

  .hero-art img {
    object-position: center 40%;
  }

  .pillars {
    padding-top: 56px;
  }

  .friends,
  .character,
  .watch {
    padding-top: 56px;
    padding-bottom: 40px;
  }

  .world-art img,
  .world-art {
    min-height: 70svh;
    height: 70svh;
  }

  .play-btn {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 520px) {
  .container { width: min(1120px, calc(100% - 20px)); }

  .brand-mark { width: 44px; height: 44px; }
  .brand-wordmark { height: 48px; max-width: 52vw; }

  .hero-art img {
    object-position: center 34%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-xl { width: 100%; }

  .logo-word {
    font-size: clamp(2.4rem, 13vw, 3.2rem);
  }

  .friend-photo { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .blob,
  .float-note,
  .sparkle,
  .friend-card,
  .friend-photo img,
  .btn,
  .play-btn {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}