@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 160, 233, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(0, 160, 233, 0.1);
  }
}

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

.product-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.product-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.product-section.animate .feature:nth-child(1) {
  animation: fadeInUp 0.5s ease-out 0.1s both;
}

.product-section.animate .feature:nth-child(2) {
  animation: fadeInUp 0.5s ease-out 0.25s both;
}

.product-section.animate .feature:nth-child(3) {
  animation: fadeInUp 0.5s ease-out 0.4s both;
}

.banner.animate-fade-in h1,
.banner.animate-fade-in p {
  animation: fadeInDown 0.6s ease-out both;
}

.banner.animate-fade-in p {
  animation-delay: 0.15s;
}

.download-btn {
  animation: pulse 2s ease-in-out infinite;
}

.download-btn:hover {
  animation: none;
}

.feature {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature:hover {
  transform: translateY(-8px);
}

.feature:hover img {
  filter: brightness(1.2);
  transition: filter 0.3s ease;
}

.screenshot-grid img {
  position: relative;
  overflow: hidden;
}

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