:root{
  --honey:#FFCC33; /* honey color */
  --black:#111;
  --muted:#F6F4EA;
  --max-width:1100px;
}

* {box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--black); background: #fff;}
.topbar{position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:#fff; border-bottom:2px solid rgba(0,0,0,0.06); z-index:100;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.site-title{font-size:1.1rem}
.left-menu select{padding:8px; border-radius:6px; border:1px solid #ddd;}
.donate-btn{background:var(--honey); color:#111; padding:8px 12px; text-decoration:none; border-radius:6px; font-weight:600;}
.container{max-width:var(--max-width); margin:90px auto 60px; padding:20px;}
.hero{text-align:center; padding:30px 20px; background:linear-gradient(180deg, rgba(255,238,178,0.6), rgba(255,255,255,0.0)); border-radius:8px;}
.hero h1{font-size:2.1rem; margin:0 0 12px;}
.lead{color:#333; font-size:1.05rem}
.hero-actions{margin-top:16px; display:flex; gap:12px; justify-content:center;}
.primary{background:var(--black); color:var(--honey); padding:10px 18px; text-decoration:none; border-radius:8px; font-weight:700;}
.secondary{background:transparent; border:2px solid var(--black); color:var(--black); padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:600;}

.services{margin-top:30px}
.cards{display:flex; gap:14px; flex-wrap:wrap}
.card{flex:1 1 220px; background:#fff; border:1px solid #eee; padding:16px; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.04)}

.gallery img{width:30%; margin:5px; border-radius:6px; border:1px solid #eee}

.mission{margin-top:20px; padding:18px; background:var(--muted); border-radius:8px;}

.site-footer{margin-top:40px; padding:18px; border-top:1px solid #eee; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.donor-wall{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.donor-pill{background:var(--honey); padding:8px 10px; border-radius:20px; font-weight:700}

.contact-form{display:flex; flex-direction:column; gap:10px; max-width:700px}
.contact-form label{display:flex; flex-direction:column; gap:6px}
.contact-form input, .contact-form textarea, .contact-form select{padding:10px; border-radius:6px; border:1px solid #ddd}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45)}
.modal[aria-hidden="false"]{display:flex}
.modal-inner{background:#fff; padding:20px; border-radius:8px; max-width:420px; text-align:center}

@media (max-width:700px){
  .cards{flex-direction:column}
  .gallery img{width:100%}
}