/* ============================================================
   HOME PAGE — page-specific styles
   Builds on shared-styles.css (vars, nav, footer, buttons, reveal)
   ============================================================ */

/* ============================================================
   PAPER TEXTURE
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(252, 220, 0, 0.05), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(148, 76, 148, 0.04), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HERO — full bleed playground
   ============================================================ */
.home-hero {
  position: relative;
  padding: 60px 16px 120px;
  /* No overflow:hidden — the decorative blobs are intentionally positioned
     with negative offsets so they bleed past the section edges (yellow blob
     extends up behind the nav, orange blob softens the transition into the
     next section). Both bleeds land on the cream paper page background, so
     they stay visually continuous instead of producing a hard clip line. */
}
.hero-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.1s linear;
}
.blob-1 {
  top: -80px; left: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle at 30% 30%, var(--brand-yellow-300), var(--brand-yellow-100) 60%, transparent 75%);
  opacity: 0.85;
}
.blob-2 {
  top: 40px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle at 60% 40%, var(--brand-plum-100), transparent 70%);
  opacity: 0.9;
}
.blob-3 {
  bottom: -120px; left: 30%;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 50% 50%, var(--brand-orange-100), transparent 70%);
  opacity: 0.7;
}
.blob-4 {
  top: 200px; left: 35%;
  width: 240px; height: 240px;
  background: radial-gradient(circle at 50% 50%, var(--brand-sky-100), transparent 70%);
  opacity: 0.6;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}
@media (min-width: 980px) {
  .hero-inner {
    grid-template-columns: 1.15fr 0.95fr;
    gap: 80px;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: var(--brand-yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 0 var(--brand-green);
  transform: rotate(-2deg);
  margin-bottom: 26px;
}
.hero-eyebrow .dot {
  width: 10px; height: 10px;
  background: var(--brand-orange);
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: inline-block;
}

.home-hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 0.98;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--ink);
  text-wrap: balance;
}
.home-hero h1 .word-yellow {
  position: relative;
  color: var(--ink);
  display: inline-block;
}
.home-hero h1 .word-yellow::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px; bottom: 6%;
  height: 30%;
  background: var(--brand-yellow);
  border-radius: 8px;
  z-index: -1;
  transform: skewX(-6deg) rotate(-1deg);
}
.home-hero h1 .word-orange {
  color: var(--brand-orange);
  display: inline-block;
  transform: rotate(-2deg);
  font-style: italic;
}
.home-hero h1 .word-plum { color: var(--brand-plum); }

.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 32px;
  font-weight: 500;
}

/* Foundation slogan — extracted from the subheading and given its own */
/* hand-written sticker treatment so it reads as a tagline, not a footnote. */
.hero-slogan {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: -8px 0 24px;
  padding: 4px 0;
  position: relative;
  transform: rotate(-1.5deg);
  isolation: isolate;
}
.slogan-mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
}
.slogan-mark--star { transform: rotate(-12deg); }
.slogan-mark--heart { transform: rotate(10deg); }

.slogan-text {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  padding: 2px 6px 4px;
  letter-spacing: 0.005em;
}
.slogan-text::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: 42%;
  background: var(--brand-yellow);
  border-radius: 6px;
  z-index: -1;
  transform: skewX(-5deg) rotate(-0.6deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slogan { transform: none; }
  .slogan-mark--star,
  .slogan-mark--heart { transform: none; }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 30px;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 20px 9px 12px;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 0 var(--brand-orange), 4px 4px 0 2px var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-trust:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--brand-orange), 5px 5px 0 2px var(--ink);
}
.hero-trust .avatars {
  display: flex;
  align-items: center;
}
.hero-trust .av {
  width: 36px;
  height: 36px;
  margin-left: -10px;
  display: block;
  filter: drop-shadow(1.5px 1.5px 0 rgba(26, 43, 31, 0.85));
}
.hero-trust .av:first-child { margin-left: 0; }
.hero-trust .av-1 { transform: rotate(-6deg); }
.hero-trust .av-2 { transform: rotate(4deg); }
.hero-trust .av-3 { transform: rotate(-3deg); }
.hero-trust .av-4 { transform: rotate(7deg); }

