@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .app-screen {
    transition: all 0.3s ease-in-out;
  }
  
  .app-screen:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .feature-card {
    transition: all 0.3s ease-in-out;
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
  }
  
  .testimonial-card {
    transition: all 0.3s ease-in-out;
  }
  
  .testimonial-card:hover {
    transform: scale(1.02);
  }
  
  .download-button {
    transition: all 0.3s ease-in-out;
  }
  
  .download-button:hover {
    transform: scale(1.05);
  }
  
  .nav-button {
    transition: all 0.3s ease-in-out;
  }
  
  .nav-button:hover {
    transform: scale(1.05);
  }
  
  .pricing-card {
    transition: all 0.3s ease-in-out;
  }
  
  .pricing-card:hover {
    transform: scale(1.03);
  }
}

/* Custom animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-text {
    margin-bottom: 2rem;
  }
  
  .step-indicator {
    flex-direction: column;
    gap: 2rem;
  }
  
  .step-arrow {
    transform: rotate(90deg);
  }
  
  footer .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  footer .footer-section {
    margin-bottom: 2rem;
  }
  
  .pricing-popular {
    order: -1;
  }
}

/* Additional styling for visual appeal */
.bg-christmas-gradient {
  background: linear-gradient(135deg, #DC2626 0%, #0C4A6E 100%);
}

.text-christmas-gradient {
  background: linear-gradient(135deg, #DC2626 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smartphone aspect ratio for screenshots */
.screenshot-placeholder {
  aspect-ratio: 9/19.5; /* Standard smartphone aspect ratio */
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}