/* Kobilay Landing Page Styles */

/* Custom CSS Variables for Brand Colors */
:root {
  --brand-teal: #0D9488;
  --brand-purple: #7C3AED;
  --brand-navy: #1E293B;
  --brand-ink: #334155;
  --brand-beige: #F8FAFC;
}

/* Base Styles */
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

/* Custom Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Utility Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-pulse-slow {
  animation: pulse 2s ease-in-out infinite;
}

/* Custom Hover Effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Glassmorphism Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--brand-beige);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-teal);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-purple);
}

/* Focus States for Accessibility */
button:focus,
a:focus {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}