.hero-trust .trust-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-trust .stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.hero-trust .trust-star {
  width: 16px;
  height: 16px;
  display: block;
}
.hero-trust .trust-star:nth-child(1) { transform: rotate(-6deg); }
.hero-trust .trust-star:nth-child(2) { transform: rotate(3deg); }
.hero-trust .trust-star:nth-child(3) { transform: rotate(-2deg); }
.hero-trust .trust-star:nth-child(4) { transform: rotate(5deg); }
.hero-trust .trust-star:nth-child(5) { transform: rotate(-4deg); }
.hero-trust .trust-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* Hero — official logo, halo, rays, confetti */
.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
.hero-rays {
  position: absolute;
  width: 620px;
  height: 620px;
  z-index: 1;
  animation: spinSlow 80s linear infinite;
  pointer-events: none;
  max-width: 100%;
}
.hero-halo {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252,220,0,0.55) 0%, rgba(252,96,36,0.18) 45%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
  animation: heroPulse 6s ease-in-out infinite;
}
.hero-logo {
  position: relative;
  z-index: 3;
  width: clamp(280px, 38vw, 460px);
  height: auto;
  filter: drop-shadow(0 25px 50px rgba(26,43,31,0.28));
  animation: heroBob 6s ease-in-out infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.confetti {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  animation: heroBob 5s ease-in-out infinite;
}
.c-1 { width: 22px; height: 22px; background: var(--brand-yellow); top: 6%; left: 8%; animation-delay: -.4s; }
.c-2 { width: 16px; height: 16px; background: var(--brand-orange); top: 14%; right: 10%; animation-delay: -1.2s; }
.c-3 { width: 28px; height: 28px; background: var(--brand-plum); bottom: 12%; right: 6%; animation-delay: -2s; }
.c-4 { width: 14px; height: 14px; background: var(--brand-sky); bottom: 22%; left: 5%; animation-delay: -2.8s; }
.c-5 { width: 18px; height: 18px; background: var(--brand-coral); top: 38%; left: 2%; animation-delay: -1.6s; }
.c-6 { width: 12px; height: 12px; background: var(--brand-green); top: 50%; right: 3%; animation-delay: -3.4s; }

@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes heroBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   VALUES STRIP
   ============================================================ */
/* Renamed from .values to .values-strip to avoid collision with the
   /over-ons "Onze waarden" section which also uses .values. */
.values-strip {
  position: relative;
  padding: 28px 16px;
  background: var(--brand-green);
  color: white;
  border-block: 3px solid var(--ink);
  margin-top: -30px;
  z-index: 5;
}
.values-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}
@media (min-width: 760px) {
  .values-inner { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}
.value-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: -0.01em;
}
.value-item .v-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.value-item:nth-child(2) .v-icon { background: var(--brand-orange); color: white; }
.value-item:nth-child(3) .v-icon { background: var(--brand-plum-300); color: var(--ink); }

/* ============================================================
   IMPACT STATS
   ============================================================ */
/* scoped to <section class="impact"> on the home page only —
   prevents leak to <span class="impact"> in /doneer amount-btn etc. */
section.impact {
  position: relative;
  padding: 100px 16px 80px;
  background: var(--paper);
}
.impact-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 760px) {
  .impact-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: white;
  border: 3px solid var(--ink);
  border-radius: 28px;
  padding: 26px 22px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sticker);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-sticker-lg); }
