body {
        font-family: 'IBM Plex Sans', sans-serif;
        background-color: #f0fdfa; /* mint-50 */
        color: #111827; /* gray-900 */
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: 'Unbounded', sans-serif;
      }

      /* COMPONENT_STYLES */
      .btn-primary {
        background-color: #0d9488;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }

      .btn-primary:hover {
        background-color: #0f766e;
        transform: translateY(-1px);
      }

      .btn-outline {
        border: 1px solid #0d9488;
        color: #0d9488;
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }

      .btn-outline:hover {
        background-color: #f0fdfa;
        border-color: #0f766e;
        color: #0f766e;
      }

      .card-hover {
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-4px);
        box-shadow:
          0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }

      /* SCROLL REVEAL PATTERN */
      .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.8s ease-out,
          transform 0.8s ease-out;
      }

      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }

      /* NAV LOGO VISIBILITY */
      #nav-logo {
        transition: opacity 0.3s ease;
      }
      /* When navbar has data-scroll-effect and IS NOT scrolled, hide logo */
      #navbar[data-scroll-effect]:not(.scrolled) #nav-logo {
        /* opacity: 0;
        pointer-events: none; */
      }
      /* When navbar has data-scroll-effect and IS scrolled, show logo */
      #navbar[data-scroll-effect].scrolled #nav-logo {
        opacity: 1;
        pointer-events: auto;
      }

      /* Nav Link Active State */
      .nav-link-active {
        color: #0d9488 !important;
      }

      /* Dropdown Styles */
      .dropdown {
        position: relative;
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        background: white;
        border: 1px solid #CCFBF1;
        border-radius: 0.75rem;
        padding: 0.5rem;
        margin-top: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        z-index: 100;
      }

      .dropdown:hover .dropdown-menu,
      .dropdown-menu:focus-within {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown-menu a {
        display: block;
        padding: 0.625rem 1rem;
        border-radius: 0.5rem;
        color: #111827;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.15s ease;
        text-decoration: none;
      }

      .dropdown-menu a:hover,
      .dropdown-menu a:focus {
        background-color: #F0FDFA;
        color: #0D9488;
        outline: none;
      }

      .dropdown-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
      }

      .dropdown-icon {
        transition: transform 0.2s ease;
      }

      .dropdown:hover .dropdown-icon {
        transform: rotate(180deg);
      }

      /* Mobile Dropdown Styles */
      .mobile-dropdown-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .mobile-dropdown-content.open {
        max-height: 500px;
      }

      .mobile-dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }

      .mobile-dropdown-icon {
        transition: transform 0.3s ease;
      }

      .mobile-dropdown-trigger.open .mobile-dropdown-icon {
        transform: rotate(180deg);
      }
    #navbar[data-scroll-effect]:not(.scrolled) #nav-logo {

  

  @media (prefers-reduced-motion: reduce) {
    #badge-dismiss {
      transition: none;
    }
  }