/* =================================================================
   DESIGN SYSTEM UTILITIES - Clean & Consolidated
   Version: 3.0 (Duplicate-Free Modernization)
   Description: Comprehensive utility system with zero duplicates
   ================================================================= */

/* ===== LAYOUT UTILITIES ===== */

/* Container System */
.container-xs { max-width: 480px; margin: 0 auto; padding: 0 var(--space-4); }
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); }
.container-md { max-width: 768px; margin: 0 auto; padding: 0 var(--space-4); }
.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-4); }
.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
.container-2xl { max-width: 1536px; margin: 0 auto; padding: 0 var(--space-4); }

/* Grid System */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Auto-fit responsive grids */
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }

/* ===== ENHANCED SPACING UTILITIES ===== */

/* Margin utilities (consolidated, no duplicates) */
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-auto { margin-left: auto !important; }

.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-auto { margin-right: auto !important; }

/* Padding utilities (consolidated) */
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }

.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }

.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-8 { padding-left: var(--space-8) !important; }

.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-8 { padding-right: var(--space-8) !important; }

/* ===== MODERN COMPONENT UTILITIES ===== */

/* Card variations */
.card-hover { transition: var(--transition-all); }
.card-hover:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-xl); 
}

.card-compact .card-body { padding: var(--space-4); }
.card-spacious .card-body { padding: var(--space-8); }

