body {
        font-family: "Inter", sans-serif;
      }
      .bg-gradient-hero {
        background: linear-gradient(90deg, #6ee7b7, #3b82f6);
      }
      .gradient-text {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to right, #3b82f6, #6ee7b7);
      }
      .card-icon-gradient {
        background-image: linear-gradient(to bottom, #a78bfa, #3b82f6);
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .fade-in {
        animation: fadeIn 1s ease-out;
      }
      @media (max-width: 768px) {
        .scroll-cards {
          display: flex;
          flex-direction: row;
          overflow-x: auto;
          overflow-y: hidden;
          gap: 1.5rem;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 1rem;
        }
        .scroll-cards .card {
          min-width: 70vw;
          flex: 0 0 auto;
        }
      }