:root {
  --green: #123f2c;
  --green-2: #1d5a40;
  --gold: #f6c344;
  --ink: #18201c;
  --paper: #f7f5ef;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
section { scroll-margin-top: 78px; }
.navbar { background: rgba(18, 63, 44, .96); backdrop-filter: blur(8px); }
.brand-logo { object-fit: contain; border-radius: 8px; background: white; padding: 3px; }
.navbar-brand { font-weight: 750; letter-spacing: -.02em; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; background: #fff; color: #000; padding: .75rem 1rem; border-radius: .5rem; }

.hero { min-height: 100vh; background: url('../img/choco-woning.webp') center center / cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,31,22,.92) 0%, rgba(9,31,22,.78) 47%, rgba(9,31,22,.28) 78%, rgba(9,31,22,.12) 100%); }
.hero-content { z-index: 1; }
.text-white-75 { color: rgba(255,255,255,.78); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .78rem; color: var(--green-2); }

.stat-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 1rem; padding: 1.5rem 1rem; box-shadow: 0 8px 28px rgba(0,0,0,.04); }
.stat-number { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 850; color: var(--green); line-height: 1; }
.stat-label { margin-top: .65rem; color: #5d665f; font-size: .93rem; }

.photo-card { border-radius: 1.15rem; overflow: hidden; background: white; box-shadow: 0 12px 35px rgba(24,32,28,.12); }
.photo-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.photo-card figcaption { padding: .85rem 1rem 1rem; font-size: .86rem; color: #58605b; }
.photo-card figcaption span { color: #7d847f; }

.section-green { background: linear-gradient(135deg, var(--green) 0%, #0d3022 100%); }
.partner-card { position: relative; padding: 1.6rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1rem; background: rgba(255,255,255,.07); }
.partner-index { font-size: 2.6rem; line-height: 1; font-weight: 850; color: rgba(246,195,68,.48); margin-bottom: 1.5rem; }
.partner-org { color: var(--gold); font-weight: 700; min-height: 3rem; }

.donation-section { background: var(--paper); }
.bank-card { border-radius: 1rem; overflow: hidden; border: 1px solid rgba(0,0,0,.12); background: #fff; }
.bank-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.bank-row:last-child { border-bottom: 0; }
.bank-row > span { color: #6b736e; font-size: .9rem; }
.bank-row strong { text-align: right; }
.copy-btn { border: 0; background: #eaf2ed; color: var(--green); font-weight: 700; border-radius: .5rem; padding: .35rem .65rem; font-size: .82rem; }
.copy-btn:hover { background: #dce9e1; }
.qr-card { background: #fff; border-radius: 1.3rem; padding: 2rem; box-shadow: 0 14px 45px rgba(24,32,28,.12); }
.qr-image { width: min(100%, 320px); image-rendering: crisp-edges; }
.letter-spacing { letter-spacing: .12em; }
.footer-logo { width: 165px; max-width: 60%; mix-blend-mode: multiply; }

.floating-donate { position: fixed; right: 1rem; bottom: 1rem; z-index: 1020; border-radius: 999px; padding: .75rem 1.1rem; display: none; }

@media (max-width: 991.98px) {
  .hero { min-height: 820px; background-position: 58% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(9,31,22,.9) 0%, rgba(9,31,22,.78) 65%, rgba(9,31,22,.48) 100%); }
  .partner-org { min-height: 0; }
  .floating-donate { display: inline-flex; }
}
@media (max-width: 575.98px) {
  .hero { min-height: 760px; }
  .display-2 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .bank-row { align-items: flex-start; flex-direction: column; }
  .bank-row strong { text-align: left; }
  .bank-row .justify-content-end { justify-content: flex-start !important; }
  .qr-card { padding: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

  
@media (max-width: 991.98px) {
  #navbarMain .navbar-nav {
    align-items: stretch !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  #navbarMain .nav-item .btn {
    display: block;
    text-align: center;
  }
}