/* ============================================================
   SUPYAR Foundation — Premium Design System v2
   Palette: Emerald · Navy · Gold · White
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

/* ---- Tokens ---- */
:root {
  --emerald:      #059669;
  --emerald-600:  #047857;
  --emerald-700:  #065F46;
  --emerald-800:  #064E3B;
  --emerald-100:  #D1FAE5;
  --emerald-50:   #ECFDF5;

  --navy:         #0F2952;
  --navy-600:     #0A1F3D;
  --navy-700:     #071529;
  --navy-100:     #DBEAFE;
  --navy-50:      #EFF6FF;

  --gold:         #F59E0B;
  --gold-600:     #D97706;
  --gold-100:     #FEF3C7;
  --gold-50:      #FFFBEB;

  --teal:         #0D9488;
  --teal-light:   #14B8A6;

  --white:        #FFFFFF;
  --gray-50:      #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-200:     #E2E8F0;
  --gray-300:     #CBD5E1;
  --gray-400:     #94A3B8;
  --gray-500:     #64748B;
  --gray-600:     #475569;
  --gray-700:     #334155;
  --gray-800:     #1E293B;
  --gray-900:     #0F172A;

  --text:         #0F172A;
  --text-2:       #334155;
  --text-muted:   #64748B;
  --border:       #E2E8F0;

  --grad-hero:    linear-gradient(145deg, #061729 0%, #0F2952 45%, #065F46 100%);
  --grad-emerald: linear-gradient(135deg, #047857, #10B981);
  --grad-navy:    linear-gradient(145deg, #071529, #1E3A5F);
  --grad-gold:    linear-gradient(135deg, #D97706, #FCD34D);
  --grad-section: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-serif:   'Playfair Display', serif;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 4px 12px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 30px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 50px rgba(0,0,0,0.13);
  --shadow-xl:  0 24px 72px rgba(0,0,0,0.16);
  --shadow-em:  0 8px 30px rgba(5,150,105,0.22);
  --shadow-nv:  0 8px 30px rgba(15,41,82,0.22);
  --shadow-gd:  0 8px 30px rgba(245,158,11,0.22);

  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 32px; --r-2xl: 48px; --r-full: 9999px;

  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --tx: 250ms var(--ease);
  --tx-slow: 450ms var(--ease);
}

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--text);background:var(--white);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--tx)}
ul{list-style:none}
input,select,textarea,button{font-family:inherit}

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.25;color:var(--text)}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.9rem)}
h4{font-size:1.25rem}
h5{font-size:1.05rem}
p{margin-bottom:1rem;color:var(--text-muted);line-height:1.85}
p:last-child{margin-bottom:0}

/* ---- Layout ---- */
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.container-sm{max-width:860px;margin:0 auto;padding:0 32px}
section{padding:100px 0}

/* ---- Section headers ---- */
.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:0.7rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--emerald);margin-bottom:16px;
}
.section-kicker::before{content:'';width:20px;height:2px;background:var(--emerald);border-radius:2px}
.section-kicker.kicker-gold{color:var(--gold-600)}
.section-kicker.kicker-gold::before{background:var(--gold-600)}
.section-kicker.kicker-white{color:rgba(255,255,255,.8)}
.section-kicker.kicker-white::before{background:rgba(255,255,255,.8)}

.section-title{margin-bottom:20px}
.section-title .em{color:var(--emerald)}
.section-title .gd{color:var(--gold-600)}

.section-lead{font-size:1.1rem;color:var(--text-muted);max-width:640px;line-height:1.9}
.section-lead.centered{margin:0 auto}

.section-header{margin-bottom:64px}
.section-header.centered{text-align:center}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:600;font-size:0.9rem;
  cursor:pointer;border:2px solid transparent;transition:var(--tx);
  white-space:nowrap;
}
.btn svg{transition:var(--tx)}
.btn:hover svg{transform:translateX(3px)}

.btn-emerald{background:var(--grad-emerald);color:#fff;border-color:transparent;box-shadow:var(--shadow-em)}
.btn-emerald:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(5,150,105,.35)}

.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-600);transform:translateY(-2px);box-shadow:var(--shadow-nv)}

