/* AIDA Framework - Advanced Interactive Design with WCAG Compliance */

/* WCAG Compliant Color Palette */
:root {
    /* Primary Colors - WCAG AA Compliant */
    --primary-color: #1B263B;           /* Navy - Contrast ratio 13.15:1 */
    --primary-light: #334155;           /* Light Navy - Contrast ratio 8.59:1 */
    --primary-dark: #0F172A;            /* Dark Navy - Contrast ratio 16.78:1 */
    
    /* Secondary Colors - WCAG AA Compliant */
    --secondary-color: #4B5563;         /* Gray - Contrast ratio 7.23:1 */
    --secondary-light: #6B7280;         /* Light Gray - Contrast ratio 5.74:1 */
    --secondary-dark: #374151;          /* Dark Gray - Contrast ratio 9.21:1 */
    
    /* Accent Colors - WCAG AA Compliant */
    --accent-color: #2F855A;            /* Green - Contrast ratio 5.89:1 */
    --accent-light: #48BB78;            /* Light Green - Contrast ratio 4.51:1 */
    --accent-dark: #276749;             /* Dark Green - Contrast ratio 7.12:1 */
    
    /* Status Colors - WCAG AA Compliant */
    --success-color: #059669;           /* Success Green - Contrast ratio 5.77:1 */
    --warning-color: #D97706;           /* Warning Orange - Contrast ratio 4.52:1 */
    --danger-color: #DC2626;            /* Danger Red - Contrast ratio 5.25:1 */
    --info-color: #0284C7;              /* Info Blue - Contrast ratio 5.93:1 */
    
    /* Background Colors - WCAG AA Compliant */
    --bg-primary: #FFFFFF;              /* White background */
    --bg-secondary: #F8FAFC;            /* Light gray background */
    --bg-tertiary: #E2E8F0;             /* Medium gray background */
    
    /* Text Colors - WCAG AA Compliant */
    --text-primary: #1F2937;            /* Dark text - Contrast ratio 12.63:1 */
    --text-secondary: #4B5563;          /* Medium text - Contrast ratio 7.23:1 */
    --text-muted: #6B7280;              /* Light text - Contrast ratio 5.74:1 */
    --text-inverse: #FFFFFF;            /* White text */
    
    /* Animation Variables */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Luxury Automotive Container - BMW/Mercedes Experience */
.aida-container {
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: 
        radial-gradient(ellipse at top, rgba(79, 172, 254, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}

/* Ensure no extra white space after last section */
.aida-container::after {
    content: none;
    display: none;
}

/* Remove any potential white space */
.aida-container > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ensure main content area doesn't create white space */
main {
    margin: 0;
    padding: 0;
}

.container-fluid {
    margin: 0;
    padding: 0;
}

/* Override any Bootstrap or layout spacing */
.aida-container,
.aida-container * {
    box-sizing: border-box;
}

/* Specifically target the last section to eliminate white space */
#action.premium-action-section {
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
}

/* Remove any potential spacing from the page wrapper */
.page-wrapper,
.content-wrapper {
    margin: 0;
    padding: 0;
}

/* Ensure no extra spacing after the container */
.aida-container + * {
    margin-top: 0 !important;
}

/* Override layout padding for AIDA pages */
main.pb-3 {
    padding-bottom: 0 !important;
}

/* Remove container padding that creates white space */
main .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Ensure the main element doesn't create space */
main[role="main"] {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Hide footer on AIDA pages or make it seamless */
.footer {
    background: #0a0a0a !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 0 !important;
    padding: 1rem 0 !important;
}

.footer .container {
    margin: 0 auto;
    padding: 0 1rem;
}

.footer a {
    color: rgba(79, 172, 254, 0.8) !important;
    text-decoration: none;
}

.footer a:hover {
    color: rgba(79, 172, 254, 1) !important;
}

/* Luxury Automotive Scrollbar - BMW/Mercedes Style */
.aida-container::-webkit-scrollbar {
    width: 8px;
}

.aida-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.aida-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(79, 172, 254, 0.8) 0%,
        rgba(59, 130, 246, 0.6) 50%,
        rgba(99, 102, 241, 0.4) 100%
    );
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 0 8px rgba(79, 172, 254, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.aida-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(79, 172, 254, 1) 0%,
        rgba(59, 130, 246, 0.8) 50%,
        rgba(99, 102, 241, 0.6) 100%
    );
    box-shadow: 
        0 0 12px rgba(79, 172, 254, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.aida-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
        rgba(79, 172, 254, 1) 0%,
        rgba(59, 130, 246, 1) 50%,
        rgba(99, 102, 241, 0.8) 100%
    );
}

/* Hero Section Horizontal Scrollbar (if needed) */
.hero-section::-webkit-scrollbar {
    height: 6px;
}

.hero-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.hero-section::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, 
        rgba(79, 172, 254, 0.6) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(79, 172, 254, 0.6) 100%
    );
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, 
        rgba(79, 172, 254, 0.8) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(79, 172, 254, 0.8) 100%
    );
}

