/* =================================================================
   TOKENS
================================================================= */
:root{
  --pink:        #ec008c;
  --pink-450:    #f03ca7;
  --pink-300:    #f57ac3;
  --pink-200:    #fbcee9;
  --pink-150:    #fde0f1;
  --pink-100:    #fde9f5;
  --pink-60:     #fef4fa;
  --pink-30:     #fffafd;

  --black:       #202121;
  --ink-850:     #202121;
  --ink-700:     #3a3b3d;
  --ink-550:     #202121;
  --ink-400:     #5c5d61;
  --ink-250:     #f0f0f2;
  --ink-150:     #e2e2e5;
  --ink-80:      #f1f1f2;

  --white:       #ffffff;

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'Space Grotesk', sans-serif;

  --container: 1280px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto; overflow-x:hidden; max-width:100%;}
body{
  font-family:var(--body);
  color:var(--ink-850);
  background:var(--white);
  overflow-x:hidden;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
ul{list-style:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 40px;}
svg{display:block;}
::selection{background:var(--pink);color:#fff;}



:focus-visible{outline:2.5px solid var(--pink); outline-offset:3px; border-radius:4px;}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.08; color:var(--black);}
h1 em, h2 em, h3 em{font-style:italic; font-weight:500; color:var(--pink);}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink); margin-bottom:18px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pink);flex-shrink:0;}

.section-head{max-width:640px;}
.section-head.center{text-align:center;margin:0 auto; max-width:900px;}
.section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);}
.section-head p.sub{font-family:var(--display);font-style:italic;font-weight:500;color:var(--pink);font-size:1.15rem;margin-top:6px;}
.section-head p.desc{color:var(--ink-550);margin-top:10px;font-size:1.02rem;line-height:1.7;}

/* ---------- ruled-notebook texture (signature motif) ---------- */
.ruled{
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 41px, var(--pink-100) 42px);
}
.margin-rule{position:relative; padding-left:28px;}
.margin-rule::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  background:var(--pink-200); border-radius:2px;
}
.margin-rule::after{
  content:''; position:absolute; left:-4px; top:0; width:10px;height:10px;border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 4px var(--pink-100);
}



/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(32px);}
.reveal.in{opacity:1; transform:translateY(0); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft);}
.reveal.stagger.in{transition-delay:var(--d,0s);}

/* ---------- section-entrance variants ----------
   Each section can use a different incoming motion for its non-text
   content (cards/images/blocks), but every variant shares the same
   duration & easing as .reveal so the site still feels cohesive. */
.reveal-scale{opacity:0; transform:scale(.92) translateY(14px);}
.reveal-scale.in{opacity:1; transform:scale(1) translateY(0); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft);}
.reveal-scale.stagger.in{transition-delay:var(--d,0s);}

.reveal-left{opacity:0; transform:translateX(-46px);}
.reveal-left.in{opacity:1; transform:translateX(0); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft);}
.reveal-left.stagger.in{transition-delay:var(--d,0s);}

.reveal-right{opacity:0; transform:translateX(46px);}
.reveal-right.in{opacity:1; transform:translateX(0); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft);}
.reveal-right.stagger.in{transition-delay:var(--d,0s);}

.reveal-blur{opacity:0; transform:translateY(24px); filter:blur(8px);}
.reveal-blur.in{opacity:1; transform:translateY(0); filter:blur(0); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft), filter .8s var(--ease-soft);}
.reveal-blur.stagger.in{transition-delay:var(--d,0s);}

/* ---------- heading-then-description text reveal (shared timing across the site) ---------- */
/* .text-reveal elements are now split into words at runtime (see
   animation.js) and revealed via .tr-word-inner above, so the parent
   itself no longer needs its own opacity/transform treatment. */
.text-reveal{opacity:1;}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:600; font-size:.92rem; padding:17px 32px; border-radius:100px;
  overflow:hidden; isolation:isolate; will-change:transform; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn span{position:relative;z-index:2;}
.btn svg{position:relative;z-index:2;transition:transform .3s var(--ease); flex-shrink:0;}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{
  color:#fff; background:var(--pink);
  box-shadow:0 16px 34px -14px rgba(236,0,134,.7);
  --mx:50%; --my:50%;
}
.btn-primary:hover{box-shadow:0 22px 44px -12px rgba(236,0,134,.8); transform:translateY(-2px);}
.btn-primary.pulse::before{display:none;}