.btn-gold{background:var(--grad-gold);color:#fff;border-color:transparent;box-shadow:var(--shadow-gd)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(245,158,11,.35)}

.btn-outline{background:transparent;color:var(--emerald);border-color:var(--emerald)}
.btn-outline:hover{background:var(--emerald);color:#fff;transform:translateY(-2px)}

.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff}

.btn-ghost{background:transparent;color:var(--emerald);border-color:transparent;padding:12px 20px}
.btn-ghost:hover{background:var(--emerald-50)}

.btn-sm{padding:10px 22px;font-size:0.82rem}
.btn-lg{padding:17px 40px;font-size:1rem}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:#0c7a72;transform:translateY(-2px);box-shadow:0 10px 28px rgba(13,148,136,.3)}

/* ---- Badge / Tag ---- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:var(--r-full);
  font-size:0.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.badge-emerald{background:var(--emerald-50);color:var(--emerald-600)}
.badge-navy{background:var(--navy-50);color:var(--navy)}
.badge-gold{background:var(--gold-50);color:var(--gold-600)}
.badge-teal{background:#F0FDFA;color:var(--teal)}
.badge-white{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;transition:var(--tx-slow);
}
.site-header.solid{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  padding:13px 0;
  box-shadow:0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.06);
}

.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo-img{height:50px;width:auto;transition:var(--tx)}
.site-header.solid .nav-logo-img{height:42px}
.nav-logo-text{display:flex;flex-direction:column}
.nav-logo-name{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--emerald);letter-spacing:.5px}
.nav-logo-sub{font-size:0.58rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);opacity:.7}

/* Nav links */
.nav-menu{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{
  display:block;padding:9px 14px;
  font-family:var(--font-display);font-size:0.875rem;font-weight:500;
  color:var(--gray-700);border-radius:var(--r-sm);transition:var(--tx);
}
.nav-link:hover,.nav-link.active{color:var(--emerald);background:var(--emerald-50)}
.nav-link.has-arrow::after{content:'▾';font-size:.65em;margin-left:4px;opacity:.6;display:inline-block;transition:var(--tx)}
.nav-item:hover .nav-link.has-arrow::after{transform:rotate(-180deg)}

/* Mega/standard dropdown */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);padding:8px;
  min-width:220px;opacity:0;visibility:hidden;
  transition:var(--tx);border:1px solid var(--border);
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.dropdown-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--r-md);
  font-size:0.86rem;color:var(--text-2);transition:var(--tx);
}
.dropdown-item:hover{background:var(--gray-50);color:var(--emerald)}
.dropdown-item-icon{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}

/* Causes mega-dropdown */
.mega-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);padding:20px;
  width:480px;opacity:0;visibility:hidden;
  transition:var(--tx);border:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.nav-item:hover .mega-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.mega-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;border-radius:var(--r-md);transition:var(--tx);
}
.mega-item:hover{background:var(--gray-50)}
.mega-icon{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.mega-text h5{font-size:0.86rem;font-weight:600;color:var(--text);margin-bottom:3px}
.mega-text p{font-size:0.78rem;color:var(--text-muted);margin:0;line-height:1.5}

/* CTA button */
.btn-nav{
  background:var(--grad-emerald);color:#fff;
  padding:10px 24px;border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:600;font-size:0.84rem;
  border:none;cursor:pointer;transition:var(--tx);
  box-shadow:0 4px 14px rgba(5,150,105,.28);
}
.btn-nav:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(5,150,105,.38)}
.nav-menu .btn-nav{display:none}

.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;position:relative;z-index:1001;background:none;border:none}
.menu-toggle span{display:block;width:24px;height:2.5px;background:var(--text);border-radius:2px;transition:var(--tx)}
.menu-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;opacity:0;transition:var(--tx)}
.nav-overlay.active{opacity:1}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;position:relative;
  display:flex;align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg, #FFFBF0 0%, #ECFDF5 55%, #FFF1F2 100%);
  border-bottom:1px solid rgba(5,150,105,.1);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 65% 70% at 85% 15%, rgba(209,250,229,.6) 0%, transparent 65%),
    radial-gradient(ellipse 55% 60% at 5%  85%, rgba(254,243,199,.5) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 55% 50%, rgba(255,225,230,.3) 0%, transparent 70%);
  pointer-events:none;
}