.stat-card:nth-child(1) { transform: rotate(-1.5deg); background: var(--brand-yellow); }
.stat-card:nth-child(2) { transform: rotate(1.2deg); background: var(--brand-orange-100); }
.stat-card:nth-child(3) { transform: rotate(-0.8deg); background: var(--brand-plum-100); }
.stat-card:nth-child(4) { transform: rotate(1.5deg); background: var(--brand-green-200); }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.04em;
}
.stat-label {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.85;
}
.stat-card .corner-icon {
  position: absolute;
  top: -14px; right: -14px;
  width: 42px; height: 42px;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars {
  padding: 100px 16px;
  position: relative;
  background:
    radial-gradient(circle at 90% 10%, var(--brand-yellow-100), transparent 35%),
    radial-gradient(circle at 5% 90%, var(--brand-plum-100), transparent 40%),
    var(--paper);
}
.pillars .section-head .eyebrow {
  background: white;
  box-shadow: 2px 2px 0 0 var(--brand-orange);
}
.pillars .section-head .lede {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 14px auto 0;
  line-height: 1.55;
}
.pillars-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.pillar {
  position: relative;
  background: white;
  border: 3px solid var(--ink);
  border-radius: 32px;
  padding: 42px 28px 32px;
  box-shadow: var(--shadow-sticker);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow-sticker-lg); }
.pillar:nth-child(1) { transform: rotate(-1.2deg); }
.pillar:nth-child(2) { transform: rotate(0.8deg); }
.pillar:nth-child(3) { transform: rotate(-0.6deg); }

.pillar-icon {
  width: 78px; height: 78px;
  border-radius: 22px;
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 4px 4px 0 0 var(--ink);
}
.pillar h3 {
  font-size: 1.55rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.pillar p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.pillar-tag {
  position: absolute;
  top: -14px;
  left: 24px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: white;
  box-shadow: 2px 2px 0 0 var(--ink);
  transform: rotate(-3deg);
}
.p-1 .pillar-icon { background: var(--brand-yellow); }
.p-1 .pillar-tag  { background: var(--brand-yellow); }
.p-2 .pillar-icon { background: var(--brand-plum-300); }
.p-2 .pillar-tag  { background: var(--brand-plum-300); color: white; }
.p-3 .pillar-icon { background: var(--brand-orange); }
.p-3 .pillar-tag  { background: var(--brand-orange); color: white; }

/* ============================================================
   WOENSDAG FEATURE
   ============================================================ */
.feature {
  padding: 100px 16px;
  background: var(--brand-green);
  color: white;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(252,220,0,0.18) 0%, transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(252,96,36,0.18) 0%, transparent 35%);
  pointer-events: none;
}
.feature-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
}
@media (min-width: 900px) {
  .feature-inner { grid-template-columns: 1fr 1.1fr; gap: 70px; }
}
.feature-text .eyebrow {
  background: var(--brand-yellow);
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: 2px 2px 0 0 var(--brand-orange);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.feature-text .eyebrow .swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  border: 1.5px solid var(--ink);
}
.feature h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  color: white;
  margin-bottom: 20px;
}
.feature h2 em {
  color: var(--brand-yellow);
  font-style: italic;
}
.feature p {
  font-size: 1.1rem;
  opacity: 0.95;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 520px;
}
.price-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 460px;
}
.price-tag {
  background: white;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.3);
  transition: transform .2s ease;
}
.price-tag:nth-child(1) { transform: rotate(-2deg); }
.price-tag:nth-child(2) { transform: rotate(2deg); }
.price-tag:hover { transform: rotate(0deg) scale(1.04); }
.price-tag .label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-plum);
  margin-bottom: 4px;
}
.price-tag .value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Photo collage on right side.
   All .photo* selectors are scoped under .photo-stack to prevent the rules
   from leaking to other pages. Notable casualty before scoping: the
   .featured-card .photo on /partners (orange Hoofdpartner panel) inherited
   `width: 220px` here, leaving a wide white gap between the panel and the
   body text on every viewport. */
.photo-stack {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-stack .photo {
  position: absolute;
  background: white;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 14px 14px 36px;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.4);
  width: 220px;
}
.photo-stack .photo .ph {
  width: 100%;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.photo-stack .photo .ph svg { width: 100%; height: 100%; display: block; }
.photo-stack .photo .caption {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Caveat', cursive, var(--font-display);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
}
.photo-stack .photo-1 { top: 0; left: 10%; transform: rotate(-8deg); z-index: 3; }
.photo-stack .photo-2 { top: 60px; right: 5%; transform: rotate(6deg); z-index: 2; }
.photo-stack .photo-3 { bottom: 0; left: 30%; transform: rotate(-3deg); z-index: 4; }
.photo-stack .photo > .tape {
  position: absolute;
  width: 70px; height: 22px;
  background: var(--brand-yellow);
  opacity: 0.85;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(255,255,255,0.3) 6px, rgba(255,255,255,0.3) 12px);
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  border: 1px solid rgba(0,0,0,0.05);
}

