<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Support Us — One Africa Foundation</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root {
  --green:#0D4A4A; --green-dark:#062E2E; --green-mid:#0a3c3c;
  --orange:#FF8A00; --orange-light:#ffA030; --orange-dark:#e07800;
  --bg:#FFFFFF; --bg-alt:#F5F5F5; --bg-card:#FFFFFF;
  --text:#1A1A1A; --text-muted:#6B7280;
  --border:rgba(0,0,0,0.08);
  --shadow:0 4px 32px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 60px rgba(0,0,0,0.12);
  --nav-bg:rgba(255,255,255,0.96);
  --nav-border:rgba(0,0,0,0.08);
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
  --radius:16px; --radius-sm:8px; --radius-lg:24px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
}
[data-theme="dark"] {
  --bg:#062E2E; --bg-alt:#0a3838; --bg-card:#0D4A4A;
  --text:#FFFFFF; --text-muted:#9CA3AF;
  --border:rgba(255,255,255,0.08);
  --shadow:0 4px 32px rgba(0,0,0,0.3);
  --shadow-lg:0 12px 60px rgba(0,0,0,0.4);
  --nav-bg:rgba(6,46,46,0.97);
  --nav-border:rgba(255,255,255,0.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;transition:background var(--transition),color var(--transition);line-height:1.6;}
img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{border:none;background:none;cursor:pointer;font-family:inherit;} input,textarea,select{font-family:inherit;}
::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-size:.95rem;font-weight:600;letter-spacing:.02em;transition:all var(--transition);position:relative;overflow:hidden;white-space:nowrap;}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%) skewX(-20deg);transition:transform .4s;}
.btn:hover::before{transform:translateX(100%) skewX(-20deg);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 20px rgba(255,138,0,.35);}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,138,0,.45);}
.btn-outline-dark{background:transparent;color:var(--text);border:2px solid var(--border);}
.btn-outline-dark:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 4px 20px rgba(13,74,74,.3);}
.btn-green:hover{background:var(--green-dark);transform:translateY(-2px);}
.btn-lg{padding:18px 40px;font-size:1rem;}
.btn-block{width:100%;justify-content:center;}

/* SECTION */
.section-tag{display:inline-block;background:rgba(255,138,0,.12);color:var(--orange);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:16px;border:1px solid rgba(255,138,0,.25);}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;margin-bottom:16px;color:var(--text);}
.section-title em{color:var(--orange);font-style:italic;}
.section-subtitle{font-size:1.05rem;color:var(--text-muted);max-width:600px;line-height:1.7;}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all var(--transition);}
.navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.12);}
.nav-container{max-width:1300px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px;}
.nav-logo{flex-shrink:0;display:flex;align-items:center;gap:10px;}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.back-home{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--text-muted);transition:color var(--transition);}
.back-home:hover{color:var(--orange);}
.theme-toggle{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:50px;background:var(--bg-alt);border:1px solid var(--border);cursor:pointer;transition:all var(--transition);}
.theme-toggle:hover{border-color:var(--orange);}
.theme-icon{font-size:.85rem;}
[data-theme="dark"] .theme-icon.sun{display:none;}
[data-theme="dark"] .theme-icon.moon{display:inline;color:#818cf8;}
[data-theme="light"] .theme-icon.moon{display:none;}
[data-theme="light"] .theme-icon.sun{display:inline;color:#f59e0b;}
.theme-icon.sun{color:#f59e0b;display:none;}
.theme-icon.moon{color:#818cf8;display:inline;}
.toggle-track{width:30px;height:16px;background:var(--orange);border-radius:50px;position:relative;}
.toggle-track::after{content:'';position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform var(--transition);}
[data-theme="dark"] .toggle-track::after{transform:translateX(14px);}

/* ══ PAGE HERO ══ */
.page-hero{padding:140px 0 80px;background:var(--green-dark);position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;top:-40%;right:-15%;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,0,.08) 0%,transparent 65%);pointer-events:none;}
.page-hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(13,74,74,.4) 0%,transparent 65%);pointer-events:none;}
.page-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.page-hero-text .breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:24px;}
.breadcrumb a{color:rgba(255,255,255,.5);transition:color var(--transition);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb i{font-size:.6rem;}
.page-hero-tag{display:inline-block;background:rgba(255,138,0,.15);border:1px solid rgba(255,138,0,.4);color:var(--orange);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:20px;}
.page-hero-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,4rem);font-weight:900;line-height:1.05;color:#fff;margin-bottom:20px;}
.page-hero-title em{color:var(--orange);font-style:italic;}
.page-hero-subtitle{font-size:1.05rem;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:36px;max-width:500px;}
.page-hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.page-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.hero-stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:all var(--transition);}
.hero-stat-card:hover{background:rgba(255,138,0,.12);border-color:rgba(255,138,0,.3);}
.hero-stat-card .num{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--orange);line-height:1;}
.hero-stat-card .lbl{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:6px;line-height:1.4;}

/* WAYS TO GIVE */
.ways-section{padding:100px 0;background:var(--bg);}
.ways-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px;}
.way-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:44px 40px;position:relative;overflow:hidden;transition:all var(--transition);box-shadow:var(--shadow);}
.way-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--orange);}
.way-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.way-card:hover .way-card-accent{transform:scaleX(1);}
.way-icon{width:64px;height:64px;border-radius:var(--radius-sm);background:rgba(255,138,0,.1);color:var(--orange);font-size:1.6rem;display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.way-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:12px;color:var(--text);}
.way-card p{color:var(--text-muted);line-height:1.75;font-size:.95rem;margin-bottom:24px;}
.way-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.way-list li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text-muted);line-height:1.5;}
.way-list li i{color:var(--orange);margin-top:2px;flex-shrink:0;font-size:.8rem;}

/* DONATION FORM SECTION */
.donate-section{padding:100px 0;background:var(--bg-alt);}
.donate-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.donate-form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px;box-shadow:var(--shadow);}
.donate-form-card h3{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--text);margin-bottom:6px;}
.donate-form-card .sub{font-size:.9rem;color:var(--text-muted);margin-bottom:32px;}