/* ---------- premium gloss sweep + cursor-follow highlight (layered on ::after, additive to existing hover) ---------- */
.btn-primary::after, .nav-cta::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(140px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 62%),
    linear-gradient(115deg, transparent 22%, rgba(255,255,255,.55) 42%, rgba(255,255,255,.55) 48%, transparent 68%);
  background-repeat:no-repeat;
  background-size:100% 100%, 240% 240%;
  background-position:0 0, -160% -160%;
  opacity:0;
  transition:opacity .4s var(--ease-soft), background-position 1s var(--ease-soft);
  mix-blend-mode:overlay;
}
.btn-primary:hover::after, .nav-cta:hover::after{
  opacity:1;
  background-position:0 0, 160% 160%;
}
.btn-outline{color:var(--black); background:#fff; border:1.5px solid var(--black);}
.btn-outline:hover{border-color:var(--pink); color:var(--pink); transform:translateY(-2px);}
.btn-dark{color:#fff;background:var(--black);}
.btn-dark:hover{background:var(--ink-700); transform:translateY(-2px);}
.btn-sm{padding:12px 22px; font-size:.8rem;}
.btn:active{transform:scale(.97);}


section{position:relative;}

/* =================================================================
   PRELOADER + PROGRESS
================================================================= */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--white);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.pre-mark{
  width:60px;height:60px;border-radius:16px; background:var(--pink);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-weight:700;font-size:1.7rem;
  animation:prePulse 1.1s ease-in-out infinite;
}
.pre-mark-logo{
  height:84px; width:auto; object-fit:contain;
}

.pre-line{width:130px;height:2px;background:var(--pink-100);border-radius:2px;overflow:hidden;}
.pre-line span{display:block;height:100%;width:40%;background:var(--pink);animation:preLine 1.1s ease-in-out infinite;}


.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--pink); z-index:9998;
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{width:7px;height:7px;background:var(--pink);}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid rgba(236,0,134,.55);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-hover{width:44px;height:44px;background:rgba(236,0,134,.08);border-color:var(--pink);}


/* =================================================================
   NAV
================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:14px 0;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(32,33,33,.07);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(32,33,33,.07);
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.scrolled{
  padding:14px 0;
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(32,33,33,.07);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(32,33,33,.07);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--black); transition:color .35s var(--ease);}
.nav.scrolled .brand{color:var(--black);}
.brand-mark{
  width:38px;height:38px;border-radius:11px; background:var(--pink);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 8px 18px -6px rgba(236,0,134,.6);
}
.site-logo{
  height:64px; width:auto; object-fit:contain; display:block;
}
.footer-logo{
  height:68px; filter:brightness(0) invert(1);
}
.nav-links{display:flex;gap:38px;font-family:var(--mono);font-size:.86rem;font-weight:600;color:var(--ink-700); transition:color .35s var(--ease);}
.nav.scrolled .nav-links{color:var(--ink-700);}
.nav-links a{
  position:relative; padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--pink);transition:width .3s var(--ease);}
.nav-links a:hover{color:var(--black);}
.nav.scrolled .nav-links a:hover{color:var(--black);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--pink);color:#fff;font-family:var(--mono);font-weight:600;font-size:.85rem;
  padding:13px 24px;border-radius:100px;
  box-shadow:0 10px 24px -8px rgba(236,0,134,.6);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nav-cta:hover{box-shadow:0 16px 32px -8px rgba(236,0,134,.7); transform:translateY(-1px);}
.nav-cta:active{transform:scale(.97);}
.nav-cta-content{position:relative; z-index:2; display:flex; align-items:center; gap:8px;}

.nav-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}

/* ---------- Mobile hamburger toggle ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:var(--ink-80);
  transition:background .3s var(--ease);
}
.nav.scrolled .nav-toggle{background:var(--ink-80);}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--black);
  transition:transform .35s var(--ease), opacity .25s var(--ease), background .3s var(--ease);
}
.nav.scrolled .nav-toggle span{background:var(--black);}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Mobile menu (slide-in panel) ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:490;
  background:rgba(32,33,33,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.mobile-menu.open{opacity:1; visibility:visible; pointer-events:auto;}
.mobile-menu-panel{
  position:absolute; top:0; right:0; height:100%; width:min(360px, 82vw);
  background:#fff; padding:112px 30px 40px;
  display:flex; flex-direction:column;
  box-shadow:-30px 0 60px -20px rgba(32,33,33,.4);
  transform:translateX(100%);
  transition:transform .5s var(--ease-soft);
  overflow-y:auto;
}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0);}
.mobile-menu-close{
  position:absolute; top:24px; right:24px; width:40px; height:40px; border-radius:50%;
  background:var(--ink-80); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.mobile-menu-close:hover{background:var(--pink); color:#fff; transform:rotate(90deg);}
.mobile-menu-links{display:flex; flex-direction:column; margin-bottom:30px;}
.mobile-menu-links a{
  font-family:var(--mono); font-weight:600; font-size:1.06rem; color:var(--black);
  padding:17px 2px; border-bottom:1px solid var(--ink-150);
  transition:color .25s var(--ease), padding .25s var(--ease);
}
.mobile-menu-links a:hover, .mobile-menu-links a:active{color:var(--pink); padding-left:8px;}
.mobile-menu-cta{width:100%; justify-content:center; margin-top:auto;}


/* =================================================================
   HERO
================================================================= */
.hero{padding:28px 0 70px; background:var(--white); overflow:hidden;}

.hero{
  min-height:auto; display:flex; align-items:center; padding:120px 0 60px;
  position:relative; overflow:hidden;
  background:var(--white);
}
.hero-ruled{position:absolute; inset:0; z-index:0; opacity:.6;}
.hero-wash{
  position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(900px 560px at 92% 6%, var(--pink-60), transparent 55%),
             radial-gradient(640px 460px at -8% 96%, var(--pink-30), transparent 55%);
  opacity:.75;
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center;}

