/* ========================================
   Ticino Auto SA - Custom CSS
   TailwindCSS Additions & Animations
   Luxury Auto Center Theme
   ======================================== */

/* ========================================
   CSS Variables - Theme Support
   ======================================== */
:root {
    /* Primary Colors - Red Theme */
    --color-primary: #dc2626;
    --color-primary-dark: #b91c1c;
    --color-primary-light: #ef4444;
    --color-primary-rgb: 220, 38, 38;
    
    /* Secondary Colors */
    --color-secondary: #0a0a0a;
    --color-secondary-dark: #000000;
    --color-secondary-light: #1a1a1a;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f0;
    --bg-tertiary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-header: rgba(10, 10, 10, 0.95);
    
    /* Text Colors */
    --text-primary: #0a0a0a;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-color: #e5e7eb;
    --border-color-light: rgba(0, 0, 0, 0.08);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-primary: rgba(220, 38, 38, 0.3);
    
    /* Luxury Colors */
    --luxury-black: #0a0a0a;
    --luxury-gold: #dc2626;
    --luxury-cream: #f5f5f0;
    --luxury-charcoal: #2d2d2d;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --color-primary: #ef4444;
    --color-primary-dark: #dc2626;
    --color-primary-light: #f87171;
    --color-primary-rgb: 239, 68, 68;
    
    /* Background Colors - Dark */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #111111;
    --bg-card: #1a1a1a;
    --bg-header: rgba(10, 10, 10, 0.98);
    
    /* Text Colors - Dark */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-inverse: #0a0a0a;
    
    /* Border Colors - Dark */
    --border-color: #374151;
    --border-color-light: rgba(255, 255, 255, 0.1);
    
    /* Shadow Colors - Dark */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-primary: rgba(239, 68, 68, 0.4);
    
    /* Luxury Colors - Dark */
    --luxury-black: #0a0a0a;
    --luxury-gold: #ef4444;
    --luxury-cream: #1a1a1a;
    --luxury-charcoal: #2d2d2d;
}

/* Ethnocentric Font */
@font-face {
    font-family: 'Ethnocentric';
    src: url('/assets/fonts/Ethnocentric-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-ethnocentric {
    font-family: 'Ethnocentric', 'Montserrat', sans-serif !important;
}

/* Section Title Headings - Use Ethnocentric font for main section titles only */
h2.font-heading {
    font-family: 'Ethnocentric', 'Montserrat', sans-serif !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
}

h2.font-heading span {
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
    display: inline-block;
}

/* Card/Element Titles - Use Orbitron for a technical car-appropriate look */
h3.font-heading {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    letter-spacing: 0.03em;
}

/* Hero Title Color */
.hero-title-text {
    color: rgb(255, 200, 200);
}

/* Screen Reader Only - Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus Visible Styles - Accessibility */
*:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

/* Skip Link Styles */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #c9a227;
    color: #0a0a0a;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* Image Lazy Loading Placeholder */
img[loading="lazy"] {
    background: linear-gradient(135deg, #f5f5f0 0%, #e5e5e5 100%);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .card-hover {
        border: 2px solid #c9a227;
    }
    
    .nav-link::after {
        height: 3px;
    }
    
    .form-input-focus:focus {
        border-width: 3px;
    }
}

/* 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;
        scroll-behavior: auto !important;
    }
    
    .fade-in,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right {
        opacity: 1;
        transform: none;
    }
    
    .partner-slider-track {
        animation: none;
    }
}

/* Scroll Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback for mobile - ensure content is visible even if JS fails */
@media (max-width: 768px) {
    .fade-in,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down,
    .scale-in,
    .scale-in-bounce,
    .flip-in,
    .flip-in-x,
    .rotate-in,
    .reveal-blur,
    .hero-text-animate {
        opacity: 1;
        transform: none;
    }
}

/* DO NOT auto-show elements - let IntersectionObserver handle visibility on scroll */

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Luxury Gradient Background */
.gradient-card-bg {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%);
}

/* Page Hero Gradient */
.page-hero-gradient {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%);
}

/* Primary Gradient - Red Theme */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Text Gradient - Red Theme */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pulse Animation */
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 10px rgba(201, 162, 39, 0);
    }
}

.pulse-glow {
    animation: pulse-glow 2s infinite;
}

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

.bounce-soft {
    animation: bounce-soft 2s infinite;
}

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

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

/* Service Card Top Border Animation - Red Theme */
.service-card-border {
    position: relative;
    overflow: hidden;
}

.service-card-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card-border:hover::before {
    transform: scaleX(1);
}

/* Form Focus Styles - Red Theme */
.form-input-focus {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input-focus:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    outline: none;
}

/* FAQ Accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Header Scroll Effect */
.header-scrolled {
    background: #0a0a0a !important;
    box-shadow: none;
}

/* Light Mode Header Styles */
[data-theme="light"] #header {
    background: #ffffff !important;
    box-shadow: none;
}

[data-theme="light"] #header.header-scrolled {
    background: #ffffff !important;
    box-shadow: none;
}

[data-theme="light"] #language-bar {
    background: transparent !important;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #nav-menu {
    background: #ffffff !important;
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Dark Mode Header Styles (default) */
[data-theme="dark"] #header,
#header {
    background: #0a0a0a !important;
}

/* Keep the top-half of language bar dark in dark mode */
[data-theme="dark"] .language-bar-upper {
    background: #0a0a0a !important;
}

[data-theme="dark"] #language-bar,
#language-bar {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #nav-menu,
#nav-menu {
    background: #0a0a0a !important;
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Fahrzeuge: List View Layout
   ======================================== */

/* List View - Image left, data right */
#vehicles-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#vehicles-grid.list-view > .vehicle-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
}

#vehicles-grid.list-view > .vehicle-card > .vehicle-image-container {
    width: 320px;
    min-width: 280px;
    max-width: 40%;
    aspect-ratio: 4/3;
    flex-shrink: 0;
}

#vehicles-grid.list-view > .vehicle-card > .vehicle-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}

#vehicles-grid.list-view > .vehicle-card > .vehicle-content-container h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

#vehicles-grid.list-view > .vehicle-card > .vehicle-content-container .grid {
    grid-template-columns: repeat(4, 1fr);
}

#vehicles-grid.list-view > .vehicle-card > .vehicle-content-container .flex.items-center.justify-between {
    margin-top: auto;
    padding-top: 1rem;
}

/* List View Responsive */
@media (max-width: 768px) {
    #vehicles-grid.list-view > .vehicle-card {
        flex-direction: column;
    }
    
    #vehicles-grid.list-view > .vehicle-card > .vehicle-image-container {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16/9;
    }
    
    #vehicles-grid.list-view > .vehicle-card > .vehicle-content-container .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Fahrzeuge: Collapsible Search + Filter Bar
   Docked behind Language Bar
   ======================================== */

.abs-vehicle-filter-section {
    --abs-filter-radius: 14px;
    position: relative;
    background: transparent !important;
    z-index: 35 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Wrapper for the docked filter - positioned behind language bar */
.abs-vehicle-filter-dock-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 35;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.abs-vehicle-filter-dock-wrapper.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* The actual filter container */
.abs-vehicle-filter-container {
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    overflow: visible;
    padding-bottom: 28px;
}

/* Expanded state */
.abs-vehicle-filter-section:not(.is-collapsed) .abs-vehicle-filter-container {
    padding: 1rem 1rem 28px 1rem;
}

/* Collapsed state - minimal bar with toggle button */
.abs-vehicle-filter-section.is-collapsed .abs-vehicle-filter-container {
    padding: 0.5rem 1rem 28px 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abs-vehicle-filter-section.is-collapsed .abs-vehicle-filter-header {
    margin-bottom: 0;
    height: auto;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.abs-vehicle-filter-section.is-collapsed .abs-vehicle-filter-title {
    display: none;
}

/* Toggle button - always centered below the container */
.abs-vehicle-filter-toggle {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #0a0a0a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    flex-shrink: 0;
}

.abs-vehicle-filter-toggle:hover {
    background: rgba(201, 162, 39, 0.15);
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) translateY(-2px);
}

.abs-vehicle-filter-toggle:active {
    transform: translateX(-50%) translateY(0);
}

.abs-vehicle-filter-toggle i {
    transition: transform 220ms ease;
    font-size: 1rem;
}

/* Dark theme toggle button */
[data-theme="dark"] .abs-vehicle-filter-toggle {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

[data-theme="dark"] .abs-vehicle-filter-toggle:hover {
    background: rgba(201, 162, 39, 0.25);
    border-color: rgba(201, 162, 39, 0.5);
}

/* Mobile: Ensure collapsed filter bar is always visible */
@media (max-width: 768px) {
    .abs-vehicle-filter-section.is-collapsed .abs-vehicle-filter-header {
        min-height: 48px;
    }

    .abs-vehicle-filter-toggle {
        width: 44px;
        height: 44px;
        bottom: -22px;
    }
    
    .abs-vehicle-filter-container {
        border-radius: 0 0 8px 8px;
        padding-bottom: 24px;
    }

    .abs-vehicle-filter-section:not(.is-collapsed) .abs-vehicle-filter-container {
        padding-bottom: 24px;
    }

    .abs-vehicle-filter-section.is-collapsed .abs-vehicle-filter-container {
        padding-bottom: 24px;
    }
}

/* Mobile/Tablet: Keep docked filter visible when open */
@media (max-width: 1023px) {
    /* When filter is open (not collapsed) on mobile/tablet, keep it docked and visible */
    .abs-vehicle-filter-section:not(.is-collapsed) + .abs-vehicle-filter-dock-wrapper,
    .abs-vehicle-filter-section:not(.is-collapsed) .abs-vehicle-filter-dock-wrapper {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Ensure the dock wrapper stays visible when is-visible class is present */
    .abs-vehicle-filter-dock-wrapper.is-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Prevent body from being collapsed by scroll on mobile/tablet */
    .abs-vehicle-filter-section:not(.is-collapsed) .abs-vehicle-filter-body {
        max-height: 600px !important;
        opacity: 1 !important;
        transform: scaleY(1) !important;
        pointer-events: auto !important;
    }
}

.abs-vehicle-filter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
}

.abs-vehicle-filter-title {
    display: inline-flex;
    align-items: center;
    margin-top: 3px;
    gap: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: rgba(10, 10, 10, 0.72);
}

[data-theme="dark"] .abs-vehicle-filter-title {
    color: rgba(255, 255, 255, 0.8);
}

.abs-vehicle-filter-title i {
    color: #c9a227;
}

.abs-vehicle-filter-body {
    transform-origin: top;
    transition: max-height 300ms ease, opacity 220ms ease, transform 300ms ease, margin 300ms ease;
    max-height: 600px;
    overflow: hidden;
}

.abs-vehicle-filter-body.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.98);
    margin-top: 0 !important;
    pointer-events: none;
}

/* Dark theme filter container */
[data-theme="dark"] .abs-vehicle-filter-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Placeholder for filter section in page flow */
.abs-vehicle-filter-placeholder {
    height: 0;
    transition: height 0.3s ease;
}

/* Ensure filter content has proper background */
.abs-vehicle-filter-body > div {
    background: transparent;
}

/* Filter form styling inside docked container */
.abs-vehicle-filter-body input,
.abs-vehicle-filter-body select,
.abs-vehicle-filter-body button {
    position: relative;
    z-index: 1;
}


/* Gradient Overlay */
.gradient-overlay {
    position: relative;
}

.gradient-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

/* Icon Circle - Red Theme */
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(220, 38, 38, 0.4);
}

/* Icon Circle Luxury - Outline Style Red Theme */
.icon-circle-luxury {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid rgba(220, 38, 38, 0.3);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.icon-circle-luxury:hover {
    transform: scale(1.1);
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.5);
}

.icon-circle-sm {
    width: 50px;
    height: 50px;
}

.icon-circle-lg {
    width: 100px;
    height: 100px;
}

.why-us-image-frame {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 4 / 5;
    border-radius: 1.5rem;
}

@media (min-width: 1024px) {
    .why-us-image-frame {
        width: min(100%, 640px);
        aspect-ratio: 16 / 10;
        border-radius: 0;
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Process Number */
.process-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(201, 162, 39, 0.1);
    line-height: 1;
}

/* Benefit Item Hover */
.benefit-hover {
    transition: background 0.3s ease, transform 0.3s ease;
}

.benefit-hover:hover {
    background: rgba(201, 162, 39, 0.1);
    transform: translateX(10px);
}

/* Testimonial Card */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Partner Logo Hover */
.partner-hover {
    transition: background 0.3s ease;
}

.partner-hover:hover {
    background: #0a0a0a;
}

.partner-hover:hover span {
    color: #c9a227;
}

/* Location Card */
.location-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Form Success Message */
.form-success {
    text-align: center;
    padding: 40px 20px;
}

.form-success i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

/* Scroll to Top Button - Red Theme */
.scroll-to-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #0a0a0a;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 998;
    box-shadow: 0 5px 20px rgba(220, 38, 38, 0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4);
}

/* Error State */
.form-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.ajax-form-message.hidden {
    display: none;
}

.ajax-form-message.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.ajax-form-message.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

/* Spam Guard - High Tech Style */
.spam-guard {
    padding: 0.75rem;
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.03) 0%, rgba(255, 255, 255, 0.98) 100%);
    position: relative;
    overflow: hidden;
}

.spam-guard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.5;
}

.spam-guard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.spam-guard-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.spam-guard-targets {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.spam-targets-label {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
}

.spam-targets {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.spam-target-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    color: var(--color-primary);
    font-size: 0.9rem;
}

.spam-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.spam-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
}

.spam-choice {
    cursor: pointer;
    position: relative;
}

.spam-choice input[type="checkbox"],
.spam-choice input.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.spam-choice-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    background: #ffffff;
    transition: all 0.2s ease;
}

.spam-choice:hover .spam-choice-card {
    border-color: var(--color-primary);
    background: rgba(220, 38, 38, 0.05);
}

.spam-choice-input:checked + .spam-choice-card {
    border-color: var(--color-primary);
    background: rgba(220, 38, 38, 0.1);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.spam-shape-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: #374151;
    transition: all 0.2s ease;
}

.spam-choice-input:checked + .spam-choice-card .spam-shape-icon {
    color: var(--color-primary);
    transform: scale(1.1);
}

.spam-feedback {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #dc2626;
    font-weight: 500;
}