.card-primary { border-color: var(--color-primary-200); background: var(--color-primary-25, #FEFFFE); }
.card-success { border-color: var(--color-success-200, #BBF7D0); background: var(--color-success-25, #F0FDF4); }
.card-warning { border-color: var(--color-warning-200, #FED7AA); background: var(--color-warning-25, #FFFBEB); }
.card-danger { border-color: var(--color-danger-200, #FECACA); background: var(--color-danger-25, #FEF2F2); }

/* Enhanced border utilities */
.border { border: 1px solid var(--color-gray-200) !important; }
.border-2 { border: 2px solid var(--color-gray-200) !important; }
.border-primary { border-color: var(--color-primary-300) !important; }
.border-success { border-color: var(--color-success-300, #86EFAC) !important; }
.border-warning { border-color: var(--color-warning-300, #FCD34D) !important; }
.border-danger { border-color: var(--color-danger-300, #FCA5A5) !important; }

.border-t { border-top: 1px solid var(--color-gray-200) !important; }
.border-b { border-bottom: 1px solid var(--color-gray-200) !important; }
.border-l { border-left: 1px solid var(--color-gray-200) !important; }
.border-r { border-right: 1px solid var(--color-gray-200) !important; }

/* ===== ADVANCED TYPOGRAPHY UTILITIES ===== */

/* Line height utilities */
.leading-none { line-height: var(--line-height-none) !important; }
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* Letter spacing utilities */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0em !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Text transform utilities */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Text decoration utilities */
.underline { text-decoration: underline !important; }
.no-underline { text-decoration: none !important; }
.line-through { text-decoration: line-through !important; }

/* ===== BACKGROUND AND GRADIENT UTILITIES ===== */

/* Modern gradient backgrounds */
.bg-gradient-primary { 
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%) !important;
  color: white;
}

.bg-gradient-success { 
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%) !important;
  color: white;
}

.bg-gradient-warning { 
  background: linear-gradient(135deg, var(--color-warning-500) 0%, var(--color-warning-600) 100%) !important;
  color: white;
}

.bg-gradient-danger { 
  background: linear-gradient(135deg, var(--color-danger-500) 0%, var(--color-danger-600) 100%) !important;
  color: white;
}

/* Subtle gradient overlays */
.bg-gradient-light { 
  background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%) !important;
}

.bg-gradient-soft { 
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%) !important;
}

/* ===== POSITIONING AND Z-INDEX UTILITIES ===== */

/* Position utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.static { position: static !important; }

/* Top, right, bottom, left utilities */
.top-0 { top: 0 !important; }
.top-4 { top: var(--space-4) !important; }
.right-0 { right: 0 !important; }
.right-4 { right: var(--space-4) !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-4 { bottom: var(--space-4) !important; }
.left-0 { left: 0 !important; }
.left-4 { left: var(--space-4) !important; }

/* Z-index utilities */
.z-0 { z-index: var(--z-0) !important; }
.z-10 { z-index: var(--z-10) !important; }
.z-20 { z-index: var(--z-20) !important; }
.z-30 { z-index: var(--z-30) !important; }
.z-40 { z-index: var(--z-40) !important; }
.z-50 { z-index: var(--z-50) !important; }
.z-auto { z-index: var(--z-auto) !important; }

/* ===== OPACITY AND TRANSFORMS ===== */

/* Opacity utilities */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Transform utilities */
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }

.rotate-0 { transform: rotate(0deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.rotate-270 { transform: rotate(270deg) !important; }

/* ===== MODERN INTERACTION UTILITIES ===== */

/* Cursor utilities */
.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* User select utilities */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }
.select-auto { user-select: auto !important; }

/* Pointer events utilities */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ===== OVERFLOW UTILITIES ===== */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ===== WIDTH AND HEIGHT UTILITIES ===== */

/* Width utilities */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-fit { width: fit-content !important; }

.w-1 { width: var(--space-1) !important; }
.w-2 { width: var(--space-2) !important; }
.w-4 { width: var(--space-4) !important; }
.w-6 { width: var(--space-6) !important; }
.w-8 { width: var(--space-8) !important; }
.w-12 { width: var(--space-12) !important; }
.w-16 { width: var(--space-16) !important; }
.w-20 { width: var(--space-20) !important; }
.w-24 { width: var(--space-24) !important; }

/* Height utilities */
.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-fit { height: fit-content !important; }

.h-1 { height: var(--space-1) !important; }
.h-2 { height: var(--space-2) !important; }
.h-4 { height: var(--space-4) !important; }
.h-6 { height: var(--space-6) !important; }
.h-8 { height: var(--space-8) !important; }
.h-12 { height: var(--space-12) !important; }
.h-16 { height: var(--space-16) !important; }
.h-20 { height: var(--space-20) !important; }
.h-24 { height: var(--space-24) !important; }

/* ===== MODERN ANIMATION UTILITIES ===== */

/* Transition utilities */
.transition-none { transition: none !important; }
.transition-all { transition: var(--transition-all) !important; }
.transition-colors { transition: var(--transition-colors) !important; }
.transition-opacity { transition: var(--transition-opacity) !important; }
.transition-shadow { transition: var(--transition-shadow) !important; }
.transition-transform { transition: var(--transition-transform) !important; }

/* Duration utilities */
.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }

/* Easing utilities */
.ease-linear { transition-timing-function: var(--ease-linear) !important; }
.ease-in { transition-timing-function: var(--ease-in) !important; }
.ease-out { transition-timing-function: var(--ease-out) !important; }
.ease-in-out { transition-timing-function: var(--ease-in-out) !important; }

/* ===== MODERN HOVER AND FOCUS STATES ===== */

/* Hover utilities (use with caution for accessibility) */
.hover\:scale-105:hover { transform: scale(1.05) !important; }
.hover\:scale-110:hover { transform: scale(1.1) !important; }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl) !important; }
.hover\:bg-gray-50:hover { background-color: var(--color-gray-50) !important; }
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50) !important; }
.hover\:text-primary-600:hover { color: var(--color-primary-600) !important; }
.hover\:text-primary-700:hover { color: var(--color-primary-700) !important; }

/* Focus utilities */
.focus\:outline-none:focus { outline: none !important; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--color-primary-500) !important; }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2) !important; }

/* ===== RESPONSIVE UTILITIES ===== */

/* Small screens and up */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:text-lg { font-size: var(--text-lg) !important; }
  .sm\:text-xl { font-size: var(--text-xl) !important; }
  .sm\:px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .sm\:py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
}

/* Medium screens and up */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:text-xl { font-size: var(--text-xl) !important; }
  .md\:text-2xl { font-size: var(--text-2xl) !important; }
  .md\:px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .md\:py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
}

/* Large screens and up */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:text-2xl { font-size: var(--text-2xl) !important; }
  .lg\:text-3xl { font-size: var(--text-3xl) !important; }
  .lg\:px-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
  .lg\:py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
}

/* Extra large screens and up */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .xl\:text-3xl { font-size: var(--text-3xl) !important; }
  .xl\:text-4xl { font-size: var(--text-4xl) !important; }
}

/* ===== PRINT UTILITIES ===== */