/* Luxury Ambient Lighting System */
.aida-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(79, 172, 254, 0.4) 25%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(79, 172, 254, 0.4) 75%,
        transparent 100%
    );
    animation: luxuryTopLight 8s ease-in-out infinite;
    z-index: 1001;
}

.aida-container::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(79, 172, 254, 0.3) 50%,
        transparent 100%
    );
    animation: luxuryBottomLight 10s ease-in-out infinite reverse;
    z-index: 1001;
}

/* Section Base Styles */
.aida-section {
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
    padding: 2rem 0;
    box-sizing: border-box;
}

/* Final section should not have min-height */
.aida-section:last-child {
    min-height: auto;
    height: auto;
}

/* Ensure sections don't overlap */
.aida-section + .aida-section {
    margin-top: 0;
    clear: both;
}

.aida-section .container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
}

/* Luxury Automotive Navigation - BMW/Mercedes Executive Dashboard Style */
.luxury-nav {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    border-radius: 50px;
    padding: 1.5rem 0.75rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(79, 172, 254, 0.2);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.luxury-nav:hover {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(79, 172, 254, 0.4),
        0 0 20px rgba(79, 172, 254, 0.1);
    transform: translateY(-50%) scale(1.02);
}

/* Luxury Progress Track - BMW iDrive Style */
.nav-progress-track {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    overflow: hidden;
}

.nav-progress-indicator {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, 
        rgba(79, 172, 254, 1) 0%,
        rgba(59, 130, 246, 0.8) 50%,
        rgba(99, 102, 241, 0.6) 100%
    );
    border-radius: 1px;
    transition: height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}

/* Luxury Navigation Indicators - Mercedes MBUX Style */
.nav-indicators {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.nav-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    text-decoration: none;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.indicator-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(79, 172, 254, 1) 0%,
        rgba(59, 130, 246, 0.8) 100%
    );
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 50%;
}

.nav-indicator:hover .indicator-dot,
.nav-indicator.active .indicator-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(79, 172, 254, 0.6);
    box-shadow: 
        0 0 12px rgba(79, 172, 254, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-indicator:hover .indicator-dot::before,
.nav-indicator.active .indicator-dot::before {
    opacity: 1;
}

/* Executive Tooltips - Luxury Car HUD Style */
.nav-tooltip {
    position: absolute;
    right: 25px;
    background: rgba(0, 0, 0, 0.9);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.nav-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.9);
}

.nav-indicator:hover .nav-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll Hint */
.nav-scroll-hint {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-normal);
}

.nav-scroll-hint:hover {
    color: var(--primary-color);
    transform: translateX(-50%) translateY(-5px);
}

