/* ─── Base & Utilities ─── */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
  }

  body {
    overflow-x: hidden;
  }

  a {
    text-decoration: none;
  }

  ::selection {
    background: #99f6e4;
    color: #134e4a;
  }

  /* ─── Floating Card Animation ─── */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
  }

  .floating-card {
    animation: float 4s ease-in-out infinite;
  }

  /* ─── Reveal Animations ─── */
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-up {
    transform: translateY(40px);
  }

  .reveal-left {
    transform: translateX(-40px);
  }

  .reveal-right {
    transform: translateX(40px);
  }

  .reveal-up.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* ─── Nav scroll state ─── */
  #mainNav.scrolled #navInner {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  }

  /* ─── Mobile menu transition ─── */
  #mobileMenu {
    animation: slideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── Custom scrollbar ─── */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  ::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
  }

  /* ─── Focus visible ─── */
  :focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* ─── Responsive tweaks ─── */
  @media (max-width: 640px) {
    html {
      scroll-padding-top: 90px;
    }

    #hero h1 {
      font-size: 2.75rem;
    }

    .floating-card {
      animation: none;
    }
  }