* { 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 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 bar-grow { from{width:0} }
  @keyframes donor-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }

  .animate-fade-in-up { animation: fadeInUp .7s ease both; }
  .animate-fade-in    { animation: fadeIn  .6s ease both; }
  .delay-100 { animation-delay:.1s }
  .delay-200 { animation-delay:.2s }
  .delay-300 { animation-delay:.3s }
  .delay-400 { animation-delay:.4s }

  /* ── 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% }

  /* ── Sticky sidebar ── */
  .sticky-sidebar { position: sticky; top: 88px; }

  /* ── Progress bar ── */
  .bar-fill {
    animation: bar-grow 1.2s cubic-bezier(.4,0,.2,1) both;
    animation-delay: .4s;
  }

  /* ── Stat card ── */
  .stat-card { transition: transform .22s ease, box-shadow .22s ease; }
  .stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,111,115,.12); }

  /* ── Gallery image ── */
  .gallery-img { transition: transform .5s ease; }
  .gallery-img:hover { transform: scale(1.06); }

  /* ── Donor row ── */
  .donor-row { animation: donor-in .4s ease both; }

  /* ── Share button ── */
  .share-btn { transition: background .2s, transform .15s; }
  .share-btn:hover { transform: scale(1.08); }

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

  /* ── Contribute card ── */
  .contribute-card { transition: transform .22s ease, box-shadow .22s ease; }
  .contribute-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14,111,115,.10); }

  html { scroll-behavior: smooth; }