@media print {
  .print\:hidden { display: none !important; }
  .print\:block { disp/* =====================================================
   MOBILE RESPONSIVE & POLISH ENHANCEMENTS
   File: app/static/css/design-system.css (append)
   ===================================================== */

/* ===== ENHANCED MOBILE RESPONSIVENESS ===== */
@media (max-width: 992px) {
    .hero-headline-ultra {
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1.2;
    }
    
    .comparison-card {
        margin-bottom: 2rem;
    }
    
    .feature-icon-modern {
        width: 56px;
        height: 56px;
    }
    
    .feature-icon-modern i {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .ultra-modern-hero {
        padding-top: calc(var(--header-height, 80px) + 1.5rem);
        padding-bottom: 2rem;
        text-align: center;
    }
    
    .hero-input-group-ultra {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
        max-width: 100% !important;
    }
    
    .hero-input-icon {
        position: static;
        transform: none;
        order: -1;
        align-self: flex-start;
        margin-bottom: 8px;
    }
    
    .form-control-xl.hero-input-ultra {
        padding-left: 1rem;
        order: 1;
    }
    
    .btn-xl.hero-input-btn-ultra {
        width: 100%;
        justify-content: center;
        order: 2;
    }
    
    .avatar-stack-ultra {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .demo-container {
        border-radius: 16px;
    }
    
    .demo-content {
        aspect-ratio: 4/3;
    }
    
    .comparison-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .stat-number {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }
    
    .section-badge {
        display: inline-flex;
        text-align: center;
    }
    
    .py-16 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (max-width: 576px) {
    .hero-headline-ultra {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }
    
    .card-modern {
        margin-bottom: 1.5rem;
    }
    
    .btn-xl {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .avatar-stack-img-ultra {
        width: 36px;
        height: 36px;
        margin-left: -8px;
    }
    
    .feature-icon-modern {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }
    
    .demo-play-button {
        width: 60px;
        height: 60px;
    }
    
    .demo-play-button i {
        font-size: 1.5rem;
    }
}

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

/* Focus management for keyboard navigation */
.hero-input-btn-ultra:focus,
.btn:focus,
.demo-play-button:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero-input-group-ultra {
        border: 2px solid #000;
    }
    
    .card-modern {
        border: 2px solid #000;
    }
    
    .text-primary-gradient {
        -webkit-text-fill-color: #000;
        color: #000;
    }
}

/* ===== LOADING STATES & MICRO-INTERACTIONS ===== */
.hero-input-btn-ultra {
    position: relative;
    overflow: hidden;
}

.hero-input-btn-ultra::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.hero-input-btn-ultra:active::after {
    width: 300px;
    height: 300px;
}

/* Card entrance animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-modern {
    animation: fadeInUp 0.6s ease-out;
}

.card-modern:nth-child(2) { animation-delay: 0.1s; }
.card-modern:nth-child(3) { animation-delay: 0.2s; }
.card-modern:nth-child(4) { animation-delay: 0.3s; }

/* ===== ENHANCED SOCIAL PROOF ===== */
.customer-logo {
    filter: grayscale(100%) brightness(0) opacity(0.4);
    transition: all 0.3s ease;
}

.customer-logo:hover {
    filter: grayscale(0%) brightness(1) opacity(1);
    transform: scale(1.05);
}

/* ===== TESTIMONIAL ENHANCEMENTS ===== */
.blockquote {
    position: relative;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    border-left: 4px solid #4f46e5;
}

.blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    color: #4f46e5;
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.3;
}

/* ===== ENHANCED BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.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.6s;
}

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

.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

.btn-outline-primary {
    border: 2px solid #4f46e5;
    color: #4f46e5;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-outline-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #4f46e5;
    transition: width 0.3s ease;
    z-index: -1;
}

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

.btn-outline-primary:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.2);
}

/* ===== SCROLL ANIMATIONS ===== */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comparison-card.before-card {
    animation: slideInFromLeft 0.8s ease-out;
}

.comparison-card.after-card {
    animation: slideInFromRight 0.8s ease-out;
}

/* ===== ENHANCED GRADIENTS ===== */
.bg-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #3b82f6 100%);
    position: relative;
}

.bg-gradient-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.hero-section,
.demo-section-modern,
.stats-modern {
    will-change: transform;
    transform: translateZ(0);
}

.card-modern,
.feature-icon-modern {
    will-change: transform;
    backface-visibility: hidden;
}

/* ===== PRINT STYLES ===== */
@media print {
    .ultra-modern-hero::before,
    .ultra-modern-hero::after,
    .stats-modern::before {
        display: none;
    }
    
    .btn,
    .demo-play-button {
        background: #333 !important;
        color: white !important;
        text-decoration: none;
    }
    
    .card-modern {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ===== DARK MODE SUPPORT (FUTURE) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-900: #f8fafc;
        --color-gray-800: #f1f5f9;
        --color-gray-700: #e2e8f0;
        --color-gray-600: #cbd5e1;
        --color-gray-500: #94a3b8;
        --color-gray-400: #64748b;
        --color-gray-300: #475569;
        --color-gray-200: #334155;
        --color-gray-100: #1e293b;
        --color-gray-50: #0f172a;
        --color-gray-25: #020617;
    }
    
    body {
        background-color: var(--color-gray-25);
        color: var(--color-gray-100);
    }
}

/* ===== UTILITY CLASSES ===== */
.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

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

.shadow-glow {
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}

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

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

.hover-lift:hover {
    transform: translateY(-4px);
}
lay: block !important; }
  .print\:text-black { color: black !important; }
  .print\:bg-white { background-color: white !important; }
}