@keyframes flow {
  0% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

@keyframes float {

  0%,
  to {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes pulse-slow {

  0%,
  to {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

@keyframes ping-slow {

  75%,
  to {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0
  }

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

@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0
  }

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

@keyframes scaleUp {
  0% {
    transform: scale(0);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes wiggle {

  0%,
  to {
    transform: rotate(-12deg)
  }

  50% {
    transform: rotate(12deg)
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes scanHorizontal {
  0% {
    left: 0;
    opacity: 0
  }

  20% {
    opacity: 1
  }

  80% {
    opacity: 1
  }

  to {
    left: 100%;
    opacity: 0
  }
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes fly-out {
  0% {
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0
  }

  20% {
    opacity: 1
  }

  80% {
    opacity: 1
  }

  to {
    transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(1);
    opacity: 0
  }
}

@keyframes orbit-rotate {
  0% {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg)
  }

  to {
    transform: rotate(1turn) translateX(var(--orbit-radius)) rotate(-1turn)
  }
}

@keyframes pop-in {
  0% {
    transform: scale(0);
    opacity: 0
  }

  70% {
    transform: scale(1.1);
    opacity: 1
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.marketing-page .custom-scrollbar::-webkit-scrollbar {
  width: 6px
}

.marketing-page .shadow-sm {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.marketing-page .shadow-md {
  box-shadow: 0 .5rem 1rem 0 hsl(0 0% 0%/.1)
}

.marketing-page .shadow-lg {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)
}

.marketing-page .hover\:shadow-2xl:hover {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0), 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.marketing-page .custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1
}

.marketing-page .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px
}

.marketing-page .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8
}

.marketing-page .animate-flow {
  background-size: 200% 200%;
  animation: flow 10s ease infinite
}

.marketing-page .animate-float {
  animation: float 3s ease-in-out infinite
}

.marketing-page .animate-float-delayed {
  animation: float 3s ease-in-out 1.5s infinite
}

.marketing-page .animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(.4, 0, .6, 1) infinite
}

.marketing-page .animate-ping-slow {
  animation: ping-slow 2s cubic-bezier(0, 0, .2, 1) infinite
}

.marketing-page .animate-slide-in-right {
  animation: slideInRight .5s ease-out forwards
}

.marketing-page .animate-fade-in-up {
  animation: fadeInUp .5s ease-out forwards
}

.marketing-page .animate-scale-up {
  animation: scaleUp .3s ease-out forwards
}

.marketing-page .animate-wiggle {
  animation: wiggle 1s ease-in-out infinite
}

.marketing-page .animate-spin-slow {
  animation: spin-slow 8s linear infinite
}

.marketing-page .animate-fly-out {
  animation: fly-out 3s ease-out infinite;
  position: absolute;
  top: 50%;
  left: 50%
}

.marketing-page .animate-orbit {
  animation: orbit-rotate linear infinite
}

.marketing-page .animate-pop-in {
  animation: pop-in .5s cubic-bezier(.175, .885, .32, 1.275) forwards
}

.marketing-page .grid-bg {
  background-image: linear-gradient(rgba(59, 130, 246, .1) 1px, transparent 0), linear-gradient(90deg, rgba(59, 130, 246, .1) 1px, transparent 0);
  background-size: 20px 20px
}