* { 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 count-up  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(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 .6s ease,transform .6s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }
  .reveal-fast { opacity:0; transform:translateY(18px); transition:opacity .45s ease,transform .45s ease; }
  .reveal-fast.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% }

  /* ── Filter buttons ── */
  .filter-btn { transition: all .2s ease; }
  .filter-btn.active {
    background: #6ac6c8;
    color: #0e6f73;
    border-color: #6ac6c8;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(106,198,200,.35);
  }
  .filter-btn:not(.active):hover {
    border-color: #6ac6c8;
    color: #0e6f73;
  }

  /* ── Project cards ── */
  .project-card { transition: box-shadow .25s ease, transform .25s ease; }
  .project-card:hover { box-shadow: 0 20px 48px rgba(14,111,115,.12); transform: translateY(-3px); }
  .project-card .card-img { transition: transform .5s ease; }
  .project-card:hover .card-img { transform: scale(1.06); }

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

  /* ── Stat counter section ── */
  .stat-num { animation: count-up .6s ease both; }

  /* ── Pagination ── */
  .page-btn { transition: all .18s ease; }
  .page-btn.active { background:#6ac6c8; color:#0e6f73; border-color:#6ac6c8; font-weight:800; }
  .page-btn:not(.active):hover { border-color:#6ac6c8; color:#0e6f73; }

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

  html { scroll-behavior: smooth; }