.hero-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;font-size:.84rem;color:var(--ink-700);margin-bottom:16px;}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 1.8s ease-in-out infinite;}


.hero h1{font-size:clamp(2.7rem, 4.6vw, 4.3rem); margin-bottom:18px; position:relative;}
.hero h1 .line{display:block; overflow:visible;}

/* ---------- Writing entrance effect (word-by-word, no pen) ----------
   Words are split into .tr-word (mask) > .tr-word-inner (the text that
   rises + fades into place). JS staggers each word so the line reads
   as though it's being written, without any pen/cursor graphic. */
.tr-word{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* Fraunces (italic) has decorative swash curls that extend above/below
     normal letter metrics. This mask box was sized for plain text, so it
     was clipping those curls wherever the reveal animation is used. The
     padding gives the curls room; the matching negative margin cancels
     it back out so line spacing/layout is unaffected. */
  padding:0.32em 0.05em 0.38em; margin:-0.32em -0.05em -0.38em;
}
.tr-word-inner{display:inline-block; transform:translateY(115%); opacity:0; will-change:transform, opacity;}
@media (prefers-reduced-motion: reduce){
  .tr-word-inner{transform:none; opacity:1;}
}

.hero p.lead{font-size:1.15rem; color:var(--ink-550); max-width:480px; margin-bottom:22px; line-height:1.7;}
.hero-ctas{display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap;}

.hero-feats{display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid var(--ink-150); padding-top:18px;}
.hero-feat{display:flex; align-items:center; gap:12px; max-width:170px;}
@media (min-width:1181px){
  .hero-feats{flex-wrap:nowrap; justify-content:space-between;}
  .hero-feat{flex:1 1 0; max-width:none; min-width:0;}
}
.hero-feat .ic{
  width:40px;height:40px;border-radius:11px; background:var(--pink-100); color:var(--pink);
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.hero-feat b{display:block;font-size:.85rem;font-weight:700;font-family:var(--mono);}
.hero-feat small{font-size:.76rem;color:var(--ink-400);}

.hero-visual{position:relative; padding:0; width:100%;}
.hero-photo{
  position:relative; z-index:2; border-radius:28px; overflow:hidden; aspect-ratio:4/4.7; width:100%;
  box-shadow:0 28px 56px -26px rgba(32,33,33,.26);
}
/* Fallback for browsers/in-app webviews that don't support aspect-ratio in this
   nested flex → grid context — without this, .hero-photo can collapse to 0 height
   on some mobile in-app browsers since nothing else defines its size. */
@supports not (aspect-ratio: 1 / 1){
  .hero-photo{ height:0; padding-top:117.5%; }
}
.hero-photo img{width:100%;height:100%;object-fit:cover; transform:scale(1.06); transition:transform 1.3s var(--ease); filter:saturate(1.08);}
.hero-photo:hover img{transform:scale(1.12);}
.hero-photo::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg, transparent 66%, rgba(32,33,33,.46));}

.mask-reveal{position:absolute; inset:0; background:var(--pink); transform-origin:bottom; z-index:4;}

/* ---------- Hero slider (3 rotating images) ---------- */
.hero-slides{position:absolute; inset:0; z-index:1;}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.2s var(--ease-soft), visibility 0s linear 1.2s; z-index:1;}
.hero-slide.is-active{opacity:1; visibility:visible; z-index:2; transition:opacity 1.2s var(--ease-soft), visibility 0s;}
.hero-slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 6.5s ease-out, filter 1s; filter:saturate(1.08);}
.hero-slide.is-active img{transform:scale(1);}
.hero-slider-dots{
  position:absolute; z-index:3; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; row-gap:6px;
  max-width:80%;
}
.hs-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:width .35s var(--ease), background .35s var(--ease);
}
.hs-dot.is-active{width:22px; border-radius:5px; background:#fff;}
.hs-dot:hover{background:rgba(255,255,255,.85);}

.hs-arrow{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.85); color:var(--black);
  box-shadow:0 10px 22px -10px rgba(32,33,33,.45);
  opacity:0; transition:opacity .3s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.hero-photo:hover .hs-arrow{opacity:1;}
.hs-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.hs-arrow-prev{left:14px;}
.hs-arrow-next{right:14px;}
@media (hover:none), (pointer:coarse){ .hs-arrow{opacity:1;} }

.donate-copy-head{max-width:460px;}
.donate-copy-head h2{font-size:clamp(2rem,3.6vw,2.9rem);}
.donate-copy-head p.desc{color:var(--ink-550); margin-top:16px; font-size:1.02rem; line-height:1.7;}

.trust-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:460px; margin-top:36px;
}
.trust-card{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--pink-30); border:1px solid var(--pink-100); border-radius:16px; padding:16px 16px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.trust-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 34px -18px rgba(236,0,134,.35);
  border-color:var(--pink-200); background:#fff;
}
.trust-card .ic{
  width:36px;height:36px;border-radius:11px; flex-shrink:0;
  background:var(--pink); color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 20px -8px rgba(236,0,134,.5);
}
.trust-card b{display:block;font-family:var(--mono);font-weight:700;font-size:1rem;line-height:1.2;}
.trust-card span{font-size:.72rem;color:var(--ink-400);font-weight:600;line-height:1.4;}

