@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

      * {
        font-family: "Inter", sans-serif;
      }

      html {
        scroll-behavior: smooth;
      }


      body {
        background: linear-gradient(
          135deg,
          #0c0c0c 0%,
          #1a1a2e 25%,
          #16213e 50%,
          #0f3460 75%,
          #0c0c0c 100%
        );
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
      }

      @keyframes gradientShift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .glass-card {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }

      .glass-card-dark {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      }

      .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .gradient-text-premium {
        background: linear-gradient(
          135deg,
          #ffecd2 0%,
          #fcb69f 25%,
          #667eea 50%,
          #764ba2 75%,
          #ffecd2 100%
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: textGradient 3s ease infinite;
      }

      @keyframes textGradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .premium-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .premium-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s ease;
      }

      .premium-button:hover::before {
        left: 100%;
      }

      .premium-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
      }

      .floating-orbs {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
      }

      .orb {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(
          circle at 30% 30%,
          rgba(102, 126, 234, 0.3),
          rgba(118, 75, 162, 0.1)
        );
        animation: float 6s ease-in-out infinite;
      }

      .orb:nth-child(1) {
        width: 200px;
        height: 200px;
        top: 20%;
        left: 10%;
        animation-delay: 0s;
      }

      .orb:nth-child(2) {
        width: 150px;
        height: 150px;
        top: 60%;
        right: 15%;
        animation-delay: 2s;
      }

      .orb:nth-child(3) {
        width: 100px;
        height: 100px;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }
        50% {
          transform: translateY(-20px) rotate(180deg);
        }
      }

      .neon-glow {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
          0 0 40px rgba(102, 126, 234, 0.3), 0 0 60px rgba(102, 126, 234, 0.1);
      }

      .input-focus {
        position: relative;
      }

      .input-focus::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transition: all 0.3s ease;
        transform: translateX(-50%);
      }

      .input-focus:focus-within::after {
        width: 100%;
      }

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

      .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      }

      .ripple {
        position: relative;
        overflow: hidden;
      }

      .ripple::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
      }

      .ripple:hover::before {
        width: 300px;
        height: 300px;
      }

      .stats-card {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.1) 0%,
          rgba(118, 75, 162, 0.1) 100%
        );
        border: 1px solid rgba(102, 126, 234, 0.2);
        transition: all 0.3s ease;
      }

      .stats-card:hover {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.2) 0%,
          rgba(118, 75, 162, 0.2) 100%
        );
        border-color: rgba(102, 126, 234, 0.4);
        transform: scale(1.05);
      }

      .feature-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
      }

      .pricing-card {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.05) 0%,
          rgba(118, 75, 162, 0.05) 100%
        );
        border: 1px solid rgba(102, 126, 234, 0.1);
        transition: all 0.3s ease;
      }

      .pricing-card:hover {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.1) 0%,
          rgba(118, 75, 162, 0.1) 100%
        );
        border-color: rgba(102, 126, 234, 0.3);
        transform: translateY(-10px);
      }

      .pricing-card.featured {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.1) 0%,
          rgba(118, 75, 162, 0.1) 100%
        );
        border: 2px solid rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
      }

      .pricing-card.featured::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
      }

      @media (max-width: 768px) {
        .orb {
          display: none;
        }
      }