/* ============================================================
   EVENTS PREVIEW
   ============================================================ */
.events {
  padding: 100px 16px;
  background: var(--brand-yellow-50);
  position: relative;
}
.events .section-head .eyebrow .swatch {
  background: var(--brand-green);
}
.events-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }

.event-card {
  background: white;
  border: 3px solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-sticker);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  display: block;
  color: inherit;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sticker-lg); }
.event-card:nth-child(1) { transform: rotate(-1deg); }
.event-card:nth-child(2) { transform: rotate(0.8deg); }
.event-card:nth-child(3) { transform: rotate(-0.5deg); }

.event-img {
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid var(--ink);
}
.event-card:nth-child(1) .event-img { background: linear-gradient(135deg, var(--brand-yellow-300), var(--brand-orange)); }
.event-card:nth-child(2) .event-img { background: linear-gradient(135deg, var(--brand-plum-300), var(--brand-coral)); }
.event-card:nth-child(3) .event-img { background: linear-gradient(135deg, var(--brand-green-200), var(--brand-sky)); }

.event-date {
  position: absolute;
  top: 16px; left: 16px;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 3px 3px 0 0 var(--ink);
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1;
  min-width: 52px;
}
.event-date .day { font-family: var(--font-display); font-size: 1.6rem; }
.event-date .mon { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-plum); margin-top: 2px; }

.event-body { padding: 24px 24px 28px; }
.event-body h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
  line-height: 1.2;
}
.event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.events-cta { text-align: center; margin-top: 50px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  padding: 100px 16px;
  background: var(--paper);
  position: relative;
}
.testimonials .section-head .eyebrow .swatch { background: var(--brand-coral); }
.test-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .test-grid { grid-template-columns: repeat(3, 1fr); } }

.test-card {
  background: white;
  border: 3px solid var(--ink);
  border-radius: 26px;
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-sticker);
  position: relative;
  transition: transform .25s ease;
}
.test-card:hover { transform: translateY(-4px) rotate(0deg) !important; }
.test-card:nth-child(1) { background: var(--brand-yellow-50); transform: rotate(-1deg); }
.test-card:nth-child(2) { background: var(--brand-plum-50); transform: rotate(0.8deg); }
.test-card:nth-child(3) { background: var(--brand-orange-50); transform: rotate(-0.6deg); }

.test-quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--brand-orange);
  margin-bottom: 8px;
  font-weight: 800;
}
.test-card:nth-child(2) .test-quote-mark { color: var(--brand-plum); }
.test-card:nth-child(3) .test-quote-mark { color: var(--brand-green); }
.test-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 500;
}
.test-author { display: flex; align-items: center; gap: 12px; }
.test-author .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  flex-shrink: 0;
  box-shadow: 2px 2px 0 0 var(--ink);
  background: var(--brand-yellow); /* safe fallback */
}
.test-author .av.av-1 { background: linear-gradient(135deg, var(--brand-yellow), var(--brand-orange)); }
.test-author .av.av-2 { background: linear-gradient(135deg, var(--brand-plum), var(--brand-coral)); }
.test-author .av.av-3 { background: linear-gradient(135deg, var(--brand-green-500), var(--brand-sky)); }
.test-author .av.av-4 { background: linear-gradient(135deg, var(--brand-orange), var(--brand-coral)); }
.test-author .av.av-5 { background: linear-gradient(135deg, var(--brand-sky), var(--brand-green-500)); }
.test-author .av.av-6 { background: linear-gradient(135deg, var(--brand-coral), var(--brand-yellow)); }
.test-author .name { font-weight: 800; font-size: 0.95rem; }
.test-author .role { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }

/* ============================================================
   DONATE BAND
   ============================================================ */
.donate {
  padding: 100px 16px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.donate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 200px at 10% 30%, var(--brand-yellow-100), transparent),
    radial-gradient(circle 240px at 90% 70%, var(--brand-coral-100), transparent);
  opacity: 0.6;
}
.donate-card {
  position: relative;
  max-width: 1100px;
  margin: 24px auto 14px;
  background:
    /* soft brand-tinted blobs to break up the white expanse */
    radial-gradient(circle at 12% 22%, rgba(252, 220, 0, 0.18) 0%, transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(255, 138, 138, 0.14) 0%, transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(95, 184, 214, 0.08) 0%, transparent 40%),
    white;
  border: 3px solid var(--ink);
  border-radius: 32px;
  padding: 48px 36px 44px;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  /* Layered sticker shadow: yellow band offset + ink outline around the yellow */
  box-shadow:
    10px 10px 0 0 var(--brand-yellow),
    10px 10px 0 3px var(--ink);
  transform: rotate(-0.6deg);
  overflow: hidden;
}

/* Decorative shapes layer — sits behind the content */
.donate-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 32px;
  overflow: hidden;
}
.donate-deco svg {
  position: absolute;
  display: block;
}
.donate-deco .d-wavy {
  height: auto;
}
.donate-deco .d-wavy--tl {
  top: 60px;
  left: 38px;
  width: 90px;
  transform: rotate(-4deg);
}
.donate-deco .d-wavy--br {
  bottom: 70px;
  right: 38%;
  width: 110px;
  transform: rotate(6deg);
}
.donate-deco .d-heart {
  top: 50%;
  left: 18px;
  width: 26px;
  height: auto;
  transform: translateY(-30%) rotate(-14deg);
}
.donate-deco .d-star {
  bottom: 32px;
  left: 28%;
  width: 30px;
  height: auto;
  transform: rotate(14deg);
}
.donate-deco .d-dot {
  width: 12px;
  height: auto;
}
.donate-deco .d-dot--1 {
  top: 32%;
  left: 36%;
  width: 10px;
}
.donate-deco .d-dot--2 {
  bottom: 40%;
  left: 14%;
  width: 14px;
}
.donate-deco .d-dot--3 {
  top: 22%;
  left: 42%;
  width: 8px;
}

/* Hide some decorations on narrower screens to avoid overlap with image */
@media (max-width: 899px) {
  .donate-deco .d-wavy--br,
  .donate-deco .d-dot--1 {
    display: none;
  }
}

/* Ensure content sits above the decoration layer */
.donate-card > div:not(.donate-deco) {
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .donate-card { grid-template-columns: 1.55fr 1fr; padding: 56px 52px; }
}

/* Washi tape strip pinning the card to the page */
.donate-card::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 130px;
  height: 28px;
  background: var(--brand-yellow);
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 0 var(--ink);
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0,
    transparent 6px,
    rgba(26, 43, 31, 0.2) 6px,
    rgba(26, 43, 31, 0.2) 8px
  );
}

/* Floating sticker decorations next to the card */
.donate-card::after {
  content: '';
  position: absolute;
  top: -22px;
  right: -18px;
  width: 56px;
  height: 56px;
  background: var(--brand-coral);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: rotate(12deg);
  background-image: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5) 0%, transparent 45%);
}
.donate-card .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--brand-yellow);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
  box-shadow: 3px 3px 0 0 var(--ink);
  transform: rotate(-2deg);
}
.donate-card .pill svg path {
  fill: var(--brand-orange) !important;
}
.donate-card h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.donate-card h2 em {
  color: var(--brand-orange);
  font-style: italic;
  position: relative;
}
.donate-card h2 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M0 4 Q 12.5 0, 25 4 T 50 4 T 75 4 T 100 4' stroke='%23fc6024' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") repeat-x;
  background-size: 60px 8px;
}
.donate-card p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 30px;
  max-width: 540px;
}
.donate-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.donate-amount-chips {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.amount-chip {
  padding: 11px 22px;
  background: white;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: 0.98rem;
  font-family: inherit;
  box-shadow: 3px 3px 0 0 var(--ink);
}
.amount-chip:hover {
  background: var(--brand-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.amount-chip.active {
  background: var(--brand-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.amount-chip:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--ink);
}
.donate-badge {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.donate-badge .glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, var(--brand-yellow) 0%, transparent 60%);
  filter: blur(20px);
  opacity: 0.6;
  border-radius: 50%;
}
.donate-badge img {
  position: relative;
  width: clamp(220px, 28vw, 320px);
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));
  animation: heroBob 5s ease-in-out infinite;
}