.donor-checklist{max-width:460px; margin-top:36px; display:flex; flex-direction:column; gap:14px;}
.donor-checklist li{display:flex; align-items:flex-start; gap:12px; font-size:.92rem; color:var(--ink-700); line-height:1.5;}
.donor-checklist .check{
  width:22px;height:22px;border-radius:50%; background:var(--black); color:#fff; flex-shrink:0;
  display:flex;align-items:center;justify-content:center; margin-top:1px;
}

.hero-particles{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-particles canvas{width:100%;height:100%;display:block;}




/* =================================================================
   TRUST BADGE MARQUEE (below hero)
================================================================= */
.badge-marquee{
  position:relative; z-index:2; background:var(--white);
  border-top:1px solid var(--ink-150); border-bottom:1px solid var(--ink-150);
  padding:11px 0; overflow:hidden;
}
.badge-marquee::before, .badge-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.badge-marquee::before{left:0; background:linear-gradient(90deg, var(--white), transparent);}
.badge-marquee::after{right:0; background:linear-gradient(270deg, var(--white), transparent);}
.badge-track{
  display:flex; align-items:center; gap:0; width:max-content;
  animation:badgeScroll 32s linear infinite;
}
.badge-marquee:hover .badge-track{animation-play-state:paused;}
.badge-item{
  display:flex; align-items:center; gap:9px; padding:0 26px;
  font-family:var(--mono); font-weight:700; font-size:.86rem; color:var(--ink-850);
  white-space:nowrap; border-right:1px solid var(--ink-150);
}
.badge-item svg{flex-shrink:0; color:var(--pink);}
.badge-item:nth-child(4n+2) svg{color:var(--black);}
.badge-item:nth-child(4n+3) svg{color:var(--pink-450);}
.badge-item:nth-child(4n+4) svg{color:var(--ink-700);}






/* =================================================================
   DONATE SECTION
================================================================= */
.donate-section{padding:28px 0 70px; background:var(--white); overflow:hidden;}
.donate-grid{
  display:grid; grid-template-columns:1fr 1fr; column-gap:56px; row-gap:0; align-items:start;
  grid-template-areas:"head form" "rest form";
}
.donate-copy-head{grid-area:head; padding-top:14px;}
.donate-copy-rest{grid-area:rest;}

/* sticky premium donation card */
.donate-card-wrap{grid-area:form; position:sticky; top:120px;}
.donate-card{
  position:relative; background:var(--white); border-radius:26px; padding:30px;
  box-shadow:0 50px 90px -34px rgba(32,33,33,.28), 0 0 0 1px var(--ink-80);
  overflow:hidden;
}
.donate-card::before{
  content:''; position:absolute; top:-60%; right:-30%; width:300px; height:300px; border-radius:50%;
  background:var(--pink-60); z-index:0; filter:blur(10px);
}
.donate-card > *{position:relative; z-index:1;}
.donate-card h3{font-size:1.3rem; margin-bottom:6px;}
.donate-card > p{color:var(--ink-400); font-size:.86rem; margin-bottom:26px;}
.dc-toggle{display:flex; background:var(--pink-30); border-radius:100px; padding:5px; margin-bottom:22px;}
.dc-toggle button{flex:1; padding:11px 0; border-radius:100px; font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--ink-550); transition:.3s;}
.dc-toggle button.active{background:var(--pink); color:#fff; box-shadow:0 10px 20px -8px rgba(236,0,134,.55);}
.dc-label{font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:12px;}
.dc-amounts{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px;}
.dc-amounts button{
  padding:16px 0; border-radius:14px; border:1.5px solid var(--ink-150); font-family:var(--mono); font-size:.92rem; font-weight:700; color:var(--black);
  transition:.25s;
}
.dc-amounts button.active, .dc-amounts button:hover{border-color:var(--pink); color:var(--pink); background:var(--pink-30);}
.dc-amounts button.active{box-shadow:inset 0 0 0 1.5px var(--pink);}
.dc-custom-wrap{position:relative; margin-bottom:22px;}
.dc-custom-wrap span{position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-weight:700; color:var(--ink-400);}
.dc-custom{
  width:100%; padding:16px 16px 16px 34px; border-radius:14px; border:1.5px solid var(--ink-150); font-size:.95rem; font-family:var(--mono); font-weight:600;
}
.dc-custom:focus{border-color:var(--pink);}
.dc-donate{width:100%; justify-content:center; padding:19px 0; font-size:1rem; box-shadow:0 22px 44px -16px rgba(236,0,134,.75);}
.dc-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:.75rem;color:var(--ink-400);font-weight:600;}