/* Amount pills */
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.amount-pill{padding:12px 8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-alt);color:var(--text);font-size:.9rem;font-weight:600;text-align:center;cursor:pointer;transition:all var(--transition);}
.amount-pill:hover{border-color:var(--orange);color:var(--orange);}
.amount-pill.active{background:var(--orange);border-color:var(--orange);color:#fff;}

/* Form inputs */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.form-group label{font-size:.85rem;font-weight:600;color:var(--text);}
.form-group input,.form-group select,.form-group textarea{padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:.92rem;transition:all var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--orange);background:var(--bg);box-shadow:0 0 0 3px rgba(255,138,0,.1);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);}
.form-group select option{background:var(--bg-card);color:var(--text);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-note{font-size:.78rem;color:var(--text-muted);line-height:1.5;margin-top:4px;}
.form-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px;}
.form-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--orange);margin-top:2px;flex-shrink:0;cursor:pointer;}
.form-check label{font-size:.85rem;color:var(--text-muted);line-height:1.5;cursor:pointer;}
.form-success-msg{display:none;padding:16px 20px;border-radius:var(--radius-sm);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#10b981;font-size:.9rem;font-weight:600;align-items:center;gap:10px;margin-top:16px;}
.form-success-msg.show{display:flex;}
.form-error-msg{font-size:.78rem;color:#ef4444;margin-top:4px;}

/* Donate sidebar */
.donate-sidebar{display:flex;flex-direction:column;gap:20px;}
.sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);}
.sidebar-card h4{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.sidebar-card h4 i{color:var(--orange);}
.bank-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.88rem;}
.bank-row:last-child{border-bottom:none;}
.bank-row span{color:var(--text-muted);}
.bank-row strong{color:var(--text);text-align:right;max-width:60%;}
.copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--orange);border:1px solid rgba(255,138,0,.3);border-radius:20px;padding:3px 10px;cursor:pointer;transition:all var(--transition);background:none;}
.copy-btn:hover{background:rgba(255,138,0,.1);}
.impact-pill{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-alt);border-radius:var(--radius-sm);margin-bottom:10px;}
.impact-pill:last-child{margin-bottom:0;}
.impact-pill i{color:var(--orange);font-size:1rem;flex-shrink:0;}
.impact-pill p{font-size:.82rem;color:var(--text-muted);line-height:1.5;}
.impact-pill p strong{color:var(--text);display:block;font-size:.85rem;}
.secure-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.secure-badge{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--text-muted);background:var(--bg-alt);border:1px solid var(--border);border-radius:20px;padding:4px 10px;}
.secure-badge i{color:var(--orange);}

/* VOLUNTEER SECTION */
.volunteer-section{padding:100px 0;background:var(--green-dark);color:#fff;}
.volunteer-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.volunteer-text .section-title{color:#fff;}
.volunteer-text .section-subtitle{color:rgba(255,255,255,.7);}
.volunteer-text p{color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:32px;font-size:.95rem;}
.volunteer-roles{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.volunteer-role{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.08);transition:all var(--transition);}
.volunteer-role:hover{background:rgba(255,138,0,.1);border-color:rgba(255,138,0,.25);}
.volunteer-role i{color:var(--orange);font-size:1.1rem;margin-top:2px;flex-shrink:0;}
.volunteer-role div h4{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:3px;}
.volunteer-role div p{font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.5;}
.volunteer-form-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:40px;}
.volunteer-form-card h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:6px;}
.volunteer-form-card .sub{font-size:.88rem;color:rgba(255,255,255,.55);margin-bottom:28px;}
.vol-input{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:13px 16px;color:#fff;font-size:.9rem;transition:all var(--transition);}
.vol-input::placeholder{color:rgba(255,255,255,.35);}
.vol-input:focus{outline:none;border-color:var(--orange);background:rgba(255,138,0,.07);box-shadow:0 0 0 3px rgba(255,138,0,.12);}
.vol-input option{background:#0D4A4A;color:#fff;}
.vol-label{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:6px;display:block;}
.vol-group{margin-bottom:18px;}

/* PARTNERSHIP SECTION */
.partnership-section{padding:100px 0;background:var(--bg);}
.partner-types{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.partner-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 30px;text-align:center;box-shadow:var(--shadow);transition:all var(--transition);position:relative;overflow:hidden;}
.partner-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--orange);}
.partner-card.featured{background:var(--green);border-color:var(--green);}
.partner-card.featured h3,.partner-card.featured p{color:#fff;}
.partner-card.featured .partner-icon{background:rgba(255,138,0,.2);color:var(--orange);}
.partner-card.featured .partner-list li{color:rgba(255,255,255,.75);}
.partner-card.featured .partner-list li i{color:var(--orange);}
.partner-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,138,0,.1);color:var(--orange);font-size:1.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.partner-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-bottom:10px;color:var(--text);}
.partner-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:20px;}
.partner-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px;text-align:left;}
.partner-list li{display:flex;align-items:flex-start;gap:8px;font-size:.83rem;color:var(--text-muted);line-height:1.5;}
.partner-list li i{color:var(--orange);margin-top:2px;flex-shrink:0;font-size:.75rem;}
.partner-card-accent{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.partner-card:hover .partner-card-accent{transform:scaleX(1);}

/* SPONSORSHIP SECTION */
.sponsor-section{padding:100px 0;background:var(--bg-alt);}
.sponsor-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.sponsor-tier{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 28px;box-shadow:var(--shadow);transition:all var(--transition);position:relative;overflow:hidden;}
.sponsor-tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.sponsor-tier.popular{border-color:var(--orange);}
.popular-badge{position:absolute;top:16px;right:16px;background:var(--orange);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:50px;}
.tier-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px;}
.tier-icon.bronze{background:rgba(205,127,50,.15);color:#cd7f32;}
.tier-icon.silver{background:rgba(192,192,192,.15);color:#c0c0c0;}
.tier-icon.gold{background:rgba(255,215,0,.15);color:#ffd700;}
.tier-name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.tier-amount{font-size:1.8rem;font-weight:700;color:var(--orange);font-family:var(--font-display);line-height:1;margin-bottom:6px;}
.tier-period{font-size:.78rem;color:var(--text-muted);}
.tier-divider{height:1px;background:var(--border);margin:20px 0;}
.tier-benefits{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.tier-benefits li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--text-muted);line-height:1.5;}
.tier-benefits li i{color:var(--orange);margin-top:2px;flex-shrink:0;font-size:.75rem;}

/* IMPACT TRACKER */
.impact-section{padding:80px 0;background:var(--green-dark);color:#fff;}
.impact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.impact-box{text-align:center;padding:32px 20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);transition:all var(--transition);}
.impact-box:hover{background:rgba(255,138,0,.1);border-color:rgba(255,138,0,.3);}
.impact-box .num{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--orange);line-height:1;}
.impact-box .lbl{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.4;}

/* TESTIMONIALS / STORIES */
.stories-section{padding:100px 0;background:var(--bg);}
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.story-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);transition:all var(--transition);position:relative;}
.story-card:hover{transform:translateY(-6px);border-color:var(--orange);}
.story-quote{font-size:2.5rem;color:var(--orange);font-family:var(--font-display);line-height:.8;margin-bottom:16px;opacity:.5;}
.story-text{font-size:.92rem;color:var(--text-muted);line-height:1.75;font-style:italic;margin-bottom:20px;}
.story-divider{height:1px;background:var(--border);margin-bottom:16px;}
.story-author{display:flex;align-items:center;gap:12px;}
.story-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,138,0,.15);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;font-family:var(--font-display);flex-shrink:0;}
.story-author-name{font-size:.88rem;font-weight:700;color:var(--text);}
.story-author-role{font-size:.78rem;color:var(--text-muted);}
.story-pillar-tag{position:absolute;top:20px;right:20px;background:rgba(255,138,0,.1);color:var(--orange);font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:50px;border:1px solid rgba(255,138,0,.2);}

/* FAQ */
.faq-section{padding:100px 0;background:var(--bg-alt);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition);}
.faq-item.open{border-color:var(--orange);}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;gap:16px;}
.faq-question span{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4;}
.faq-icon{width:28px;height:28px;border-radius:50%;background:rgba(255,138,0,.1);color:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s,background .3s;}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--orange);color:#fff;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.4,0,0.2,1);}
.faq-answer-inner{padding:0 24px 20px;font-size:.88rem;color:var(--text-muted);line-height:1.75;border-top:1px solid var(--border);}
.faq-item.open .faq-answer{max-height:300px;}

