/* Frevo Modern Design System - Tailwind CSS 3 */

/* =================== Base Styles =================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* =================== Modern Gradients =================== */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 300% 300%;
  animation: gradient 8s ease infinite;
}

.gradient-hero {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 25%, #8b5cf6 50%, #ec4899 75%, #f59e0b 100%);
  background-size: 300% 300%;
  animation: gradient 8s ease infinite;
}

.gradient-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* =================== Modern Components =================== */

/* Glass Morphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card-dark {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Feature Cards - Removed unused styles */

/* Pricing Cards - Removed unused styles */

/* Modern Buttons */
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Modern Navigation */
.nav-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Modern Stats Cards - Now using Tailwind classes directly */

/* Modern Proposal Cards - Now using Tailwind classes */
.proposal-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* =================== Simple Transitions =================== */

/* Page Transitions */
.page-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced button hover effects */
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Static gradient hero */
.gradient-hero {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 25%, #8b5cf6 50%, #ec4899 75%, #f59e0b 100%);
}

/* Static background elements */
.animate-float {
  /* No animation - static elements */
}

/* =================== Utility Classes =================== */

/* Text Truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modern Shadows */
.shadow-soft {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.shadow-medium {
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}

.shadow-strong {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* =================== Responsive Design =================== */

/* Mobile Optimizations */
@media (max-width: 768px) {
  .feature-card:hover,
  .pricing-card:hover {
    transform: none; /* Disable hover effects on mobile for better performance */
  }
  
  .feature-card,
  .pricing-card {
    transition: box-shadow 0.3s ease;
  }
}

/* =================== Accessibility =================== */

/* Focus States */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================== Print Styles =================== */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .gradient-bg,
  .gradient-hero {
    background: #f3f4f6 !important;
    color: #000 !important;
  }
}

/* =================== Dark Mode Support =================== */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .feature-card,
  .pricing-card {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border-color: rgba(75, 85, 99, 0.8);
    color: #f9fafb;
  }
  
  /* Stat-cards now use Tailwind classes directly, so no custom dark mode handling needed */
}