/* ---------- single security checkbox, shown above the Donate button ---------- */
.dc-trust-single{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 16px;
  font-family:var(--body); font-size:.76rem; font-weight:600; color:var(--ink-550); line-height:1.35;
}
.dc-trust-box{
  width:15px; height:15px; border-radius:5px; flex-shrink:0; margin-top:1px;
  background:var(--black); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- premium payment method icon row (single line, brand-coloured) ---------- */
.dc-methods-single{
  overflow:visible; padding-bottom:0;
}
.dc-methods-single img{
  display:block; width:100%; max-width:320px; height:auto; margin:0 auto;
}
/* ---------- desktop-only compact sizing (mobile card is untouched) ---------- */
@media (min-width:1081px){
  .donate-section{padding:20px 0 60px;}
  .donate-card-wrap{top:96px;}
  .donate-card{padding:22px 24px;}
  .donate-card h3{font-size:1.15rem; margin-bottom:4px;}
  .donate-card > p{font-size:.82rem; margin-bottom:16px;}
  .dc-label{margin-bottom:8px;}
  .df-project-list{gap:7px; margin-bottom:12px;}
  .df-project{padding:11px 15px;}
  .df-project-name{font-size:.92rem;}
  .df-project-desc{font-size:.72rem;}
  .dc-custom-wrap{margin-bottom:14px;}
  .dc-custom{padding:12px 14px 12px 32px;}
  .dc-trust-single{margin:0 0 10px;}
  .dc-donate{padding:14px 0;}
  .dc-secure{margin-top:10px;}
  .dc-methods{margin-top:10px;}
  .dc-method-icon{height:22px;}
  .dc-methods-cap{margin-top:6px;}
}




/* =================================================================
   PROJECT SHOWCASE
================================================================= */
.projects-section{padding:0 0 28px; background:var(--pink-30);}
.projects-carousel-wrap{position:relative; margin-top:24px; padding:0 56px;}
.projects-carousel{
  overflow-x:auto; overflow-y:hidden; padding:4px 4px 8px;
  -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);
}
.projects-carousel.is-dragging{cursor:grabbing;}
.projects-carousel::-webkit-scrollbar{display:none;}
.projects-grid{display:flex; gap:22px; width:max-content;}
.projects-grid .project-card{flex:0 0 calc((100vw - 300px)/4); width:calc((100vw - 300px)/4); max-width:280px;}
.projects-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--ink-150); color:var(--black);
  cursor:pointer; box-shadow:0 10px 24px -10px rgba(32,33,33,.25);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.projects-arrow:hover{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 14px 28px -10px rgba(236,0,140,.45);}
.projects-arrow:active{transform:translateY(-50%) scale(.92);}
.projects-arrow[disabled]{opacity:.35; cursor:default; box-shadow:none;}
.projects-arrow[disabled]:hover{background:#fff; border-color:var(--ink-150); color:var(--black);}
.projects-arrow-prev{left:0;}
.projects-arrow-next{right:0;}
.project-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--white); border-radius:26px; overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(32,33,33,.25);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.project-card:hover{transform:translateY(-10px); box-shadow:0 36px 70px -26px rgba(32,33,33,.32);}
.project-img{position:relative; aspect-ratio:4/5; overflow:hidden; flex-shrink:0;}
.project-img img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease); -webkit-user-drag:none; user-select:none;}
.project-card:hover .project-img img{transform:scale(1.1);}
.project-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  font-family:var(--mono); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 12px; border-radius:100px; color:var(--pink);
}
.project-amt{
  position:absolute; top:16px; right:16px; z-index:2;
  background:var(--pink); color:#fff; backdrop-filter:blur(8px);
  font-family:var(--mono); font-weight:700; font-size:.8rem;
  padding:7px 13px; border-radius:100px; box-shadow:0 8px 18px -6px rgba(217,38,101,.55);
}
.project-body{padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; justify-content:center;}
.project-body h4{font-size:1.15rem; margin-bottom:8px; line-height:1.2;}
.project-body p{color:var(--ink-550); font-size:.87rem; line-height:1.6; margin-bottom:18px; min-height:44px;}
.project-bullets{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px;}
.project-bullets li{
  position:relative; padding-left:20px; font-size:.85rem; color:var(--ink-550); line-height:1.4;
}
.project-bullets li::before{
  content:''; position:absolute; left:0; top:6px; width:8px; height:8px; border-radius:50%;
  background:var(--pink);
}
.project-body .project-donate{margin-top:6px;}
.project-donate{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:11px 18px; border-radius:12px; background:var(--black); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:.76rem; letter-spacing:.02em;
  box-shadow:0 10px 20px -14px rgba(32,33,33,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.project-donate span{position:relative; z-index:2;}
.project-donate svg{position:relative; z-index:2; width:12px; height:12px; transition:transform .35s var(--ease);}
.project-donate::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(90deg, var(--pink), var(--pink-450));
  opacity:0; transition:opacity .4s var(--ease);
}
.project-donate::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 46%, rgba(255,255,255,.4) 52%, transparent 68%);
  background-size:240% 240%; background-position:-160% -160%; opacity:0;
  transition:opacity .35s var(--ease), background-position .9s var(--ease-soft);
}
.project-donate:hover{
  transform:translateY(-2px); gap:9px;
  box-shadow:0 16px 30px -14px rgba(236,0,134,.5);
}
.project-donate:hover::before{opacity:1;}
.project-donate:hover::after{opacity:1; background-position:160% 160%;}
.project-donate:hover svg{transform:translateX(5px);}




