/* ── Base ───────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; padding: 0; margin: 0; }

  /* ── Scroll Reveal ──────────────────────────────── */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(32px);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Feature Card Hover ─────────────────────────── */
  .feature-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  }
  .feature-card:hover {
    transform: translateY(-4px);
  }

  /* ── Mobile Menu Transition ─────────────────────── */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    opacity: 0;
  }
  #mobile-menu.open {
    max-height: 400px;
    opacity: 1;
  }

  /* ── Utility ────────────────────────────────────── */
  .no-underline { text-decoration: none; }