.nav-scroll-hint i {
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Section Backgrounds */
.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ATTENTION Section - Hero */
.interactive-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-color) 100%);
    color: var(--text-inverse);
}

.morphing-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* INTEREST Section */
.interest-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
    position: relative;
    z-index: 1;
    padding-bottom: 4rem;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.code-rain {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
    pointer-events: none;
}

/* Business Impact Showcase */
.impact-showcase {
    margin: 2rem 0;
    background: linear-gradient(135deg, #1a1a1a, #2c3e50);
    border-radius: 1rem;
    padding: 3rem 2rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.impact-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.impact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.impact-icon i {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.impact-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.impact-card p {
    font-size: 1rem;
    line-height: 1.6;
}

.demo-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
}

.demo-side {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.demo-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-block {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.legacy-side {
    border-left: 4px solid var(--danger-color);
}

.legacy-code .code-line {
    color: var(--text-secondary);
    opacity: 0.8;
}

.modern-side {
    border-left: 4px solid var(--success-color);
}

.modern-code .code-line {
    color: var(--text-primary);
    font-weight: 500;
}

.transformation-arrow {
    font-size: 2rem;
    color: var(--accent-color);
    animation: pulse 2s infinite;
}

/* Benefits Showcase */
.benefits-showcase {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    transition: var(--transition-normal);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.benefit-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.benefit-content h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.benefit-content p {
    color: var(--text-secondary);
    margin: 0;
}

/* Strategic Impact Grid */
.impact-grid {
    margin: 2rem 0 0 0;
    background: linear-gradient(135deg, #1a1a1a, #2c3e50);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.impact-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/sdoshift_hero_logo.png') no-repeat center center;
    background-size: 600px;
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
}

.impact-grid .container {
    position: relative;
    z-index: 2;
}

.impact-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.impact-card:hover::before {
    left: 100%;
}

.impact-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.impact-icon i {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.impact-number {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.impact-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.impact-hover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 1.5rem;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    backdrop-filter: blur(10px);
}

.impact-hover p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 500;
}

.impact-card:hover .impact-hover {
    display: block;
    animation: impactSlideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* RESULTS Section - Strategic Transformation Impact */
.transformation-impact-section {
    background: linear-gradient(135deg, #1a1a1a, #2c3e50);
    color: var(--text-inverse);
    position: relative;
    overflow: hidden;
    z-index: 3;
    padding-bottom: 4rem;
    margin-bottom: 0;
}

.transformation-impact-section .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.transformation-impact-section .container {
    position: relative;
    z-index: 2;
}

/* Strategic Impact Showcase */
.strategic-impact-showcase {
    margin: 2rem 0;
}

.strategic-impact-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 2.5rem 1.5rem;
    border-radius: 1.2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    cursor: pointer;
}

.strategic-impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.strategic-impact-card:hover::before {
    left: 100%;
}

.strategic-impact-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.strategic-impact-card .impact-icon i {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.strategic-impact-card .impact-number {
    font-size: 3.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.strategic-impact-card h5 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: 0.95;
}

.strategic-impact-card p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.strategic-impact-card .impact-hover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 1.5rem;
    border-radius: 0 0 1.2rem 1.2rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    backdrop-filter: blur(10px);
}

.strategic-impact-card .impact-hover p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 500;
    color: #333;
}

.strategic-impact-card:hover .impact-hover {
    display: block;
    animation: strategicSlideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.neural-network {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Process Timeline */
.process-timeline {
    margin: 4rem 0;
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    transform: translateY(-50%);
}

.timeline-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.timeline-step:nth-child(2) { left: 0%; }
.timeline-step:nth-child(3) { left: 33.33%; }
.timeline-step:nth-child(4) { left: 66.66%; }
.timeline-step:nth-child(5) { left: 100%; }

.step-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 4px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: var(--transition-bounce);
    position: relative;
    z-index: 2;
}

.timeline-step.active .step-circle,
.timeline-step:hover .step-circle {
    background: var(--primary-color);
    color: var(--text-inverse);
    border-color: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 10px 30px rgba(27, 38, 59, 0.3);
}

.step-content {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 200px;
}

.step-content h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.step-content p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Comparison Showcase */
.comparison-showcase {
    margin: 4rem 0;
}

.comparison-card {
    background: var(--bg-primary);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--bg-tertiary);
    transition: var(--transition-normal);
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.legacy-card {
    border-color: var(--danger-color);
}

.legacy-card .card-header {
    background: linear-gradient(135deg, var(--danger-color), #EF4444);
    color: var(--text-inverse);
    padding: 1.5rem;
}

.modern-card {
    border-color: var(--success-color);
}

.modern-card .card-header {
    background: linear-gradient(135deg, var(--success-color), #10B981);
    color: var(--text-inverse);
    padding: 1.5rem;
}

.card-body {
    padding: 2rem;
}

.limitation-item,
.advantage-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    transition: var(--transition-normal);
}

.limitation-item:hover,
.advantage-item:hover {
    transform: translateX(5px);
}

.limitation-item i {
    font-size: 1.25rem;
}

.advantage-item i {
    font-size: 1.25rem;
}

/* ROI Calculator */
.roi-calculator {
    margin: 4rem 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.calculator-container h4 {
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.calculator-inputs {
    margin-bottom: 3rem;
}

.form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-range {
    margin-bottom: 0.5rem;
}

.range-value {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.calculator-results {
    border-top: 2px solid var(--bg-tertiary);
    padding-top: 2rem;
}

.result-card {
    background: var(--bg-secondary);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: var(--transition-normal);
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.result-number {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ACTION Section - Premium Exclusive BMW/Mercedes Level */
.premium-action-section {
    background: 
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #2c3e50 50%, #1e293b 75%, #0f172a 100%),
        radial-gradient(ellipse at top left, rgba(79, 172, 254, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    color: var(--text-inverse);
    position: relative;
    overflow: hidden;
    animation: luxuryBackgroundShift 20s ease-in-out infinite;
    z-index: 2;
    padding-top: 6rem;
    padding-bottom: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    min-height: auto !important;
    height: auto !important;
    max-height: none;
}

.premium-action-section .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(79, 172, 254, 0.08) 0%, transparent 50%),
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg,
            rgba(255, 255, 255, 0.02) 90deg,
            transparent 180deg,
            rgba(79, 172, 254, 0.03) 270deg,
            transparent 360deg
        );
    z-index: 1;
    pointer-events: none;
    animation: luxuryOverlayRotate 30s linear infinite;
}

/* Ensure section background is visible */
.premium-action-section .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Devious Engine/Combustion Animations - High Performance Luxury */
.premium-action-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 400px 200px at 20% 30%, rgba(255, 69, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 300px 150px at 80% 70%, rgba(255, 140, 0, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 200px 100px at 50% 20%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 350px 175px at 30% 80%, rgba(255, 69, 0, 0.1) 0%, transparent 50%);
    animation: engineCombustion 4s ease-in-out infinite, enginePulse 2s ease-in-out infinite alternate;
    z-index: 1;
    opacity: 0.6;
}

.premium-action-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        conic-gradient(from 0deg at 25% 25%, 
            transparent 0deg,
            rgba(79, 172, 254, 0.08) 45deg,
            rgba(255, 140, 0, 0.06) 90deg,
            rgba(255, 69, 0, 0.04) 135deg,
            transparent 180deg,
            rgba(79, 172, 254, 0.06) 225deg,
            rgba(255, 215, 0, 0.04) 270deg,
            rgba(255, 140, 0, 0.08) 315deg,
            transparent 360deg
        ),
        conic-gradient(from 180deg at 75% 75%, 
            transparent 0deg,
            rgba(255, 69, 0, 0.06) 60deg,
            rgba(79, 172, 254, 0.08) 120deg,
            rgba(255, 140, 0, 0.04) 180deg,
            transparent 240deg,
            rgba(255, 215, 0, 0.06) 300deg,
            transparent 360deg
        );
    animation: engineRotation 8s linear infinite, combustionFlicker 1.5s ease-in-out infinite alternate;
    z-index: 1;
    opacity: 0.4;
}

/* Engine Light Strips - Integrated with Combustion */
.premium-action-section .engine-light-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 69, 0, 0.8) 20%,
        rgba(255, 140, 0, 1) 40%,
        rgba(255, 215, 0, 0.9) 50%,
        rgba(255, 140, 0, 1) 60%,
        rgba(255, 69, 0, 0.8) 80%,
        transparent 100%
    );
    animation: engineIgnition 3s ease-in-out infinite, combustionSpark 1s ease-in-out infinite alternate;
    z-index: 3;
}

.premium-action-section .engine-light-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(79, 172, 254, 0.6) 30%,
        rgba(255, 140, 0, 0.8) 50%,
        rgba(79, 172, 254, 0.6) 70%,
        transparent 100%
    );
    animation: engineExhaust 4s ease-in-out infinite reverse;
    z-index: 3;
}

.premium-action-section .container {
    position: relative;
    z-index: 10;
}

/* Ensure section header and trust items are visible on dark background */
.premium-action-section header {
    position: relative;
    z-index: 11;
}

.premium-action-section .trust-section {
    position: relative;
    z-index: 11;
}

/* Premium CTA Card - BMW/Mercedes Level Luxury */
.cta-card.premium-cta {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    backdrop-filter: blur(20px) saturate(180%);
    padding: 3rem 2rem;
    border-radius: 2rem;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    z-index: 10;
    max-width: 100%;
    margin: 0 auto;
}

/* Luxury Shimmer Effect */
.premium-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(79, 172, 254, 0.1) 45deg,
        rgba(255, 255, 255, 0.2) 90deg,
        rgba(79, 172, 254, 0.1) 135deg,
        transparent 180deg,
        transparent 360deg
    );
    animation: luxuryRotate 8s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Mercedes-Style Ambient Glow */
.premium-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(79, 172, 254, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 100%
    );
    border-radius: 2rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.premium-cta:hover::before {
    opacity: 1;
}

.premium-cta:hover::after {
    opacity: 1;
}

.premium-cta:hover {
    transform: translateY(-15px) scale(1.03) rotateX(2deg);
    box-shadow: 
        0 40px 120px rgba(0, 0, 0, 0.25),
        0 15px 60px rgba(79, 172, 254, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border-color: rgba(79, 172, 254, 0.3);
}

/* Premium Logo Container - BMW Inspired */
.cta-logo-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-cta-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: 
        drop-shadow(0 8px 32px rgba(0, 0, 0, 0.15))
        brightness(1.1)
        contrast(1.1)
        saturate(1.2);
    animation: premiumLogoFloat 6s ease-in-out infinite;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 3;
    position: relative;
}

/* BMW-Style Glow Ring */
.logo-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, 
        rgba(79, 172, 254, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(79, 172, 254, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        rgba(79, 172, 254, 0.3) 100%
    );
    background-clip: padding-box;
    animation: luxuryGlowRing 4s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Mercedes-Style Pulse Ring */
.logo-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(79, 172, 254, 0.2);
    border-radius: 50%;
    animation: luxuryPulse 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.premium-cta:hover .logo-glow-ring,
.premium-cta:hover .logo-pulse-ring {
    opacity: 1;
}

.premium-cta:hover .premium-cta-logo {
    transform: scale(1.1) rotateY(5deg);
    filter: 
        drop-shadow(0 12px 48px rgba(79, 172, 254, 0.3))
        brightness(1.2)
        contrast(1.15)
        saturate(1.3);
}

.premium-cta h4 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.premium-cta p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
}

.cta-benefits {
    text-align: left;
}

.benefit-check {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.benefit-check i {
    margin-right: 1rem;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.benefit-check span {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

/* Trust Section for Premium Action */
.premium-action-section .trust-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-action-section .trust-item {
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease;
}

.premium-action-section .trust-item:hover {
    transform: translateY(-5px);
}

.premium-action-section .trust-item i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.premium-action-section .trust-item h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.premium-action-section .trust-item p {
    font-size: 0.9rem;
    margin: 0;
}

.energy-field {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.success-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* CTA Options */
.cta-options {
    margin: 4rem 0;
}

.cta-card {
    background: var(--bg-primary);
    border-radius: 1.5rem;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition-bounce);
    border: 2px solid var(--bg-tertiary);
}

.cta-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.primary-cta {
    border-color: var(--primary-color);
}

.primary-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.secondary-cta {
    border-color: var(--accent-color);
}

.secondary-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--success-color));
}

.cta-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-inverse);
    margin: 0 auto 2rem;
    box-shadow: 0 10px 30px rgba(27, 38, 59, 0.3);
}

.cta-benefits {
    text-align: left;
}

.benefit-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.benefit-check i {
    font-size: 1.25rem;
}

.benefit-check span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Trust Section */
.trust-section {
    margin: 4rem 0;
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.trust-item {
    text-align: center;
    padding: 1.5rem;
    transition: var(--transition-normal);
}

.trust-item:hover {
    transform: translateY(-5px);
}

.trust-item i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.trust-item h6 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.trust-item p {
    font-size: 0.875rem;
    margin: 0;
}

/* Section Badges */
.section-badge {
    margin-bottom: 2rem;
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animations */
.animate-on-scroll[data-delay="0.1s"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="0.2s"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="0.3s"] { transition-delay: 0.3s; }

/* Luxury Automotive Lighting Animations */
@keyframes luxuryTopLight {
    0%, 100% { 
        opacity: 0.3;
        background-position: -100% 0%;
    }
    50% { 
        opacity: 1;
        background-position: 100% 0%;
    }
}

@keyframes luxuryBottomLight {
    0%, 100% { 
        opacity: 0.2;
        background-position: -100% 0%;
    }
    50% { 
        opacity: 0.6;
        background-position: 100% 0%;
    }
}

/* Mobile Responsive - Luxury Car Mobile Experience */
@media (max-width: 768px) {
    .luxury-nav {
        right: 1rem;
        padding: 1rem 0.5rem;
        border-radius: 30px;
    }
    
    .nav-indicators {
        gap: 1.5rem;
    }
    
    .nav-indicator {
        width: 10px;
        height: 10px;
    }
    
    .indicator-dot {
        width: 6px;
        height: 6px;
    }
    
    .nav-indicator:hover .indicator-dot,
    .nav-indicator.active .indicator-dot {
        width: 10px;
        height: 10px;
    }
    
    .nav-tooltip {
        display: none;
    }
    
    .nav-progress-track {
        width: 1px;
    }
    
    .demo-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .transformation-arrow {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }
    
    .timeline-container {
        padding: 0 1rem;
    }
    
    .timeline-step {
        position: relative;
        margin-bottom: 3rem;
        left: 0 !important;
        transform: none;
    }
    
    .timeline-line {
        display: none;
    }
    
    .step-content {
        position: relative;
        top: 1rem;
        left: 0;
        transform: none;
        width: 100%;
    }
    
    .cta-card {
        padding: 2rem;
    }
    
    .roi-calculator {
        padding: 2rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .aida-container {
        scroll-behavior: auto;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000000;
        --text-primary: #000000;
        --text-secondary: #000000;
        --bg-primary: #FFFFFF;
        --bg-secondary: #FFFFFF;
        --bg-tertiary: #000000;
    }
    
    .nav-dot,
    .metric-card,
    .cta-card,
    .comparison-card {
        border: 3px solid #000000;
    }
}

/* Animation Keyframes */
@keyframes explode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(100px, -100px) scale(1);
        opacity: 0;
    }
}

@keyframes explode2 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(-80px, 120px) scale(1);
        opacity: 0;
    }
}

@keyframes explode3 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(150px, 50px) scale(1);
        opacity: 0;
    }
}