/* =================================================================
   STORY + PROBLEM/MISSION (one seamless section)
================================================================= */
.story-section{
  padding:0 0 40px; position:relative; overflow:hidden;
  background:var(--pink-30);
}
.sp-blob{
  position:absolute; top:-140px; left:-160px; width:420px; height:420px; border-radius:50%;
  background:var(--pink-60); z-index:0; pointer-events:none;
}
.story-head{position:relative; z-index:1; text-align:center; max-width:680px; margin:0 auto 22px;}
.story-head .eyebrow{justify-content:center;}
.story-head h2{font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:0; line-height:1.15;}

.sp-eyebrow::before{content:''; width:14px; height:2px; border-radius:1px; background:var(--pink); flex-shrink:0;}

/* ---------- chalk underline: draws in as it scrolls into view ---------- */
.sp-underline{position:relative; display:inline-block;}
.sp-underline-svg{position:absolute; left:-2%; bottom:-12px; width:104%; height:18px; overflow:visible;}
.sp-underline-svg path{stroke-dasharray:600; stroke-dashoffset:600;}
.sp-underline.drawn .sp-underline-svg path{transition:stroke-dashoffset 1.1s var(--ease); stroke-dashoffset:0;}

.sp-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 90px 1fr; gap:50px; align-items:center;}

.sp-col .eyebrow{margin-bottom:16px;}
.sp-col h3{font-size:clamp(1.5rem,2.4vw,1.9rem); margin-bottom:16px; max-width:420px;}
.sp-col > p{color:var(--ink-550); font-size:.98rem; line-height:1.8; max-width:420px; margin-bottom:30px;}

.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; max-width:420px;}
.stat-block b{
  display:block; font-family:var(--mono); font-weight:700; font-size:2rem; color:var(--pink); line-height:1;
}
.stat-block span{display:block; margin-top:8px; font-size:.82rem; color:var(--ink-550); line-height:1.4;}