.hero-grid-pattern{
  position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(5,150,105,.1) 1px, transparent 1px);
  background-size:32px 32px;
}

.hero-glow{position:absolute;pointer-events:none}
.hero-glow-1{
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(5,150,105,.1) 0%, transparent 70%);
  top:-120px;right:-120px;
}
.hero-glow-2{
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
  bottom:-100px;left:-100px;
}

.hero-content{
  position:relative;z-index:2;
  padding:140px 0 80px;
  max-width:760px;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.75);border:1px solid rgba(5,150,105,.2);
  padding:8px 20px;border-radius:var(--r-full);
  font-size:0.72rem;font-weight:700;color:var(--emerald-700);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:32px;
  backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(5,150,105,.08);
}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

.hero-title{
  font-family:var(--font-display);font-weight:800;
  color:var(--navy);margin-bottom:10px;
  font-size:clamp(2.8rem,6vw,4.4rem);line-height:1.12;
}
.hero-title .line-em{
  display:block;
  background:var(--grad-emerald);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-title .line-gd{
  display:block;
  background:linear-gradient(135deg, #D97706, #F59E0B, #065F46);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-sub{
  font-size:1.1rem;color:var(--text-2);
  max-width:600px;line-height:1.9;margin:20px 0 44px;
}
.hero-sub strong{color:var(--navy)}

.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:72px}

.hero-stats{
  display:flex;gap:0;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(5,150,105,.15);
  border-radius:var(--r-xl);padding:0;overflow:hidden;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(15,41,82,.08);
}
.hero-stat{
  flex:1;padding:28px 32px;text-align:center;
  border-right:1px solid rgba(5,150,105,.1);
}
.hero-stat:last-child{border-right:none}
.hero-stat-num{font-family:var(--font-display);font-size:2.2rem;font-weight:800;color:var(--navy);display:block;line-height:1}
.hero-stat-suffix{color:var(--emerald);font-size:1.5rem}
.hero-stat-label{font-size:0.78rem;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;margin-top:6px;display:block}

.scroll-cue{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  z-index:2;cursor:pointer;
}
.scroll-cue span{font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-3)}
.scroll-line{width:1px;height:48px;background:linear-gradient(180deg,rgba(5,150,105,.4),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent,var(--emerald));animation:scrollDown 1.8s infinite}
@keyframes scrollDown{0%{top:-100%}100%{top:200%}}

/* ============================================================
   PAGE BANNER (inner pages)
   ============================================================ */
.page-banner{
  padding:160px 0 90px;
  background:linear-gradient(135deg, #FFFBF0 0%, #ECFDF5 55%, #FFF1F2 100%);
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(5,150,105,.1);
}
.page-banner::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(209,250,229,.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(254,243,199,.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(255,225,230,.3) 0%, transparent 70%);
  pointer-events:none;
}
.page-banner .hero-grid-pattern{display:none}
.page-banner .hero-glow{display:none}
.page-banner-inner{position:relative;z-index:2}
.page-banner-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.7rem;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--emerald-600);margin-bottom:20px;
}
.page-banner-kicker::before{content:'';width:16px;height:2px;background:var(--emerald);border-radius:2px}
.page-banner h1{color:var(--navy);margin-bottom:20px}
.page-banner-lead{font-size:1.1rem;color:var(--text-2);max-width:600px;line-height:1.85}
.breadcrumb{
  display:flex;align-items:center;gap:8px;margin-top:28px;
  font-size:0.82rem;
}
.bc-link{color:var(--text-3);transition:var(--tx)}
.bc-link:hover{color:var(--emerald)}
.bc-sep{color:var(--gray-300);font-size:.8em}
.bc-current{color:var(--text);font-weight:600}
/* ============================================================
   CARDS
   ============================================================ */

