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

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

  .gradient-text {
   background: linear-gradient(135deg, #06b6d4, #a855f7, #ec4899);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
  }

  .glass {
   background: rgba(31, 41, 55, 0.4);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(75, 85, 99, 0.3);
  }

  .floating {
   animation: float 6s ease-in-out infinite;
  }

  .floating-delayed {
   animation: float 6s ease-in-out infinite;
   animation-delay: 2s;
  }

  .pulse-glow {
   animation: pulse-glow 2s ease-in-out infinite alternate;
  }

  @keyframes float {

   0%,
   100% {
    transform: translateY(0px);
   }

   50% {
    transform: translateY(-20px);
   }
  }

  @keyframes pulse-glow {
   from {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
   }

   to {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
   }
  }

  .bg-grid {
   background-image:
    linear-gradient(rgba(75, 85, 99, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 85, 99, 0.1) 1px, transparent 1px);
   background-size: 60px 60px;
  }

  .blob {
   border-radius: 30% 70% 70% 30%;
   animation: blob 7s ease-in-out infinite;
  }

  .blob-2 {
   border-radius: 70% 30% 30% 70%;
   animation: blob 7s ease-in-out infinite reverse;
  }

  @keyframes blob {

   0%,
   100% {
    border-radius: 30% 70% 70% 30%;
    transform: translate(0px, 0px) scale(1);
   }

   33% {
    border-radius: 70% 30% 30% 70%;
    transform: translate(30px, -50px) scale(1.1);
   }

   66% {
    border-radius: 30% 70% 70% 30%;
    transform: translate(-20px, 20px) scale(0.9);
   }
  }

  .hover-scale {
   transition: transform 0.3s ease;
  }

  .hover-scale:hover {
   transform: scale(1.05);
  }

  .mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(17, 24, 39, 0.95);
   backdrop-filter: blur(10px);
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
  }

  .mobile-menu.show {
   opacity: 1;
   visibility: visible;
  }

  .mobile-menu-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   padding: 2rem;
  }

  .mobile-menu a {
   color: #d1d5db;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 600;
   margin: 1rem 0;
   transition: color 0.3s ease;
  }

  .mobile-menu a:hover {
   color: #06b6d4;
  }

  .navbar-sticky {
   position: sticky;
   top: 0;
   z-index: 50;
  }

  .navbar-scroll {
   background: rgba(17, 24, 39, 0.8);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(75, 85, 99, 0.3);
  }