/* ---------- timeline: line fills + nodes/photo pop in as you scroll ---------- */
.sp-timeline{position:relative; display:flex; flex-direction:column; align-items:center; height:100%; min-height:340px; padding-top:4px;}
.sp-tl-track{
  position:absolute; top:6px; bottom:6px; left:50%; width:3px; transform:translateX(-50%);
  background:var(--ink-150); border-radius:3px;
}
.sp-tl-fill{
  position:absolute; top:6px; left:50%; width:3px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--pink), var(--pink-300)); border-radius:3px; height:0%;
}
.sp-tl-icon{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--pink); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.4);
  box-shadow:0 14px 26px -14px rgba(32,33,33,.3), inset 0 0 0 1px var(--ink-150);
}
.sp-tl-icon.top{margin-bottom:auto;}
.sp-tl-icon.bottom{margin-top:auto;}
.sp-tl-icon.solid{background:var(--pink); color:#fff; box-shadow:0 14px 26px -12px rgba(236,0,134,.55);}
.sp-tl-photo{
  position:relative; z-index:1; width:88px; height:88px; border-radius:50%; overflow:hidden; flex-shrink:0; margin:6px 0;
  box-shadow:0 20px 40px -18px rgba(32,33,33,.35), 0 0 0 5px #fff; opacity:0; transform:scale(.4);
}
.sp-tl-photo img{width:100%;height:100%;object-fit:cover;}

.sp-mission{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.mission-item{display:flex; gap:14px; align-items:flex-start;}
.mission-item .ic{
  width:38px;height:38px;border-radius:11px; background:#fff; color:var(--pink); flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 22px -14px rgba(32,33,33,.3);
  transition:transform .35s var(--ease);
}
.mission-item:hover .ic{transform:scale(1.1) rotate(-6deg);}
.mission-item b{display:block; font-size:.96rem; margin-bottom:3px;}
.mission-item span{color:var(--ink-550); font-size:.85rem; line-height:1.55;}



/* =================================================================
   IMPACT VIDEO BANNER (compact)
================================================================= */
.video-section{padding:0 0 36px;}
.video-banner{position:relative; height:460px; border-radius:30px; overflow:hidden; cursor:pointer;}
.video-banner img{position:absolute; inset:0; width:100%;height:100%;object-fit:cover; transition:transform 1.4s var(--ease);}
.video-banner:hover img{transform:scale(1.06);}
.vb-overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between;
  padding:46px; background:linear-gradient(180deg, rgba(32,33,33,.4) 0%, rgba(32,33,33,.1) 32%, rgba(32,33,33,.78) 100%);
}
.vb-stats{display:flex; gap:44px; flex-wrap:wrap;}
.vb-stat b{display:block; font-family:var(--mono); font-weight:700; font-size:1.7rem; color:#fff;}
.vb-stat span{font-size:.76rem; color:rgba(255,255,255,.75); font-weight:600;}
.vb-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:16px;}
.vb-play{
  width:86px;height:86px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--pink); position:relative;
  display:flex; align-items:center; justify-content:center; box-shadow:0 26px 54px -14px rgba(236,0,134,.7);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vb-play::before{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  animation:vbPulse 2.2s ease-out infinite;
}

.video-banner:hover .vb-play{transform:scale(1.1);}
.vb-label{color:#fff; font-weight:600; font-family:var(--mono); font-size:.88rem;}
.vb-bottom{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}


/* =================================================================
   WHY CHOOSE US
================================================================= */
.why-section{padding:0 0 36px;}
.why-grid{display:grid; grid-template-columns:1fr .85fr 1fr; gap:20px; margin-top:22px; align-items:stretch;}
.why-card{
  border-radius:24px; padding:34px 30px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.why-card.a{background:var(--pink-30);}
.why-card.b{background:#fff9ee;}
.why-card:hover{transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(236,0,134,.35);}
.why-card h4{font-family:var(--display); font-weight:600; font-size:1.2rem; margin-bottom:18px;}
.why-card ul{display:flex; flex-direction:column; gap:12px; margin-bottom:22px; list-style:none;}
.why-card li{display:flex; gap:12px; align-items:center; font-size:.88rem; color:var(--ink-700);}
.why-check{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--pink-100); color:var(--pink);
  box-shadow:0 0 0 0 rgba(236,0,134,.35);
  transform:scale(.5); opacity:0;
  transition:transform .45s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.why-card.in .why-check, .why-card.reveal.in .why-check{transform:scale(1); opacity:1;}
.why-check svg{width:13px; height:13px; position:relative; z-index:1;}
.why-card li:hover .why-check{
  background:var(--pink); color:#fff;
  box-shadow:0 0 0 6px rgba(236,0,134,.16);
  transform:scale(1.12);
}
.why-card li:nth-child(1) .why-check{transition-delay:.05s;}
.why-card li:nth-child(2) .why-check{transition-delay:.15s;}
.why-card li:nth-child(3) .why-check{transition-delay:.25s;}
.why-card li:nth-child(4) .why-check{transition-delay:.35s;}
.why-card li:hover .why-check{transition-delay:0s;}

.why-card.c{
  padding:0; overflow:hidden; position:relative; background:var(--black); min-height:280px; cursor:pointer;
}
.why-card.c img{width:100%; height:100%; object-fit:cover; opacity:.75; position:absolute; inset:0;}
.why-card.c .overlay{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:space-between; padding:22px;
  background:linear-gradient(180deg, rgba(32,33,33,.15), rgba(32,33,33,.8));
}
.why-card.c .label{color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.why-card.c .play-btn-sm{
  width:52px;height:52px;border-radius:50%; background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center; align-self:center;
  box-shadow:0 20px 40px -12px rgba(236,0,134,.7); transition:transform .35s var(--ease);
}
.why-card.c:hover .play-btn-sm{transform:scale(1.1);}




/* =================================================================
   CORPORATE PARTNERS
================================================================= */
.partners-section{background:var(--white); padding:64px 0 56px;}
.partners-section .section-head{margin-bottom:32px;}
.partners-title{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.15rem); color:var(--pink);}
.partners-underline{display:block; width:52px; height:3px; border-radius:2px; background:var(--pink); margin:14px auto 0;}

.partners-track-wrap{
  overflow:hidden;
  margin:0 -40px; padding:4px 40px 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.partners-track{
  display:flex; gap:20px; width:max-content;
  animation:partners-scroll 32s linear infinite;
}
.partner-card{
  flex-shrink:0;
  width:260px; height:132px; border-radius:16px;
  background:#fff; border:1px solid var(--ink-150);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.partner-card img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; pointer-events:none; -webkit-user-drag:none;}

@keyframes partners-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.partners-track-wrap:hover .partners-track,
.partners-track-wrap:hover ~ .partners-progress .partners-progress-bar{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .partners-track{animation:none;}
}

/* Scroll indicator: a soft pill-shaped track with a rounded, gradient
   "thumb" that glides in sync with the logo strip above. Pauses on
   hover along with the marquee for a calmer, more intentional feel. */
.partners-progress{
  max-width:220px; margin:26px auto 0;
}
.partners-progress-track{
  position:relative; height:6px; border-radius:100px;
  background:var(--pink-100); overflow:hidden;
}
.partners-progress-bar{
  position:absolute; top:0; left:0; height:100%; width:30%; border-radius:100px;
  background:linear-gradient(90deg, var(--pink-300), var(--pink));
  box-shadow:0 0 10px 0 rgba(236,0,140,.45);
  animation:partners-progress-sweep 32s var(--ease) infinite;
}
@keyframes partners-progress-sweep{
  0%{transform:translateX(-110%);}
  50%{transform:translateX(220%);}
  100%{transform:translateX(-110%);}
}
@media (prefers-reduced-motion: reduce){
  .partners-progress-bar{animation:none; left:0; width:100%;}
}


/* =================================================================
   YOUR DONATION IN ACTION (horizontal drag gallery)
================================================================= */
.impact-section{padding:0 0 40px; background:var(--white);}
.impact-track-wrap{overflow-x:auto; overflow-y:hidden; margin:32px -40px 0; padding:0 40px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;}
.impact-track-wrap::-webkit-scrollbar{display:none;}
.impact-track{display:flex; gap:24px; width:max-content;}
.impact-card{
  position:relative; width:270px; height:360px; border-radius:24px; overflow:hidden; flex-shrink:0;
  box-shadow:0 20px 40px -22px rgba(32,33,33,.28);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.impact-card:hover{transform:translateY(-10px); box-shadow:0 34px 55px -20px rgba(236,0,134,.35);}
.impact-card .img{position:absolute; inset:0;}
.impact-card .img img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease);}
.impact-card:hover .img img{transform:scale(1.12);}
.impact-card::after{content:'';position:absolute; inset:0; background:linear-gradient(180deg, rgba(32,33,33,0) 40%, rgba(32,33,33,.35) 100%); z-index:1;}
.impact-card .glass-info{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  background:rgba(255,255,255,.16); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.35); border-radius:18px; padding:14px;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease), backdrop-filter .4s var(--ease);
}
.impact-card:hover .glass-info{
  background:rgba(255,255,255,.26); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 20px 40px -18px rgba(236,0,134,.6);
  transform:translateY(-4px);
}
.impact-card .glass-info .ic{
  width:30px;height:30px;border-radius:9px; background:rgba(255,255,255,.9); color:var(--pink);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
  transition:transform .4s var(--ease);
}
.impact-card:hover .glass-info .ic{transform:rotate(-8deg) scale(1.12);}
.impact-card .glass-info b{display:block;font-family:var(--display);font-size:.82rem;font-weight:700;color:#fff;margin-bottom:3px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.impact-card .glass-info span{display:block;font-size:.7rem;color:rgba(255,255,255,.85); line-height:1.4;}

.drag-hint{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; font-size:.8rem; font-weight:700; color:var(--pink);}
.drag-hint svg{animation:dragmove 1.6s ease-in-out infinite;}

.impact-cta{display:flex; justify-content:center; margin-top:40px;}


/* =================================================================
   DONATE BANNER (static section, sits before the hero/slider)
================================================================= */
.donate-banner{
  position:relative; z-index:5;
  padding:26px 0;
  background:radial-gradient(760px 240px at 50% 0%, var(--pink-60), transparent 72%);
}
.donate-banner-inner{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:12px 18px; border-radius:100px; flex-wrap:wrap; justify-content:center;
  background:rgba(32,33,33,.68);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  animation:dbFloat 4.6s ease-in-out infinite;
}
@keyframes dbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@media (prefers-reduced-motion: reduce){ .donate-banner-inner{animation:none;} }

.db-icon{
  color:var(--pink); flex-shrink:0; display:flex; align-items:center;
  animation:fdbHeart 1.8s ease-in-out infinite;
}

.db-text{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:center;}
.db-text b{color:#fff; font-family:var(--mono); font-weight:600; font-size:.9rem;}
.db-text span{color:var(--pink-300); font-family:var(--mono); font-weight:700; font-size:.9rem;}
.db-btn{flex-shrink:0; padding:12px 22px; font-size:.82rem; margin-left:4px; background:var(--pink); color:#fff;}



/* =================================================================
   FOOTER
================================================================= */
footer{background:var(--black); padding:38px 0 20px; color:var(--ink-250);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .brand{color:#fff; margin-bottom:16px;}
.footer-brand p{font-size:.88rem; line-height:1.7; max-width:280px; margin-bottom:22px; color:var(--ink-250);}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center; color:#fff; transition:.3s;
}
.footer-social a:hover{background:var(--pink);}
.footer-col h5{color:#fff; font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px;}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:.88rem; color:var(--ink-250); transition:.25s;}
.footer-col a:hover{color:var(--pink-200);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:.78rem; flex-wrap:wrap; gap:14px;}



/* =================================================================
   MODAL (video)
================================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(32,33,33,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.modal-overlay.active{opacity:1; visibility:visible;}
.modal-box{
  background:#000; border-radius:24px; max-width:900px; width:100%; overflow:hidden;
  position:relative; transform:scale(.92) translateY(20px); transition:transform .45s var(--ease);
  box-shadow:0 60px 100px -30px rgba(0,0,0,.6); aspect-ratio:16/9;
}
.modal-overlay.active .modal-box{transform:scale(1) translateY(0);}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:3; width:40px;height:40px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--black); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.4); transition:transform .3s var(--ease), background .3s var(--ease);
}
.modal-close:hover{transform:rotate(90deg); background:var(--pink); color:#fff;}
.modal-box video{width:100%;height:100%;object-fit:cover;}

/* whatsapp float */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:400; width:58px;height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center;justify-content:center; box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.wa-float.wa-hidden{opacity:0; transform:scale(.6); pointer-events:none;}

/* generic responsive polish */