/* Cause Card */
.cause-card{
  background:#fff;border-radius:var(--r-xl);padding:44px 36px;
  border:1.5px solid var(--border);transition:var(--tx-slow);
  position:relative;overflow:hidden;
}
.cause-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  transition:var(--tx);
}
.cause-card.cc-health::before     {background:var(--grad-emerald)}
.cause-card.cc-education::before  {background:linear-gradient(90deg,var(--navy),var(--teal-light))}
.cause-card.cc-sustain::before    {background:linear-gradient(90deg,var(--teal),var(--emerald))}
.cause-card.cc-research::before   {background:var(--grad-gold)}

.cause-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent}

.cause-icon{
  width:72px;height:72px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  margin-bottom:28px;
}
.ci-health    {background:linear-gradient(135deg,rgba(5,150,105,.1),rgba(16,185,129,.2))}
.ci-education {background:linear-gradient(135deg,rgba(15,41,82,.08),rgba(13,148,136,.15))}
.ci-sustain   {background:linear-gradient(135deg,rgba(13,148,136,.1),rgba(5,150,105,.2))}
.ci-research  {background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(252,211,77,.2))}

.cause-card h3{font-size:1.3rem;margin-bottom:14px}
.cause-card p{font-size:0.93rem;line-height:1.85;margin-bottom:24px}
.cause-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cause-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:0.88rem;
  transition:var(--tx);
}
.cl-health    {color:var(--emerald)}
.cl-education {color:var(--navy)}
.cl-sustain   {color:var(--teal)}
.cl-research  {color:var(--gold-600)}
.cause-link:hover{gap:14px}

/* Story Card */
.story-card{
  background:#fff;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1.5px solid var(--border);
  transition:var(--tx-slow);display:flex;flex-direction:column;
}
.story-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}

.story-card-img{
  aspect-ratio:3/2;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;flex-shrink:0;position:relative;overflow:hidden;
}
.story-card-img img{width:100%;height:100%;object-fit:cover}
.story-card-body{padding:32px;flex:1;display:flex;flex-direction:column}
.story-card-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:0.78rem;color:var(--text-muted)}
.story-card-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--gray-300)}
.story-card h4{font-size:1.15rem;margin-bottom:12px;line-height:1.4}
.story-card p{font-size:0.9rem;flex:1;margin-bottom:20px}
.story-link{display:inline-flex;align-items:center;gap:6px;font-size:0.86rem;font-weight:600;color:var(--emerald)}
.story-link:hover{gap:12px}

/* Blog Card */
.blog-card{
  background:#fff;border-radius:var(--r-xl);overflow:hidden;
  border:1.5px solid var(--border);transition:var(--tx-slow);
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.blog-card-img{aspect-ratio:16/9;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:3.5rem;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover}
.blog-card-body{padding:28px}
.blog-card-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:0.78rem;color:var(--text-muted)}
.blog-card h4{font-size:1.1rem;margin-bottom:10px;line-height:1.4}
.blog-card p{font-size:0.88rem;margin-bottom:18px}
.blog-link{display:inline-flex;align-items:center;gap:6px;font-size:0.84rem;font-weight:600;color:var(--emerald)}

/* Publication Card */
.pub-card{
  background:#fff;border-radius:var(--r-lg);padding:28px 32px;
  border:1.5px solid var(--border);transition:var(--tx);
  display:flex;align-items:flex-start;gap:20px;
}
.pub-card:hover{border-color:var(--emerald);box-shadow:var(--shadow-sm)}
.pub-icon{
  width:52px;height:52px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;background:var(--emerald-50);flex-shrink:0;
}
.pub-card-content h4{font-size:1rem;margin-bottom:6px;line-height:1.4}
.pub-card-content p{font-size:0.86rem;margin-bottom:12px}
.pub-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:0.78rem;color:var(--text-muted)}
.pub-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--gray-300)}
.pub-link{color:var(--emerald);font-weight:600;font-size:0.84rem;display:inline-flex;align-items:center;gap:5px}

/* Event Card */
.event-card{
  background:#fff;border-radius:var(--r-xl);padding:0;overflow:hidden;
  border:1.5px solid var(--border);transition:var(--tx-slow);
  display:flex;
}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.event-date-block{
  width:90px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;
}
.ed-day{font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:#fff;line-height:1;display:block}
.ed-month{font-size:0.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8);display:block}
.ec-emerald .event-date-block{background:var(--grad-emerald)}
.ec-navy    .event-date-block{background:var(--grad-navy)}
.ec-gold    .event-date-block{background:var(--grad-gold)}
.event-card-body{padding:24px 28px;flex:1}
.event-card h4{font-size:1rem;margin-bottom:8px}
.event-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:0.78rem;color:var(--text-muted);margin-bottom:14px}
.event-card p{font-size:0.86rem;margin:0}