/* CTA BAND */
.cta-band{padding:80px 0;background:var(--orange);position:relative;overflow:hidden;}
.cta-band::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;}
.cta-band-inner{text-align:center;position:relative;z-index:1;}
.cta-band-inner h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;margin-bottom:14px;}
.cta-band-inner p{font-size:1.05rem;color:rgba(255,255,255,.85);margin-bottom:36px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7;}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-white{background:#fff;color:var(--orange);font-weight:700;}
.btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}

/* FOOTER */
.footer{background:var(--green-dark);color:#fff;}
.footer-top{padding:60px 0 48px;}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.4fr;gap:48px;}
.footer-brand-name{font-family:var(--font-display);font-size:1.3rem;font-weight:900;color:#fff;margin-bottom:12px;}
.footer-brand-name span{color:var(--orange);}
.footer-brand-tag{font-size:.75rem;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:24px;}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:all var(--transition);}
.footer-socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px);}
.footer-col h4{font-size:.88rem;font-weight:700;margin-bottom:16px;color:#fff;letter-spacing:.05em;}
.footer-col ul li{margin-bottom:8px;}
.footer-col ul li a{font-size:.85rem;color:rgba(255,255,255,.5);transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--orange);}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:rgba(255,255,255,.5);margin-bottom:10px;}
.footer-contact li i{color:var(--orange);margin-top:2px;flex-shrink:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:.82rem;color:rgba(255,255,255,.35);}
.footer-tagline{font-size:.78rem;color:rgba(255,138,0,.65);font-style:italic;}

.back-to-top{position:fixed;bottom:32px;right:32px;z-index:500;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,138,0,.4);opacity:0;transform:translateY(20px);pointer-events:none;transition:all var(--transition);}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}

