html{scroll-behavior:smooth}
:root{ --bg:#f7f6ff; --card:#fff; --ink:#0b1220; --muted:#4b5563; --brand:#2048e0; --brandDeep:#1739b7; --soft:#e7eaff; --cta:#16a34a; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
a{color:var(--brand)} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92%);margin:0 auto}
.topband{position:sticky;top:0;z-index:70;background:var(--brandDeep);border-bottom:3px solid #102b8e;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.topband .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:46px;width:auto;border-radius:10px;background:#fff}
.brand span{color:#fff;font-weight:900;font-size:1.25rem;white-space:nowrap}
nav ul{list-style:none;display:flex;gap:.5rem;margin:0;padding:0;flex-wrap:wrap;align-items:center}
nav a{display:inline-block;background:#fff;color:var(--brandDeep);padding:.46rem .74rem;border-radius:.65rem;font-weight:800;font-size:.9rem;border:2px solid #fff;white-space:nowrap}
nav a:hover{background:var(--soft);color:#0f3acc}
nav a.active{background:var(--brandDeep);color:#fff;border-color:#c7d2fe}
nav a.cta{background:var(--cta);color:#fff;border-color:#0a7a2f}
.menu-toggle{display:none;flex-direction:column;cursor:pointer;gap:4px;margin-left:auto}
.menu-toggle span{display:block;width:24px;height:3px;background:#fff;border-radius:2px}
.section{padding:3.4rem 0 3rem;scroll-margin-top:100px}
.section.alt{background:var(--soft)}
.section h2{margin:.4rem 0 1rem;font-size:2.4rem;font-weight:900;color:#1d4ed8;position:relative;padding-bottom:.55rem}
.section h2:after{content:'';position:absolute;left:0;bottom:0;width:130px;height:6px;background:linear-gradient(90deg,#1d4ed8,#60a5fa);border-radius:6px}
.lead{color:var(--muted);max-width:75ch}
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:1.1fr 1fr}
.card{background:var(--card);border:1px solid #e6e7ef;border-radius:1rem;box-shadow:0 6px 24px rgba(0,0,0,.07);padding:1.1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.hero-img{height:340px;object-fit:cover;border-radius:12px}
.founder-img{height:320px;object-fit:cover;border-radius:12px}
.df-img{max-height:300px;width:100%;object-fit:cover;object-position:center 15%}
.carousel{position:relative}
.carousel-track{display:flex;gap:.6rem;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:.2rem}
.carousel-item{min-width:100%;scroll-snap-align:center;background:var(--card);border:1px solid #e6e7ef;border-radius:1rem;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:.6rem}
.carousel-controls{display:flex;justify-content:flex-end;gap:.4rem;margin:.2rem 0 0 0}
.carousel button{background:var(--brandDeep);color:#fff;border:none;border-radius:.6rem;padding:.3rem .55rem;font-weight:700;cursor:pointer}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:1rem}
.video-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:.6rem}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:.6rem}
.donate{background:var(--card);border:1px solid #e6e7ef;border-radius:1rem;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:1.1rem}
.donate .cta{display:inline-block;margin-top:.6rem;padding:.6rem .9rem;background:var(--cta);color:#fff;border-radius:.6rem;font-weight:900;border:2px solid #0a7a2f}
.copy{display:inline-block;margin-left:.6rem;padding:.4rem .6rem;background:#0b1220;color:#fff;border-radius:.5rem;font-weight:800;border:0;cursor:pointer}
.qr-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;align-items:center}
.qr-box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:.6rem;text-align:center}
.qr-box img{width:100%;max-width:360px;margin:0 auto}
footer{padding:2rem 0;border-top:3px solid var(--brandDeep);color:#334155}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.footer-brand img{height:28px;width:auto;border-radius:6px;background:#fff}
.back-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--brandDeep);color:#fff;font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:9999;pointer-events:auto}
.donate-fab{position:fixed;bottom:84px;right:20px;z-index:9999;background:var(--cta);color:#fff;padding:.6rem .9rem;border-radius:999px;font-weight:900;border:2px solid #0a7a2f;pointer-events:auto}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.thumb{background:var(--card);border:1px solid #e6e7ef;border-radius:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.05);padding:.6rem;text-align:center}
.thumb img{width:100%;height:140px;object-fit:contain}
.thumb .cap{font-size:.9rem;margin-top:.4rem;color:#334155}
@media (max-width:900px){
  .topband .inner{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:.45rem;padding:.8rem 0;min-height:58px}
  .brand span{font-size:1.05rem;line-height:1.2;white-space:normal}
  .brand img{height:38px}
  .menu-toggle{grid-column:2;grid-row:2;justify-self:end;display:flex;align-items:center;justify-content:center;height:38px;padding:4px 8px;z-index:201}
  nav{position:relative}
  nav ul{display:none;flex-direction:column;background:var(--brandDeep);position:absolute;top:calc(100% + 6px);right:0;width:280px;padding:.6rem .6rem 1rem;gap:.35rem;border-left:2px solid #0f3acc;border-bottom:2px solid #0f3acc;z-index:200}
  nav ul.show{display:flex}
  nav a{background:#fff;color:#1d4ed8;border-color:#fff;padding:.34rem .54rem;font-size:.8rem}
  nav a.active{background:#0f3acc;color:#fff}
  .grid-2{grid-template-columns:1fr}
  .grid-2 img{margin:1rem auto 0;max-width:90%}
  .hero-img{height:300px}
  .founder-img{height:300px}
  .section{scroll-margin-top:112px}
  .donate-fab{ bottom: 96px; right: 14px; }
  .back-to-top{ bottom: 20px; right: 16px; }
}
@media (min-width:900px){
  .topband .inner{flex-wrap:wrap;row-gap:.3rem}
  nav{flex:1 1 100%;display:flex;justify-content:flex-end}
  nav ul{position:static;width:auto;padding:0;border:none;background:transparent;display:flex}
}