@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-straight/css/uicons-regular-straight.css');
   @import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
   
   body {
       box-sizing: border-box;
   }

   :root {
       --neon: #BFFF00;
       --dark: #0A0A0A;
       --gray: #1A1A1A;
   }

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

   .font-display {
       font-family: 'Bebas Neue', sans-serif;
   }

   .neon-text {
       color: var(--neon);
       text-shadow: 0 0 40px rgba(191, 255, 0, 0.5);
   }

   .neon-glow {
       box-shadow: 0 0 60px rgba(191, 255, 0, 0.3), inset 0 0 60px rgba(191, 255, 0, 0.05);
   }

   .gradient-border {
       background: linear-gradient(var(--dark), var(--dark)) padding-box,
           linear-gradient(135deg, var(--neon), transparent 50%) border-box;
       border: 1px solid transparent;
   }

   .marquee {
       animation: marquee 20s linear infinite;
   }

   @keyframes marquee {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .float-slow {
       animation: floatSlow 8s ease-in-out infinite;
   }

   @keyframes floatSlow {

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

       50% {
           transform: translateY(-30px) rotate(3deg);
       }
   }

   .float-reverse {
       animation: floatReverse 10s ease-in-out infinite;
   }

   @keyframes floatReverse {

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

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

   .spin-slow {
       animation: spinSlow 30s linear infinite;
   }

   @keyframes spinSlow {
       from {
           transform: rotate(0deg);
       }

       to {
           transform: rotate(360deg);
       }
   }

   .blob {
       border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
       animation: blob 8s ease-in-out infinite;
   }

   @keyframes blob {

       0%,
       100% {
           border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
       }

       50% {
           border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
       }
   }

   .card-hover {
       transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .card-hover:hover {
       transform: translateY(-10px) scale(1.02);
       box-shadow: 0 40px 80px rgba(191, 255, 0, 0.15);
   }

   .card-hover:hover .card-icon {
       transform: scale(1.1) rotate(5deg);
   }

   .magnetic-btn {
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .magnetic-btn:hover {
       transform: scale(1.05);
       box-shadow: 0 20px 60px rgba(191, 255, 0, 0.4);
   }

   .line-through-animate {
       position: relative;
       display: inline-block;
   }

   .line-through-animate::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 30%;
       width: 100%;
       height: 4px;
       background: var(--neon);
       transform: scaleX(0);
       transform-origin: right;
       transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .line-through-animate:hover::after {
       transform: scaleX(1);
       transform-origin: left;
   }

   .noise {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       opacity: 0.03;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
       z-index: 1000;
   }

   .grid-bg {
       background-image:
           linear-gradient(rgba(191, 255, 0, 0.03) 1px, transparent 1px),
           linear-gradient(90deg, rgba(191, 255, 0, 0.03) 1px, transparent 1px);
       background-size: 60px 60px;
   }

   .stagger-1 {
       animation: fadeUp 0.8s ease-out 0.1s forwards;
       opacity: 0;
   }

   .stagger-2 {
       animation: fadeUp 0.8s ease-out 0.2s forwards;
       opacity: 0;
   }

   .stagger-3 {
       animation: fadeUp 0.8s ease-out 0.3s forwards;
       opacity: 0;
   }

   .stagger-4 {
       animation: fadeUp 0.8s ease-out 0.4s forwards;
       opacity: 0;
   }

   .stagger-5 {
       animation: fadeUp 0.8s ease-out 0.5s forwards;
       opacity: 0;
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(40px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .text-stroke {
       -webkit-text-stroke: 2px #BFFF00;
       color: transparent;
   }

   .scroll-smooth {
       scroll-behavior: smooth;
   }

   input:focus,
   textarea:focus,
   select:focus {
       outline: none;
       border-color: var(--neon) !important;
       box-shadow: 0 0 0 3px rgba(191, 255, 0, 0.1);
   }