.spam-guard.spam-guard-error {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

/* Dark theme spam guard */
[data-theme="dark"] .spam-guard {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(26, 26, 26, 0.98) 100%);
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="dark"] .spam-target-shape {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .spam-choice-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spam-shape-icon {
    color: #9ca3af;
}

[data-theme="dark"] .spam-choice:hover .spam-choice-card {
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="dark"] .spam-choice-input:checked + .spam-choice-card {
    background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .spam-choice-input:checked + .spam-choice-card .spam-shape-icon {
    color: var(--color-primary);
}

/* Mobile responsive spam guard */
@media (max-width: 768px) {
    .spam-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    
    .spam-choice-card {
        aspect-ratio: 1;
    }

    .spam-shape-icon {
        font-size: 1rem;
    }

    .spam-target-shape {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8rem;
    }
    
    .spam-guard-targets {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

/* Loading Spinner - Red Theme */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(220, 38, 38, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .icon-circle {
        width: 60px;
        height: 60px;
    }
    
    .icon-circle-lg {
        width: 80px;
        height: 80px;
    }
    
    .icon-circle-luxury {
        width: 60px;
        height: 60px;
    }

    .why-us-image-frame {
        width: 100%;
        max-width: 400px;
        border-radius: 0.75rem;
        clip-path: none;
    }
    
    .process-number {
        font-size: 2rem;
    }
    
    /* Round images become square on mobile and use full width */
    .rounded-full.overflow-hidden.shadow-lg {
        border-radius: 0.5rem !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
    }
    
    .rounded-full.overflow-hidden.shadow-lg img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .spam-choice-card {
        min-height: 66px;
        padding: 0.55rem 0.25rem;
    }

    .spam-shape-icon {
        font-size: 1.2rem;
    }

    .spam-target-shape {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.1rem;
    }
}

/* Extra Small Screens - Prevent overflow only */
@media (max-width: 456px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
    }
    
    /* Ensure all elements stay within viewport */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Text overflow prevention */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: normal;
        overflow-wrap: anywhere;
        hyphens: manual;
        -webkit-hyphens: manual;
        -ms-hyphens: manual;
        word-break: keep-all;
        text-wrap: balance;
    }
    
    /* Hero Section - reduce spacing */
    section.min-h-screen {
        min-height: auto !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    section.min-h-screen .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    section.min-h-screen .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    
    section.min-h-screen .mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    section.min-h-screen .mb-10 {
        margin-bottom: 2rem !important;
    }
    
    section.min-h-screen .gap-4 {
        gap: 0.75rem !important;
    }
    
    /* Hero badge - long text */
    .bg-primary\/20 {
        font-size: 0.65rem !important;
        padding: 0.375rem 0.75rem !important;
        letter-spacing: 0.1em !important;
    }
    
    /* Hero title - prevent overflow */
    section.min-h-screen h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    section.min-h-screen h1 span.block.text-primary {
        font-size: 0.875rem !important;
    }
    
    /* Long uppercase headings that may overflow */
    .font-heading.text-3xl,
    .font-heading.text-4xl {
        font-size: 1.5rem !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
        hyphens: manual !important;
        -webkit-hyphens: manual !important;
        -ms-hyphens: manual !important;
        max-width: 100%;
        text-wrap: balance;
    }
    
    /* Partner names - can be long */
    .partner-hover span {
        font-size: 0.6rem !important;
    }
    
    /* Footer addresses - uppercase long text */
    footer li {
        font-size: 0.7rem !important;
        word-break: break-word;
    }
    
    /* Reduce padding on small screens */
    .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Hide scroll indicator on mobile */
    section.min-h-screen .absolute.bottom-8 {
        display: none !important;
    }
}

/* Minimum 320px width support */
@media (max-width: 320px) {
    /* Hero title - further reduce */
    section.min-h-screen h1 {
        font-size: 1.5rem !important;
    }
    
    section.min-h-screen h1 span.block.text-primary {
        font-size: 0.75rem !important;
    }
    
    /* Section headings */
    .font-heading.text-3xl,
    .font-heading.text-4xl {
        font-size: 1.25rem !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
        hyphens: manual !important;
        -webkit-hyphens: manual !important;
        -ms-hyphens: manual !important;
        max-width: 100%;
        text-wrap: balance;
    }
    
    /* Hero badge */
    .bg-primary\/20 {
        font-size: 0.55rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Contact Tabs - Red Theme */
.contact-tab {
    background: #f3f4f6;
    color: #0a0a0a;
    border: 2px solid transparent;
}

.contact-tab:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

.contact-tab.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
}

.contact-tab i {
    transition: transform 0.3s ease;
}

.contact-tab.active i {
    transform: scale(1.1);
    color: #ffffff;
}

/* Tab Content Animation */
.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.tab-content-wrapper {
    position: relative;
    min-height: 400px;
}

/* Urgency Radio Button Styling - Red Theme */
.urgency-option input:checked + div {
    border-color: var(--color-primary);
    background: rgba(220, 38, 38, 0.05);
}

.urgency-option input:checked + div i {
    transform: scale(1.2);
}

/* Info Boxes */
.info-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
    transform: translateX(5px);
}

/* Address Autocomplete Dropdown */
.autocomplete-dropdown {
    max-height: 250px;
    overflow-y: auto;
    z-index: 50;
}

.autocomplete-item {
    transition: background-color 0.15s ease;
}

.autocomplete-item:hover {
    background-color: rgba(201, 162, 39, 0.1);
}

.autocomplete-item.bg-primary\/10 {
    background-color: rgba(201, 162, 39, 0.1);
}

/* Date/Time Inputs - Mobile Friendly */
.datetime-input,
input[type="date"],
input[type="time"],
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Select dropdown styling for mobile */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c9a227'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

select::-ms-expand {
    display: none;
}

/* Optgroup styling */
select optgroup {
    font-weight: 600;
    color: #0a0a0a;
    background-color: #f3f4f6;
}

select option {
    font-weight: 400;
    color: #374151;
    padding: 8px;
}

/* Partner Logo Slider */
.partner-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.partner-slider-track {
    display: flex;
    animation: partner-scroll 30s linear infinite;
    width: max-content;
}

.partner-slider-track:hover {
    animation-play-state: paused;
}

.partner-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.partner-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.partner-logo img {
    max-height: 60px;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.partner-logo:hover img {
    opacity: 1;
}

.partner-logo-text {
    background: #f3f4f6;
    padding: 1.5rem 2.5rem;
    border-radius: 0.5rem;
    transition: background 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.partner-logo:hover .partner-logo-text {
    background: #0a0a0a;
    transform: scale(1.05);
}

.partner-logo-text span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.partner-logo:hover .partner-logo-text span {
    color: #c9a227;
}

@keyframes partner-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Partner Slider Responsive */
@media (max-width: 768px) {
    .partner-logo img {
        max-height: 40px;
        max-width: 100px;
    }
    
    .partner-logo-text {
        padding: 1rem 1.5rem;
    }
    
    .partner-logo-text span {
        font-size: 0.7rem;
    }
    
    .partner-slider-track {
        animation-duration: 20s;
    }
}

/* Service Details Cards (Toggle) */
.service-details-card {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.service-details-card.active {
    max-height: 5000px;
    opacity: 1;
    margin-top: 3rem;
}

.service-detail-item {
    padding: 1rem;
    border-radius: 0.75rem;
    transition: background 0.3s ease;
}

.service-detail-item:hover {
    background: #f9fafb;
}

/* Service Toggle Cards */
.service-toggle-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.service-toggle-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.service-toggle-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background 0.3s ease;
    position: relative;
}

.service-toggle-header:hover {
    background: #f9fafb;
}

.service-toggle-header.active {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.05) 0%, rgba(212, 179, 68, 0.05) 100%);
}

.service-toggle-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3);
}

.service-toggle-icon i {
    font-size: 1.5rem;
    color: #0a0a0a;
}

.service-toggle-title {
    flex: 1;
}

.service-toggle-title h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 0.25rem;
}

.service-toggle-title p {
    font-size: 0.875rem;
    color: #6b7280;
}

.service-toggle-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.service-toggle-arrow i {
    color: #6b7280;
    transition: transform 0.3s ease;
}

.service-toggle-header.active .service-toggle-arrow {
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
}

.service-toggle-header.active .service-toggle-arrow i {
    color: #0a0a0a;
    transform: rotate(180deg);
}

.service-toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.service-toggle-content.active {
    max-height: 3000px;
}

.service-toggle-inner {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.service-feature-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.service-feature-item:last-child {
    border-bottom: none;
}

.service-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(212, 179, 68, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-feature-icon i {
    color: #c9a227;
    font-size: 1rem;
}

.service-feature-content h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 0.25rem;
}

.service-feature-content p {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

.service-toggle-cta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.service-toggle-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    color: #0a0a0a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.service-toggle-cta .btn-primary:hover {
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4);
    transform: translateY(-2px);
}

.service-toggle-cta .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0a0a0a;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.service-toggle-cta .btn-secondary:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
}

.service-intro-text {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.03) 0%, rgba(212, 179, 68, 0.03) 100%);
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    border-left: 4px solid #c9a227;
}

.service-intro-text p {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

/* Service Card Grid Layout */
.service-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .service-toggle-card.full-width {
        grid-column: span 2;
    }
}

/* Service Number Badge */
.service-number-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(201, 162, 39, 0.1);
    line-height: 1;
}

/* Leaflet Map Styles - Gold Theme */
.leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    min-width: 220px !important;
    max-width: 300px !important;
    width: auto !important;
}

.leaflet-popup-tip {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    background: #ffffff !important;
}

.leaflet-popup-close-button {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    background: #f3f4f6 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.leaflet-popup-close-button:hover {
    background: #c9a227 !important;
    color: #0a0a0a !important;
}

.leaflet-popup-close-button::before {
    content: '×' !important;
    font-family: Arial, sans-serif !important;
}

.leaflet-popup-close-button span {
    display: none !important;
}

/* Custom marker styles */
.custom-marker {
    background: transparent !important;
    border: none !important;
}

.custom-marker .marker-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}

.custom-marker:hover .marker-wrapper {
    transform: scale(1.1) !important;
}

/* Headquarters marker - Gold gradient background */
.headquarters-marker-inner {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4) !important;
    position: relative !important;
}

.headquarters-marker-inner i {
    color: #0a0a0a !important;
    font-size: 16px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Location marker - Dark background with gold icon */
.location-marker-inner {
    width: 36px !important;
    height: 36px !important;
    background: #0a0a0a !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.location-marker-inner i {
    color: #c9a227 !important;
    font-size: 14px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Popup content styling */
.leaflet-popup-content .popup-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.leaflet-popup-content .popup-badge.headquarters {
    background: linear-gradient(135deg, #c9a227, #d4b344);
    color: #0a0a0a;
}

.leaflet-popup-content .popup-badge.location {
    background: #0a0a0a;
    color: #c9a227;
}

.leaflet-popup-content .popup-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.3;
}

/* Dark mode map legend */
[data-theme="dark"] .map-legend {
    background: rgba(26, 26, 26, 0.95) !important;
}

[data-theme="dark"] .map-legend-title {
    color: #ffffff !important;
}

[data-theme="dark"] .map-legend-address {
    color: #9ca3af !important;
}

/* Dark mode popup title */
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: #1a1a1a !important;
}

[data-theme="dark"] .leaflet-popup-content {
    background: #1a1a1a !important;
}

[data-theme="dark"] .leaflet-popup-tip {
    background: #1a1a1a !important;
}

[data-theme="dark"] .leaflet-popup-content .popup-title {
    color: #ffffff !important;
}

[data-theme="dark"] .leaflet-popup-content p {
    color: #9ca3af !important;
}

.leaflet-popup-content .popup-info {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.leaflet-popup-content .popup-info i {
    color: #c9a227;
    margin-top: 2px;
    flex-shrink: 0;
}

.leaflet-popup-content .popup-info a {
    color: #c9a227;
    text-decoration: none;
}

.leaflet-popup-content .popup-info a:hover {
    text-decoration: underline;
}

.leaflet-popup-content .popup-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #c9a227, #d4b344);
    color: #0a0a0a;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.leaflet-popup-content .popup-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

/* Mobile Leaflet fixes */
@media (max-width: 768px) {
    .leaflet-popup-content-wrapper {
        max-width: 280px !important;
    }
    
    .leaflet-popup-content {
        min-width: 200px !important;
        max-width: 260px !important;
        padding: 14px !important;
    }
    
    .leaflet-popup-close-button {
        width: 24px !important;
        height: 24px !important;
        font-size: 16px !important;
        top: 6px !important;
        right: 6px !important;
    }
    
    .leaflet-popup-content .popup-title {
        font-size: 14px !important;
    }
    
    .leaflet-popup-content .popup-info {
        font-size: 12px !important;
    }
    
    .leaflet-popup-content .popup-button {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }
    
    /* Ensure marker backgrounds are visible on mobile */
    .custom-marker {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .custom-marker .marker-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Same marker size on mobile - consistent with desktop */
    .headquarters-marker-inner {
        width: 44px !important;
        height: 44px !important;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.4) !important;
    }
    
    .headquarters-marker-inner i {
        font-size: 16px !important;
        color: #0a0a0a !important;
    }
    
    .location-marker-inner {
        width: 36px !important;
        height: 36px !important;
        background: #0a0a0a !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    .location-marker-inner i {
        font-size: 14px !important;
        color: var(--color-primary) !important;
    }
    
    /* Ensure popup stays within viewport */
    .leaflet-popup {
        margin-bottom: 10px !important;
    }
    
    .leaflet-container {
        font-family: 'Montserrat', sans-serif !important;
    }
}

@media (max-width: 456px) {
    .leaflet-popup-content-wrapper {
        max-width: 240px !important;
    }
    
    .leaflet-popup-content {
        min-width: 180px !important;
        max-width: 220px !important;
        padding: 12px !important;
    }
    
    .leaflet-popup-close-button {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
        top: 5px !important;
        right: 5px !important;
    }
    
    .leaflet-popup-content .popup-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    .leaflet-popup-content .popup-info {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    
    .leaflet-popup-content .popup-button {
        padding: 7px 12px !important;
        font-size: 10px !important;
        margin-top: 10px !important;
    }
    
    /* Ensure marker backgrounds are visible on very small screens */
    .custom-marker {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .custom-marker .marker-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Same marker size on very small screens - consistent with desktop */
    .headquarters-marker-inner {
        width: 44px !important;
        height: 44px !important;
        background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4) !important;
    }
    
    .headquarters-marker-inner i {
        font-size: 16px !important;
        color: #0a0a0a !important;
    }
    
    .location-marker-inner {
        width: 36px !important;
        height: 36px !important;
        background: #0a0a0a !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    .location-marker-inner i {
        font-size: 14px !important;
        color: #c9a227 !important;
    }
}

/* Print Styles */
@media print {
    .header,
    .fab-container,
    .scroll-to-top {
        display: none !important;
    }
    
    .hero {
        min-height: auto !important;
        padding: 40px 0 !important;
    }
    
    section {
        padding: 30px 0 !important;
    }
    
    .service-toggle-content {
        max-height: none !important;
    }
}

/* Luxury Vehicle Card Styles */
.vehicle-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vehicle-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.vehicle-card-image {
    position: relative;
    overflow: hidden;
}

.vehicle-card-image img {
    transition: transform 0.5s ease;
}

.vehicle-card:hover .vehicle-card-image img {
    transform: scale(1.05);
}

.vehicle-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.vehicle-card-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Vehicle Card List View Styles */
.vehicle-card.flex {
    flex-direction: row;
}

.vehicle-card.flex .vehicle-image-container {
    flex-shrink: 0;
    width: 33.333%;
    min-width: 200px;
    max-height: 200px;
    aspect-ratio: auto;
}

.vehicle-card.flex .vehicle-image-container img {
    height: 100%;
    object-fit: cover;
}

.vehicle-card.flex .vehicle-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .vehicle-card.flex {
        flex-direction: column;
    }
    
    .vehicle-card.flex .vehicle-image-container {
        width: 100%;
        min-width: 100%;
        max-height: 200px;
    }
}

/* Luxury Button Styles */
.btn-luxury {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    color: #0a0a0a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-luxury:hover {
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4);
    transform: translateY(-2px);
}

.btn-luxury-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #c9a227;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid #c9a227;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-luxury-outline:hover {
    background: #c9a227;
    color: #0a0a0a;
}

