:root{
  --bg:#f6f7fb; --accent:#2b8aef; --muted:#6b7280; --card:#ffffff; --max:1100px;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
/* make logo image a stable height while remaining responsive */
.logo img{height:44px;width:auto}
body{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
.container{max-width:var(--max);margin:0 auto;padding:2rem}
.site-hero{background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.12)),url('assets/hero.jpg') center/cover no-repeat;color:#fff;padding:4rem 0}
.topbar{display:flex;align-items:center;justify-content:space-between}
.logo{margin:0;font-size:1.25rem}
.nav-actions a{margin-left:.5rem}
.hero-content{padding:4rem 0;text-align:center}
.hero-content h2{font-size:2rem;margin:.25rem 0}
.lead{color:rgba(255,255,255,0.9);max-width:700px;margin:0 auto 1.25rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.85);color:#fff}

.cards h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,42,0.06)}

.stats{padding:2rem 0}
.stat-grid{display:flex;gap:1rem;flex-wrap:wrap}
.stat{background:linear-gradient(180deg,#fff,#fafbfd);padding:1rem;border-radius:8px;flex:1;min-width:140px;text-align:center}
.stat strong{display:block;font-size:1.5rem}

.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.testimonials blockquote{background:var(--card);padding:1rem;border-left:4px solid var(--accent);margin:0;border-radius:6px;display:flex;gap:1rem;align-items:center}
.testimonials img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.testimonials cite{display:block;margin-top:.5rem;color:var(--muted);font-size:.9rem}

.cta-band{background:linear-gradient(90deg,#f3f9ff,#f7fbff);padding:2rem 0;text-align:center}

.hero-ctas{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

.modal{position:fixed;inset:0;background:rgba(15,23,42,0.6);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:20}
.modal.hidden{display:none}
.modal-panel{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:1.5rem;box-shadow:0 20px 60px rgba(15,23,42,0.18)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.modal-header h3{margin:0;font-size:1.25rem}
.close-modal{background:transparent;border:none;font-size:1.5rem;line-height:1;color:#111;cursor:pointer}
.donate-form .form-field{display:grid;gap:.5rem;margin-bottom:1rem}
.donate-form label{font-weight:600;color:#334155}
.donate-form input,.donate-form textarea{width:100%;padding:.9rem 1rem;border:1px solid #cbd5e1;border-radius:10px;font-size:1rem;font-family:inherit}
.donate-form input:focus,.donate-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,138,239,0.1)}
.donate-form input.error,.donate-form textarea.error{border-color:#dc2626}
.error-message{display:none;font-size:.875rem;color:#dc2626;margin-top:.25rem}
.error-message.show{display:block}
.form-status{display:none;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:600}
.form-status[data-type="error"]{background:#fff5f5;color:#7f1d1d;border:1px solid #fee2e2}
.form-status[data-type="warning"]{background:#fff7ed;color:#92400e;border:1px solid #ffedd5}
.form-status[data-type="success"]{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0}
.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}

.site-footer{background:#fff;padding:2rem 0;border-top:1px solid #e6e9ef}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.copyright{margin-top:1rem;color:var(--muted);font-size:.9rem;text-align:center}

@media (max-width:700px){
  .container{padding:1rem}
  .site-hero{padding:2rem 0;background-position:top}
  .hero-content{padding:2rem 0}
  .hero-content h2{font-size:1.45rem}

  /* topbar stacks on small screens */
  .topbar{flex-wrap:wrap;gap:.5rem;align-items:center}
  .nav-actions{width:100%;display:flex;justify-content:flex-end;margin-top:.25rem}
  .nav-actions a{margin-left:.5rem}

  /* CTAs become full-width for easier tapping */
  .hero-ctas{flex-direction:column;gap:.6rem}
  .hero-ctas .btn{width:100%;text-align:center;padding:.75rem;border-radius:10px}

  /* modal adapts to small screens */
  .modal-panel{max-width:100%;width:calc(100% - 2rem);border-radius:12px;padding:1rem}
  .form-actions{flex-direction:column-reverse;align-items:stretch}
  .form-actions .btn{width:100%}

  /* testimonial avatar and text spacing */
  .testimonials img{width:48px;height:48px}

  .footer-grid{grid-template-columns:1fr}
}