/* RESPONSIVE */
@media(max-width:1199px){.footer-grid{grid-template-columns:1fr 1fr;}.partner-types{grid-template-columns:1fr 1fr;}}
@media(max-width:991px){
  .page-hero-inner{grid-template-columns:1fr;gap:48px;}
  .page-hero-stats{grid-template-columns:repeat(3,1fr);}
  .ways-grid{grid-template-columns:1fr;}
  .donate-grid{grid-template-columns:1fr;}
  .volunteer-grid{grid-template-columns:1fr;}
  .stories-grid{grid-template-columns:1fr 1fr;}
  .sponsor-tiers{grid-template-columns:1fr;}
  .impact-row{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  .partner-types{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .page-hero{padding:120px 0 60px;}
  .page-hero-title{font-size:clamp(2rem,8vw,2.8rem);}
  .page-hero-btns{flex-direction:column;}
  .page-hero-btns .btn{justify-content:center;}
  .page-hero-stats{grid-template-columns:1fr 1fr;}
  .stories-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .donate-form-card{padding:28px 20px;}
  .volunteer-form-card{padding:28px 20px;}
  .form-row{grid-template-columns:1fr;}
  .sponsor-tiers{grid-template-columns:1fr 1fr;}
  .impact-row{grid-template-columns:1fr 1fr;}
  .cta-btns{flex-direction:column;align-items:center;}
}
@media(max-width:480px){
  .sponsor-tiers{grid-template-columns:1fr;}
  .page-hero-stats{grid-template-columns:1fr;}
  .amount-grid{grid-template-columns:repeat(2,1fr);}
  .impact-row{grid-template-columns:1fr;}
}
</style>
</head>
<body>

<!-- NAVBAR -->
<nav class="navbar" id="navbar">
  <div class="nav-container">
    <a href="index.html" class="nav-logo">
      <img src="afrilogoz.png" alt="OneAfrica Foundation" style="height:46px;width:auto;object-fit:contain;"/>
    </a>
    <div class="nav-right">
      <a href="index.html" class="back-home"><i class="fas fa-arrow-left"></i> Back to Home</a>
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
        <span class="theme-icon sun"><i class="fas fa-sun"></i></span>
        <span class="theme-icon moon"><i class="fas fa-moon"></i></span>
        <span class="toggle-track"></span>
      </button>
    </div>
  </div>
</nav>

<!-- PAGE HERO -->
<section class="page-hero" id="top">
  <div class="container">
    <div class="page-hero-inner">
      <div class="page-hero-text">
        <div class="breadcrumb">
          <a href="index.html">Home</a>
          <i class="fas fa-chevron-right"></i>
          <span>Support Us</span>
        </div>
        <span class="page-hero-tag">Make a Difference Today</span>
        <h1 class="page-hero-title">Every Contribution<br/>Builds a<br/><em>Brighter Future</em></h1>
        <p class="page-hero-subtitle">Your support — whether a donation, your time, or a partnership — directly changes the lives of African children. Choose how you want to make an impact.</p>
        <div class="page-hero-btns">
          <a href="#donate" class="btn btn-primary btn-lg"><i class="fas fa-heart"></i> Donate Now</a>
          <a href="#volunteer" class="btn btn-outline-white btn-lg"><i class="fas fa-hands-helping"></i> Volunteer</a>
        </div>
      </div>
      <div class="page-hero-stats">
        <div class="hero-stat-card"><div class="num">1,000+</div><div class="lbl">Children reached through our Education Outreach</div></div>
        <div class="hero-stat-card"><div class="num">2,660</div><div class="lbl">Sanitary pads distributed through Dignity to Learn</div></div>
        <div class="hero-stat-card"><div class="num">500+</div><div class="lbl">Orphanage children receiving consistent nutrition support</div></div>
        <div class="hero-stat-card"><div class="num">432%</div><div class="lbl">Growth in programme reach in under 2 years</div></div>
        <div class="hero-stat-card"><div class="num">3</div><div class="lbl">Integrated programme pillars across Nigeria</div></div>
        <div class="hero-stat-card"><div class="num">100%</div><div class="lbl">Of donations go directly to programme delivery</div></div>
      </div>
    </div>
  </div>
</section>

<!-- WAYS TO GIVE -->
<section class="ways-section" id="ways">
  <div class="container">
    <div style="text-align:center;margin-bottom:0;">
      <span class="section-tag">How You Can Help</span>
      <h2 class="section-title" style="text-align:center;">Four Ways to<br/><em>Support the Mission</em></h2>
      <p class="section-subtitle" style="text-align:center;margin:0 auto 0;">From financial contributions to hands-on involvement — every form of support creates ripples of change for children across Nigeria and Africa.</p>
    </div>
    <div class="ways-grid">

      <!-- DONATE -->
      <div class="way-card">
        <div class="way-card-accent"></div>
        <div class="way-icon"><i class="fas fa-hand-holding-heart"></i></div>
        <h3>Donate</h3>
        <p>A financial contribution — large or small — goes directly to tutorial classes, menstrual hygiene packs, or food for orphanage children. Every naira and every dollar counts.</p>
        <ul class="way-list">
          <li><i class="fas fa-check-circle"></i> One-time donations for immediate impact</li>
          <li><i class="fas fa-check-circle"></i> Monthly recurring giving for sustained change</li>
          <li><i class="fas fa-check-circle"></i> Targeted giving toward a specific pillar</li>
          <li><i class="fas fa-check-circle"></i> Bank transfer or online payment</li>
        </ul>
        <a href="#donate" class="btn btn-primary">Donate Now <i class="fas fa-arrow-right"></i></a>
      </div>

      <!-- VOLUNTEER -->
      <div class="way-card">
        <div class="way-card-accent"></div>
        <div class="way-icon"><i class="fas fa-user-friends"></i></div>
        <h3>Volunteer</h3>
        <p>Your time and skills are just as valuable as money. Join our outreaches, teach in our tutorials, lead sensitisation sessions, or support us from anywhere in the world.</p>
        <ul class="way-list">
          <li><i class="fas fa-check-circle"></i> Tutorial tutors for WAEC/JAMB students</li>
          <li><i class="fas fa-check-circle"></i> Field outreach &amp; distribution volunteers</li>
          <li><i class="fas fa-check-circle"></i> Remote volunteers (design, content, admin)</li>
          <li><i class="fas fa-check-circle"></i> Sensitisation &amp; hygiene education facilitators</li>
        </ul>
        <a href="#volunteer" class="btn btn-green">Volunteer <i class="fas fa-arrow-right"></i></a>
      </div>

      <!-- SPONSOR -->
      <div class="way-card">
        <div class="way-card-accent"></div>
        <div class="way-icon"><i class="fas fa-child"></i></div>
        <h3>Sponsor a Child</h3>
        <p>Choose to sponsor a child's education, exam fees, or monthly menstrual hygiene needs. You'll receive updates on the child's progress and the direct difference you're making.</p>
        <ul class="way-list">
          <li><i class="fas fa-check-circle"></i> Sponsor WAEC or JAMB exam registration fees</li>
          <li><i class="fas fa-check-circle"></i> Fund a child's full university scholarship</li>
          <li><i class="fas fa-check-circle"></i> Provide monthly menstrual hygiene care</li>
          <li><i class="fas fa-check-circle"></i> Support nutritional needs of an orphaned child</li>
        </ul>
        <a href="#sponsorship" class="btn btn-primary">Sponsor a Child <i class="fas fa-arrow-right"></i></a>
      </div>

      <!-- PARTNER -->
      <div class="way-card">
        <div class="way-card-accent"></div>
        <div class="way-icon"><i class="fas fa-handshake"></i></div>
        <h3>Partner With Us</h3>
        <p>Organisations, businesses, and institutions can partner with One Africa Foundation to co-deliver programmes, provide in-kind support, or invest in specific initiatives at scale.</p>
        <ul class="way-list">
          <li><i class="fas fa-check-circle"></i> Corporate Social Responsibility partnerships</li>
          <li><i class="fas fa-check-circle"></i> Institutional grant partnerships</li>
          <li><i class="fas fa-check-circle"></i> In-kind donations (materials, equipment)</li>
          <li><i class="fas fa-check-circle"></i> Media, advocacy &amp; awareness partnerships</li>
        </ul>
        <a href="#partnership" class="btn btn-green">Partner With Us <i class="fas fa-arrow-right"></i></a>
      </div>

    </div>
  </div>
</section>

<!-- DONATE SECTION -->
<section class="donate-section" id="donate">
  <div class="container">
    <div class="donate-grid">

      <!-- FORM -->
      <div class="donate-form-card">
        <h3>Make a Donation</h3>
        <p class="sub">Choose your amount and tell us how you'd like your gift used. All donations go directly to programme delivery.</p>

        <!-- Pillar selector -->
        <div class="form-group">
          <label>Direct my donation to</label>
          <div class="amount-grid" style="grid-template-columns:repeat(3,1fr);" id="pillarPills">
            <button class="amount-pill active" data-pillar="any">Any Pillar</button>
            <button class="amount-pill" data-pillar="education">Education</button>
            <button class="amount-pill" data-pillar="wellness">Wellness</button>
            <button class="amount-pill" data-pillar="nutrition">Nutrition</button>
            <button class="amount-pill" data-pillar="dignity">Dignity Initiative</button>
            <button class="amount-pill" data-pillar="scholarship">Scholarship Fund</button>
          </div>
        </div>

        <!-- Amount pills -->
        <div class="form-group">
          <label>Select or enter an amount</label>
          <div class="amount-grid" id="amountPills">
            <button class="amount-pill" data-amount="2000">₦2,000</button>
            <button class="amount-pill active" data-amount="5000">₦5,000</button>
            <button class="amount-pill" data-amount="10000">₦10,000</button>
            <button class="amount-pill" data-amount="25000">₦25,000</button>
            <button class="amount-pill" data-amount="50000">₦50,000</button>
            <button class="amount-pill" data-amount="custom">Custom</button>
          </div>
          <input type="number" id="customAmount" class="form-group" style="display:none;margin-top:10px;width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:.92rem;" placeholder="Enter amount in Naira (₦)"/>
        </div>

        <!-- Frequency -->
        <div class="form-group">
          <label>Donation frequency</label>
          <div class="amount-grid" style="grid-template-columns:1fr 1fr;" id="freqPills">
            <button class="amount-pill active" data-freq="once">One-Time</button>
            <button class="amount-pill" data-freq="monthly">Monthly</button>
          </div>
        </div>

        <!-- Personal details -->
        <div class="form-row">
          <div class="form-group"><label for="d-fname">First Name</label><input type="text" id="d-fname" placeholder="Your first name"/><span class="form-error-msg" id="d-fname-err"></span></div>
          <div class="form-group"><label for="d-lname">Last Name</label><input type="text" id="d-lname" placeholder="Your last name"/></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label for="d-email">Email Address</label><input type="email" id="d-email" placeholder="your@email.com"/><span class="form-error-msg" id="d-email-err"></span></div>
          <div class="form-group"><label for="d-phone">Phone (optional)</label><input type="tel" id="d-phone" placeholder="+234 ..."/></div>
        </div>
        <div class="form-group">
          <label for="d-message">Message (optional)</label>
          <textarea id="d-message" rows="3" style="width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:.88rem;resize:vertical;" placeholder="Leave a message of support or a dedication..."></textarea>
        </div>
        <div class="form-check">
          <input type="checkbox" id="d-anon"/>
          <label for="d-anon">I would like to remain anonymous — do not publish my name</label>
        </div>
        <div class="form-check">
          <input type="checkbox" id="d-updates" checked/>
          <label for="d-updates">Send me updates on how my donation is being used</label>
        </div>

        <button class="btn btn-primary btn-block btn-lg" id="donateBtn" onclick="submitDonation()">
          <i class="fas fa-heart"></i> <span id="donate-btn-label">Complete Donation</span>
        </button>
        <p style="font-size:.75rem;color:var(--text-muted);text-align:center;margin-top:12px;">After submitting, you'll receive our bank details and a confirmation email. We'll send you a receipt and impact update.</p>
        <div class="form-success-msg" id="donate-success"><i class="fas fa-check-circle"></i> Thank you! Your donation request has been received. We'll send you payment details and a confirmation shortly.</div>
      </div>

      <!-- SIDEBAR -->
      <div class="donate-sidebar">

        <!-- Bank details -->
        <div class="sidebar-card">
          <h4><i class="fas fa-university"></i> Bank Transfer Details</h4>
          <div class="bank-row"><span>Organisation</span><strong>One Africa Foundation</strong></div>
          <div class="bank-row">
            <span>Email</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <strong style="font-size:.82rem;">oneafricafdn@gmail.com</strong>
              <button class="copy-btn" onclick="copyText('oneafricafdn@gmail.com',this)"><i class="fas fa-copy"></i> Copy</button>
            </div>
          </div>
          <div class="bank-row">
            <span>Phone</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <strong>+2348081082263</strong>
              <button class="copy-btn" onclick="copyText('+2348081082263',this)"><i class="fas fa-copy"></i> Copy</button>
            </div>
          </div>
          <div class="bank-row"><span>Address</span><strong style="font-size:.8rem;">Dan Ladi 801127, Kaduna, Nigeria</strong></div>
          <p style="font-size:.75rem;color:var(--text-muted);margin-top:14px;line-height:1.5;">After completing your bank transfer, please send your payment confirmation and full name to our email so we can acknowledge your gift and send your impact report.</p>
        </div>

        <!-- Impact of giving -->
        <div class="sidebar-card">
          <h4><i class="fas fa-chart-bar"></i> What Your Donation Does</h4>
          <div class="impact-pill"><i class="fas fa-book"></i><p><strong>₦2,000</strong>Provides tutorial materials for one student preparing for WAEC</p></div>
          <div class="impact-pill"><i class="fas fa-female"></i><p><strong>₦3,500</strong>Provides a full month of menstrual hygiene packs for one girl</p></div>
          <div class="impact-pill"><i class="fas fa-utensils"></i><p><strong>₦10,000</strong>Contributes to one week's nutrition support at Faithworks Orphanage</p></div>
          <div class="impact-pill"><i class="fas fa-graduation-cap"></i><p><strong>₦25,000</strong>Sponsors a student's WAEC or JAMB registration fees</p></div>
          <div class="impact-pill"><i class="fas fa-university"></i><p><strong>₦50,000+</strong>Contributes to our University Scholarship Fund</p></div>
        </div>

        <!-- Security -->
        <div class="sidebar-card">
          <h4><i class="fas fa-shield-alt"></i> Your Trust Matters</h4>
          <p style="font-size:.83rem;color:var(--text-muted);line-height:1.65;margin-bottom:14px;">One Africa Foundation is committed to full accountability. Every donation is tracked, acknowledged, and reported.</p>
          <div class="secure-badges">
            <span class="secure-badge"><i class="fas fa-lock"></i> Secure</span>
            <span class="secure-badge"><i class="fas fa-receipt"></i> Receipted</span>
            <span class="secure-badge"><i class="fas fa-eye"></i> Transparent</span>
            <span class="secure-badge"><i class="fas fa-chart-line"></i> Reported</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

<!-- IMPACT NUMBERS BAND -->
<section class="impact-section">
  <div class="container">
    <div style="text-align:center;margin-bottom:48px;">
      <span class="section-tag" style="background:rgba(255,138,0,.15);border-color:rgba(255,138,0,.35);">Your Impact So Far</span>
      <h2 style="font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:#fff;margin-top:12px;">Every Naira Has Already<br/><em style="color:var(--orange);font-style:italic;">Changed Lives</em></h2>
    </div>
    <div class="impact-row">
      <div class="impact-box"><div class="num">1,000+</div><div class="lbl">Students given tables, books &amp; stationery at Children's Day</div></div>
      <div class="impact-box"><div class="num">2,660</div><div class="lbl">Sanitary pads delivered through the Dignity to Learn Initiative</div></div>
      <div class="impact-box"><div class="num">7</div><div class="lbl">Students on active scholarships — WAEC, JAMB &amp; University</div></div>
      <div class="impact-box"><div class="num">432%</div><div class="lbl">Growth in programme reach since we launched</div></div>
    </div>
  </div>
</section>

<!-- VOLUNTEER -->
<section class="volunteer-section" id="volunteer">
  <div class="container">
    <div class="volunteer-grid">
      <div class="volunteer-text">
        <span class="section-tag" style="background:rgba(255,138,0,.15);border-color:rgba(255,138,0,.35);">Give Your Time</span>
        <h2 class="section-title">Volunteer With<br/><em>One Africa</em></h2>
        <p>Your expertise, energy, and time are some of the most valuable things you can give. Whether you're a teacher, designer, doctor, student, or simply passionate about our mission — there is a place for you here.</p>
        <div class="volunteer-roles">
          <div class="volunteer-role"><i class="fas fa-chalkboard-teacher"></i><div><h4>Tutorial Tutor</h4><p>Teach WAEC/JAMB subjects to secondary school students in Kaduna — in-person or remotely via video.</p></div></div>
          <div class="volunteer-role"><i class="fas fa-female"></i><div><h4>Hygiene Sensitisation Facilitator</h4><p>Lead menstrual health education sessions for girls in schools. Training provided. No medical background required.</p></div></div>
          <div class="volunteer-role"><i class="fas fa-laptop-code"></i><div><h4>Remote Volunteer</h4><p>Support us with graphic design, social media, content writing, data management, or fundraising from anywhere in the world.</p></div></div>
          <div class="volunteer-role"><i class="fas fa-truck"></i><div><h4>Outreach &amp; Distribution Volunteer</h4><p>Join our field teams during outreach events, pad distribution days, and orphanage visits in Kaduna and Asaba.</p></div></div>
          <div class="volunteer-role"><i class="fas fa-camera"></i><div><h4>Media &amp; Documentation</h4><p>Document our programmes through photography, videography, or storytelling to help us share our impact with the world.</p></div></div>
        </div>
        <a href="#vol-form" class="btn btn-primary btn-lg"><i class="fas fa-hands-helping"></i> Apply to Volunteer</a>
      </div>

      <!-- VOLUNTEER FORM -->
      <div class="volunteer-form-card" id="vol-form">
        <h3>Volunteer Application</h3>
        <p class="sub">Fill in the form below and we'll be in touch within 3–5 working days.</p>

        <div class="vol-group"><label class="vol-label">Full Name *</label><input type="text" class="vol-input" id="v-name" placeholder="Your full name"/></div>
        <div class="vol-group"><label class="vol-label">Email Address *</label><input type="email" class="vol-input" id="v-email" placeholder="your@email.com"/></div>
        <div class="vol-group"><label class="vol-label">Phone Number</label><input type="tel" class="vol-input" id="v-phone" placeholder="+234 ..."/></div>
        <div class="vol-group"><label class="vol-label">Location *</label><input type="text" class="vol-input" id="v-location" placeholder="City, State, Country"/></div>
        <div class="vol-group">
          <label class="vol-label">Role of Interest *</label>
          <select class="vol-input" id="v-role">
            <option value="">Select a volunteer role...</option>
            <option>Tutorial Tutor (In-Person, Kaduna)</option>
            <option>Tutorial Tutor (Remote / Online)</option>
            <option>Hygiene Sensitisation Facilitator</option>
            <option>Outreach &amp; Distribution Volunteer</option>
            <option>Graphic Designer / Creative</option>
            <option>Social Media &amp; Content</option>
            <option>Photography / Videography</option>
            <option>Data &amp; Administration</option>
            <option>Fundraising &amp; Partnerships</option>
            <option>General / Any Role</option>
          </select>
        </div>
        <div class="vol-group">
          <label class="vol-label">Availability *</label>
          <select class="vol-input" id="v-avail">
            <option value="">How much time can you give?</option>
            <option>A few hours per week</option>
            <option>1–2 days per week</option>
            <option>Weekends only</option>
            <option>During specific outreach events</option>
            <option>Full-time availability</option>
          </select>
        </div>
        <div class="vol-group">
          <label class="vol-label">Why do you want to volunteer?</label>
          <textarea class="vol-input" id="v-why" rows="3" placeholder="Tell us briefly why you want to volunteer with One Africa Foundation..."></textarea>
        </div>

        <button class="btn btn-primary btn-block" style="margin-top:8px;" onclick="submitVolunteer()">
          <i class="fas fa-paper-plane"></i> <span id="vol-btn-label">Submit Application</span>
        </button>
        <div class="form-success-msg" id="vol-success" style="background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#86efac;"><i class="fas fa-check-circle"></i> Application received! We'll be in touch within 3–5 days. Thank you for giving your time.</div>
      </div>
    </div>
  </div>
</section>

<!-- PARTNERSHIP -->
<section class="partnership-section" id="partnership">
  <div class="container">
    <div style="text-align:center;">
      <span class="section-tag">For Organisations</span>
      <h2 class="section-title" style="text-align:center;">Partner with<br/><em>One Africa Foundation</em></h2>
      <p class="section-subtitle" style="text-align:center;margin:0 auto 0;">We believe meaningful, lasting change requires collaboration. We invite organisations — corporate, NGO, government, and institutional — to join us as strategic partners.</p>
    </div>
    <div class="partner-types">
      <div class="partner-card">
        <div class="partner-card-accent"></div>
        <div class="partner-icon"><i class="fas fa-building"></i></div>
        <h3>Corporate Partners</h3>
        <p>Align your CSR objectives with measurable community impact. We work with businesses to co-fund and co-deliver programmes that benefit children across Nigeria.</p>
        <ul class="partner-list">
          <li><i class="fas fa-check"></i>Programme co-funding &amp; naming rights</li>
          <li><i class="fas fa-check"></i>Employee volunteering days</li>
          <li><i class="fas fa-check"></i>In-kind product &amp; material donations</li>
          <li><i class="fas fa-check"></i>Joint impact reporting &amp; visibility</li>
          <li><i class="fas fa-check"></i>Brand association with verified impact</li>
        </ul>
        <a href="mailto:oneafricafdn@gmail.com?subject=Corporate Partnership Enquiry" class="btn btn-outline-dark">Get In Touch <i class="fas fa-arrow-right"></i></a>
      </div>

      <div class="partner-card featured">
        <div class="partner-card-accent"></div>
        <div class="partner-icon"><i class="fas fa-globe-africa"></i></div>
        <h3>NGO &amp; Institutional Partners</h3>
        <p>We welcome co-implementation partnerships with aligned NGOs, foundations, and international institutions to scale our programmes and deepen their impact.</p>
        <ul class="partner-list">
          <li><i class="fas fa-check"></i>Joint programme design &amp; delivery</li>
          <li><i class="fas fa-check"></i>Shared grant applications</li>
          <li><i class="fas fa-check"></i>Data sharing &amp; joint M&amp;E frameworks</li>
          <li><i class="fas fa-check"></i>Cross-referral and beneficiary linkage</li>
          <li><i class="fas fa-check"></i>Co-authored impact publications</li>
        </ul>
        <a href="mailto:oneafricafdn@gmail.com?subject=NGO Partnership Enquiry" class="btn btn-primary">Partner With Us <i class="fas fa-arrow-right"></i></a>
      </div>

      <div class="partner-card">
        <div class="partner-card-accent"></div>
        <div class="partner-icon"><i class="fas fa-school"></i></div>
        <h3>Schools &amp; Community Partners</h3>
        <p>We partner directly with schools, community organisations, and local leaders to ensure our programmes are community-led, culturally appropriate, and sustainable.</p>
        <ul class="partner-list">
          <li><i class="fas fa-check"></i>School-based tutorial programme hosting</li>
          <li><i class="fas fa-check"></i>Community outreach co-delivery</li>
          <li><i class="fas fa-check"></i>Menstrual hygiene programme integration</li>
          <li><i class="fas fa-check"></i>Referral of high-need beneficiaries</li>
          <li><i class="fas fa-check"></i>Local awareness and mobilisation</li>
        </ul>
        <a href="mailto:oneafricafdn@gmail.com?subject=School Partnership Enquiry" class="btn btn-outline-dark">Get In Touch <i class="fas fa-arrow-right"></i></a>
      </div>
    </div>

    <!-- Partnership contact CTA -->
    <div style="margin-top:48px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;max-width:680px;margin-left:auto;margin-right:auto;text-align:center;">
      <i class="fas fa-handshake" style="font-size:2rem;color:var(--orange);margin-bottom:16px;display:block;"></i>
      <h3 style="font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:10px;">Ready to Explore a Partnership?</h3>
      <p style="font-size:.9rem;color:var(--text-muted);line-height:1.7;margin-bottom:24px;">Contact our partnerships team directly. We respond to all partnership enquiries within 5 working days.</p>
      <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
        <a href="mailto:oneafricafdn@gmail.com?subject=Partnership Enquiry" class="btn btn-primary"><i class="fas fa-envelope"></i> Email Us</a>
        <a href="tel:+2348081082263" class="btn btn-outline-dark"><i class="fas fa-phone"></i> +2348081082263</a>
      </div>
    </div>
  </div>
</section>

<!-- SPONSORSHIP TIERS -->
<section class="sponsor-section" id="sponsorship">
  <div class="container">
    <div style="text-align:center;">
      <span class="section-tag">Sponsor a Child</span>
      <h2 class="section-title" style="text-align:center;">Choose Your<br/><em>Sponsorship Level</em></h2>
      <p class="section-subtitle" style="text-align:center;margin:0 auto 0;">Every sponsorship tier creates a direct, measurable outcome for a specific child. You'll receive regular updates on the child or children you're supporting.</p>
    </div>
    <div class="sponsor-tiers">

      <div class="sponsor-tier">
        <div class="tier-icon bronze"><i class="fas fa-seedling"></i></div>
        <div class="tier-name">Seedling Sponsor</div>
        <div class="tier-amount">₦3,500<span style="font-size:1rem;color:var(--text-muted);font-weight:400;">/mo</span></div>
        <div class="tier-period">Monthly commitment</div>
        <div class="tier-divider"></div>
        <ul class="tier-benefits">
          <li><i class="fas fa-check-circle"></i>Monthly menstrual hygiene pack for one girl</li>
          <li><i class="fas fa-check-circle"></i>Progress update every 3 months</li>
          <li><i class="fas fa-check-circle"></i>Certificate of sponsorship</li>
          <li><i class="fas fa-check-circle"></i>Contribution to Dignity to Learn Initiative</li>
        </ul>
        <a href="#donate" class="btn btn-outline-dark btn-block">Sponsor Now <i class="fas fa-arrow-right"></i></a>
      </div>

      <div class="sponsor-tier popular">
        <span class="popular-badge">Most Popular</span>
        <div class="tier-icon silver"><i class="fas fa-graduation-cap"></i></div>
        <div class="tier-name">Scholar Sponsor</div>
        <div class="tier-amount">₦25,000<span style="font-size:1rem;color:var(--text-muted);font-weight:400;">/year</span></div>
        <div class="tier-period">Annual commitment</div>
        <div class="tier-divider"></div>
        <ul class="tier-benefits">
          <li><i class="fas fa-check-circle"></i>Full WAEC or JAMB exam registration fee</li>
          <li><i class="fas fa-check-circle"></i>Tutorial support materials</li>
          <li><i class="fas fa-check-circle"></i>Bi-annual impact report &amp; student update</li>
          <li><i class="fas fa-check-circle"></i>Certificate of sponsorship &amp; named recognition</li>
          <li><i class="fas fa-check-circle"></i>Invitation to our annual impact event</li>
        </ul>
        <a href="#donate" class="btn btn-primary btn-block">Sponsor a Scholar <i class="fas fa-arrow-right"></i></a>
      </div>

      <div class="sponsor-tier">
        <div class="tier-icon gold"><i class="fas fa-star"></i></div>
        <div class="tier-name">Champion Sponsor</div>
        <div class="tier-amount">₦150,000<span style="font-size:1rem;color:var(--text-muted);font-weight:400;">/year</span></div>
        <div class="tier-period">Annual commitment</div>
        <div class="tier-divider"></div>
        <ul class="tier-benefits">
          <li><i class="fas fa-check-circle"></i>Full university scholarship contribution</li>
          <li><i class="fas fa-check-circle"></i>Dedicated student assigned to your sponsorship</li>
          <li><i class="fas fa-check-circle"></i>Quarterly personal progress letters</li>
          <li><i class="fas fa-check-circle"></i>Named recognition in our annual report</li>
          <li><i class="fas fa-check-circle"></i>Direct programme visit invitation</li>
          <li><i class="fas fa-check-circle"></i>Priority partnership status</li>
        </ul>
        <a href="mailto:oneafricafdn@gmail.com?subject=Champion Sponsorship Enquiry" class="btn btn-primary btn-block">Become a Champion <i class="fas fa-arrow-right"></i></a>
      </div>

    </div>
  </div>
</section>

<!-- STORIES -->
<section class="stories-section" id="stories">
  <div class="container">
    <div style="text-align:center;">
      <span class="section-tag">Stories of Impact</span>
      <h2 class="section-title" style="text-align:center;">Why Supporters<br/><em>Keep Giving</em></h2>
      <p class="section-subtitle" style="text-align:center;margin:0 auto 0;">Hear from the people whose support has already changed lives — and why they chose to invest in the future of the African child.</p>
    </div>
    <div class="stories-grid">
      <div class="story-card">
        <span class="story-pillar-tag">Education</span>
        <div class="story-quote">"</div>
        <p class="story-text">I donated toward a student's WAEC fees not knowing if it would make a difference. Three months later, One Africa Foundation sent me her results — she passed six subjects. That email was worth more than the money I gave.</p>
        <div class="story-divider"></div>
        <div class="story-author">
          <div class="story-avatar">AO</div>
          <div><div class="story-author-name">Adaeze Okafor</div><div class="story-author-role">Monthly Donor, Lagos</div></div>
        </div>
      </div>
      <div class="story-card">
        <span class="story-pillar-tag">Wellness</span>
        <div class="story-quote">"</div>
        <p class="story-text">I volunteered at the Dignity to Learn distribution in Kaduna. Seeing the girls' faces when they received their packs — not embarrassed, but proud — reminded me why this work matters so much. I've volunteered every month since.</p>
        <div class="story-divider"></div>
        <div class="story-author">
          <div class="story-avatar">FI</div>
          <div><div class="story-author-name">Fatima Ibrahim</div><div class="story-author-role">Field Volunteer, Kaduna</div></div>
        </div>
      </div>
      <div class="story-card">
        <span class="story-pillar-tag">Nutrition</span>
        <div class="story-quote">"</div>
        <p class="story-text">Our company chose to partner with One Africa Foundation for our CSR programme. The team is transparent, accountable, and genuinely passionate. We've seen the photos and reports — our funds are feeding real children every month.</p>
        <div class="story-divider"></div>
        <div class="story-author">
          <div class="story-avatar">EM</div>
          <div><div class="story-author-name">Emeka Mbah</div><div class="story-author-role">CSR Manager, Corporate Partner</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="faq-section" id="faq">
  <div class="container">
    <div style="text-align:center;">
      <span class="section-tag">Got Questions?</span>
      <h2 class="section-title" style="text-align:center;">Frequently Asked<br/><em>Questions</em></h2>
      <p class="section-subtitle" style="text-align:center;margin:0 auto 0;">Everything you need to know before you give.</p>
    </div>
    <div class="faq-grid">

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>How is my donation used?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">100% of donations go directly to programme delivery — tutorial materials, sanitary pads, orphanage food support, and scholarship fees. One Africa Foundation operates with minimal administrative overhead, and all expenditure is reported to the Board and published in our annual impact report.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>Will I receive confirmation of my donation?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">Yes. Once your donation is received, we will send a receipt to the email address you provided. You'll also receive an impact update showing how funds from your giving cycle were deployed — with real numbers and outcomes.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>Can I donate from outside Nigeria?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">Absolutely. We welcome donations from supporters worldwide. Please contact us at oneafricafdn@gmail.com and we will provide appropriate international transfer details or alternative payment arrangements. No contribution is too small.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>How does child sponsorship work?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">When you sponsor a child, we assign a beneficiary to your sponsorship based on your chosen tier. You receive regular updates — including their progress, outcomes, and when applicable, letters from the student. All identifying information is shared with your consent and with the child's family's permission.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>Can I volunteer if I live outside Nigeria?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">Yes. We have several remote volunteer roles including online tutoring, content creation, graphic design, social media management, and fundraising support. You can contribute meaningfully from anywhere in the world. Select "Remote Volunteer" in the application form and tell us your skills.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>What qualifications do I need to tutor?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">To tutor WAEC/JAMB subjects, you need a strong grasp of the relevant subject(s) and a genuine interest in supporting students. Formal teaching qualifications are helpful but not mandatory. All tutors receive an orientation and support from our Education Programme team before starting.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>Is One Africa Foundation a registered organisation?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">One Africa Foundation operates as a registered non-profit organisation in Nigeria. We are governed by a Board of Trustees and operate with full financial accountability. Details of our registration and governance structure are available on request.</div></div>
      </div>

      <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
          <span>How do I become a corporate partner?</span>
          <div class="faq-icon"><i class="fas fa-plus"></i></div>
        </div>
        <div class="faq-answer"><div class="faq-answer-inner">Email us at oneafricafdn@gmail.com with the subject line "Corporate Partnership Enquiry" and include a brief overview of your organisation and your CSR interests. Our partnerships team will respond within 5 working days with a partnership proposal tailored to your goals.</div></div>
      </div>

    </div>
  </div>
</section>

<!-- CTA BAND -->
<section class="cta-band">
  <div class="container">
    <div class="cta-band-inner">
      <h2>Still Deciding? Just Start.</h2>
      <p>There is no contribution too small. A ₦2,000 donation provides tutorial materials. An hour of your time changes a classroom. The first step is simply choosing to act.</p>
      <div class="cta-btns">
        <a href="#donate" class="btn btn-white btn-lg"><i class="fas fa-heart"></i> Donate Now</a>
        <a href="#volunteer" class="btn btn-outline-white btn-lg"><i class="fas fa-hands-helping"></i> Volunteer</a>
        <a href="mailto:oneafricafdn@gmail.com" class="btn btn-outline-white btn-lg"><i class="fas fa-envelope"></i> Email Us</a>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  <div class="footer-top">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <div class="footer-brand-name">One<span>Africa</span> Foundation</div>
          <div class="footer-brand-tag">From Hope to Impact</div>
          <p>Improving the lives of African children through practical, community-based programmes in Education, Wellness, and Nutrition. Nigeria is our starting point — Africa is our horizon.</p>
          <div class="footer-socials">
            <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Support Options</h4>
          <ul>
            <li><a href="#donate">Donate Now</a></li>
            <li><a href="#volunteer">Volunteer</a></li>
            <li><a href="#sponsorship">Sponsor a Child</a></li>
            <li><a href="#partnership">Partner With Us</a></li>
            <li><a href="#ways">All Ways to Give</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Our Work</h4>
          <ul>
            <li><a href="index.html#programs">Education Pillar</a></li>
            <li><a href="index.html#dignity">Dignity Initiative</a></li>
            <li><a href="index.html#programs">Nutrition Pillar</a></li>
            <li><a href="index.html#impact">Impact So Far</a></li>
            <li><a href="index.html#future">Future Vision</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Contact Us</h4>
          <ul class="footer-contact">
            <li><i class="fas fa-map-marker-alt"></i> Dan Ladi 801127, Kaduna, Nigeria</li>
            <li><i class="fas fa-phone"></i> +2348081082263</li>
            <li><i class="fas fa-envelope"></i> oneafricafdn@gmail.com</li>
            <li><i class="fas fa-user"></i> Presented by Gift Ndubuisi</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-bottom">
    <div class="container">
      <div class="footer-bottom-inner">
        <p>© 2026 One Africa Foundation. All rights reserved. Built with <i class="fas fa-heart" style="color:#FF8A00"></i> for Africa's children.</p>
        <span class="footer-tagline">"Investing in the Future of the African Child"</span>
      </div>
    </div>
  </div>
</footer>

<button class="back-to-top" id="backToTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top"><i class="fas fa-chevron-up"></i></button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
// THEME
const html = document.documentElement;
const saved = localStorage.getItem('oneafrica-theme') || 'dark';
html.setAttribute('data-theme', saved);
document.getElementById('themeToggle').addEventListener('click', () => {
  const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-theme', next);
  localStorage.setItem('oneafrica-theme', next);
});

// NAVBAR SCROLL
window.addEventListener('scroll', () => {
  document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 40);
  document.getElementById('backToTop').classList.toggle('visible', window.scrollY > 400);
}, { passive: true });

// AMOUNT PILLS
document.getElementById('amountPills').querySelectorAll('.amount-pill').forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('amountPills').querySelectorAll('.amount-pill').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const custom = document.getElementById('customAmount');
    custom.style.display = btn.dataset.amount === 'custom' ? 'block' : 'none';
    if (btn.dataset.amount !== 'custom') {
      const label = document.getElementById('donate-btn-label');
      label.textContent = 'Complete Donation — ' + btn.textContent;
    }
  });
});

