* { box-sizing: border-box; }
  body { font-family: 'Public Sans', sans-serif; overflow-x: hidden; }
  .material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align: middle; }

  /* ── Animations ── */
  @keyframes fadeInUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn    { from{opacity:0} to{opacity:1} }
  @keyframes slideDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
  @keyframes ping      { 75%,100%{transform:scale(2);opacity:0} }
  @keyframes pulse-ring{
    0%  {box-shadow:0 0 0 0 rgba(106,198,200,.45)}
    70% {box-shadow:0 0 0 14px rgba(106,198,200,0)}
    100%{box-shadow:0 0 0 0 rgba(106,198,200,0)}
  }
  @keyframes progress-fill { from{width:0} }

  .animate-fade-in-up { animation: fadeInUp .7s ease both; }
  .animate-fade-in    { animation: fadeIn  .6s ease both; }
  .animate-ping       { animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite; }
  .delay-100 { animation-delay:.1s }
  .delay-200 { animation-delay:.2s }
  .delay-300 { animation-delay:.3s }

  /* ── Scroll reveal ── */
  .reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease,transform .65s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* ── Mobile menu ── */
  #mobile-menu { display:none }
  #mobile-menu.open { display:block; animation:slideDown .3s ease both }
  .hamburger span {
    display:block; width:22px; height:2px;
    background:currentColor; border-radius:2px;
    transition:.3s ease; transform-origin:center;
  }
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* ── Compliance link ── */
  .compliance-link { position:relative }
  .compliance-link::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:#6ac6c8; transition:.3s }
  .compliance-link:hover::after { width:100% }

  /* ── Donation tile ── */
  .donation-tile {
    transition: all .2s ease;
    cursor: pointer;
  }
  .donation-tile:hover {
    border-color: #6ac6c8;
    background-color: rgba(106,198,200,.08);
  }
  .donation-tile.active {
    border-color: #6ac6c8 !important;
    background-color: rgba(106,198,200,.15);
    border-width: 2px;
  }
  .donation-tile.active .tile-amount { color: #0e6f73; }

  /* ── Toggle tabs ── */
  .tab-btn { transition: all .2s ease; }
  .tab-btn.active {
    background: white;
    color: #0e6f73;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  .dark .tab-btn.active {
    background: #1e293b;
    color: #6ac6c8;
  }

  /* ── Campaign card hover ── */
  .campaign-card { transition: box-shadow .25s ease, border-color .25s ease; }
  .campaign-card:hover { box-shadow: 0 8px 32px rgba(14,111,115,.10); border-color: rgba(106,198,200,.4); }

  /* ── Progress bar animation ── */
  .bar-fill { animation: progress-fill .8s ease both; animation-delay: .3s; }

  /* ── Trust badge hover ── */
  .trust-badge { transition: transform .2s ease; }
  .trust-badge:hover { transform: translateY(-2px); }

  /* ── CTA button pulse ── */
  .btn-pulse { animation: pulse-ring 2.2s infinite; }

  /* ── Stat card ── */
  .stat-item { transition: transform .2s ease; }
  .stat-item:hover { transform: translateY(-2px); }

  html { scroll-behavior:smooth }