:root{
  --bg:#03121D; --bg2:#061A24; --bg3:#07151F;
  --green:#00C878; --green2:#16D66B;
  --orange:#FF7A00; --orange2:#FF8A00;
  --yellow:#FFC400;
  --text:#FFFFFF; --text2:#A8BBC4; --text3:#8FA7B3;
  --card:rgba(10,30,40,.55); --border:rgba(0,200,120,.18);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
body{background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; overflow-x:hidden; line-height:1.6;}
h1,h2,h3,.brand{font-family:'Sora',sans-serif;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
::selection{background:var(--green); color:#03121D;}

/* background ambience */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(700px 500px at 10% 5%, rgba(0,200,120,.10), transparent 60%),
    radial-gradient(800px 600px at 95% 25%, rgba(255,122,0,.07), transparent 60%),
    radial-gradient(600px 500px at 50% 90%, rgba(255,196,0,.05), transparent 60%),
    var(--bg);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* NAV */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:100; transition:.35s;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1200px; margin:0 auto;}
header.scrolled{background:rgba(3,18,29,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{width:38px; height:38px;}
.logo span{font-weight:700; font-size:1.15rem; letter-spacing:.5px;}
nav.links{display:flex; gap:28px; font-size:.92rem; color:var(--text2);}
nav.links a{position:relative; transition:.25s;}
nav.links a:hover{color:var(--green2);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:14px; font-weight:600; font-size:.9rem; transition:.25s; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green2)); color:#03121D; box-shadow:0 0 22px rgba(0,200,120,.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(0,200,120,.55);}
.btn-orange{background:linear-gradient(135deg,var(--orange),var(--yellow)); color:#111;}
.btn-orange:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(255,150,0,.5);}
.btn-ghost{border:1px solid rgba(255,255,255,.25) !important; color:white !important;}
.btn-ghost:hover{border-color:var(--green2); background:rgba(0,200,120,.08);}
.hamburger{display:none; font-size:1.6rem; background:none; border:none; color:var(--text); cursor:pointer;}

/* HERO */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; padding:80px 32px 60px;
  background:
    linear-gradient(180deg, rgba(3,18,29,.55), rgba(3,18,29,.92)),
    linear-gradient(120deg,#0a2a1e,#031318 55%,#241605);
    margin-top:60px;
}
.hero-inner{max-width:1200px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px; border:1px solid var(--border); background:rgba(0,200,120,.08); font-size:.8rem; color:var(--green2); margin-bottom:22px;}
.badge::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--green2); box-shadow:0 0 8px var(--green2);}
.hero h1{font-size:3.35rem; line-height:1.08; font-weight:800; margin-bottom:20px; letter-spacing:-.015em;}
.hero p.lead{color:var(--text2); font-size:1.08rem; max-width:520px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-visual{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:5/5;
  background:linear-gradient(165deg,#0d2a20,#07151f 55%,#2a1a05);
  border:1px solid var(--border); box-shadow:0 20px 70px rgba(0,0,0,.45), 0 0 60px rgba(0,200,120,.12);}
.hero-visual .glow{position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(75px); opacity:.55;}
.hero-visual .g1{background:var(--green2); top:-50px; left:-50px;}
.hero-visual .g2{background:var(--orange); bottom:-50px; right:-60px;}
.hero-visual .rings{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.9;}
.hero-visual .rings svg{width:78%; height:78%;}
.hero-visual .caption{position:absolute; bottom:0; left:0; right:0; padding:22px; background:linear-gradient(0deg,rgba(3,18,29,.95),transparent);}
.hero-visual .caption strong{display:block; font-size:1.05rem;}
.hero-visual .caption span{color:var(--text3); font-size:.85rem;}
.float-card{position:absolute; top:24px; left:24px; padding:14px 18px; border-radius:16px;
  background:rgba(6,26,36,.65); backdrop-filter:blur(10px); border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.35);}
.float-card b{display:block; font-family:'Sora',sans-serif; font-size:1.15rem; background:linear-gradient(135deg,var(--green2),var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.float-card span{font-size:.72rem; color:var(--text3);}

/* IMPACT STRIP */
.impact{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin:-46px auto 90px; max-width:1120px; position:relative; z-index:5;}
.impact .cell{background:var(--bg2); padding:32px 20px; text-align:center;}
.impact .num{font-family:'Sora',sans-serif; font-size:2.1rem; font-weight:700; background:linear-gradient(135deg,var(--green2),var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.impact .label{color:var(--text3); font-size:.85rem; margin-top:4px;}
.impact .note{grid-column:1/-1; text-align:center; padding:8px; font-size:.72rem; color:var(--text3); background:var(--bg3);}

section{padding:90px 0;}
.eyebrow{color:var(--green2); font-weight:600; font-size:.85rem;}
.sec-head{max-width:640px; margin-bottom:48px;}
.sec-head h2{font-size:2.2rem; font-weight:700; margin:10px 0 12px; letter-spacing:-.01em;}
.sec-head p{color:var(--text2);}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.about-img{border-radius:22px; aspect-ratio:1/1.05; background:linear-gradient(160deg,#0e2a1c,#07151f 55%,#26170a); border:1px solid var(--border); position:relative; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4);}
.about-img::before{content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--green2); filter:blur(90px); opacity:.25; top:-60px; right:-60px;}
/*.about-img::after{content:'Volunteers distributing food & school kits'; position:absolute; bottom:18px; left:18px; right:18px; color:var(--text3); font-size:.8rem;}*/
.feature-row{display:flex; gap:16px; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06);}
.feature-row:first-of-type{border-top:none; margin-top:26px; padding-top:0;}
.f-icon{width:40px; height:40px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg,var(--green),var(--orange)); display:flex; align-items:center; justify-content:center; font-weight:700; color:#03121D; font-size:.85rem;}
.feature-row h4{font-size:1.02rem; margin-bottom:4px;}
.feature-row p{color:var(--text3); font-size:.9rem;}

/* CORE AREAS */
.core-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.core-card{border-radius:22px; border:1px solid var(--border); background:var(--card); overflow:hidden; transition:.3s; position:relative;}
.core-card:hover{transform:translateY(-6px); border-color:var(--green2); box-shadow:0 12px 40px rgba(0,200,120,.18);}
.core-media{height:180px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.core-media svg{width:56px; height:56px; position:relative; z-index:2; filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));}
.core-media .ph{position:absolute; inset:0; transition:transform .4s;}
.core-card:hover .ph{transform:scale(1.05);}
.core-media::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(3,18,29,.9)); z-index:1;}
.core-body{padding:22px 22px 26px;}
.tag{font-size:.72rem; letter-spacing:.4px; color:var(--yellow); font-weight:600;}
.core-body h3{font-size:1.25rem; margin:8px 0 10px;}
.core-body p{color:var(--text3); font-size:.9rem; margin-bottom:16px;}
.core-link{color:var(--green2); font-weight:600; font-size:.9rem; display:inline-flex; gap:6px; align-items:center; transition:.25s;}
.core-card:hover .core-link{gap:10px;}
/*.m-food .ph{background:linear-gradient(150deg,#123a28,#07151f);}*/
/*.m-edu .ph{background:linear-gradient(150deg,#123045,#07151f);}*/
/*.m-med .ph{background:linear-gradient(150deg,#3a1e12,#07151f);}*/

/* PROGRAMS */
.prog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.prog-card{padding:26px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); transition:.25s;}
.prog-card:hover{border-color:var(--border); background:var(--card);}
.prog-card h4{font-size:1.05rem; margin-bottom:8px;}
.prog-card p{color:var(--text3); font-size:.88rem;}
.center-cta{text-align:center; margin-top:36px;}

/* HOW IT WORKS */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.step{padding:0 18px; position:relative;}
.step::before{content:''; position:absolute; top:19px; left:-50%; width:100%; height:2px; background:linear-gradient(90deg,var(--green),var(--orange)); opacity:.35;}
.step:first-child::before{display:none;}
.step .n{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--green2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; background:var(--bg2); margin-bottom:18px; position:relative; z-index:2;}
.step h4{font-size:1rem; margin-bottom:8px;}
.step p{color:var(--text3); font-size:.87rem;}

/* DONATION */
.donate{background:linear-gradient(160deg,#0a2a1e,#03121D 60%); position:relative; overflow:hidden;}
.donate::before{content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:var(--orange); filter:blur(120px); opacity:.10; top:-100px; right:-100px;}
.donate-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.tiers{display:flex; flex-direction:column; gap:14px;}
.tier{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-radius:16px; border:1px solid var(--border); background:var(--card);}
.tier b{font-size:1.2rem; font-family:'Sora',sans-serif;}
.tier span{color:var(--text3); font-size:.85rem;}

/* TESTIMONIALS */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.test-card{padding:26px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:var(--card);}
.test-card p{font-size:.95rem; color:var(--text2); margin-bottom:16px;}
.test-card b{font-size:.85rem; color:var(--green2);}

/* FINAL CTA */
.final-cta{margin:0 32px 0; padding:70px 48px; border-radius:28px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0a2a1e,#1a1005 70%); border:1px solid var(--border);}
.final-cta h2{font-size:2.2rem; margin-bottom:14px;}
.final-cta p{color:var(--text2); max-width:560px; margin:0 auto 30px;}
.final-cta .ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

footer{padding:70px 32px 30px; border-top:1px solid rgba(255,255,255,.06); margin-top:60px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.foot-grid h5{font-size:.85rem; color:var(--text3); margin-bottom:16px; font-weight:600;}
.foot-grid a, .foot-grid p{color:var(--text3); font-size:.88rem; display:block; margin-bottom:10px;}
.foot-grid a:hover{color:var(--green2);}
.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
/*.foot-logo img{width:34px;}*/
.foot-tag{color:var(--green2); font-size:.85rem; margin-bottom:10px;}
.social{display:flex; gap:12px; margin-top:16px;}
.social a{width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:.8rem;}
.social a:hover{border-color:var(--green2); color:var(--green2);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); font-size:.8rem; color:var(--text3); flex-wrap:wrap; gap:10px;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){ .reveal{transition:none; opacity:1; transform:none;} }

@media(max-width:900px){
  .hero-inner, .about-grid, .donate-grid{grid-template-columns:1fr;}
  .impact, .core-grid, .prog-grid, .test-grid, .foot-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .step::before{display:none;}
  nav.links{display:none;}
  .hamburger{display:block;}
  .hero h1{font-size:2.2rem;}
}
@media(max-width:520px){
  .impact, .core-grid, .prog-grid, .test-grid, .foot-grid{grid-template-columns:1fr;}
  .final-cta{margin:0 16px; padding:48px 24px;}
  section{padding:60px 0;}
}