@keyframes explode4 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(-120px, -80px) scale(1);
        opacity: 0;
    }
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 38, 59, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(27, 38, 59, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(27, 38, 59, 0);
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

/* Interactive Card States */
.interactive-stat-card.animate-in {
    animation: slideInUp 0.6s ease-out forwards;
}

.explosion-particle {
    animation: explode 2s ease-out forwards;
}

/* BMW/Mercedes Luxury Car Inspired Animations */
@keyframes luxuryRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes luxuryBackgroundShift {
    0%, 100% { 
        background-position: 0% 50%, 0% 0%, 100% 100%; 
        filter: hue-rotate(0deg);
    }
    25% { 
        background-position: 25% 25%, 25% 25%, 75% 75%; 
        filter: hue-rotate(5deg);
    }
    50% { 
        background-position: 50% 0%, 50% 50%, 50% 50%; 
        filter: hue-rotate(10deg);
    }
    75% { 
        background-position: 75% 75%, 75% 25%, 25% 75%; 
        filter: hue-rotate(5deg);
    }
}

@keyframes luxuryOverlayRotate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.02); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.02); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes luxuryLightStrip {
    0%, 100% { 
        opacity: 0.3;
        background-size: 200% 100%;
        background-position: -100% 0%;
    }
    50% { 
        opacity: 1;
        background-size: 200% 100%;
        background-position: 100% 0%;
    }
}

