* { 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(-16px)} 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 float {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-10px); }
  }
  @keyframes counterUp { from { opacity:0; transform:translateY(12px); } 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; }
  .delay-500 { animation-delay:.5s; }

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

  /* ── Hamburger ── */
  .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); }
  #mobile-menu{ display:none; }
  #mobile-menu.open{ display:block; animation:slideDown .3s ease both; }

  /* ── Compliance bar ── */
  .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%; }

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

  /* ── Category cards ── */
  .cat-card {
    transition: all .3s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
  }
  .cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(14,111,115,.12);
    border-color: rgba(106,198,200,.5);
  }
  .cat-card .cat-icon {
    transition: all .3s ease;
  }
  .cat-card:hover .cat-icon {
    background: #6ac6c8;
    color: white;
    transform: scale(1.1);
  }

  /* ── Progress steps ── */
  .step-line { width: 2px; background: linear-gradient(to bottom, #6ac6c8, #e2e8f0); }

  /* ── Form inputs ── */
  .form-input {
    background: #f7f9fa;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    width: 100%;
    font-size: 0.875rem;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    font-family: 'Public Sans', sans-serif;
  }
  .form-input:focus {
    border-color: #6ac6c8;
    box-shadow: 0 0 0 3px rgba(106,198,200,.15);
    background: #fff;
  }
  .dark .form-input {
    background: #1e2a2a;
    border-color: #2d3f3f;
    color: #f1f5f9;
  }
  .dark .form-input:focus { background: #263333; }

  /* ── Checkbox custom ── */
  .area-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .area-label {
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all .2s;
    background: #f7f9fa;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
  }
  .dark .area-label { background: #1e2a2a; border-color: #2d3f3f; }
  .area-check:checked + .area-label {
    border-color: #6ac6c8;
    background: rgba(106,198,200,.08);
    box-shadow: 0 4px 14px rgba(106,198,200,.15);
  }
  .area-label .check-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    transition: all .2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }
  .dark .area-label .check-dot { background: #263333; border-color: #4a5568; }
  .area-check:checked + .area-label .check-dot {
    background: #6ac6c8;
    border-color: #6ac6c8;
  }
  .check-inner { display: none; color: white; font-size: 12px; line-height: 1; }
  .area-check:checked + .area-label .check-inner { display: block; }

  /* ── Testimonial card ── */
  .vol-card { transition: transform .25s ease, box-shadow .25s ease; }
  .vol-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(14,111,115,.10); }

  /* ── Float badge ── */
  .float-badge { animation: float 4s ease-in-out infinite; }

  html { scroll-behavior: smooth; }
  .no-scrollbar::-webkit-scrollbar{ display:none; }
  .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }