@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
.animated-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.float-animation {
  animation: float 6s ease-in-out infinite;
}
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.pulse-ring::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #4f46e5;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  z-index: -1;
}
.blob {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(79, 70, 229, 0.2);
  border-radius: 50%;
  filter: blur(15px);
  animation: float 8s infinite;
  z-index: 0;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

.hero-bg {
  background: radial-gradient(
      circle at 20% 20%,
      rgba(79, 70, 229, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(124, 58, 237, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.9) 0%,
      transparent 100%
    );
}

.animated-shape {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(
    45deg,
    rgba(79, 70, 229, 0.1),
    rgba(124, 58, 237, 0.1)
  );
  animation: morphing 15s ease-in-out infinite;
}

@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.hover-3d {
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

.hover-3d:hover {
  transform: translateY(-5px) rotateX(2deg) rotateY(2deg);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(to right, #4f46e5, #7c3aed);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-container {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1100px;
  z-index: 50;
}

.nav-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(79, 70, 229, 0.03),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.feature-card:hover::before {
  transform: translateX(100%);
}

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

.gradient-border {
  position: relative;
}

.gradient-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.animated-bg {
  background: linear-gradient(-45deg, #f3f4f6, #ffffff, #f3f4f6);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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

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

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

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

.step-card:hover {
  transform: translateY(-5px);
}

.step-number {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.step-number::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.5s ease;
}

.step-card:hover .step-number::before {
  transform: rotate(45deg) translate(100%, 100%);
}

.connecting-line {
  position: absolute;
  left: 1rem;
  top: 3rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #4f46e5, #7c3aed);
  transform-origin: top;
  animation: growLine 1s ease forwards;
}

@keyframes growLine {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.pricing-card {
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover::before {
  opacity: 1;
}

.popular-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #4f46e5, transparent);
}

.feature-included {
  position: relative;
  overflow: hidden;
}

.feature-included::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover .feature-included::after {
  opacity: 0.1;
}

.gradient-text {
  background: linear-gradient(to right, #4f46e5, #7c3aed, #4f46e5);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

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

.integration-card:hover {
  transform: translateY(-5px);
}

.case-study-card {
  position: relative;
  overflow: hidden;
}

.case-study-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}

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

.blog-card:hover {
  transform: translateY(-5px) rotateY(2deg);
}

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 0;
}

.mobile-menu.show {
    max-height: 400px; /* Adjust this value based on your content height */
    opacity: 1;
}

.mobile-menu-inner {
    transform: translateY(-10px);
    transition: transform 0.3s ease-out;
    opacity: 0;
}

.mobile-menu.show .mobile-menu-inner {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
}