/* Solid cream secondary button used inside the donate card */
.donate-card .btn.btn-cream {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.donate-card .btn.btn-cream:hover {
  background: var(--brand-sky);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--ink);
}
.donate-card .btn.btn-cream:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

/* ============================================================
   PARTNERS STRIP
   ============================================================ */
.partners-strip {
  padding: 70px 16px;
  background: white;
  border-block: 3px solid var(--ink);
}
.partners-strip-inner { max-width: 1240px; margin: 0 auto; }
.partners-strip h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-align: center;
  margin: 0 0 30px;
  color: var(--ink-soft);
}
.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.partner-logo {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  opacity: 0.7;
  padding: 0 18px;
  border: 2px dashed rgba(26,43,31,0.2);
  border-radius: 14px;
  transition: opacity .2s;
}
.partner-logo:hover { opacity: 1; }

/* small screens — hero collage scales down */
@media (max-width: 900px) {
  .hero-art { min-height: 400px; }
  .photo-stack { height: 420px; }
  .photo-stack .photo { width: 180px; }
}
@media (max-width: 520px) {
  .photo-stack { height: 380px; }
  .photo-stack .photo { width: 150px; }
  .photo-stack .photo-1 { left: 0; }
  .photo-stack .photo-2 { right: 0; }
  .photo-stack .photo-3 { left: 22%; }
}

/* ============================================================
   PLAYFUL IMPACT-STAT ANIMATIONS
   Numbers count up with overshoot (easeOutBack in JS), then "pop"
   when they land. Corner icons gently bob/wiggle. The card itself
   sits at its tilted rest angle (set by :nth-child) and bounces
   subtly only on hover.
   ============================================================ */

@keyframes count-pop {
  0%   { transform: scale(1)    rotate(0deg); }
  35%  { transform: scale(1.18) rotate(-4deg); }
  60%  { transform: scale(0.94) rotate(3deg); }
  85%  { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.stat-num [data-count].count-popped,
[data-count].count-popped {
  display: inline-block;
  transform-origin: center bottom;
  animation: count-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes corner-bob {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  25%      { transform: translate(0, -4px) rotate(8deg); }
  50%      { transform: translate(0, 0) rotate(-3deg); }
  75%      { transform: translate(0, -2px) rotate(5deg); }
}

.stat-card .corner-icon {
  animation: corner-bob 3.4s ease-in-out infinite;
}
.stat-card:nth-child(1) .corner-icon { animation-delay: 0s; }
.stat-card:nth-child(2) .corner-icon { animation-delay: 0.55s; }
.stat-card:nth-child(3) .corner-icon { animation-delay: 1.1s; }
.stat-card:nth-child(4) .corner-icon { animation-delay: 1.65s; }

/* Slightly stronger card hop on hover. */
.stat-card:hover {
  animation: card-hop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-hop {
  0%   { transform: translateY(0)    rotate(var(--rest-rot, 0)); }
  45%  { transform: translateY(-10px) rotate(calc(var(--rest-rot, 0) + 2deg)); }
  100% { transform: translateY(-4px)  rotate(var(--rest-rot, 0)); }
}
.stat-card:nth-child(1) { --rest-rot: -1.5deg; }
.stat-card:nth-child(2) { --rest-rot: 1.2deg; }
.stat-card:nth-child(3) { --rest-rot: -0.8deg; }
.stat-card:nth-child(4) { --rest-rot: 1.5deg; }

@media (prefers-reduced-motion: reduce) {
  .stat-card .corner-icon { animation: none; }
  .stat-card:hover { animation: none; }
  [data-count].count-popped { animation: none; }
}