@keyframes premiumLogoFloat {
    0%, 100% {
        transform: translateY(0px) rotateZ(0deg) scale(1);
        filter: 
            drop-shadow(0 8px 32px rgba(0, 0, 0, 0.15))
            brightness(1.1)
            contrast(1.1)
            saturate(1.2);
    }
    25% {
        transform: translateY(-8px) rotateZ(1deg) scale(1.02);
        filter: 
            drop-shadow(0 12px 40px rgba(79, 172, 254, 0.2))
            brightness(1.15)
            contrast(1.12)
            saturate(1.25);
    }
    50% {
        transform: translateY(-4px) rotateZ(0deg) scale(1.01);
        filter: 
            drop-shadow(0 10px 36px rgba(0, 0, 0, 0.18))
            brightness(1.12)
            contrast(1.11)
            saturate(1.22);
    }
    75% {
        transform: translateY(-12px) rotateZ(-1deg) scale(1.03);
        filter: 
            drop-shadow(0 15px 45px rgba(79, 172, 254, 0.25))
            brightness(1.18)
            contrast(1.13)
            saturate(1.28);
    }
}

@keyframes luxuryGlowRing {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.3;
        filter: blur(0px);
    }
    25% {
        transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
        opacity: 0.6;
        filter: blur(0.5px);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(180deg);
        opacity: 0.8;
        filter: blur(1px);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
        opacity: 0.6;
        filter: blur(0.5px);
    }
}