/* Stat Card */
.stat-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);padding:44px 32px;text-align:center;
  backdrop-filter:blur(8px);transition:var(--tx);
}
.stat-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.stat-icon{font-size:2.5rem;margin-bottom:16px;display:block}
.stat-num{font-family:var(--font-display);font-size:3.2rem;font-weight:800;color:#fff;display:block;line-height:1;margin-bottom:6px}
.stat-suffix{font-size:2rem;color:var(--gold)}
.stat-label{color:rgba(255,255,255,.72);font-size:0.9rem;line-height:1.5}

/* Partner Card */
.partner-card{
  background:#fff;border-radius:var(--r-lg);padding:28px;
  border:1.5px solid var(--border);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transition:var(--tx);min-height:120px;
}
.partner-card:hover{border-color:var(--emerald);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.partner-logo{font-size:1.8rem;margin-bottom:10px}
.partner-name{font-weight:600;font-size:0.88rem;color:var(--text-2)}
.partner-type{font-size:0.74rem;color:var(--text-muted)}

/* Team Card */
.team-card{background:#fff;border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--border);transition:var(--tx-slow)}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.team-avatar{aspect-ratio:1;background:linear-gradient(135deg,var(--emerald-50),var(--navy-50));display:flex;align-items:center;justify-content:center;font-size:4rem}
.team-info{padding:24px}
.team-name{font-size:1rem;margin-bottom:4px}
.team-role{font-size:0.82rem;color:var(--emerald);font-weight:600;margin-bottom:8px}
.team-bio{font-size:0.84rem;margin:0}

/* ============================================================
   SECTIONS — REUSABLE
   ============================================================ */

/* Causes Grid */
.causes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(min-width:1024px){.causes-grid-4{grid-template-columns:repeat(4,1fr)}}

/* Stats section */
.stats-section{background:var(--grad-hero);position:relative;overflow:hidden;padding:80px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}

/* Impact split */
.impact-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

/* Visual placeholder */
.visual-box{
  border-radius:var(--r-2xl);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;font-size:6rem;
}
.visual-box span{font-size:0.9rem;color:var(--text-muted);font-style:italic;font-family:var(--font-body)}
.vb-emerald{background:linear-gradient(135deg,rgba(5,150,105,.08),rgba(5,150,105,.18));min-height:460px}
.vb-navy{background:linear-gradient(135deg,rgba(15,41,82,.06),rgba(15,41,82,.14));min-height:460px}
.vb-gold{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.18));min-height:460px}
.vb-teal{background:linear-gradient(135deg,rgba(13,148,136,.08),rgba(13,148,136,.18));min-height:460px}

/* 3-col grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Feature row */
.feature-row{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.feature-row:last-child{border-bottom:none}
.feature-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.fi-em{background:var(--emerald-50)}
.fi-nv{background:var(--navy-50)}
.fi-gd{background:var(--gold-50)}
.fi-tl{background:#F0FDFA}
.feature-row h5{font-size:0.95rem;margin-bottom:4px}
.feature-row p{font-size:0.86rem;margin:0}

/* Quote block */
.blockquote{
  padding:36px 40px;border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(5,150,105,.06),rgba(15,41,82,.06));
  border-left:4px solid var(--emerald);
}
.blockquote-text{font-family:var(--font-serif);font-size:1.2rem;font-style:italic;color:var(--text-2);line-height:1.8;margin-bottom:16px}
.blockquote-author{font-size:0.86rem;font-weight:600;color:var(--emerald)}

/* CTA section */
.cta-section{
  background:var(--grad-emerald);padding:100px 0;
  position:relative;overflow:hidden;text-align:center;
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px;
}
.cta-section-content{position:relative;z-index:1}
.cta-section h2{color:#fff;margin-bottom:16px}
.cta-section p{color:rgba(255,255,255,.8);max-width:600px;margin:0 auto 40px;font-size:1.05rem}
.cta-section .cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* Alt CTA — navy */
.cta-navy{background:var(--grad-navy)}

/* Wave dividers */
.wave-top{
  position:relative;
  margin-bottom:-2px;
}
.wave-top svg{display:block;width:100%}

/* Number fact rows */
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fact-item{text-align:center;padding:32px 20px;border-radius:var(--r-xl);background:var(--gray-50)}
.fact-num{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--emerald);display:block;line-height:1;margin-bottom:6px}
.fact-label{font-size:0.88rem;color:var(--text-muted)}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form-wrap{background:#fff;border-radius:var(--r-2xl);padding:56px;box-shadow:var(--shadow-md)}
.form-group{margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-label{display:block;font-family:var(--font-display);font-size:0.82rem;font-weight:600;color:var(--text);margin-bottom:8px}
.form-control,.form-input{
  width:100%;padding:14px 18px;
  background:var(--gray-50);border:2px solid var(--border);
  border-radius:var(--r-md);font-family:var(--font-body);
  font-size:0.93rem;color:var(--text);transition:var(--tx);outline:none;resize:none;
}
.form-control:focus,.form-input:focus{border-color:var(--emerald);background:#fff;box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.form-control::placeholder,.form-input::placeholder{color:var(--text-muted)}
.blog-date{font-size:0.78rem;color:var(--text-muted)}
.form-textarea{min-height:140px;resize:vertical}
.form-select{cursor:pointer;appearance:none}

/* ============================================================
   DONATE
   ============================================================ */
.donate-amounts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.donate-amount-btn{
  padding:12px 24px;border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:600;font-size:0.95rem;
  border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:var(--tx);
}
.donate-amount-btn.active,.donate-amount-btn:hover{
  border-color:var(--gold);background:var(--gold);color:#fff;
}
.donate-custom{display:flex;align-items:center;gap:0;margin-bottom:24px}
.donate-currency{
  padding:14px 18px;background:var(--gray-100);border:2px solid var(--border);
  border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);
  font-weight:700;color:var(--text-2);
}
.donate-custom .form-control{border-radius:0 var(--r-md) var(--r-md) 0}

/* Volunteer form steps */
.step-indicator{display:flex;align-items:center;gap:0;margin-bottom:40px}
.step{display:flex;align-items:center;gap:12px;flex:1}
.step-num{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:0.86rem;font-weight:700;
  border:2px solid var(--border);color:var(--text-muted);background:#fff;
  flex-shrink:0;transition:var(--tx);
}
.step.active .step-num{border-color:var(--emerald);color:var(--emerald);background:var(--emerald-50)}
.step.done  .step-num{border-color:var(--emerald);color:#fff;background:var(--emerald)}
.step-label{font-size:0.82rem;font-weight:600;color:var(--text-muted)}
.step.active .step-label{color:var(--emerald)}
.step.done  .step-label{color:var(--emerald-600)}
.step-line{flex:1;height:2px;background:var(--border);margin:0 8px}
.step-line.done{background:var(--emerald)}

/* ============================================================
   TIMELINE (Annual Reports / Research)
   ============================================================ */
.timeline{position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:48px}
.timeline-item:last-child{margin-bottom:0}
.timeline-dot{
  position:absolute;left:-36px;top:4px;
  width:20px;height:20px;border-radius:50%;
  background:var(--emerald);border:3px solid #fff;
  box-shadow:0 0 0 3px var(--emerald-100);
}
.timeline-year{font-family:var(--font-display);font-size:0.78rem;font-weight:700;letter-spacing:2px;color:var(--emerald);text-transform:uppercase;margin-bottom:8px}
.timeline-item h4{font-size:1.1rem;margin-bottom:8px}
.timeline-item p{font-size:0.9rem;margin:0}

/* ============================================================
   TABLE (Annual Reports)
   ============================================================ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  background:var(--gray-50);padding:14px 18px;text-align:left;
  font-family:var(--font-display);font-size:0.78rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);
  border-bottom:2px solid var(--border);
}
.data-table td{padding:16px 18px;border-bottom:1px solid var(--border);font-size:0.9rem;color:var(--text-2)}
.data-table tr:hover td{background:var(--gray-50)}
.data-table tr:last-child td{border-bottom:none}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--gray-900);color:rgba(255,255,255,.75);padding:80px 0 0}

.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.5fr;gap:60px;margin-bottom:64px}

.footer-brand-logo{height:56px;margin-bottom:18px;opacity:.92}
.footer-brand-name{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:4px}
.footer-brand-sub{font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px;display:block}
.footer-desc{font-size:0.86rem;line-height:1.85;color:rgba(255,255,255,.5);margin-bottom:24px}

.footer-socials{display:flex;gap:10px}
.footer-social{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);font-size:.95rem;transition:var(--tx);
}
.footer-social:hover{background:var(--emerald);color:#fff;transform:translateY(-2px)}

.footer-col-title{
  font-family:var(--font-display);font-size:0.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:2.5px;color:#fff;margin-bottom:20px;
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-link{font-size:0.85rem;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px;transition:var(--tx)}
.footer-link:hover{color:rgba(255,255,255,.9);gap:12px}
.footer-link-arr{transition:var(--tx);opacity:.5}
.footer-link:hover .footer-link-arr{opacity:1}

.footer-contact-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.footer-contact-icon{color:var(--emerald);margin-top:2px;flex-shrink:0}
.footer-contact-text{font-size:0.84rem;color:rgba(255,255,255,.5);line-height:1.65}
.footer-contact-text a{color:rgba(255,255,255,.5)}
.footer-contact-text a:hover{color:rgba(255,255,255,.9)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-bottom-left{font-size:0.78rem;color:rgba(255,255,255,.3)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:0.78rem;color:rgba(255,255,255,.3);transition:var(--tx)}
.footer-legal a:hover{color:rgba(255,255,255,.7)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}
.reveal.d5{transition-delay:.5s}
.reveal.d6{transition-delay:.6s}

/* ============================================================
   UTILITIES
   ============================================================ */
.bg-gray{background:var(--gray-50)}
.bg-white{background:#fff}
.bg-navy{background:var(--grad-navy)}
.bg-emerald{background:var(--grad-emerald)}
.text-center{text-align:center}
.text-white{color:#fff !important}
.text-em{color:var(--emerald)}
.text-nv{color:var(--navy)}
.text-gd{color:var(--gold-600)}
.mt-8{margin-top:2rem}
.mb-8{margin-bottom:2rem}
.mt-12{margin-top:3rem}
.gap-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .causes-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px){
  section{padding:72px 0}
  .impact-split{grid-template-columns:1fr;gap:48px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-stats{flex-direction:column}
}

@media(max-width:768px){
  section{padding:60px 0}
  .container{padding:0 20px}
  .container-sm{padding:0 20px}

  .site-header:not(.solid){background:rgba(15,41,82,.9);backdrop-filter:blur(12px)}

  .nav-menu{
    position:fixed;top:0;right:-100%;width:300px;height:100vh;
    background:#fff;flex-direction:column;align-items:flex-start;
    padding:88px 24px 40px;box-shadow:var(--shadow-xl);
    transition:right .35s var(--ease);z-index:999;overflow-y:auto;gap:2px;
  }
  .nav-menu.open{right:0}
  .nav-overlay{display:block}

  .nav-item{width:100%}
  .nav-link{width:100%;padding:12px 16px;font-size:0.95rem}
  .dropdown,.mega-dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;width:100%;background:var(--gray-50);padding:8px;display:none;grid-template-columns:1fr}
  .menu-toggle{display:flex}
  #navDonate{display:none}
  .nav-menu .btn-nav{display:flex;width:100%;justify-content:center;margin-top:16px}

  .hero-content{padding:120px 0 60px}
  .hero-stats{display:none}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%;justify-content:center}

  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .fact-row{grid-template-columns:1fr}

  .form-row{grid-template-columns:1fr}
  .contact-form-wrap{padding:32px 24px}

  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start}

  .page-banner{padding:130px 0 70px}

  .mega-item{padding:10px}
  .causes-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  .donate-amounts{justify-content:center}
  .hero-stats{display:none}
  .stat-num{font-size:2.4rem}
}