.page-donate {
  --bg:#0e1013; --text:#e8edf2; --muted:#9aa4b2; --line:rgba(255,255,255,.12);
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
  margin: 0;
}

/* Header / hero */
.don-hero { max-width: 1100px; margin: 0 auto; padding: 28px 20px 10px; }
.brand { text-decoration: none; color: inherit; }
.topnav { float: right; }
.topnav a { margin-left: 14px; color: inherit; opacity:.85; text-decoration:none; }
.topnav a:hover { opacity:1; }

.don-hero h1 { margin: 12px 0 6px; font-size: 36px; }
.don-hero .sub { margin: 0; color: var(--muted); }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin: 16px 0 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#1b2026; color:var(--text); font-weight:700; text-decoration:none; }
.btn.primary { background: linear-gradient(160deg,#4da3ff,#7ef0c6); color:#0a0a0a; border:none; }

/* Main */
.don-main { max-width: 1100px; margin: 0 auto; padding: 18px 20px 32px; }
.grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card { background: #11161c; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.card h3 { margin:0 0 8px; }
.card p, .card li { color:#cfd6de; }
.card ul { margin:0; padding-left:18px; }

.note { margin-top: 16px; color: var(--muted); font-size: .95rem; }

/* Footer */
.don-footer { text-align:center; color:var(--muted); padding: 26px 0 36px; font-size: .92rem; }