// PILLAR PILLS
document.getElementById('pillarPills').querySelectorAll('.amount-pill').forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('pillarPills').querySelectorAll('.amount-pill').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

// FREQUENCY PILLS
document.getElementById('freqPills').querySelectorAll('.amount-pill').forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('freqPills').querySelectorAll('.amount-pill').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

// SUBMIT DONATION
function submitDonation() {
  const fname  = document.getElementById('d-fname').value.trim();
  const email  = document.getElementById('d-email').value.trim();
  let valid = true;

  document.getElementById('d-fname-err').textContent = '';
  document.getElementById('d-email-err').textContent = '';
  document.getElementById('d-fname').style.borderColor = '';
  document.getElementById('d-email').style.borderColor = '';

  if (!fname) {
    document.getElementById('d-fname-err').textContent = 'Please enter your first name.';
    document.getElementById('d-fname').style.borderColor = '#ef4444';
    valid = false;
  }
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    document.getElementById('d-email-err').textContent = 'Please enter a valid email address.';
    document.getElementById('d-email').style.borderColor = '#ef4444';
    valid = false;
  }
  if (!valid) return;

  const btn = document.getElementById('donateBtn');
  btn.disabled = true;
  document.getElementById('donate-btn-label').textContent = 'Processing...';

  setTimeout(() => {
    btn.disabled = false;
    document.getElementById('donate-btn-label').textContent = 'Complete Donation';
    const msg = document.getElementById('donate-success');
    msg.classList.add('show');
    gsap.from(msg, { y: 20, opacity: 0, duration: 0.5 });
    setTimeout(() => msg.classList.remove('show'), 8000);
  }, 1800);
}