@keyframes luxuryPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
        border-width: 1px;
    }
    25% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.4;
        border-width: 2px;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
        border-width: 3px;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.4;
        border-width: 2px;
    }
}

/* Mercedes-Style Breathing Effect for Trust Items */
@keyframes luxuryBreathe {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: brightness(1) saturate(1);
    }
    50% {
        transform: translateY(-3px) scale(1.02);
        filter: brightness(1.1) saturate(1.1);
    }
}

/* BMW iDrive Inspired Smooth Transitions */
.premium-action-section .trust-item {
    animation: luxuryBreathe 4s ease-in-out infinite;
    animation-delay: calc(var(--item-index, 0) * 0.5s);
}

.premium-action-section .trust-item:nth-child(1) { --item-index: 0; }
.premium-action-section .trust-item:nth-child(2) { --item-index: 1; }
.premium-action-section .trust-item:nth-child(3) { --item-index: 2; }
.premium-action-section .trust-item:nth-child(4) { --item-index: 3; }

/* High-Performance Car Dashboard Glow */
@keyframes dashboardGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(79, 172, 254, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(79, 172, 254, 0.2),
            0 0 60px rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

.premium-cta:hover {
    animation: dashboardGlow 2s ease-in-out infinite;
}

/* Devious Engine/Combustion Animations - High Performance Luxury */
@keyframes engineCombustion {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) saturate(1) hue-rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: scale(1.02) rotate(1deg);
        filter: brightness(1.2) saturate(1.3) hue-rotate(10deg);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05) rotate(0deg);
        filter: brightness(1.4) saturate(1.5) hue-rotate(20deg);
        opacity: 0.9;
    }
    75% {
        transform: scale(1.03) rotate(-1deg);
        filter: brightness(1.1) saturate(1.2) hue-rotate(5deg);
        opacity: 0.7;
    }
}