/* Luxury Section Divider */
.luxury-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    margin: 1.5rem auto;
}

/* Luxury Quote Block */
.luxury-quote {
    position: relative;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.05) 0%, rgba(212, 179, 68, 0.05) 100%);
    border-left: 4px solid #c9a227;
    border-radius: 0 1rem 1rem 0;
}

.luxury-quote::before {
    content: '"';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 3rem;
    color: #c9a227;
    opacity: 0.3;
    font-family: 'Playfair Display', serif;
}

/* Luxury Stats Counter */
.luxury-stat {
    text-align: center;
    padding: 1.5rem;
}

.luxury-stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #c9a227;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.luxury-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Luxury Brand Logo */
.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #f5f5f0;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.brand-logo:hover {
    background: rgba(201, 162, 39, 0.1);
    transform: translateY(-4px);
}

.brand-logo span {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #6b7280;
    transition: color 0.3s ease;
}

.brand-logo:hover span {
    color: #c9a227;
}

/* ========================================
   Advanced Scroll Animations
   Slide, Flip, Typing Effects
   ======================================== */

/* Slide Animations */
.slide-in-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-up {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-down {
    opacity: 0;
    transform: translateY(-80px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-down.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scale Animations */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

.scale-in-bounce {
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.scale-in-bounce.visible {
    opacity: 1;
    transform: scale(1);
}

/* Flip Animations */
.flip-in {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
    display: inline-block;
    max-width: 100%;
    text-wrap: balance;
}

.flip-in.visible {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
}

.flip-in-x {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

.flip-in-x.visible {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
}

/* Card Flip 3D Effect */
.card-flip {
    perspective: 1000px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-flip-back {
    transform: rotateY(180deg);
}

/* Rotate Animations */
.rotate-in {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate-in.visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Stagger Animation Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }
.stagger-9 { transition-delay: 0.9s; }
.stagger-10 { transition-delay: 1s; }

/* Typing Effect Container */
.typing-effect {
    display: inline-block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    max-width: 100%;
    text-wrap: balance;
    border-right: 3px solid #c9a227;
    animation: typing-cursor 0.7s step-end infinite;
}

.typing-effect.typing-complete {
    border-right: none;
    animation: none;
}

@keyframes typing-cursor {
    from, to { border-color: transparent; }
    50% { border-color: #c9a227; }
}

/* Letter Flip Animation Container */
.letter-flip-container {
    display: inline-block;
    overflow: hidden;
    word-break: keep-all;
    white-space: normal;
}

.letter-flip-word {
    display: inline-block;
    white-space: nowrap;
}

.letter-flip {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
    animation: letter-flip-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes letter-flip-in {
    0% {
        opacity: 0;
        transform: translateY(100%) rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* Word Slide Animation */
.word-slide-container {
    overflow: hidden;
    display: inline-block;
}

.word-slide {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: word-slide-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes word-slide-in {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Text Animation */
.hero-text-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-text-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Title Reveal Animation */
.title-reveal {
    position: relative;
    overflow: hidden;
}

.title-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    transform: translateX(-100%);
    animation: title-reveal 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes title-reveal {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* Glowing Text Animation */
.glow-text {
    animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
    from {
        text-shadow: 0 0 5px rgba(201, 162, 39, 0.5), 0 0 10px rgba(201, 162, 39, 0.3);
    }
    to {
        text-shadow: 0 0 20px rgba(201, 162, 39, 0.8), 0 0 30px rgba(201, 162, 39, 0.5), 0 0 40px rgba(201, 162, 39, 0.3);
    }
}

/* Shimmer Effect */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Parallax Effect Classes */
.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-medium {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-fast {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Pulse Scale Animation */
.pulse-scale {
    animation: pulse-scale 2s ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Reveal from Bottom with Blur */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-blur.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Stagger Children Animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.stagger-children.visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.stagger-children.visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.stagger-children.visible > *:nth-child(9) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
.stagger-children.visible > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 1s; }

/* Counter Animation */
.counter-animate {
    display: inline-block;
    transition: transform 0.3s ease;
}

.counter-animate.counting {
    transform: scale(1.1);
}

/* Image Reveal Animation */
.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal img {
    transform: scale(1.2);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-reveal.visible img {
    transform: scale(1);
}

.image-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    z-index: 1;
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-reveal.visible::before {
    transform: translateX(100%);
}

/* Gradient Border Animation - Red Theme */
.gradient-border {
    position: relative;
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(135deg, #dc2626, #ef4444, #dc2626) border-box;
    border: 2px solid transparent;
    animation: gradient-rotate 3s linear infinite;
}

@keyframes gradient-rotate {
    0% { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(0deg, #dc2626, #ef4444, #dc2626) border-box; }
    25% { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #dc2626, #ef4444, #dc2626) border-box; }
    50% { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(180deg, #dc2626, #ef4444, #dc2626) border-box; }
    75% { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(270deg, #dc2626, #ef4444, #dc2626) border-box; }
    100% { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(360deg, #dc2626, #ef4444, #dc2626) border-box; }
}

/* Text Scramble Effect Container */
.scramble-text {
    font-family: 'Montserrat', monospace;
}

/* Magnetic Hover Effect */
.magnetic-hover {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tilt 3D Effect */
.tilt-effect {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.tilt-effect:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Split Text Animation */
.split-text-container {
    overflow: hidden;
    display: inline-block;
}

.split-text {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
}

.split-text.animate {
    animation: split-text-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes split-text-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Wave Text Animation */
.wave-text span {
    display: inline-block;
    animation: wave-text 1s ease-in-out infinite;
}

@keyframes wave-text {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Reduced Motion Support for New Animations */
@media (prefers-reduced-motion: reduce) {
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down,
    .scale-in,
    .scale-in-bounce,
    .flip-in,
    .flip-in-x,
    .rotate-in,
    .reveal-blur,
    .hero-text-animate {
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    .typing-effect {
        border-right: none;
        animation: none;
    }
    
    .letter-flip,
    .word-slide,
    .split-text {
        opacity: 1;
        transform: none;
        animation: none;
    }
    
    .shimmer::before,
    .title-reveal::after {
        display: none;
        animation: none;
    }
    
    .floating,
    .pulse-scale,
    .glow-text {
        animation: none;
    }
    
    .image-reveal img,
    .image-reveal::before {
        transform: none;
    }
    
    .card-flip-inner {
        transform: none;
    }
}

/* Mobile Fallback - Ensure visibility */
@media (max-width: 768px) {
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down,
    .scale-in,
    .scale-in-bounce,
    .flip-in,
    .flip-in-x,
    .rotate-in,
    .reveal-blur,
    .hero-text-animate {
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    .typing-effect {
        border-right: none;
    }
    
    .letter-flip,
    .word-slide,
    .split-text {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   Page Hero Animations
   Shuffled Move-In Effect on Load
   ======================================== */

/* Hero container for animation */
.page-hero-animate {
    opacity: 0;
}

.page-hero-animate.hero-loaded {
    opacity: 1;
}

/* Hero elements with staggered move-in animation */
.hero-element {
    opacity: 0;
    transform: translateY(40px) translateX(0);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-loaded .hero-element {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Shuffled animation delays - creates random-like effect */
.hero-loaded .hero-element:nth-child(1) { transition-delay: 0.05s; }
.hero-loaded .hero-element:nth-child(2) { transition-delay: 0.15s; }
.hero-loaded .hero-element:nth-child(3) { transition-delay: 0.08s; }
.hero-loaded .hero-element:nth-child(4) { transition-delay: 0.22s; }
.hero-loaded .hero-element:nth-child(5) { transition-delay: 0.12s; }
.hero-loaded .hero-element:nth-child(6) { transition-delay: 0.28s; }
.hero-loaded .hero-element:nth-child(7) { transition-delay: 0.06s; }
.hero-loaded .hero-element:nth-child(8) { transition-delay: 0.18s; }

/* Alternative shuffle pattern for different pages */
.hero-shuffle-a .hero-element:nth-child(1) { transition-delay: 0.12s; }
.hero-shuffle-a .hero-element:nth-child(2) { transition-delay: 0.04s; }
.hero-shuffle-a .hero-element:nth-child(3) { transition-delay: 0.20s; }
.hero-shuffle-a .hero-element:nth-child(4) { transition-delay: 0.08s; }
.hero-shuffle-a .hero-element:nth-child(5) { transition-delay: 0.16s; }

.hero-shuffle-b .hero-element:nth-child(1) { transition-delay: 0.08s; }
.hero-shuffle-b .hero-element:nth-child(2) { transition-delay: 0.24s; }
.hero-shuffle-b .hero-element:nth-child(3) { transition-delay: 0.04s; }
.hero-shuffle-b .hero-element:nth-child(4) { transition-delay: 0.18s; }
.hero-shuffle-b .hero-element:nth-child(5) { transition-delay: 0.12s; }

/* Move from different directions */
.hero-move-up {
    transform: translateY(50px);
}

.hero-move-down {
    transform: translateY(-50px);
}

.hero-move-left {
    transform: translateX(50px);
}

.hero-move-right {
    transform: translateX(-50px);
}

.hero-scale-in {
    transform: scale(0.9);
}

/* Combined effects */
.hero-move-up-scale {
    transform: translateY(40px) scale(0.95);
}

.hero-move-left-scale {
    transform: translateX(40px) scale(0.95);
}

/* Hero loaded state resets transforms */
.hero-loaded .hero-move-up,
.hero-loaded .hero-move-down,
.hero-loaded .hero-move-left,
.hero-loaded .hero-move-right,
.hero-loaded .hero-scale-in,
.hero-loaded .hero-move-up-scale,
.hero-loaded .hero-move-left-scale {
    transform: translateY(0) translateX(0) scale(1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .page-hero-animate {
        opacity: 1;
    }
    
    .hero-element {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Mobile fallback */
@media (max-width: 768px) {
    .page-hero-animate {
        opacity: 1;
    }
    
    .hero-element {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   Page Hero - Clear Image (No Overlay)
   ======================================== */

/* Hero with clear background image */
.page-hero-clear {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-hero-clear .hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: -10;
}

.page-hero-clear .hero-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient overlay for text readability at top */
.page-hero-clear .hero-text-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        transparent 40%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Bottom fade - makes hero image fade to transparent using mask */
.page-hero-clear .hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: -10;
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 70%,
        rgba(0, 0, 0, 0.8) 80%,
        rgba(0, 0, 0, 0.4) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 70%,
        rgba(0, 0, 0, 0.8) 80%,
        rgba(0, 0, 0, 0.4) 90%,
        transparent 100%
    );
}

.page-hero-clear .hero-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fallback for browsers without mask-image support */
@supports not (mask-image: linear-gradient(to bottom, black, transparent)) {
    .page-hero-clear .hero-bg-image {
        z-index: -10;
    }
    
    .page-hero-clear .hero-bottom-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--bg-primary, #f5f5f0) 100%
        );
        z-index: 2;
        pointer-events: none;
    }
}

/* Hide bottom-fade element when mask is supported (modern browsers) */
.page-hero-clear .hero-bottom-fade {
    display: none;
}

@supports not (mask-image: linear-gradient(to bottom, black, transparent)) {
    .page-hero-clear .hero-bottom-fade {
        display: block;
    }
}

/* Hero content styling */
.page-hero-clear .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    padding: 2rem;
}

.page-hero-clear .hero-title {
    font-family: 'Ethnocentric', 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.page-hero-clear .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.page-hero-clear .hero-badge {
    display: inline-block;
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.page-hero-clear .hero-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.page-hero-clear .hero-breadcrumb a {
    color: #dc2626;
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-hero-clear .hero-breadcrumb a:hover {
    color: #ffffff;
}

.page-hero-clear .hero-breadcrumb i {
    font-size: 0.625rem;
    color: #dc2626;
}

/* Hero Video Background */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.hero-video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* Video fallback for mobile */
@media (max-width: 768px) {
    .hero-video-container video {
        display: none;
    }
    
    .hero-video-container {
        background-image: url('assets/images/hero/luxury-cars-bg.jpg');
        background-size: cover;
        background-position: center;
    }
}

/* Video loading state */
.video-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a0a 0%, #2d2d2d 50%, #0a0a0a 100%);
    animation: video-pulse 2s ease-in-out infinite;
}

@keyframes video-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Global Scrolling Background */
.global-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -50;
    pointer-events: none;
}

.global-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: url('../images/bg_d1.png');
    background-size: cover;
    background-position: center center;
    background-repeat: repeat-y;
    will-change: transform;
    transform: translateY(0);
    transition: transform 0.05s ease-out, background-image 0.3s ease;
    opacity: 1;
}

/* Dark theme background image */
[data-theme="dark"] .global-bg-image {
   background-image: url('../images/bgblack.png');
}

/* Smooth scroll animation for background */
@keyframes bg-scroll-smooth {
   0% {
       transform: translateY(0);
   }
   100% {
       transform: translateY(-50%);
   }
}

/* Mobile fallback for global background */
@media (max-width: 768px) {
   .global-bg-image {
       height: 200%;
       background-attachment: scroll;
       background-size: cover;
       background-repeat: repeat-y;
   }
}

/* Tablet: keep full scrollable background height like desktop */
@media (min-width: 769px) and (max-width: 1024px) {
   .global-bg-image {
       height: 200%;
       background-repeat: repeat-y;
       background-size: cover;
   }
}

/* Make section backgrounds transparent to show global background */
section:not(#home-hero):not([id^="home-"]):not(.parallax-section) {
   background-color: transparent !important;
}

/* Keep hero sections with their own backgrounds */
section.min-h-screen,
section[class*="hero"],
section[id*="hero"] {
   background-color: transparent;
}

/* Ensure content sections have proper contrast over global background */
.bg-white:not(section),
.bg-gray-50:not(section),
.bg-gray-100:not(section),
.bg-luxury-cream:not(section) {
   background-color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .bg-white:not(section),
[data-theme="dark"] .bg-gray-50:not(section),
[data-theme="dark"] .bg-gray-100:not(section),
[data-theme="dark"] .bg-luxury-cream:not(section) {
   background-color: rgba(26, 26, 26, 0.95) !important;
}

/* Card backgrounds - semi-transparent for global bg visibility */
.card-hover,
.bg-white.rounded-xl,
.bg-white.p-8,
.bg-white.shadow-lg,
article.bg-white {
   background-color: rgba(255, 255, 255, 0.92) !important;
   backdrop-filter: blur(4px);
}

[data-theme="dark"] .card-hover,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.p-8,
[data-theme="dark"] .bg-white.shadow-lg,
[data-theme="dark"] article.bg-white {
   background-color: rgba(26, 26, 26, 0.92) !important;
}

/* Form containers - solid background for readability */
form.bg-white,
form[class*="bg-white"],
.form-success,
.ajax-form-message {
   background-color: rgba(255, 255, 255, 0.98) !important;
}

[data-theme="dark"] form.bg-white,
[data-theme="dark"] form[class*="bg-white"],
[data-theme="dark"] .form-success,
[data-theme="dark"] .ajax-form-message {
   background-color: rgba(26, 26, 26, 0.98) !important;
}

/* Logo Gold Gradient with Glossy Reflection Effect */
.logo-gold {
    filter: drop-shadow(0 2px 4px rgba(201, 162, 39, 0.3));
    transition: all 0.3s ease;
    position: relative;
}

/* Prevent logo squishing in flex layouts: shrink proportionally instead */
.header-logo-link {
    min-width: 0;
    flex: 1 1 auto;
}

.header-logo-img {
    display: block;
    width: min(260px, 42vw);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    flex: 0 1 auto;
    min-width: 0;
}

.hero-logo-img {
    display: block;
    width: min(520px, 78vw);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .header-logo-link {
        flex: 0 1 auto;
    }
    .header-logo-img {
        width: auto;
        height: 2rem; /* matches previous md:h-8 */
        max-width: 260px;
    }
}

.logo-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(201, 162, 39, 0.2) 0%,
        rgba(212, 179, 68, 0.4) 25%,
        rgba(201, 162, 39, 0.1) 50%,
        rgba(212, 179, 68, 0.3) 75%,
        rgba(201, 162, 39, 0.2) 100%
    );
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.logo-gold:hover::before {
    opacity: 1;
}

.logo-gold:hover {
    filter: drop-shadow(0 4px 8px rgba(201, 162, 39, 0.5));
    transform: scale(1.02);
}

/* Glossy reflection effect */
.logo-gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    border-radius: 4px 4px 0 0;
    pointer-events: none;
    opacity: 0.6;
}

/* Logo scrolled state - original appearance */
.logo-gold.scrolled {
    filter: none;
}

.logo-gold.scrolled::before,
.logo-gold.scrolled::after {
    opacity: 0;
}

/* Parallax Background Section */
.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    will-change: transform;
    z-index: 0;
}

/* Mobile fallback for parallax - fixed background */
@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll !important;
        height: 100%;
    }
}

/* Parallax content wrapper */
.parallax-content {
    position: relative;
    z-index: 10;
}

/* ========================================
   Header Corner Gold Stripes
   Animated Gradient Shine Effect
   Visible only on header and language bar
   ======================================== */

/* Header Corner Stripes Container - Fixed at top for header + language bar */
.header-corner-stripes {
    position: fixed;
    top: 0;
    width: 100px;
    height: 119px;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
}

.header-corner-left {
    left: 0;
}

.header-corner-right {
    right: 0;
}

/* Individual Stripe - Red theme for both light and dark mode */
.header-corner-stripes .stripe {
    position: absolute;
    width: 80px;
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(220, 38, 38, 0.3) 10%,
        rgba(220, 38, 38, 0.8) 30%,
        #dc2626 50%,
        rgba(239, 68, 68, 1) 60%,
        #ef4444 70%,
        rgba(220, 38, 38, 0.8) 90%,
        transparent 100%
    );
    transform-origin: left center;
    animation: stripe-shimmer 2.5s ease-in-out infinite;
}

/* Left Corner - Triangle Formation (\ shape) */
.header-corner-left .stripe-1 {
    bottom: -5px;
    left: 0;
    transform: rotate(45deg);
    transform-origin: bottom left;
    animation-delay: 0s;
}

.header-corner-left .stripe-2 {
    bottom: 9px;
    left: 0;
    transform: rotate(45deg);
    transform-origin: bottom left;
    animation-delay: 0.3s;
}

.header-corner-left .stripe-3 {
    bottom: 23px;
    left: 0;
    transform: rotate(45deg);
    transform-origin: bottom left;
    animation-delay: 0.6s;
}

/* Right Corner - Triangle Formation (/ shape) */
.header-corner-right .stripe-1 {
    bottom: -5px;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    animation-delay: 0s;
}

.header-corner-right .stripe-2 {
    bottom: 9px;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    animation-delay: 0.3s;
}

.header-corner-right .stripe-3 {
    bottom: 23px;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    animation-delay: 0.6s;
}

/* Shimmer Animation */
@keyframes stripe-shimmer {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(0.8);
        background-position: -100% 0;
    }
    50% {
        opacity: 1;
        filter: brightness(1.3);
        background-position: 100% 0;
    }
}

/* Glossy Shine Overlay */
.header-corner-stripes .stripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: glossy-sweep 3s ease-in-out infinite;
}

@keyframes glossy-sweep {
    0% {
        left: -50%;
    }
    50%, 100% {
        left: 120%;
    }
}

/* Staggered Animation Delays for Glossy Effect */
.header-corner-left .stripe-1::before { animation-delay: 0s; }
.header-corner-left .stripe-2::before { animation-delay: 0.2s; }
.header-corner-left .stripe-3::before { animation-delay: 0.4s; }
.header-corner-right .stripe-1::before { animation-delay: 0.1s; }
.header-corner-right .stripe-2::before { animation-delay: 0.3s; }
.header-corner-right .stripe-3::before { animation-delay: 0.5s; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .header-corner-stripes {
        width: 50px;
        height: 96px;
    }
    
    .header-corner-left .stripe-1 {
        bottom: -5px;
    }
    
    .header-corner-left .stripe-2 {
        bottom: 5px;
    }
    
    .header-corner-left .stripe-3 {
        bottom: 15px;
    }
    
    .header-corner-right .stripe-1 {
        bottom: -5px;
    }
    
    .header-corner-right .stripe-2 {
        bottom: 5px;
    }
    
    .header-corner-right .stripe-3 {
        bottom: 15px;
    }
    
    .header-corner-stripes .stripe {
        height: 4px;
        width: 100px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .header-corner-stripes .stripe,
    .header-corner-stripes .stripe::before {
        animation: none;
        opacity: 0.7;
    }
    
    .language-bar-stripe {
        animation: none;
        width: 30%;
    }
}

/* ========================================
   Language Bar Gold Stripes
   Animated from outside to center
   ======================================== */

/* Language Bar Stripe Base */
.language-bar-stripe {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 162, 39, 0.4) 20%,
        #c9a227 50%,
        rgba(212, 179, 68, 1) 70%,
        rgba(201, 162, 39, 0.4) 80%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Left Stripe - Animates from left edge towards center */
.language-bar-stripe-left {
    left: 0;
    animation: stripe-expand-left 1.5s ease-out forwards;
}

/* Right Stripe - Animates from right edge towards center */
.language-bar-stripe-right {
    right: 0;
    animation: stripe-expand-right 1.5s ease-out forwards;
}

/* ========================================
   Hero Dock Line (Index)
   5px line that docks under the language bar after hero scroll
   ======================================== */

/* ========================================
   Hero Video Dock (Index)
   Bottom ~150px of hero video docks under language bar after hero scroll
   ======================================== */

#home-hero-video-dock {
    position: fixed;
    left: 0;
    right: 0;
    top: 0; /* set precisely via JS to language bar bottom */
    height: 122px;
    z-index: 39; /* behind language bar (z-40), below header (z-50) */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

@media (max-width: 768px) {
    #home-hero-video-dock {
        height: 125px;
    }
}

#home-hero-video-dock.is-docked {
    opacity: 1;
    transform: translateY(0);
}

.home-hero-video-dock-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* 3-Color Animated Gradient Effect - Horizontal from outside to center */
.home-hero-video-dock-inner::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(220, 38, 38, 0.2) 20%,
        rgba(220, 38, 38, 0.5) 30%,
        rgba(239, 68, 68, 0.7) 40%,
        rgba(220, 38, 38, 0.85) 50%,
        rgba(239, 68, 68, 0.7) 60%,
        rgba(220, 38, 38, 0.5) 70%,
        rgba(220, 38, 38, 0.2) 80%,
        transparent 90%,
        transparent 100%
    );
    animation: gradient-flow-in 3s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* Second gradient layer for enhanced effect */
.home-hero-video-dock-inner::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(220, 38, 38, 0.15) 8%,
        rgba(220, 38, 38, 0.4) 18%,
        rgba(239, 68, 68, 0.6) 28%,
        rgba(220, 38, 38, 0.75) 38%,
        rgba(220, 38, 38, 0.9) 50%,
        rgba(220, 38, 38, 0.75) 62%,
        rgba(239, 68, 68, 0.6) 72%,
        rgba(220, 38, 38, 0.4) 82%,
        rgba(220, 38, 38, 0.15) 92%,
        transparent 100%
    );
    animation: gradient-flow-in 3s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

@keyframes gradient-flow-in {
    0% {
        transform: scaleX(0) translateX(-50%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1) translateX(0);
        opacity: 1;
    }
}

/* Continuous subtle animation after initial flow */
#home-hero-video-dock.is-docked .home-hero-video-dock-inner::before {
    animation: gradient-pulse 4s ease-in-out infinite;
    animation-delay: 3.2s;
}

#home-hero-video-dock.is-docked .home-hero-video-dock-inner::after {
    animation: gradient-pulse-alt 4s ease-in-out infinite;
    animation-delay: 3.4s;
}

@keyframes gradient-pulse {
    0%, 100% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            transparent 0%,
            transparent 10%,
            rgba(220, 38, 38, 0.2) 20%,
            rgba(220, 38, 38, 0.5) 30%,
            rgba(239, 68, 68, 0.7) 40%,
            rgba(220, 38, 38, 0.85) 50%,
            rgba(239, 68, 68, 0.7) 60%,
            rgba(220, 38, 38, 0.5) 70%,
            rgba(220, 38, 38, 0.2) 80%,
            transparent 90%,
            transparent 100%
        );
    }
    50% {
        opacity: 0.8;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(220, 38, 38, 0.1) 8%,
            rgba(220, 38, 38, 0.4) 18%,
            rgba(239, 68, 68, 0.6) 28%,
            rgba(220, 38, 38, 0.75) 38%,
            rgba(220, 38, 38, 0.9) 50%,
            rgba(220, 38, 38, 0.75) 62%,
            rgba(239, 68, 68, 0.6) 72%,
            rgba(220, 38, 38, 0.4) 82%,
            rgba(220, 38, 38, 0.1) 92%,
            transparent 100%
        );
    }
}

@keyframes gradient-pulse-alt {
    0%, 100% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(220, 38, 38, 0.15) 8%,
            rgba(220, 38, 38, 0.4) 18%,
            rgba(239, 68, 68, 0.6) 28%,
            rgba(220, 38, 38, 0.75) 38%,
            rgba(220, 38, 38, 0.9) 50%,
            rgba(220, 38, 38, 0.75) 62%,
            rgba(239, 68, 68, 0.6) 72%,
            rgba(220, 38, 38, 0.4) 82%,
            rgba(220, 38, 38, 0.15) 92%,
            transparent 100%
        );
    }
    50% {
        opacity: 0.7;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(220, 38, 38, 0.1) 5%,
            rgba(220, 38, 38, 0.35) 15%,
            rgba(239, 68, 68, 0.55) 25%,
            rgba(220, 38, 38, 0.7) 40%,
            rgba(220, 38, 38, 0.85) 50%,
            rgba(220, 38, 38, 0.7) 60%,
            rgba(239, 68, 68, 0.55) 75%,
            rgba(220, 38, 38, 0.35) 85%,
            rgba(220, 38, 38, 0.1) 95%,
            transparent 100%
        );
    }
}

/* Light theme gradient colors - red only */
[data-theme="light"] .home-hero-video-dock-inner {
    background: transparent;
}

[data-theme="light"] .home-hero-video-dock-inner::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(220, 38, 38, 0.15) 20%,
        rgba(220, 38, 38, 0.4) 30%,
        rgba(239, 68, 68, 0.6) 40%,
        rgba(220, 38, 38, 0.75) 50%,
        rgba(239, 68, 68, 0.6) 60%,
        rgba(220, 38, 38, 0.4) 70%,
        rgba(220, 38, 38, 0.15) 80%,
        transparent 90%,
        transparent 100%
    );
}

[data-theme="light"] .home-hero-video-dock-inner::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(220, 38, 38, 0.1) 8%,
        rgba(220, 38, 38, 0.35) 18%,
        rgba(239, 68, 68, 0.5) 28%,
        rgba(220, 38, 38, 0.65) 38%,
        rgba(220, 38, 38, 0.8) 50%,
        rgba(220, 38, 38, 0.65) 62%,
        rgba(239, 68, 68, 0.5) 72%,
        rgba(220, 38, 38, 0.35) 82%,
        rgba(220, 38, 38, 0.1) 92%,
        transparent 100%
    );
}

/* Fahrzeuge Hero Video - Invert in Light Mode */
[data-theme="light"] .fahrzeuge-hero-video {
    filter: invert(1);
}

[data-theme="light"] .fahrzeuge-hero-overlay {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Match the hero overlays so text remains readable above */
.home-hero-video-dock-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    #home-hero-video-dock {
        transition: none;
    }
    
    .home-hero-video-dock-inner::before,
    .home-hero-video-dock-inner::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Animation Keyframes - Animate once then stay */
@keyframes stripe-expand-left {
    0% {
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        width: calc(50% - 150px);
        opacity: 1;
    }
}

@keyframes stripe-expand-right {
    0% {
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        width: calc(50% - 150px);
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .language-bar-stripe {
        height: 1px;
    }
    
    @keyframes stripe-expand-left {
        0% {
            width: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            width: calc(50% - 100px);
            opacity: 1;
        }
    }
    
    @keyframes stripe-expand-right {
        0% {
            width: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            width: calc(50% - 100px);
            opacity: 1;
        }
    }
}

/* ========================================
   Theme Toggle Button
   ======================================== */
.theme-toggle-btn {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    border-color: var(--color-primary, #dc2626);
    background: rgba(var(--color-primary-rgb, 220, 38, 38), 0.2);
}

.theme-toggle-btn i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

/* ========================================
   Dark Theme Styles
   ======================================== */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Dark theme backgrounds */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-luxury-cream {
    background-color: var(--luxury-cream) !important;
}

/* Dark theme text colors */
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

/* Dark theme heading colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .font-heading {
    color: var(--text-primary) !important;
}

/* Dark theme paragraph and span colors */
[data-theme="dark"] p {
    color: var(--text-secondary);
}

[data-theme="dark"] span:not(.text-primary):not(.text-white):not(.text-secondary):not(.bg-primary) {
    color: inherit;
}

/* Dark theme specific text overrides */
[data-theme="dark"] .text-gray-500 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Light theme text-secondary override - ensure dark text */
html:not([data-theme="dark"]) .text-secondary {
    color: #0a0a0a !important;
}

/* Light mode - red buttons: white text and icons */
[data-theme="light"] .bg-primary.text-secondary,
[data-theme="light"] .bg-primary .text-secondary,
[data-theme="light"] a.bg-primary.text-secondary,
[data-theme="light"] button.bg-primary.text-secondary,
[data-theme="light"] span.bg-primary.text-secondary {
    color: #ffffff !important;
}

[data-theme="light"] .bg-primary i,
[data-theme="light"] a.bg-primary i,
[data-theme="light"] button.bg-primary i,
[data-theme="light"] span.bg-primary i {
    color: #ffffff !important;
}

[data-theme="light"] .bg-primary,
[data-theme="light"] a.bg-primary:not(.bg-primary\/10):not(.bg-primary\/20):not(.bg-primary\/5),
[data-theme="light"] button.bg-primary:not(.bg-primary\/10):not(.bg-primary\/20):not(.bg-primary\/5),
[data-theme="light"] span.bg-primary:not(.bg-primary\/10):not(.bg-primary\/20):not(.bg-primary\/5) {
    color: #ffffff !important;
}

/* Light mode - red button hover states keep white text */
[data-theme="light"] a.bg-primary:hover.text-secondary,
[data-theme="light"] button.bg-primary:hover.text-secondary,
[data-theme="light"] .hover\:bg-primary:hover .text-secondary {
    color: #ffffff !important;
}

[data-theme="light"] a.bg-primary:hover i,
[data-theme="light"] button.bg-primary:hover i,
[data-theme="light"] .hover\:bg-primary:hover i {
    color: #ffffff !important;
}

/* Light theme - replace gold/yellow with white/neutral colors */
[data-theme="light"] .bg-primary\/10,
[data-theme="light"] .bg-primary\/20,
[data-theme="light"] .bg-primary\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .text-primary {
    color: #dc2626 !important;
}

/* Light theme - white backgrounds for cards and sections */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Light theme - remove gold shadows and glows */
[data-theme="light"] .card-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .icon-circle,
[data-theme="light"] .icon-circle-luxury {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Light theme - neutral borders */
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light theme - animated background blobs should be neutral */
[data-theme="light"] .blur-3xl.animate-pulse,
[data-theme="light"] .blur-3xl.animate-blob {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Light theme - hero section animated backgrounds */
[data-theme="light"] section .absolute.opacity-20 .blur-3xl,
[data-theme="light"] section .absolute.opacity-30 .blur-3xl,
[data-theme="light"] section .absolute.opacity-50 .blur-3xl {
    background-color: rgba(255, 252, 252, 0.2) !important;
}

/* Light theme gradient sections - white background with dark text */
/* Exclude footer - footer stays dark in light mode */
[data-theme="light"] section.bg-luxury-black,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black {
    background: #ffffff !important;
}

[data-theme="light"] .bg-luxury-black {
    background: #ffffff !important;
}

/* Footer exception - keep dark in light mode */
[data-theme="light"] footer.bg-luxury-black,
[data-theme="light"] footer {
    background: #0a0a0a !important;
}

/* Button exception - keep dark buttons dark in light mode */
[data-theme="light"] a.bg-luxury-black,
[data-theme="light"] button.bg-luxury-black {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

[data-theme="light"] a.bg-luxury-black:hover,
[data-theme="light"] button.bg-luxury-black:hover {
    background: #2d2d2d !important;
}

/* Dark mode info boxes - keep dark in dark mode */
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-primary\/10,
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-yellow-50 {
    background: rgba(10, 10, 10, 0.8) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="dark"] .bg-green-50 h4,
[data-theme="dark"] .bg-green-50 li,
[data-theme="dark"] .bg-primary\/10 h4,
[data-theme="dark"] .bg-primary\/10 p {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .bg-green-50 .fa-check {
    color: #ef4444 !important;
}

/* Exclude footer from light theme text color overrides */
[data-theme="light"] .bg-luxury-black:not(footer) h2,
[data-theme="light"] .bg-luxury-black:not(footer) h3,
[data-theme="light"] .bg-luxury-black:not(footer) h4,
[data-theme="light"] .bg-luxury-black:not(footer) p,
[data-theme="light"] .bg-luxury-black:not(footer) span:not(.text-primary),
[data-theme="light"] .bg-luxury-black:not(footer) li,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black h2,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black h3,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black p,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black span:not(.text-primary),
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) h2,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) h3,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) h4,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) p,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) span:not(.text-primary),
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) li {
    color: #0a0a0a !important;
}

/* Exclude footer from light theme text color overrides */
[data-theme="light"] .bg-luxury-black:not(footer) .text-white\/60,
[data-theme="light"] .bg-luxury-black:not(footer) .text-white\/70,
[data-theme="light"] .bg-luxury-black:not(footer) .text-white\/80,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .text-white\/60,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .text-white\/70,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .text-white\/80,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .text-white\/60,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .text-white\/70,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .text-white\/80 {
    color: rgba(10, 10, 10, 0.6) !important;
}

/* Exclude footer from light theme accordion overrides */
[data-theme="light"] .bg-luxury-black:not(footer) .accordion-item,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .accordion-item,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .accordion-item {
    background: rgba(10, 10, 10, 0.05) !important;
    border: 1px solid rgba(10, 10, 10, 0.1) !important;
}

[data-theme="light"] .bg-luxury-black:not(footer) .accordion-trigger,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .accordion-trigger,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .accordion-trigger {
    color: #0a0a0a !important;
}

[data-theme="light"] .bg-luxury-black:not(footer) .accordion-content,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .accordion-content,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .accordion-content {
    color: rgba(10, 10, 10, 0.8) !important;
}

[data-theme="light"] .bg-luxury-black:not(footer) .accordion-trigger:hover,
[data-theme="light"] section.bg-gradient-to-br.from-luxury-black .accordion-trigger:hover,
[data-theme="light"] .bg-gradient-to-br.from-luxury-black:not(footer) .accordion-trigger:hover {
    background: rgba(10, 10, 10, 0.05) !important;
}

/* Dark theme gradient sections - dark background with white text */
[data-theme="dark"] section.bg-luxury-black,
[data-theme="dark"] .bg-luxury-black,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.5) 0%, rgba(45, 45, 45, 0.5) 50%, rgba(10, 10, 10, 0.5) 100%) !important;
}

[data-theme="dark"] .bg-luxury-black h2,
[data-theme="dark"] .bg-luxury-black h3,
[data-theme="dark"] .bg-luxury-black h4,
[data-theme="dark"] .bg-luxury-black p,
[data-theme="dark"] .bg-luxury-black span:not(.text-primary),
[data-theme="dark"] .bg-luxury-black li,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black h2,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black h3,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black p,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black span:not(.text-primary),
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black h2,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black h3,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black h4,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black p,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black span:not(.text-primary),
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black li {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-luxury-black .text-white\/60,
[data-theme="dark"] .bg-luxury-black .text-white\/70,
[data-theme="dark"] .bg-luxury-black .text-white\/80,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .text-white\/60,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .text-white\/70,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .text-white\/80,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .text-white\/60,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .text-white\/70,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .text-white\/80 {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .bg-luxury-black .accordion-item,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .accordion-item,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .accordion-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bg-luxury-black .accordion-trigger,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .accordion-trigger,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .accordion-trigger {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-luxury-black .accordion-content,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .accordion-content,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .accordion-content {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .bg-luxury-black .accordion-trigger:hover,
[data-theme="dark"] section.bg-gradient-to-br.from-luxury-black .accordion-trigger:hover,
[data-theme="dark"] .bg-gradient-to-br.from-luxury-black .accordion-trigger:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Dark theme text-secondary override - ensure light text */
[data-theme="dark"] .text-secondary {
    color: #ffffff !important;
}

/* Dark theme cards */
[data-theme="dark"] .card-hover,
[data-theme="dark"] .bg-white\/80,
[data-theme="dark"] .bg-white.shadow-lg {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .card-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Dark theme sections */
[data-theme="dark"] section {
    background-color: transparent;
}

[data-theme="dark"] .parallax-section {
    background-color: var(--bg-secondary);
}

/* Dark theme for feature cards section */
[data-theme="dark"] section.bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] section.bg-gray-100 h2,
[data-theme="dark"] section.bg-gray-100 h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] section.bg-gray-100 p {
    color: var(--text-secondary) !important;
}

/* Dark theme for info box in CTA section */
[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(26, 26, 26, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bg-white\/90 ul,
[data-theme="dark"] .bg-white\/90 p {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-white\/90 li span {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .bg-white\/90 li span.text-gray-400 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark theme form inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] select option {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Dark theme buttons */
[data-theme="dark"] .btn-luxury-outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .btn-luxury-outline:hover {
    background: var(--color-primary);
    color: #0a0a0a;
}

/* Dark theme service cards */
[data-theme="dark"] .service-toggle-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .service-toggle-header:hover {
    background: rgba(var(--color-primary-rgb), 0.05);
}

[data-theme="dark"] .service-toggle-title h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .service-toggle-title p,
[data-theme="dark"] .service-feature-content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .service-toggle-arrow {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .service-toggle-inner {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .service-feature-item {
    border-bottom-color: var(--border-color);
}

/* Dark theme testimonials */
[data-theme="dark"] .testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .testimonial-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Dark theme contact tabs */
[data-theme="dark"] .contact-tab {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .contact-tab:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .contact-tab.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .contact-tab.active i {
    color: #ffffff;
}

/* Dark theme info boxes */
[data-theme="dark"] .info-box {
    background: var(--bg-card);
}

[data-theme="dark"] .info-box:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* Dark theme spam guard */
[data-theme="dark"] .spam-guard {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .spam-choice-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .spam-choice:hover .spam-choice-card {
    border-color: var(--color-primary-light);
}

/* Dark theme vehicle cards */
[data-theme="dark"] .vehicle-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .vehicle-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Dark theme filter section */
[data-theme="dark"] .abs-vehicle-filter-section {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .abs-vehicle-filter-title {
    color: var(--text-primary);
}

/* Dark theme global background */
[data-theme="dark"] .global-bg-container {
    opacity: 1;
}

[data-theme="dark"] .global-bg-image {
    background-image: url('../images/bgblack.png');
}

[data-theme="dark"] .global-bg-container .absolute {
    background: rgba(10, 10, 10, 0.5) !important;
}

/* Dark theme header */
[data-theme="dark"] #header {
    background: rgba(10, 10, 10, 0.98) !important;
}

[data-theme="dark"] #language-bar {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Dark theme footer */
[data-theme="dark"] footer {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] footer a:hover {
    color: var(--color-primary);
}

/* Light theme footer - keep same as dark mode */
[data-theme="light"] footer {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* Hide background image overlay in light mode - solid black only */
[data-theme="light"] footer .absolute.inset-0.-z-10 {
    display: none !important;
}

[data-theme="light"] footer,
[data-theme="light"] footer * {
    --tw-text-opacity: 1;
}

[data-theme="light"] footer h4,
[data-theme="light"] footer h2,
[data-theme="light"] footer h3 {
    color: #ffffff !important;
}

[data-theme="light"] footer p {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] footer a {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] footer a:hover {
    color: #dc2626 !important;
}

[data-theme="light"] footer .text-white\/40,
[data-theme="light"] footer .text-white\/60,
[data-theme="light"] footer .text-white\/70,
[data-theme="light"] footer .text-white\/80 {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] footer .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] footer .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] footer i {
    color: #dc2626 !important;
}

[data-theme="light"] footer img {
    filter: none !important;
}

/* Footer bottom section - copyright, links, ORRIX */
[data-theme="light"] footer .text-white\/40 {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] footer .text-white\/40:hover {
    color: #dc2626 !important;
}

[data-theme="light"] footer .text-primary {
    color: #dc2626 !important;
}

[data-theme="light"] footer .text-primary:hover {
    color: #ef4444 !important;
}

/* Dark theme scroll to top */
[data-theme="dark"] .scroll-to-top {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Dark theme badges */
[data-theme="dark"] .bg-primary\/10,
[data-theme="dark"] .bg-primary\/20 {
    background-color: rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Dark theme gradients */
[data-theme="dark"] .gradient-card-bg {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

[data-theme="dark"] .page-hero-gradient {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
}

/* Dark theme partner logos */
[data-theme="dark"] .partner-logo-text {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .partner-logo:hover .partner-logo-text {
    background: var(--bg-secondary);
}

/* Dark theme location cards */
[data-theme="dark"] .location-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .location-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Dark theme brand logos */
[data-theme="dark"] .brand-logo {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .brand-logo:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
}

/* Dark theme luxury quote */
[data-theme="dark"] .luxury-quote {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
    border-left-color: var(--color-primary);
}

/* Dark theme form success */
[data-theme="dark"] .form-success i {
    color: var(--color-primary);
}

/* Dark theme ajax form messages */
[data-theme="dark"] .ajax-form-message.is-error {
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

[data-theme="dark"] .ajax-form-message.is-success {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    color: #86efac;
}

/* Dark theme mobile menu */
[data-theme="dark"] #nav-menu {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Dark theme hero section */
[data-theme="dark"] .hero-title-text {
    color: rgb(255, 200, 200);
}

/* Dark theme shimmer effect */
[data-theme="dark"] .shimmer::before {
    background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.4), transparent);
}

/* Dark theme glow text */
[data-theme="dark"] .glow-text {
    animation: glow-pulse-dark 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse-dark {
    from {
        text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.6), 0 0 10px rgba(var(--color-primary-rgb), 0.4);
    }
    to {
        text-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.9), 0 0 30px rgba(var(--color-primary-rgb), 0.6), 0 0 40px rgba(var(--color-primary-rgb), 0.4);
    }
}

/* Dark theme gradient border */
[data-theme="dark"] .gradient-border {
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                linear-gradient(135deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box;
}

@keyframes gradient-rotate-dark {
    0% { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(0deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box; }
    25% { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box; }
    50% { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(180deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box; }
    75% { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(270deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box; }
    100% { background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(360deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) border-box; }
}

[data-theme="dark"] .gradient-border {
    animation: gradient-rotate-dark 3s linear infinite;
}

/* Dark theme image reveal */
[data-theme="dark"] .image-reveal::before {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Dark theme title reveal */
[data-theme="dark"] .title-reveal::after {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Dark theme typing cursor */
[data-theme="dark"] .typing-effect {
    border-right-color: var(--color-primary);
}

@keyframes typing-cursor-dark {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-primary); }
}

[data-theme="dark"] .typing-effect {
    animation: typing-cursor-dark 0.7s step-end infinite;
}

/* Dark theme header corner stripes */
[data-theme="dark"] .header-corner-stripes .stripe {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--color-primary-rgb), 0.3) 10%,
        rgba(var(--color-primary-rgb), 0.8) 30%,
        var(--color-primary) 50%,
        rgba(var(--color-primary-rgb), 1) 60%,
        var(--color-primary-light) 70%,
        rgba(var(--color-primary-rgb), 0.8) 90%,
        transparent 100%
    );
}

/* Dark theme language bar stripe */
[data-theme="dark"] .language-bar-stripe {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--color-primary-rgb), 0.4) 20%,
        var(--color-primary) 50%,
        rgba(var(--color-primary-rgb), 1) 70%,
        rgba(var(--color-primary-rgb), 0.4) 80%,
        transparent 100%
    );
}

/* Dark theme logo */
[data-theme="dark"] .logo-gold {
    filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.4));
}

[data-theme="dark"] .logo-gold:hover {
    filter: drop-shadow(0 4px 8px rgba(var(--color-primary-rgb), 0.6));
}

/* Dark theme print styles */
@media print {
    [data-theme="dark"] .header,
    [data-theme="dark"] .fab-container,
    [data-theme="dark"] .scroll-to-top,
    [data-theme="dark"] .theme-toggle-btn {
        display: none !important;
    }
}

/* ========================================
   3D Carousel - "Ihr Partner für Exklusivität"
   Infinite Loop Carousel with 3D Coverflow Effect
   JavaScript-based requestAnimationFrame Animation
   ======================================== */

/* ========================================
   Swiper 3D Framework - JS Animation
   (Partner + Services)
   ======================================== */

.abs-3d-swiper {
    position: relative;
    width: 100%;
    padding: 30px 0 40px;
    overflow: hidden;
    perspective: 1200px;
    contain: layout paint;
}

.abs-3d-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    will-change: transform;
    transition: none;
}

.abs-3d-swiper--partner .swiper-slide {
    width: 300px;
    flex-shrink: 0;
}

.abs-3d-swiper--services .swiper-slide {
    width: 380px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .abs-3d-swiper--partner .swiper-slide {
        width: 260px;
    }
    .abs-3d-swiper--services .swiper-slide {
        width: 320px;
    }
}

.abs-3d-swiper .swiper-slide {
    height: auto;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.abs-3d-card {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 1px solid rgba(201, 162, 39, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* No user interaction (auto only) */
.abs-3d-swiper {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Removed overlay - images display clearly */
.abs-3d-card::after {
    display: none;
}

.abs-3d-card--service {
    border-radius: 1.25rem;
}

/* Center emphasis for coverflow */
.abs-3d-swiper .swiper-slide-active .abs-3d-card {
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(201, 162, 39, 0.35);
    transform: translateZ(18px) scale(1.03);
}

/* Hide Swiper default controls if any get auto-injected */
.abs-3d-swiper .swiper-button-next,
.abs-3d-swiper .swiper-button-prev,
.abs-3d-swiper .swiper-pagination {
    display: none !important;
}

/* Dark theme card surface */
[data-theme="dark"] .abs-3d-card {
    background: rgba(26, 26, 26, 0.95);
    border-color: rgba(201, 162, 39, 0.22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* 3D Card text colors - Light mode (default) */
.abs-3d-card,
.abs-3d-card.bg-white\/90,
.abs-3d-card.bg-white\/80 {
    color: #0a0a0a;
}

.abs-3d-card h3,
.abs-3d-card .font-heading {
    color: #0a0a0a !important;
}

.abs-3d-card p {
    color: #6b7280 !important;
}

.abs-3d-card--service,
.abs-3d-card--service h3,
.abs-3d-card--service p {
    color: #0a0a0a !important;
}

/* 3D Card text colors - Dark mode */
[data-theme="dark"] .abs-3d-card,
[data-theme="dark"] .abs-3d-card.bg-white\/90,
[data-theme="dark"] .abs-3d-card.bg-white\/80 {
    color: #ffffff;
}

[data-theme="dark"] .abs-3d-card h3,
[data-theme="dark"] .abs-3d-card .font-heading {
    color: #ffffff !important;
}

[data-theme="dark"] .abs-3d-card p {
    color: #9ca3af !important;
}

[data-theme="dark"] .abs-3d-card--service,
[data-theme="dark"] .abs-3d-card--service h3,
[data-theme="dark"] .abs-3d-card--service p {
    color: #ffffff !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .abs-3d-card {
        transition: none;
    }
}

.carousel-3d-container {
    position: relative;
    width: 100%;
    padding: 40px 0;
    overflow: visible;
}

/* Legacy implementations disabled (migrated to Swiper) */
.carousel-3d-container,
.card-deck-slider {
    display: none !important;
}

.carousel-3d-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.carousel-3d-track {
    display: flex;
    gap: 30px;
    cursor: grab;
    user-select: none;
}

.carousel-3d-track:active {
    cursor: grabbing;
}

/* Smooth infinite scroll animation */
.carousel-3d-track.is-auto-scrolling {
    animation: carousel-scroll-linear var(--carousel-duration, 30s) linear infinite;
}

.carousel-3d-track.paused {
    animation-play-state: paused;
}

@keyframes carousel-scroll-linear {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 15px));
    }
}

.carousel-3d-card {
    flex: 0 0 280px;
    min-width: 280px;
    transform-style: preserve-3d;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.carousel-3d-card-inner {
    position: relative;
    padding: 2rem;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(201, 162, 39, 0.1);
}

/* 3D Bend Effect - Cards bend backwards at edges */
.carousel-3d-card.bend-left {
    transform: perspective(1000px) rotateY(15deg) translateZ(-20px);
    opacity: 0.7;
}

.carousel-3d-card.bend-right {
    transform: perspective(1000px) rotateY(-15deg) translateZ(-20px);
    opacity: 0.7;
}

.carousel-3d-card.center {
    transform: perspective(1000px) rotateY(0deg) translateZ(0);
    opacity: 1;
}

.carousel-3d-card.center .carousel-3d-card-inner {
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(201, 162, 39, 0.3);
}

/* Hover Effects */
.carousel-3d-card:hover .carousel-3d-card-inner {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.carousel-3d-card.center:hover .carousel-3d-card-inner {
    transform: scale(1.05) translateY(-5px);
}

/* Scrollbar */
/* Hover Scroll Zones */
.carousel-3d-hover-zone {
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

.carousel-3d-hover-zone i {
    font-size: 2rem;
    color: rgba(201, 162, 39, 0.6);
    transition: all 0.3s ease;
}

.carousel-3d-hover-zone:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent);
}

.carousel-3d-hover-zone:hover i {
    color: #c9a227;
    transform: scale(1.2);
}

.carousel-3d-hover-left {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent);
}

.carousel-3d-hover-right {
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05));
}

.carousel-3d-hover-right:hover {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1));
}

/* 3D Flip Effect for Cards */
.carousel-3d-card {
    animation: card-3d-flip 0.8s ease-out;
}

@keyframes card-3d-flip {
    0% {
        transform: perspective(1000px) rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: perspective(1000px) rotateY(-10deg) scale(1.02);
        opacity: 0.8;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

/* Card entering from left */
.carousel-3d-card.flip-from-left {
    animation: card-flip-left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes card-flip-left {
    0% {
        transform: perspective(1000px) rotateY(-45deg) translateX(-100px) scale(0.7);
        opacity: 0;
    }
    40% {
        transform: perspective(1000px) rotateY(15deg) translateX(20px) scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg) translateX(0) scale(1);
        opacity: 1;
    }
}

/* Card entering from right */
.carousel-3d-card.flip-from-right {
    animation: card-flip-right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes card-flip-right {
    0% {
        transform: perspective(1000px) rotateY(45deg) translateX(100px) scale(0.7);
        opacity: 0;
    }
    40% {
        transform: perspective(1000px) rotateY(-15deg) translateX(-20px) scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg) translateX(0) scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .carousel-3d-card {
        flex: 0 0 260px;
        min-width: 260px;
    }
    
    .carousel-3d-hover-zone {
        width: 20%;
    }
    
    .carousel-3d-hover-zone i {
        font-size: 1.5rem;
    }
    
    .carousel-3d-track {
        gap: 20px;
    }
}

/* Dark Theme 3D Carousel */
[data-theme="dark"] .carousel-3d-card-inner {
    background: rgba(26, 26, 26, 0.95);
    border-color: rgba(201, 162, 39, 0.2);
}

[data-theme="dark"] .carousel-3d-scrollbar {
    background: rgba(201, 162, 39, 0.2);
}

/* ========================================
   Card Deck Slider - "Service auf höchstem Niveau"
   3 cards visible, center card in front
   ======================================== */

.card-deck-slider {
    position: relative;
    width: 100%;
    padding: 60px 0 80px;
    overflow: hidden;
}

.card-deck-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 400px;
    perspective: 1500px;
}

.card-deck-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.card-deck-item {
    position: absolute;
    width: 350px;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

.card-deck-inner {
    position: relative;
    padding: 2.5rem;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Card Positions - 3 visible cards, center in front with 3D flip */
.card-deck-item[data-position="left"] {
    transform: translateX(-380px) translateZ(-100px) rotateY(25deg);
    opacity: 0.6;
    z-index: 1;
    animation: card-deck-flip-left-in 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-deck-item[data-position="center"] {
    transform: translateX(0) translateZ(50px) rotateY(0deg);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    animation: card-deck-flip-center 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-deck-item[data-position="right"] {
    transform: translateX(380px) translateZ(-100px) rotateY(-25deg);
    opacity: 0.6;
    z-index: 1;
    animation: card-deck-flip-right-in 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-deck-item[data-position="hidden-left"] {
    transform: translateX(-600px) translateZ(-200px) rotateY(45deg);
    opacity: 0;
    z-index: 0;
}

.card-deck-item[data-position="hidden-right"] {
    transform: translateX(600px) translateZ(-200px) rotateY(-45deg);
    opacity: 0;
    z-index: 0;
}

/* 3D Flip Animations for Card Deck */
@keyframes card-deck-flip-center {
    0% {
        transform: translateX(0) translateZ(-150px) rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    40% {
        transform: translateX(0) translateZ(100px) rotateY(-15deg) scale(1.08);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0) translateZ(50px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes card-deck-flip-left-in {
    0% {
        transform: translateX(-200px) translateZ(-200px) rotateY(60deg) scale(0.6);
        opacity: 0;
    }
    50% {
        transform: translateX(-350px) translateZ(-50px) rotateY(35deg) scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-380px) translateZ(-100px) rotateY(25deg) scale(1);
        opacity: 0.6;
    }
}

@keyframes card-deck-flip-right-in {
    0% {
        transform: translateX(200px) translateZ(-200px) rotateY(-60deg) scale(0.6);
        opacity: 0;
    }
    50% {
        transform: translateX(350px) translateZ(-50px) rotateY(-35deg) scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: translateX(380px) translateZ(-100px) rotateY(-25deg) scale(1);
        opacity: 0.6;
    }
}

/* Center card styling */
.card-deck-item[data-position="center"] .card-deck-inner {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(201, 162, 39, 0.4);
    transform: scale(1.05);
}

.card-deck-item[data-position="center"]:hover .card-deck-inner {
    transform: scale(1.08);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(201, 162, 39, 0.5);
}

/* Side cards hover */
.card-deck-item[data-position="left"]:hover,
.card-deck-item[data-position="right"]:hover {
    opacity: 0.8;
}

.card-deck-item[data-position="left"]:hover .card-deck-inner,
.card-deck-item[data-position="right"]:hover .card-deck-inner {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Card Deck Hover Scroll Zones */
.card-deck-hover-zone {
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

.card-deck-hover-zone i {
    font-size: 2.5rem;
    color: rgba(201, 162, 39, 0.5);
    transition: all 0.3s ease;
}

.card-deck-hover-zone:hover {
    opacity: 1;
}

.card-deck-hover-zone:hover i {
    color: #c9a227;
    transform: scale(1.3);
}

.card-deck-hover-left {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent);
}

.card-deck-hover-right {
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08));
}

.card-deck-arrow-left {
    left: 20px;
}

.card-deck-arrow-right {
    right: 20px;
}

/* Progress Indicators */
.card-deck-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.card-deck-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.2);
    border: 2px solid rgba(201, 162, 39, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.card-deck-indicator:hover {
    background: rgba(201, 162, 39, 0.4);
    border-color: rgba(201, 162, 39, 0.5);
}

.card-deck-indicator.active {
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    border-color: #c9a227;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

/* Responsive */
@media (max-width: 1024px) {
    .card-deck-container {
        height: 380px;
    }
    
    .card-deck-item {
        width: 300px;
    }
    
    .card-deck-item[data-position="left"] {
        transform: translateX(-320px) translateZ(-80px) rotateY(20deg);
    }
    
    .card-deck-item[data-position="right"] {
        transform: translateX(320px) translateZ(-80px) rotateY(-20deg);
    }
}

@media (max-width: 768px) {
    .card-deck-slider {
        padding: 40px 0 60px;
    }
    
    .card-deck-container {
        height: 350px;
    }
    
    .card-deck-item {
        width: 280px;
    }
    
    .card-deck-item[data-position="left"] {
        transform: translateX(-280px) translateZ(-60px) rotateY(15deg);
    }
    
    .card-deck-item[data-position="right"] {
        transform: translateX(280px) translateZ(-60px) rotateY(-15deg);
    }
    
    .card-deck-inner {
        padding: 2rem;
    }
    
    .card-deck-arrow {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    
    .card-deck-arrow-left {
        left: 10px;
    }
    
    .card-deck-arrow-right {
        right: 10px;
    }
    
    .card-deck-indicator {
        width: 10px;
        height: 10px;
    }
    
    .card-deck-indicators {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .card-deck-container {
        height: 320px;
    }
    
    .card-deck-item {
        width: 260px;
    }
    
    .card-deck-item[data-position="left"] {
        transform: translateX(-260px) translateZ(-40px) rotateY(10deg);
        opacity: 0.3;
    }
    
    .card-deck-item[data-position="right"] {
        transform: translateX(260px) translateZ(-40px) rotateY(-10deg);
        opacity: 0.3;
    }
    
    .card-deck-inner {
        padding: 1.5rem;
    }
}

/* Dark Theme Card Deck */
[data-theme="dark"] .card-deck-inner {
    background: rgba(26, 26, 26, 0.98);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

[data-theme="dark"] .card-deck-item[data-position="center"] .card-deck-inner {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(201, 162, 39, 0.5);
}

[data-theme="dark"] .card-deck-indicator {
    background: rgba(201, 162, 39, 0.15);
    border-color: rgba(201, 162, 39, 0.25);
}

[data-theme="dark"] .card-deck-indicator:hover {
    background: rgba(201, 162, 39, 0.3);
}

/* Touch/Swipe Support */
@media (hover: none) and (pointer: coarse) {
    .carousel-3d-card,
    .card-deck-item {
        cursor: default;
    }
    
    .carousel-3d-arrow,
    .card-deck-arrow {
        width: 44px;
        height: 44px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .carousel-3d-track,
    .carousel-3d-card,
    .carousel-3d-card-inner,
    .card-deck-item,
    .card-deck-inner {
        transition: none;
    }
    
    .carousel-3d-card.bend-left,
    .carousel-3d-card.bend-right,
    .carousel-3d-card.center {
        transform: none;
        opacity: 1;
    }
    
    .card-deck-item[data-position="left"],
    .card-deck-item[data-position="center"],
    .card-deck-item[data-position="right"],
    .card-deck-item[data-position="hidden-left"],
    .card-deck-item[data-position="hidden-right"] {
        transform: none;
        opacity: 1;
    }
}

/* ========================================
   Fullwidth Feature Cards - Luxury Style
   ======================================== */

.abs-feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
    padding: 4px;
}

.abs-feature-card {
    position: relative;
    height: 500px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 16px;
    /* Smooth transitions without stuttering */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hexagon decoration elements - Dark Gray Gradient */
.abs-feature-card .hexagon-decor {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hexagon 1 - Top Left */
.abs-feature-card .hexagon-decor.hex-1 {
    top: 5%;
    left: 8%;
    width: 45px;
    height: 52px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(45,45,45,0.25)' stroke='rgba(60,60,60,0.5)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0s;
}

/* Hexagon 2 - Top Center Left */
.abs-feature-card .hexagon-decor.hex-2 {
    top: 3%;
    left: 25%;
    width: 38px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(35,35,35,0.2)' stroke='rgba(50,50,50,0.45)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.03s;
}

/* Hexagon 3 - Top Center */
.abs-feature-card .hexagon-decor.hex-3 {
    top: 8%;
    left: 50%;
    transform: translateX(-50%) translateY(30px) scale(0.8);
    width: 42px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(55,55,55,0.22)' stroke='rgba(70,70,70,0.48)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transition-delay: 0.06s;
}

/* Hexagon 4 - Top Center Right */
.abs-feature-card .hexagon-decor.hex-4 {
    top: 4%;
    right: 25%;
    width: 35px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(40,40,40,0.18)' stroke='rgba(55,55,55,0.42)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.09s;
}

/* Hexagon 5 - Top Right */
.abs-feature-card .hexagon-decor.hex-5 {
    top: 10%;
    right: 10%;
    width: 48px;
    height: 55px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(50,50,50,0.28)' stroke='rgba(65,65,65,0.52)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.12s;
}

/* Hexagon 6 - Upper Middle Left */
.abs-feature-card .hexagon-decor.hex-6 {
    top: 20%;
    left: 3%;
    width: 30px;
    height: 35px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(30,30,30,0.15)' stroke='rgba(45,45,45,0.35)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.15s;
}

/* Hexagon 7 - Upper Middle Center Left */
.abs-feature-card .hexagon-decor.hex-7 {
    top: 18%;
    left: 18%;
    width: 25px;
    height: 29px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(60,60,60,0.2)' stroke='rgba(75,75,75,0.4)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.18s;
}

/* Hexagon 8 - Upper Middle Center Right */
.abs-feature-card .hexagon-decor.hex-8 {
    top: 22%;
    right: 20%;
    width: 32px;
    height: 37px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(45,45,45,0.22)' stroke='rgba(60,60,60,0.45)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.21s;
}

/* Hexagon 9 - Upper Middle Right */
.abs-feature-card .hexagon-decor.hex-9 {
    top: 16%;
    right: 5%;
    width: 28px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(35,35,35,0.16)' stroke='rgba(50,50,50,0.38)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.24s;
}

/* Hexagon 10 - Middle Left */
.abs-feature-card .hexagon-decor.hex-10 {
    top: 35%;
    left: 12%;
    width: 36px;
    height: 41px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(55,55,55,0.24)' stroke='rgba(70,70,70,0.48)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.27s;
}

/* Hexagon 11 - Middle Center */
.abs-feature-card .hexagon-decor.hex-11 {
    top: 32%;
    left: 45%;
    width: 22px;
    height: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(40,40,40,0.18)' stroke='rgba(55,55,55,0.4)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.3s;
}

/* Hexagon 12 - Middle Right */
.abs-feature-card .hexagon-decor.hex-12 {
    top: 38%;
    right: 15%;
    width: 40px;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(50,50,50,0.26)' stroke='rgba(65,65,65,0.5)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.33s;
}

/* Hexagon 13 - Lower Middle Left */
.abs-feature-card .hexagon-decor.hex-13 {
    top: 48%;
    left: 5%;
    width: 26px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(30,30,30,0.12)' stroke='rgba(45,45,45,0.3)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.36s;
}

/* Hexagon 14 - Lower Middle Right */
.abs-feature-card .hexagon-decor.hex-14 {
    top: 50%;
    right: 8%;
    width: 33px;
    height: 38px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(45,45,45,0.2)' stroke='rgba(60,60,60,0.42)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.39s;
}

/* Hexagon 15 - Lower Left */
.abs-feature-card .hexagon-decor.hex-15 {
    top: 58%;
    left: 20%;
    width: 20px;
    height: 23px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M12 0L24 7V21L12 28L0 21V7L12 0Z' fill='rgba(25,25,25,0.1)' stroke='rgba(40,40,40,0.25)' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(30px) scale(0.8);
    transition-delay: 0.42s;
}

/* Hover state for hexagons */
.abs-feature-card:hover .hexagon-decor {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.abs-feature-card:hover .hexagon-decor.hex-3 {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Subtle floating animation for hexagons */
@keyframes hexagon-float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

.abs-feature-card:hover .hexagon-decor.hex-1 { animation: hexagon-float 3s ease-in-out infinite; }
.abs-feature-card:hover .hexagon-decor.hex-2 { animation: hexagon-float 3.4s ease-in-out infinite 0.1s; }
.abs-feature-card:hover .hexagon-decor.hex-3 { animation: hexagon-float 3.5s ease-in-out infinite 0.2s; transform: translateX(-50%) translateY(0) scale(1); }
.abs-feature-card:hover .hexagon-decor.hex-4 { animation: hexagon-float 2.9s ease-in-out infinite 0.15s; }
.abs-feature-card:hover .hexagon-decor.hex-5 { animation: hexagon-float 3.2s ease-in-out infinite 0.25s; }
.abs-feature-card:hover .hexagon-decor.hex-6 { animation: hexagon-float 3.6s ease-in-out infinite 0.3s; }
.abs-feature-card:hover .hexagon-decor.hex-7 { animation: hexagon-float 2.8s ease-in-out infinite 0.35s; }
.abs-feature-card:hover .hexagon-decor.hex-8 { animation: hexagon-float 3.3s ease-in-out infinite 0.4s; }
.abs-feature-card:hover .hexagon-decor.hex-9 { animation: hexagon-float 3.1s ease-in-out infinite 0.45s; }
.abs-feature-card:hover .hexagon-decor.hex-10 { animation: hexagon-float 3.5s ease-in-out infinite 0.5s; }
.abs-feature-card:hover .hexagon-decor.hex-11 { animation: hexagon-float 2.7s ease-in-out infinite 0.55s; }
.abs-feature-card:hover .hexagon-decor.hex-12 { animation: hexagon-float 3.4s ease-in-out infinite 0.6s; }
.abs-feature-card:hover .hexagon-decor.hex-13 { animation: hexagon-float 3s ease-in-out infinite 0.65s; }
.abs-feature-card:hover .hexagon-decor.hex-14 { animation: hexagon-float 3.2s ease-in-out infinite 0.7s; }
.abs-feature-card:hover .hexagon-decor.hex-15 { animation: hexagon-float 2.9s ease-in-out infinite 0.75s; }

.feature-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Smooth zoom without stuttering */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    backface-visibility: hidden;
}

.abs-feature-card:hover .feature-card-bg {
    transform: scale(1.08);
}

/* Luxury gradient overlay */
.feature-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        transparent 100%
    );
    z-index: 5;
    transition: opacity 0.5s ease;
}

.abs-feature-card:hover .feature-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        transparent 100%
    );
}

.feature-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    z-index: 10;
    transform: translateY(80px);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

.abs-feature-card:hover .feature-card-content {
    transform: translateY(0);
}

.feature-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95) 0%, rgba(239, 68, 68, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transform: scale(0.7) rotate(-15deg);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(220, 38, 38, 0.5),
                0 0 0 4px rgba(220, 38, 38, 0.2);
    backface-visibility: hidden;
}

.abs-feature-card:hover .feature-card-icon {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.feature-card-icon i {
    font-size: 1.75rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.feature-card-title {
    font-family: 'Ethnocentric', 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
}

.abs-feature-card:hover .feature-card-title {
    transform: translateY(0);
    opacity: 1;
}

.feature-card-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.25rem;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
}

.abs-feature-card:hover .feature-card-text {
    transform: translateY(0);
    opacity: 1;
}

.feature-card-line {
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #dc2626 100%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.abs-feature-card:hover .feature-card-line {
    width: 80px;
}

/* Active/Expanded state */
.abs-feature-card.active {
    flex: 1.5;
}

.abs-feature-card.active .feature-card-content {
    transform: translateY(0);
}

.abs-feature-card.active .feature-card-icon {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.abs-feature-card.active .feature-card-title {
    transform: translateY(0);
    opacity: 1;
}

.abs-feature-card.active .feature-card-text {
    transform: translateY(0);
    opacity: 1;
}

.abs-feature-card.active .feature-card-line {
    width: 80px;
}

/* Hover lift effect for luxury feel */
.abs-feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(220, 38, 38, 0.15);
    z-index: 10;
}

/* Responsive */
@media (max-width: 1280px) {
    .abs-feature-card {
        height: 450px;
    }
}

@media (max-width: 1024px) {
    .abs-feature-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 6px;
    }
    
    .abs-feature-card {
        height: 400px;
    }
    
    .feature-card-content {
        padding: 2rem;
    }
    
    .feature-card-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-card-icon i {
        font-size: 1.5rem;
    }
    
    .feature-card-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .abs-feature-cards-grid {
        grid-template-columns: 1fr;
        border-radius: 16px;
        gap: 8px;
        padding: 8px;
    }
    
    .abs-feature-card {
        height: 380px;
        border-radius: 14px;
    }
    
    .feature-card-content {
        padding: 2rem;
    }
    
    .feature-card-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 1rem;
    }
    
    .feature-card-icon i {
        font-size: 1.35rem;
    }
    
    .feature-card-title {
        font-size: 1.15rem;
    }
    
    .feature-card-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .abs-feature-card {
        height: 320px;
    }
    
    .feature-card-content {
        padding: 1.5rem;
    }
    
    .feature-card-icon {
        width: 50px;
        height: 50px;
    }
    
    .feature-card-icon i {
        font-size: 1.25rem;
    }
    
    .feature-card-title {
        font-size: 1.1rem;
    }
    
    .feature-card-text {
        font-size: 0.85rem;
    }
}

/* Dark theme feature card text */
[data-theme="dark"] .feature-card-title,
[data-theme="dark"] .feature-card-text {
    color: #fff !important;
}

[data-theme="dark"] .feature-card-line {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
}

[data-theme="dark"] .abs-feature-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(220, 38, 38, 0.2);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .feature-card-bg,
    .feature-card-content,
    .feature-card-icon,
    .feature-card-title,
    .feature-card-text,
    .feature-card-line,
    .abs-feature-card,
    .abs-feature-card::before,
    .abs-feature-card::after {
        transition: none;
        animation: none;
    }
    
    .abs-feature-card:hover .feature-card-bg {
        transform: none;
    }
    
    .abs-feature-card:hover .feature-card-content,
    .abs-feature-card.active .feature-card-content {
        transform: none;
    }
    
    .abs-feature-card:hover {
        transform: none;
    }
}

/* ========================================
   Gallery Rondell - Flip Animation
   ======================================== */

.abs-gallery-rondell {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.gallery-rondell-container {
    position: relative;
    width: 100%;
    height: 500px;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-rondell-card {
    position: absolute;
    width: 320px;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background: #fff;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Removed overlay - images display clearly */
.gallery-rondell-card::before {
    display: none;
}

.gallery-rondell-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-rondell-card:hover .gallery-rondell-image {
    transform: scale(1.05);
}

/* Card positions - Rondell layout */
.gallery-rondell-card[data-position="center"] {
    z-index: 30;
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
}

.gallery-rondell-card[data-position="left-1"] {
    z-index: 20;
    transform: translateX(-280px) translateZ(-100px) rotateY(35deg) scale(0.85);
    opacity: 0.7;
}

.gallery-rondell-card[data-position="left-2"] {
    z-index: 10;
    transform: translateX(-450px) translateZ(-200px) rotateY(50deg) scale(0.7);
    opacity: 0.4;
}

.gallery-rondell-card[data-position="right-1"] {
    z-index: 20;
    transform: translateX(280px) translateZ(-100px) rotateY(-35deg) scale(0.85);
    opacity: 0.7;
}

.gallery-rondell-card[data-position="right-2"] {
    z-index: 10;
    transform: translateX(450px) translateZ(-200px) rotateY(-50deg) scale(0.7);
    opacity: 0.4;
}

.gallery-rondell-card[data-position="hidden-left"] {
    z-index: 0;
    transform: translateX(-600px) translateZ(-300px) rotateY(65deg) scale(0.5);
    opacity: 0;
    pointer-events: none;
}

.gallery-rondell-card[data-position="hidden-right"] {
    z-index: 0;
    transform: translateX(600px) translateZ(-300px) rotateY(-65deg) scale(0.5);
    opacity: 0;
    pointer-events: none;
}

/* Flip animation for active card */
.gallery-rondell-card.flipping {
    animation: galleryFlip 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes galleryFlip {
    0% {
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(150px) translateZ(-150px) rotateY(-90deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateX(280px) translateZ(-100px) rotateY(-35deg) scale(0.85);
        opacity: 0.7;
    }
}

/* Navigation Dots - Hidden */
.gallery-rondell-dots {
    display: none;
}

.gallery-rondell-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.2);
    border: 2px solid rgba(201, 162, 39, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
}

.gallery-rondell-dot:hover {
    background: rgba(201, 162, 39, 0.4);
    border-color: rgba(201, 162, 39, 0.6);
    transform: scale(1.1);
}

.gallery-rondell-dot.active {
    background: linear-gradient(135deg, #c9a227 0%, #d4b344 100%);
    border-color: #c9a227;
}

/* Dark theme gallery rondell */
[data-theme="dark"] .gallery-rondell-card {
    background: var(--bg-card);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Overlay removed */

/* Dark Theme gallery dots */
[data-theme="dark"] .gallery-rondell-dot {
    background: rgba(201, 162, 39, 0.15);
    border-color: rgba(201, 162, 39, 0.3);
}

[data-theme="dark"] .gallery-rondell-dot:hover {
    background: rgba(201, 162, 39, 0.3);
}

/* Responsive */
@media (max-width: 1024px) {
    .gallery-rondell-container {
        height: 450px;
    }
    
    .gallery-rondell-card {
        width: 280px;
        height: 400px;
    }
    
    .gallery-rondell-card[data-position="left-1"] {
        transform: translateX(-220px) translateZ(-80px) rotateY(30deg) scale(0.85);
    }
    
    .gallery-rondell-card[data-position="left-2"] {
        transform: translateX(-350px) translateZ(-150px) rotateY(45deg) scale(0.7);
    }
    
    .gallery-rondell-card[data-position="right-1"] {
        transform: translateX(220px) translateZ(-80px) rotateY(-30deg) scale(0.85);
    }
    
    .gallery-rondell-card[data-position="right-2"] {
        transform: translateX(350px) translateZ(-150px) rotateY(-45deg) scale(0.7);
    }
}

@media (max-width: 768px) {
    .abs-gallery-rondell {
        padding: 30px 15px 70px;
    }
    
    .gallery-rondell-container {
        height: 400px;
    }
    
    .gallery-rondell-card {
        width: 240px;
        height: 340px;
    }
    
    .gallery-rondell-card[data-position="center"] {
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    }
    
    .gallery-rondell-card[data-position="left-1"] {
        transform: translateX(-180px) translateZ(-60px) rotateY(25deg) scale(0.8);
        opacity: 0.5;
    }
    
    .gallery-rondell-card[data-position="left-2"] {
        transform: translateX(-280px) translateZ(-120px) rotateY(40deg) scale(0.65);
        opacity: 0.3;
    }
    
    .gallery-rondell-card[data-position="right-1"] {
        transform: translateX(180px) translateZ(-60px) rotateY(-25deg) scale(0.8);
        opacity: 0.5;
    }
    
    .gallery-rondell-card[data-position="right-2"] {
        transform: translateX(280px) translateZ(-120px) rotateY(-40deg) scale(0.65);
        opacity: 0.3;
    }
    
    .gallery-rondell-card[data-position="hidden-left"],
    .gallery-rondell-card[data-position="hidden-right"] {
        opacity: 0;
        pointer-events: none;
    }
    
    .gallery-rondell-dots {
        gap: 10px;
    }
    
    .gallery-rondell-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .abs-gallery-rondell {
        padding: 20px 10px 60px;
    }
    
    .gallery-rondell-container {
        height: 350px;
    }
    
    .gallery-rondell-card {
        width: 200px;
        height: 280px;
        border-radius: 12px;
    }
    
    .gallery-rondell-card[data-position="center"] {
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    }
    
    .gallery-rondell-card[data-position="left-1"] {
        transform: translateX(-140px) translateZ(-40px) rotateY(20deg) scale(0.75);
        opacity: 0.4;
    }
    
    .gallery-rondell-card[data-position="left-2"],
    .gallery-rondell-card[data-position="hidden-left"] {
        transform: translateX(-220px) translateZ(-80px) rotateY(35deg) scale(0.6);
        opacity: 0;
        pointer-events: none;
    }
    
    .gallery-rondell-card[data-position="right-1"] {
        transform: translateX(140px) translateZ(-40px) rotateY(-20deg) scale(0.75);
        opacity: 0.4;
    }
    
    .gallery-rondell-card[data-position="right-2"],
    .gallery-rondell-card[data-position="hidden-right"] {
        transform: translateX(220px) translateZ(-80px) rotateY(-35deg) scale(0.6);
        opacity: 0;
        pointer-events: none;
    }
    
    .gallery-rondell-dots {
        gap: 8px;
    }
    
    .gallery-rondell-dot {
        width: 10px;
        height: 10px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .gallery-rondell-card {
        transition: none;
    }
    
    .gallery-rondell-card.flipping {
        animation: none;
    }
    
    .gallery-rondell-card[data-position="center"],
    .gallery-rondell-card[data-position="left-1"],
    .gallery-rondell-card[data-position="left-2"],
    .gallery-rondell-card[data-position="right-1"],
    .gallery-rondell-card[data-position="right-2"],
    .gallery-rondell-card[data-position="hidden-left"],
    .gallery-rondell-card[data-position="hidden-right"] {
        transform: none;
        opacity: 1;
    }
}

/* ========================================
   Service Rondell Cards (dienstleistungen.php)
   ======================================== */

.gallery-rondell-card--service {
    width: 340px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.service-rondell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    width: 100%;
    height: 100%;
}

.service-rondell-icon {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25);
    transition: transform 0.3s ease;
}

.gallery-rondell-card--service:hover .service-rondell-icon,
.gallery-rondell-card[data-position="center"].gallery-rondell-card--service .service-rondell-icon {
    transform: scale(1.1);
}

.service-rondell-icon i {
    font-size: 1.75rem;
    color: #0a0a0a;
}

.service-rondell-title {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
}

.service-rondell-text {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.service-rondell-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.service-rondell-link:hover {
    gap: 0.75rem;
}

.service-rondell-link i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.service-rondell-link:hover i {
    transform: translateX(2px);
}

/* Clickable side cards - pointer cursor */
.gallery-rondell-card[data-position="left-1"],
.gallery-rondell-card[data-position="left-2"],
.gallery-rondell-card[data-position="right-1"],
.gallery-rondell-card[data-position="right-2"] {
    cursor: pointer;
}

.gallery-rondell-card[data-position="center"] {
    cursor: default;
}

/* Center card emphasis for service rondell */
.gallery-rondell-card--service[data-position="center"] {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(220, 38, 38, 0.3);
}

/* Dark theme service rondell */
[data-theme="dark"] .gallery-rondell-card--service {
    background: rgba(26, 26, 26, 0.95);
}

[data-theme="dark"] .service-rondell-title {
    color: #ffffff;
}

[data-theme="dark"] .service-rondell-text {
    color: #9ca3af;
}

[data-theme="dark"] .service-rondell-icon {
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
}

/* Service Rondell Responsive */
@media (max-width: 1024px) {
    .gallery-rondell-card--service {
        width: 300px;
        height: 380px;
    }
}

@media (max-width: 768px) {
    .gallery-rondell-card--service {
        width: 260px;
        height: 360px;
    }

    .service-rondell-content {
        padding: 1.5rem 1.25rem;
    }

    .service-rondell-icon {
        width: 60px;
        height: 60px;
    }

    .service-rondell-icon i {
        font-size: 1.5rem;
    }

    .service-rondell-title {
        font-size: 1rem;
    }

    .service-rondell-text {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .gallery-rondell-card--service {
        width: 220px;
        height: 340px;
    }

    .service-rondell-content {
        padding: 1.25rem 1rem;
    }

    .service-rondell-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 1rem;
    }

    .service-rondell-icon i {
        font-size: 1.25rem;
    }

    .service-rondell-title {
        font-size: 0.9375rem;
    }

    .service-rondell-text {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }
}

/* ========================================
   Touch & Hover Interaction Improvements
   ======================================== */

/* Touch-Feedback für 3D Swiper */
.abs-3d-swiper {
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.abs-3d-swiper .swiper-slide {
    touch-action: none;
    user-select: none;
}

/* Touch-Active State */
.abs-3d-swiper .swiper-slide:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Touch-Devices: Hover-Zonen ausblenden */
@media (hover: none) and (pointer: coarse) {
    .abs-swiper-hover-zone,
    .gallery-rondell-hover-zone {
        display: none;
    }
}

/* Feature Cards Touch-Optimierung */
.abs-feature-card {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.abs-feature-card.active {
    transform: scale(1.02);
    z-index: 10;
}

/* Touch-Active State für Feature Cards */
@media (hover: none) and (pointer: coarse) {
    .abs-feature-card:active {
        transform: scale(0.98);
    }
    
    .abs-feature-card.active {
        transform: scale(1);
        box-shadow: 0 0 0 2px var(--color-primary);
    }
}

/* GPU-Beschleunigung für alle Slider */
.abs-3d-swiper,
.gallery-rondell,
.abs-feature-card {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth Scroll für Touch */
.abs-3d-swiper .swiper-wrapper {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Touch-Indikator für Mobile */
@media (hover: none) and (pointer: coarse) {
    .abs-3d-swiper::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        animation: touch-indicator 2s ease-in-out infinite;
        pointer-events: none;
    }
    
    @keyframes touch-indicator {
        0%, 100% { opacity: 0.3; width: 40px; }
        50% { opacity: 0.6; width: 60px; }
    }
}

/* Swipe-Hint Animation */
.swipe-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    animation: swipe-hint 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes swipe-hint {
    0%, 100% { transform: translateX(-50%); opacity: 0.5; }
    50% { transform: translateX(-30%); opacity: 1; }
}

/* Enhanced Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .abs-3d-swiper,
    .gallery-rondell,
    .abs-feature-card {
        will-change: auto;
        transform: none;
        transition: opacity 0.2s ease;
    }
    
    .abs-feature-card::before {
        animation: none;
        opacity: 0;
    }
    
    .abs-feature-card:hover::before {
        opacity: 0;
    }
    
    .abs-feature-card:hover .feature-card-bg {
        transform: none;
    }
    
    .abs-swiper-hover-zone,
    .gallery-rondell-hover-zone {
        display: none;
    }
    
    .abs-3d-swiper::after {
        display: none;
    }
    
    .swipe-hint {
        display: none;
    }
    
    .abs-3d-swiper .swiper-slide:active {
        transform: none;
    }
    
    .abs-feature-card:active {
        transform: none;
    }
}

/* Dark Theme Hover Zones */
[data-theme="dark"] .abs-swiper-hover-zone--left {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] .abs-swiper-hover-zone--right {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
}

[data-theme="dark"] .gallery-rondell-hover-zone--left {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15), transparent);
}

[data-theme="dark"] .gallery-rondell-hover-zone--right {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
}

/* Mobile Touch-Feedback */
@media (max-width: 768px) {
    .abs-swiper-hover-zone,
    .gallery-rondell-hover-zone {
        display: none;
    }
    
    .abs-3d-swiper .swiper-slide {
        transform-origin: center center;
    }
    
    .gallery-rondell-card {
        transform-origin: center center;
    }
    
    .abs-feature-card {
        transform-origin: center center;
    }
}

/* ========================================
   Luxury Mobile Sidebar Menu
   Slide-in from right with overlay
   ======================================== */

/* Sidebar Container */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

.mobile-sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Overlay Background */
.sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar.is-open .sidebar-overlay {
    opacity: 1;
}

/* Sidebar Panel - Slides from right */
.sidebar-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-sidebar.is-open .sidebar-panel {
    transform: translateX(0);
}

/* Light theme sidebar */
[data-theme="light"] .sidebar-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f0 50%, #ffffff 100%);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}

/* Close Button */
.sidebar-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.sidebar-close:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #0a0a0a;
    transform: rotate(90deg);
}

[data-theme="light"] .sidebar-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #0a0a0a;
}

[data-theme="light"] .sidebar-close:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Logo Area */
.sidebar-logo {
    padding: 3rem 1.5rem 2rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[data-theme="light"] .sidebar-logo {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.sidebar-logo img {
    max-width: 200px;
    width: auto;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    filter: brightness(1);
    transition: filter 0.3s ease;
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    overflow-y: auto;
}

.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .sidebar-nav-link {
    color: rgba(10, 10, 10, 0.8);
}

.sidebar-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
    opacity: 0.15;
    transition: width 0.3s ease;
}

.sidebar-nav-link:hover::before,
.sidebar-nav-link.active::before {
    width: 100%;
}

.sidebar-nav-link:hover,
.sidebar-nav-link.active {
    color: #fff;
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .sidebar-nav-link:hover,
[data-theme="light"] .sidebar-nav-link.active {
    color: var(--color-primary);
    background: rgba(220, 38, 38, 0.05);
}

/* Nav Link Icon */
.nav-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    transition: all 0.3s ease;
}

[data-theme="light"] .nav-link-icon {
    background: rgba(0, 0, 0, 0.05);
}

.sidebar-nav-link:hover .nav-link-icon,
.sidebar-nav-link.active .nav-link-icon {
    background: var(--color-primary);
    color: #0a0a0a;
}

.nav-link-icon i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

[data-theme="light"] .nav-link-icon i {
    color: rgba(10, 10, 10, 0.7);
}

.sidebar-nav-link:hover .nav-link-icon i,
.sidebar-nav-link.active .nav-link-icon i {
    color: #0a0a0a;
}

/* Nav Link Text */
.nav-link-text {
    flex: 1;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

/* Nav Link Arrow */
.nav-link-arrow {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.sidebar-nav-link:hover .nav-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.nav-link-arrow i {
    font-size: 0.75rem;
    color: var(--color-primary);
}

/* CTA Button */
.sidebar-cta {
    padding: 1rem 1.5rem;
    margin-top: auto;
}

.sidebar-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #0a0a0a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.sidebar-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.sidebar-cta-btn i {
    font-size: 1rem;
}

/* Contact Info */
.sidebar-contact {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .sidebar-contact {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.sidebar-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

[data-theme="light"] .sidebar-contact-item {
    color: rgba(10, 10, 10, 0.6);
}

.sidebar-contact-item:hover {
    color: var(--color-primary);
}

.sidebar-contact-item i {
    width: 20px;
    text-align: center;
    color: var(--color-primary);
}

/* Social Links */
.sidebar-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .sidebar-social {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.sidebar-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

[data-theme="light"] .sidebar-social-link {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(10, 10, 10, 0.7);
}

.sidebar-social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #0a0a0a;
    transform: translateY(-3px);
}

.sidebar-social-link i {
    font-size: 1rem;
}

/* Body scroll lock when sidebar is open */
body.sidebar-open {
    overflow: hidden;
}

/* Animate nav links on open */
.mobile-sidebar.is-open .sidebar-nav-link {
    animation: slideInRight 0.4s ease forwards;
    opacity: 0;
    transform: translateX(20px);
}

.mobile-sidebar.is-open .sidebar-nav-link:nth-child(1) { animation-delay: 0.1s; }
.mobile-sidebar.is-open .sidebar-nav-link:nth-child(2) { animation-delay: 0.15s; }
.mobile-sidebar.is-open .sidebar-nav-link:nth-child(3) { animation-delay: 0.2s; }
.mobile-sidebar.is-open .sidebar-nav-link:nth-child(4) { animation-delay: 0.25s; }
.mobile-sidebar.is-open .sidebar-nav-link:nth-child(5) { animation-delay: 0.3s; }

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .sidebar-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .sidebar-nav-link {
        padding: 1.25rem 1.5rem;
    }
    
    .nav-link-icon {
        width: 44px;
        height: 44px;
    }
}

/* Print Styles */
@media print {
    .header,
    .fab-container,
    .scroll-to-top,
    .mobile-sidebar {
        display: none !important;
    }
}