// SUBMIT VOLUNTEER
function submitVolunteer() {
  const name  = document.getElementById('v-name').value.trim();
  const email = document.getElementById('v-email').value.trim();
  const role  = document.getElementById('v-role').value;
  const avail = document.getElementById('v-avail').value;
  if (!name || !email || !role || !avail) {
    alert('Please fill in all required fields.');
    return;
  }

  const btn = document.getElementById('vol-btn-label');
  btn.textContent = 'Submitting...';

  setTimeout(() => {
    btn.textContent = 'Submit Application';
    const msg = document.getElementById('vol-success');
    msg.classList.add('show');
    gsap.from(msg, { y: 20, opacity: 0, duration: 0.5 });
  }, 1600);
}

// FAQ TOGGLE
function toggleFaq(el) {
  const item = el.closest('.faq-item');
  const isOpen = item.classList.contains('open');
  document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
  if (!isOpen) item.classList.add('open');
}

// COPY TEXT
function copyText(text, btn) {
  navigator.clipboard.writeText(text).then(() => {
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
    setTimeout(() => btn.innerHTML = orig, 2000);
  });
}

// GSAP SCROLL
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.way-card, .partner-card, .sponsor-tier, .story-card, .hero-stat-card, .impact-box, .sidebar-card').forEach((el, i) => {
  gsap.from(el, { y: 50, opacity: 0, duration: 0.75, delay: (i % 4) * 0.1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' } });
});
gsap.utils.toArray('.volunteer-role').forEach((el, i) => {
  gsap.from(el, { x: -40, opacity: 0, duration: 0.65, delay: i * 0.08, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none none' } });
});
gsap.from('.donate-form-card', { y: 60, opacity: 0, duration: 0.9, ease: 'power3.out', scrollTrigger: { trigger: '.donate-form-card', start: 'top 85%', toggleActions: 'play none none none' } });
gsap.from('.volunteer-form-card', { x: 60, opacity: 0, duration: 0.9, ease: 'power3.out', scrollTrigger: { trigger: '.volunteer-form-card', start: 'top 85%', toggleActions: 'play none none none' } });
gsap.utils.toArray('.faq-item').forEach((el, i) => {
  gsap.from(el, { y: 30, opacity: 0, duration: 0.6, delay: (i % 2) * 0.1, ease: 'power3.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none none' } });
});
</script>
</body>
</html>