@keyframes enginePulse {
    0% {
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        background-position: 20% 30%, 80% 70%, 50% 20%, 30% 80%;
    }
    100% {
        background-size: 120% 120%, 110% 110%, 130% 130%, 115% 115%;
        background-position: 25% 35%, 75% 65%, 45% 25%, 35% 75%;
    }
}

@keyframes engineRotation {
    0% {
        transform: rotate(0deg) scale(1);
        filter: brightness(1) contrast(1);
    }
    25% {
        transform: rotate(90deg) scale(1.02);
        filter: brightness(1.1) contrast(1.1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
        filter: brightness(1.2) contrast(1.2);
    }
    75% {
        transform: rotate(270deg) scale(1.02);
        filter: brightness(1.1) contrast(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
        filter: brightness(1) contrast(1);
    }
}

@keyframes combustionFlicker {
    0% {
        opacity: 0.4;
        filter: blur(0px) brightness(1);
    }
    100% {
        opacity: 0.7;
        filter: blur(0.5px) brightness(1.3);
    }
}

@keyframes engineIgnition {
    0%, 100% {
        opacity: 0.8;
        background-size: 200% 100%;
        background-position: -100% 0%;
        filter: brightness(1) saturate(1);
    }
    33% {
        opacity: 1;
        background-size: 200% 100%;
        background-position: 0% 0%;
        filter: brightness(1.4) saturate(1.5);
    }
    66% {
        opacity: 0.9;
        background-size: 200% 100%;
        background-position: 100% 0%;
        filter: brightness(1.2) saturate(1.3);
    }
}

@keyframes combustionSpark {
    0% {
        box-shadow: 
            0 0 10px rgba(255, 69, 0, 0.5),
            0 0 20px rgba(255, 140, 0, 0.3);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(255, 69, 0, 0.8),
            0 0 40px rgba(255, 140, 0, 0.6),
            0 0 60px rgba(255, 215, 0, 0.4);
    }
}

@keyframes engineExhaust {
    0%, 100% {
        opacity: 0.6;
        background-size: 200% 100%;
        background-position: -100% 0%;
        filter: brightness(0.8) saturate(0.8);
    }
    50% {
        opacity: 1;
        background-size: 200% 100%;
        background-position: 100% 0%;
        filter: brightness(1.2) saturate(1.2);
    }
}

/* Print Styles */
@media print {
    .aida-navigation,
    .section-background,
    .floating-elements,
    .code-rain,
    .neural-network,
    .data-streams,
    .energy-field,
    .success-particles {
        display: none;
    }
    
    .aida-section {
        min-height: auto;
        page-break-inside: avoid;
    }
}