html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Poppins", sans-serif;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar {
      width: 5px;
    }

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

    ::-webkit-scrollbar-thumb {
      background: #0ea5e9;
      border-radius: 999px;
    }

    .gradient-text {
      background: linear-gradient(135deg, #0ea5e9, #14b8a6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-gradient {
      background: linear-gradient(
        135deg,
        #eff6ff 0%,
        #f0fdfa 50%,
        #f0f9ff 100%
      );
    }

    .card-hover {
      transition: all 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-4px);

      box-shadow: 0 20px 60px rgba(14, 165, 233, 0.12);
    }

    .btn-gradient {
      background: linear-gradient(
        135deg,
        #0ea5e9 0%,
        #14b8a6 100%
      );

      transition: all 0.3s ease;
    }

    .btn-gradient:hover {
      background: linear-gradient(
        135deg,
        #0284c7 0%,
        #0f766e 100%
      );

      transform: translateY(-2px);

      box-shadow: 0 10px 30px rgba(14, 165, 233, 0.35);
    }

    .animate-on-scroll {
      opacity: 0;

      transform: translateY(30px);

      transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    }

    .animate-on-scroll.visible {
      opacity: 1;

      transform: translateY(0);
    }

    section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}