:root{
  --bg:#0b1220;
  --panel:#0f1629;
  --ink:#eaf2ff;
  --dim:#a7b1c6;
  --primary:#12c2e9;     /* teal/blue gradient endpoints */
  --accent:#5ff7ff;
  --ok:#22c55e;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:linear-gradient(180deg, #0a0f1b 0%, #0b1220 40%, #0d1426 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, 92%);margin:0 auto}
.row{display:flex;gap:14px}
.between{justify-content:space-between}
.center{align-items:center}
.wrap{flex-wrap:wrap}
.gap{gap:12px}

.topbar{
  position:sticky; top:0; z-index: 50;
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(10,15,27,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff}
.logo{width:32px;height:32px}
.nav a{margin-left:18px}
.nav .btn{margin-left:8px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.2); transition:transform .06s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn--primary{
  background:linear-gradient(135deg, var(--primary), #4facfe);
  border-color:transparent;
}
.btn--ghost{background:transparent}
.btn--lg{padding:14px 22px;font-size:1.05rem}
.btn--sm{padding:8px 12px;font-size:.9rem}

.section{padding:64px 0}
.section--alt{background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.lead{color:#dbe6ff; font-size:1.15rem}
.small{font-size:.92rem}
.dim{color:var(--dim)}

.hero{
  padding:88px 0 36px;
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(18,194,233,.35), transparent 70%),
    radial-gradient(600px 300px at 85% 0%, rgba(95,247,255,.22), transparent 70%);
}
.hero__grid{display:grid; grid-template-columns: 1.2fr .9fr; gap:36px}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.25em 0 .3em}
.cta-row{display:flex; gap:12px; margin:18px 0 8px}

.pitch{
  margin-top:18px; padding:12px 14px; border-radius:12px;
  background:rgba(18,194,233,.08); border:1px solid rgba(95,247,255,.25);
}

.hero__card{position:relative}
.img-cover{width:100%;height:100%;object-fit:cover}
.rounded{border-radius:var(--radius)}
.qr{
  display:flex; gap:12px; align-items:center;
  position:absolute; right:-8px; bottom:-12px;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  padding:10px 12px; border-radius:14px; box-shadow:var(--shadow);
}
.qr img{width:72px;height:72px}

.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.mission p{margin-top:4px}
.checks{list-style:none; margin:12px 0 0; padding:0}
.checks li{padding-left:26px; position:relative; margin:8px 0}
.checks li:before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:800
}

.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.grid3 .card h3{margin-top:0}

.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:10px}
.stat{
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:14px; padding:18px; text-align:center
}
.stat span{display:block; font-size:2rem; font-weight:800}

.partners{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
.partners__card h3{margin-top:0}
.bullets{margin:8px 0 0; padding-left:18px}

.donate{text-align:center}
.donate__buttons{display:flex; gap:12px; justify-content:center; margin:16px 0}

.form .input{
  width:100%; padding:12px 14px; border-radius:12px;
  background:#0b1220; color:#eaf2ff; border:1px solid rgba(255,255,255,.14);
}
.form textarea{resize:vertical}

.footer{
  margin-top:36px; padding:26px 0; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.2)
}

@media (max-width: 960px){
  .hero__grid{grid-template-columns:1fr}
  .partners{grid-template-columns:1fr}
  .grid3, .stats{grid-template-columns:1fr}
  .qr{position:static; margin-top:10px}
  .nav a{margin-left:14px}
}