body { font-family: 'Montserrat', sans-serif; background-color: #F8FAF8; color: #1F2933; }
  .serif-title { font-family: 'Playfair Display', serif; }

  .nav-link { position: relative; }
  .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #0B6B3A; border-radius: 2px; transition: width 0.25s cubic-bezier(.4,0,.2,1); }
  .nav-link:hover::after { width: 100%; }
  .active-nav { position: relative; }
  .active-nav::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: #0B6B3A; border-radius: 2px; }

  .btn-primary {
    background: linear-gradient(135deg, #006B3F 0%, #0B6B3A 100%);
    color: white; font-weight: 700; border-radius: 12px;
    transition: all 0.2s; box-shadow: 0 4px 14px rgba(11,107,58,0.25);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #005530 0%, #006B3F 100%);
    box-shadow: 0 6px 20px rgba(11,107,58,0.35); transform: translateY(-1px);
  }

  .section-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #EAF6EF, #d4eddf);
    color: #0B6B3A; font-size: 10px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 99px; margin-bottom: 14px;
    border: 1px solid #2B8B57;
  }

  .shadow-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
  }
  .shadow-card:hover {
    box-shadow: 0 8px 32px rgba(11,107,58,0.13), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-3px);
  }

  .section-divider { background: linear-gradient(90deg, transparent, #EAF6EF 30%, #EAF6EF 70%, transparent); height: 1px; }

  .footer-link { position: relative; }
  .footer-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: #2B8B57; border-radius: 2px; transition: width 0.2s; }
  .footer-link:hover::after { width: 100%; }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 20px; }
  .donut-chart-container { position: relative; width: 150px; height: 150px; }
  @media (min-width: 768px) { .donut-chart-container { width: 180px; height: 180px; } }

  /* ── Donation mode switch animations ── */
  #donation-tabs { position: relative; }
  #donation-tab-indicator {
    position: absolute; bottom: 0; left: 0; height: 3px; width: 33.333%;
    background: linear-gradient(90deg, #006B3F, #2B8B57, #0B6B3A);
    border-radius: 3px 3px 0 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
    box-shadow: 0 -2px 12px rgba(11, 107, 58, 0.35);
    pointer-events: none; z-index: 2;
  }
  .donation-tab { position: relative; z-index: 1; transition: color 0.35s ease, background-color 0.35s ease; }
  .donation-tab.is-active .material-symbols-outlined {
    animation: tabIconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes tabIconPop {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.22) rotate(-6deg); }
    70% { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  #donation-form.donation-form-switching {
    transition: background-color 0.45s ease, box-shadow 0.45s ease;
    background-color: #f4fbf7;
    box-shadow: inset 0 0 0 1px rgba(11, 107, 58, 0.08);
  }

  .donation-swap-zone {
    display: grid;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin 0.5s ease;
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .donation-swap-zone.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
  }
  .donation-swap-zone > .donation-swap-inner { overflow: hidden; min-height: 0; }

  @keyframes donationSlideInRight {
    from { opacity: 0; transform: translateX(28px) scale(0.97); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
  @keyframes donationSlideOutLeft {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(-24px) scale(0.97); filter: blur(3px); }
  }
  @keyframes donationSlideInLeft {
    from { opacity: 0; transform: translateX(-28px) scale(0.97); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
  @keyframes donationSlideOutRight {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(24px) scale(0.97); filter: blur(3px); }
  }
  @keyframes donationHeroIn {
    from { opacity: 0; transform: translateY(32px) scale(0.94); max-height: 0; margin-top: 0; }
    to { opacity: 1; transform: translateY(0) scale(1); max-height: 600px; margin-top: 6.5rem; }
  }
  @keyframes donationHeroOut {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 600px; margin-top: 6.5rem; }
    to { opacity: 0; transform: translateY(24px) scale(0.94); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  }
  @keyframes platformBannerGlow {
    0% { box-shadow: 0 0 0 0 rgba(11, 107, 58, 0); }
    50% { box-shadow: 0 0 0 6px rgba(11, 107, 58, 0.12), 0 8px 24px rgba(11, 107, 58, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(11, 107, 58, 0); }
  }

  .donation-anim-in-right { animation: donationSlideInRight 0.48s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
  .donation-anim-out-left { animation: donationSlideOutLeft 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
  .donation-anim-in-left { animation: donationSlideInLeft 0.48s cubic-bezier(0.34, 1.2, 0.64, 1) both; }
  .donation-anim-out-right { animation: donationSlideOutRight 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
  .donation-anim-hero-in { animation: donationHeroIn 0.55s cubic-bezier(0.34, 1.15, 0.64, 1) both; overflow: hidden; }
  .donation-anim-hero-out { animation: donationHeroOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; overflow: hidden; }
  .donation-anim-glow { animation: platformBannerGlow 0.9s ease-out both; }

  .donation-text-fade { transition: opacity 0.28s ease, transform 0.28s ease; }
  .donation-text-fade.is-fading { opacity: 0; transform: translateY(4px); }

  #note-wrapper.donation-note-expand {
    transition: transform 0.5s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.4s ease;
  }
  #note-wrapper.donation-note-expanded {
    transform: scale(1.01);
  }

  .donation-tab span.material-symbols-outlined { font-size: 18px; }
  @media (min-width: 640px) { .donation-tab span.material-symbols-outlined { font-size: 20px; } }

  @media (prefers-reduced-motion: reduce) {
    #donation-tab-indicator,
    .donation-swap-zone,
    .donation-text-fade,
    #note-wrapper.donation-note-expand,
    #donation-form.donation-form-switching { transition: none !important; }
    .donation-anim-in-right, .donation-anim-out-left,
    .donation-anim-in-left, .donation-anim-out-right,
    .donation-anim-hero-in, .donation-anim-hero-out,
    .donation-anim-glow, .donation-tab.is-active .material-symbols-outlined { animation: none !important; }
  }
  #custom-amount::placeholder {
    transform: translateY(3px);
  }