/**
 * I-O AUTOS — Master Stylesheet
 * High-End Luxury Automotive Dealership Design System
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
    /* Color Palette - Deep High Contrast Luxury */
    --color-bg-main: #090a0f;
    --color-bg-card: #11131a;
    --color-bg-card-hover: #161a24;
    --color-bg-glass: rgba(14, 17, 24, 0.82);
    --color-bg-glass-heavy: rgba(9, 10, 15, 0.94);
    
    /* Text Tones */
    --color-text-primary: #ffffff;
    --color-text-secondary: #c2c7d2;
    --color-text-muted: #7b8292;
    --color-text-inverse: #090a0f;

    /* Brand Accents */
    --color-crimson: #d32f2f;
    --color-crimson-hover: #b81d24;
    --color-crimson-light: #ff4d4d;
    --color-crimson-glow: rgba(211, 47, 47, 0.35);
    --color-cyan: #00d2d3;
    --color-whatsapp: #25D366;
    
    /* Borders & Lines */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.18);
    --color-border-active: rgba(211, 47, 47, 0.6);

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Sizing & Layout */
    --header-height: 88px;
    --header-height-mobile: 72px;
    --container-max-width: 1320px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows & Glows */
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-luxury: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.06);
    --shadow-glow-crimson: 0 8px 24px var(--color-crimson-glow);

    /* Transitions */
    --transition-fast: 0.18s ease;
    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2. GLOBAL RESETS & FOUNDATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg-main);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.drawer-open {
    overflow: hidden;
    touch-action: none;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    user-select: none;
}

ul, ol {
    list-style: none;
}

/* Accessible focus ring */
:focus-visible {
    outline: 2px solid var(--color-crimson);
    outline-offset: 3px;
}

/* Layout Container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================================================
   3. 2026 MODERN BUTTONS & UI ATOMS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: var(--radius-full);
    transition: var(--transition-smooth);
    position: relative;
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-crimson {
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.35);
}

.btn-crimson:hover {
    background: linear-gradient(135deg, #ff1a26 0%, #d32f2f 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.55);
}

.btn-crimson:active {
    transform: translateY(0) scale(0.98);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    backdrop-filter: blur(8px);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #128C7E;
    color: #ffffff;
}

.btn-whatsapp:hover {
    background: #25D366;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}


/* Status Badges */
.panel-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.panel-status-pill.pill-cyan {
    background: rgba(0, 210, 211, 0.12);
    color: #00d2d3;
    border-color: rgba(0, 210, 211, 0.3);
}

/* ==========================================================================
   4. UNIVERSAL SMART STICKY HEADER
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background: rgba(9, 10, 15, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease,
                height 0.3s ease,
                box-shadow 0.3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

.site-header.header-scrolled {
    height: 74px;
    background: var(--color-bg-glass-heavy);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* Brand Logo Styling (Vector Image) */
.site-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.site-brand:hover {
    opacity: 0.92;
}

.brand-logo-img {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

.brand-logo-drawer {
    height: 42px;
    max-width: 190px;
}


/* Desktop Navigation (Moved away from logo with generous margin & balanced gap) */
.nav-desktop {
    display: flex;
    align-items: center;
    margin-left: 44px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    padding: 8px 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--color-crimson);
    box-shadow: 0 0 8px var(--color-crimson);
    transition: width var(--transition-smooth);
}

.nav-link:hover {
    color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: #ffffff;
}

/* Header Action Utilities */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Mobile Dealership Address TopBar (Visible on Mobile <= 768px, Texas Dealer Requirement) */
.mobile-address-topbar {
    display: none;
    background: #08090d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0;
    width: 100%;
}

.mobile-address-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.2;
    transition: color var(--transition-fast);
}

.mobile-topbar-link:hover,
.mobile-topbar-link:active {
    color: #ffffff;
}

.topbar-map-pin {
    color: var(--color-crimson);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(229, 9, 20, 0.6));
}

.mobile-topbar-address-text {
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 110px);
}

.mobile-topbar-map-badge {
    color: var(--color-crimson);
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.7rem;
    flex-shrink: 0;
    text-decoration: underline;
}

/* Desktop Dealership Address Capsule (Streamlined, Single-Line, Low-Profile) */
.header-address-capsule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.header-address-capsule:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.capsule-pin-icon {
    color: var(--color-crimson);
    flex-shrink: 0;
}

.capsule-address-text {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: inherit;
}

/* Tablet & Intermediate Desktop Responsiveness */
@media (max-width: 1240px) {
    .nav-desktop {
        margin-left: 20px;
    }
    .nav-list {
        gap: 20px;
    }
    .header-address-capsule {
        padding: 7px 12px;
    }
    .capsule-address-text {
        font-size: 0.74rem;
    }
}

/* Legacy .btn-verify-vin fallback if referenced elsewhere */
.btn-verify-vin {
    font-size: 0.8rem;
    padding: 9px 18px;
    border-radius: var(--radius-full);
}

/* Compare Counter Pill */
.btn-compare-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.btn-compare-pill:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.09);
}

.icon-compare {
    width: 16px;
    height: 16px;
}

.compare-val {
    color: var(--color-crimson);
    font-weight: 700;
}

/* Mobile Hamburger Toggle */

.mobile-quick-call {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    color: #ffffff;
    transition: var(--transition-fast);
}

.mobile-quick-call:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
}

/* Regular Animating 3-Line Mobile Hamburger Toggle */
.mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
    padding: 0;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.mobile-toggle:hover,
.mobile-toggle:active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2.2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                background-color 0.2s ease;
    transform-origin: center;
}

/* Smooth Transformation to "X" when Active */
.mobile-toggle.active {
    background: rgba(229, 9, 20, 0.18);
    border-color: var(--color-crimson);
}

.mobile-toggle.active .line-1 {
    transform: translateY(6.7px) rotate(45deg);
    background-color: #ffffff;
}

.mobile-toggle.active .line-2 {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-toggle.active .line-3 {
    transform: translateY(-6.7px) rotate(-45deg);
    background-color: #ffffff;
}

/* ==========================================================================
   5. MOBILE NAVIGATION DRAWER
   ========================================================================== */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    will-change: opacity;
    touch-action: manipulation;
}

.mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 380px);
    height: 100vh;
    background: #0d0f15;
    border-left: 1px solid var(--color-border);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.mobile-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    overflow-y: auto;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.drawer-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
}

.drawer-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.drawer-status-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 20px 0;
}

.drawer-location {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-location strong {
    display: block;
    font-size: 0.85rem;
    font-family: var(--font-heading);
}

.drawer-location small {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.drawer-nav {
    flex: 1;
}

.drawer-list li {
    margin-bottom: 6px;
}

.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.drawer-link:hover,
.drawer-link.active {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-left: 3px solid var(--color-crimson);
}

.drawer-link.active {
    color: var(--color-crimson);
}

.drawer-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   6. SECTION 1: HERO BANNER & DUAL CONSOLE
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Layered Backdrops */
.hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}


/* Hero Slides Track & Cross-Fade Transitions */
.hero-slides-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-slide-item {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.hero-slide-item.active {
    opacity: 0.94;
    transform: scale(1.0);
    z-index: 1;
}

.hero-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.92;
    transform: scale(1.02);
    animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
    0% { transform: scale(1.06); }
    100% { transform: scale(1.0); }
}

.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, 
        #090a0f 0%, 
        rgba(9, 10, 15, 0.95) 35%, 
        rgba(9, 10, 15, 0.72) 65%, 
        rgba(9, 10, 15, 0.3) 100%
    );
}

.hero-ambient-glow {
    position: absolute;
    top: 30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(211, 47, 47, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-text-block {
    max-width: 660px;
    margin-bottom: 36px;
}

/* High-Contrast Hero Text Shield / Protective Glass Wrapper
   Guarantees 100% legibility over any background car image (even white or high-key orientations) */
.hero-text-card {
    display: inline-block;
    background: rgba(9, 11, 17, 0.80);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 34px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.78), 0 0 1px 1px rgba(255, 255, 255, 0.08);
    max-width: 660px;
    width: 100%;
}

.hero-text-card .hero-badge {
    margin-bottom: 18px;
}

.hero-text-card .hero-title {
    margin-bottom: 14px;
}

.hero-text-card .hero-subtitle {
    margin-bottom: 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-crimson);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-crimson);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.badge-text {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 18px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   7. 2026 STREAMLINED LOW-PROFILE HERO SEARCH CONSOLE
   ========================================================================== */
.hero-search-wrapper {
    background: rgba(14, 17, 24, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08);
    padding: 16px 20px;
    max-width: 960px;
    margin-top: 24px;
    position: relative;
    z-index: 10;
}

/* Condition Tabs (All | Brand New | Pre-Owned) */
.condition-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cond-tab-btn {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.cond-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.cond-tab-btn.active {
    background: #ffffff;
    color: #090a0f;
    border-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Slim Search Fields Row */
.search-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: flex-end;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-label {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.field-select-wrap {
    position: relative;
}

.search-select {
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 32px 0 12px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.search-select option {
    background: #11141c;
    color: #ffffff;
}

.search-select:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.search-select:focus {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.3);
}

.field-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.btn-search-execute {
    height: 44px;
    padding: 0 24px;
}

/* ==========================================================================
   8. SMART SCROLL TO TOP BUTTON
   ========================================================================== */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-glass-heavy);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px var(--color-crimson-glow);
}

/* ==========================================================================
   11. SECTION 3: FEATURED / AVAILABLE INVENTORY GRID
   ========================================================================== */
.inventory-grid-section {
    background-color: #f6f8fb;
    color: #12151c;
    padding-top: 70px;
    padding-bottom: 90px;
    position: relative;
    z-index: 6;
}

.inventory-section-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.title-dark {
    color: #0d0f15 !important;
}

.eyebrow-light {
    color: var(--color-crimson) !important;
}

.section-description-dark {
    font-size: 0.98rem;
    color: #5e6677;
    max-width: 680px;
    margin-top: 6px;
    line-height: 1.5;
}

/* Filter Chips Bar */
.inventory-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.filter-chip {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: #e6e9f0;
    color: #4b5363;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition-fast);
}

.filter-chip:hover {
    background: #dadfe9;
    color: #11131a;
}

.filter-chip.active {
    background: #0d0f15;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Vehicle Cards Grid */
.vehicle-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Vehicle Card (Modern Luxury Exotic Standard) */
.vehicle-card {
    background: #0d0f17;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease,
                border-color 0.25s ease;
}

.vehicle-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85), 0 0 22px rgba(229, 9, 20, 0.22);
    border-color: rgba(229, 9, 20, 0.45);
}

/* Card Media */
.card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #090b10;
}

.card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Badges */
.card-badges-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.card-badge {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(10, 12, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.card-badge.badge-dark {
    background: rgba(10, 12, 18, 0.85);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

.card-badge.badge-crimson {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(229, 9, 20, 0.45);
}

.card-badge.badge-cyan {
    background: rgba(0, 210, 211, 0.2);
    border-color: rgba(0, 210, 211, 0.45);
    color: #00d2d3;
}

.chip-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
}

.chip-dot.dot-crimson {
    background: #e50914;
    box-shadow: 0 0 6px #e50914;
}

.card-badge.badge-light {
    background: #ffffff;
    color: #11131a;
}

/* Compare Button */
.btn-card-compare {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    background: rgba(10, 12, 18, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0.9;
    transform: translateY(0);
    transition: all 0.25s ease;
    z-index: 2;
    cursor: pointer;
}

.vehicle-card:hover .btn-card-compare {
    opacity: 1;
}

.btn-card-compare:hover,
.btn-card-compare.active {
    opacity: 1;
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.55);
}

/* Card Body */
.card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: transparent;
}

.card-year {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-crimson);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.card-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.card-title a:hover {
    color: var(--color-crimson);
}

/* Specs Highlight Matrix */
.card-specs-highlight {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.spec-highlight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    line-height: 1.3;
}

.spec-highlight-label {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.spec-highlight-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

/* Specs Footer */
.card-footer-specs {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spec-items {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 3px 8px;
    border-radius: 6px;
}

.spec-icon {
    color: var(--color-crimson);
}

.card-price-action {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-price {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-crimson);
    border: 1px solid var(--color-crimson);
    padding: 7px 15px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-read-more:hover {
    background: #c71d2e;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45);
    transform: translateX(2px);
}

/* Bottom CTA */
.inventory-bottom-cta {
    margin-top: 50px;
    text-align: center;
}

.btn-large {
    padding: 15px 36px;
    font-size: 1rem;
    border-radius: var(--radius-full);
}

/* ==========================================================================
   12. QUICK VIN VERIFICATION MODAL
   ========================================================================== */
.vin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vin-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.vin-modal {
    background: #0f1219;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 580px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.1);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    color: #ffffff;
}

.vin-modal-backdrop.active .vin-modal {
    transform: translateY(0) scale(1);
}

.vin-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.modal-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 4px;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
}

.modal-close-btn {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

.modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.vin-modal-body {
    padding: 24px;
}

.modal-vin-display {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.modal-vin-display .label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.modal-vin-display .code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-vin-display strong {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: #ffffff;
}

.badge-verified {
    font-size: 0.72rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.modal-checks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.check-info strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.check-info small {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.vin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .vehicle-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .vehicle-cards-grid {
        grid-template-columns: 1fr;
    }

    .modal-checks-grid {
        grid-template-columns: 1fr;
    }

    .btn-card-compare {
        opacity: 1;
        transform: translateY(0);
    }

    .vin-modal-footer {
        flex-direction: column;
    }

    .vin-modal-footer .btn {
        width: 100%;
    }
}

/* ==========================================================================
   SECTION 2: CATEGORY QUICK-PILLS / BODY STYLE CAROUSEL
   ========================================================================== */
.category-section {
    padding-top: 100px;
    padding-bottom: 130px;
    position: relative;
    z-index: 5;
    background: linear-gradient(180deg, var(--color-bg-main) 0%, #0d0f17 100%);
}

@media (min-width: 992px) {
    .category-section {
        padding-top: 110px;
        padding-bottom: 140px;
    }
    .section-header-compact {
        margin-bottom: 38px;
    }
}

.section-header-compact {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.section-eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--color-crimson);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* Nav Controls */
.carousel-nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.carousel-arrow:active {
    transform: translateY(0);
}

/* Carousel Track */
.category-carousel-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Category Card */
.category-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.3s ease;
    box-shadow: var(--shadow-subtle);
    position: relative;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(211, 47, 47, 0.45);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px var(--color-crimson-glow);
}

.category-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #06070a;
}

.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover .category-img {
    transform: scale(1.07);
}

.category-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 19, 26, 0.95) 0%, rgba(17, 19, 26, 0.2) 60%, transparent 100%);
}

.category-info {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.category-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.category-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
}

.category-arrow {
    color: var(--color-crimson);
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform var(--transition-fast);
}

.category-card:hover .category-arrow {
    transform: translateX(4px);
}

.category-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.25;
}

.category-sub {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dots on Mobile */
.category-scroll-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.cat-dot.active {
    background: var(--color-crimson);
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--color-crimson);
}

/* Responsive for Category Carousel */
@media (max-width: 1200px) {
    .category-carousel-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .category-carousel-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .category-card {
        flex: 0 0 250px;
        scroll-snap-align: start;
    }

    .category-scroll-dots {
        display: flex;
    }

    .carousel-nav-controls {
        display: none;
    }
}


/* ==========================================================================
   SECTION 4: GLOBAL EXPORT LOGISTICS ("From Texas to the World")
   ========================================================================== */
.export-logistics-section {
    background: radial-gradient(circle at 50% 25%, rgba(229, 9, 20, 0.08) 0%, rgba(9, 10, 15, 0.98) 65%, #08090d 100%);
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.export-logistics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 9, 20, 0.5), transparent);
}

.section-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 52px;
}

.section-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 6px 16px;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-radius: var(--radius-full);
    margin-bottom: 18px;
    box-shadow: 0 0 16px rgba(229, 9, 20, 0.25);
}

.pulsing-beacon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 8px #e50914;
    animation: beaconPulse 1.8s ease-in-out infinite;
}

@keyframes beaconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* 1. Global Logistics Map Card */
.logistics-map-card {
    background: rgba(14, 16, 24, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 32px rgba(229, 9, 20, 0.06);
    overflow: hidden;
    margin-bottom: 50px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    flex-wrap: wrap;
    gap: 16px;
}

.map-status-indicator {
    display: flex;
    align-items: center;
    gap: 14px;
}

.indicator-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: var(--color-crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.indicator-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

.indicator-subtitle {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.destination-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dest-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.dest-pill:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

.dest-pill.active {
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 3px 14px rgba(229, 9, 20, 0.45);
}

/* Map Viewport & SVG Display */
.map-viewport {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 25% 40%, rgba(229, 9, 20, 0.08) 0%, rgba(7, 8, 12, 0.98) 75%);
    overflow: hidden;
    padding: 10px 0;
}

.world-logistics-svg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* Animated Flowing Route Lines */
@keyframes flowRoute {
    from { stroke-dashoffset: 48; }
    to { stroke-dashoffset: 0; }
}

.shipping-route-path {
    transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

.shipping-route-path.active {
    animation: flowRoute 2.2s linear infinite;
    stroke-width: 2.8;
}

.shipping-route-path.dimmed {
    opacity: 0.18;
}

/* Texas Origin Beacon Radar Pulse */
@keyframes radarPulse {
    0% { r: 12; opacity: 0.85; }
    100% { r: 44; opacity: 0; }
}

.origin-pulse-ring.ring-1 {
    animation: radarPulse 2.4s ease-out infinite;
}

.origin-pulse-ring.ring-2 {
    animation: radarPulse 2.4s ease-out 1.2s infinite;
}

.svg-dest-node {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.svg-dest-node.dimmed {
    opacity: 0.25;
}

.svg-dest-node:hover,
.svg-dest-node.active {
    transform: scale(1.08);
}

.dest-pin-outer {
    transition: stroke-width 0.2s ease, fill 0.2s ease;
}

.svg-dest-node.active .dest-pin-outer {
    fill: #e50914;
    stroke: #ffffff;
}

/* Dynamic Live Info Badge Overlay */
.route-info-badge {
    position: absolute;
    bottom: 22px;
    left: 24px;
    background: rgba(9, 10, 15, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    max-width: 540px;
    z-index: 10;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
    transition: var(--transition-fast);
}

.badge-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 8px #25D366;
}

.badge-dest-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}

.badge-metrics {
    display: flex;
    align-items: center;
    gap: 18px;
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-item small {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-item strong {
    font-size: 0.78rem;
    color: var(--color-text-primary);
}

/* Destination Quick-Stat Cards Carousel */
.dest-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dest-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.dest-card:hover,
.dest-card.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 9, 20, 0.15);
    transform: translateY(-2px);
}

.dest-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dest-region {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-crimson);
}

.dest-days {
    font-size: 0.74rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.dest-port {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.dest-method {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.dest-highlight {
    font-size: 0.68rem;
    color: #25D366;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dest-highlight::before {
    content: '✓';
    font-weight: 800;
}

/* 2. The 3 High-Contrast Luxury Trust Pillars */
.trust-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.pillar-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 38px 30px;
    position: relative;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.pillar-card:hover {
    transform: translateY(-6px);
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 0 24px var(--color-crimson-glow);
}

.pillar-card.pillar-featured {
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.08) 0%, rgba(14, 16, 24, 0.9) 100%);
    border-color: rgba(229, 9, 20, 0.35);
}

.pillar-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.pillar-icon-wrap.icon-featured {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25) 0%, rgba(229, 9, 20, 0.08) 100%);
    border-color: rgba(229, 9, 20, 0.45);
    color: #ffffff;
}

.pillar-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.pillar-badge.badge-featured {
    background: rgba(229, 9, 20, 0.18);
    color: #ff4d4d;
    border-color: rgba(229, 9, 20, 0.4);
}

.pillar-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.pillar-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    flex-grow: 1;
}

.pillar-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.pillar-checklist li {
    font-size: 0.82rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 9px;
}

.pillar-checklist li span {
    color: var(--color-crimson);
    font-weight: 800;
}

/* 3. Global Freight Estimator / Quick Inquiry CTA Banner */
.freight-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 38px 44px;
    background: linear-gradient(135deg, rgba(22, 25, 38, 0.95) 0%, rgba(12, 14, 20, 0.98) 100%);
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-radius: var(--radius-xl);
    gap: 28px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 28px rgba(229, 9, 20, 0.1);
}

.freight-cta-content {
    max-width: 620px;
}

.freight-cta-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.freight-cta-title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.freight-cta-sub {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.freight-cta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.btn-freight-whatsapp {
    gap: 9px;
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
}


/* ==========================================================================
   SECTION 5: SPOTLIGHT SPECIALS SHOWCASE CAROUSEL
   ========================================================================== */
.spotlight-section {
    background: radial-gradient(circle at 80% 30%, rgba(229, 9, 20, 0.07) 0%, rgba(9, 10, 15, 0.98) 70%, #08090d 100%);
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.section-subtitle-compact {
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    margin-top: 6px;
    max-width: 620px;
}

.spotlight-nav-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spotlight-counter {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    min-width: 55px;
    text-align: center;
}

.spotlight-counter span:first-child {
    color: #ffffff;
    font-size: 1.05rem;
}

/* Spotlight Main Stage Card */
.spotlight-stage {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: rgba(14, 16, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 36px rgba(229, 9, 20, 0.08);
    margin-bottom: 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.spotlight-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(18px);
}

.spotlight-slide.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.spotlight-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.15fr;
    min-height: 520px;
}

/* Content Side */
.spotlight-content {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.spotlight-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.spotlight-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text-secondary);
}

.spotlight-pill.pill-featured {
    background: rgba(229, 9, 20, 0.16);
    border-color: rgba(229, 9, 20, 0.4);
    color: #ff4d4d;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.3);
}

.spotlight-pill.pill-export {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.35);
    color: #25D366;
}

.spotlight-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 14px;
}

.spotlight-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 28px;
}

/* Telemetry Grid */
.spotlight-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.telemetry-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 12px 10px;
    text-align: center;
    transition: var(--transition-fast);
}

.telemetry-card:hover {
    border-color: rgba(229, 9, 20, 0.35);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.telemetry-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.telemetry-val {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.telemetry-val.val-crimson {
    color: var(--color-crimson);
}

.telemetry-sub {
    display: block;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    margin-top: 3px;
    white-space: nowrap;
}

/* Price & Action Row */
.spotlight-price-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.price-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.spotlight-price {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
}

.spotlight-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-spotlight-build {
    gap: 8px;
    padding: 11px 18px;
    font-size: 0.8rem;
}

.btn-spotlight-reserve {
    padding: 11px 22px;
    font-size: 0.8rem;
}

/* Media Side */
.spotlight-media-wrap {
    position: relative;
    overflow: hidden;
    background: #000000;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-image-holder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-stage:hover .spotlight-img {
    transform: scale(1.04);
}

.spotlight-gradient-shield {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 16, 24, 0.95) 0%, rgba(14, 16, 24, 0.2) 25%, transparent 60%, rgba(14, 16, 24, 0.5) 100%);
    pointer-events: none;
}

.spotlight-floating-tag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(9, 10, 15, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 7px 14px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.spotlight-floating-tag .tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 6px #25D366;
}

/* Spotlight Selector Thumbnail Bar */
.spotlight-selector-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.spotlight-tab {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.spotlight-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.spotlight-tab.active {
    background: rgba(229, 9, 20, 0.08);
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.tab-index {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-crimson);
}

.tab-info strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.tab-info small {
    display: block;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-crimson);
    transition: width 0.35s ease;
}

.spotlight-tab.active .tab-indicator {
    width: 100%;
}


/* ==========================================================================
   SECTION 6: CLIENT TRUST & NUMBERS COUNTERS
   ========================================================================== */
.trust-numbers-section {
    background: radial-gradient(circle at 50% 30%, rgba(229, 9, 20, 0.06) 0%, rgba(9, 10, 15, 0.98) 70%, #08090d 100%);
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

/* 1. Milestone Counters Grid */
.milestone-counters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.counter-card {
    background: rgba(14, 16, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 34px 22px;
    text-align: center;
    position: relative;
    transition: var(--transition-smooth);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.counter-card:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 22px var(--color-crimson-glow);
}

.counter-card.counter-featured {
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.12) 0%, rgba(14, 16, 24, 0.92) 100%);
    border-color: rgba(229, 9, 20, 0.4);
}

.counter-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.counter-icon-wrap.icon-featured {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25) 0%, rgba(229, 9, 20, 0.08) 100%);
    color: #ffffff;
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.35);
}

.counter-val-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}

.counter-number {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.counter-suffix {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-crimson);
}

.counter-label {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.counter-sub {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 2. Google Rating & Trust Assurance Bar */
.trust-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 16px;
}

.google-rating-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.google-logo-badge {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.04em;
    font-family: var(--font-heading);
}

.g-blue { color: #4285F4; }
.g-red { color: #EA4335; }
.g-yellow { color: #FBBC05; }
.g-green { color: #34A853; }

.rating-stars-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars-gold {
    color: #FFB800;
    font-size: 1.05rem;
    letter-spacing: 2px;
}

.rating-stars-wrap strong {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.rating-total-reviews {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.trust-assurance-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.assurance-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

/* 3. Testimonials Cards Grid */
.testimonials-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.review-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: var(--transition-smooth);
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px var(--color-crimson-glow);
}

.review-card.review-card-featured {
    background: linear-gradient(180deg, rgba(229, 9, 20, 0.06) 0%, rgba(14, 16, 24, 0.95) 100%);
    border-color: rgba(229, 9, 20, 0.35);
}

.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.review-stars {
    color: #FFB800;
    font-size: 0.95rem;
    letter-spacing: 2px;
}

.review-port-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.25);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.review-port-badge.badge-featured-pill {
    color: #ff4d4d;
    background: rgba(229, 9, 20, 0.12);
    border-color: rgba(229, 9, 20, 0.35);
}

.review-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    font-style: italic;
    flex-grow: 1;
}

.review-author-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.author-avatar-initials {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.author-avatar-initials.avatar-featured {
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}

.author-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
}

.author-location {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}


/* ==========================================================================
   SECTION 7: UNIVERSAL LUXURY FOOTER & SMART SCROLL-TO-TOP
   ========================================================================== */
.site-footer {
    background: #06070a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

/* 1. VIP Fleet Advisory / Newsletter Bar */
.footer-newsletter-section {
    padding: 60px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.06) 0%, transparent 60%);
}

.newsletter-inner-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: rgba(14, 16, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 38px 44px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
    flex-wrap: wrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.newsletter-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.newsletter-sub {
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    max-width: 520px;
}

.newsletter-form-col {
    flex: 1 1 380px;
    max-width: 500px;
}

.newsletter-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 5px 6px 5px 16px;
    transition: var(--transition-fast);
    position: relative;
}

.newsletter-input-group:focus-within {
    border-color: rgba(229, 9, 20, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.25);
}

.newsletter-mail-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: 10px;
}

.newsletter-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.85rem;
    width: 100%;
}

.newsletter-input::placeholder {
    color: var(--color-text-muted);
}

.btn-newsletter-submit {
    padding: 9px 18px;
    font-size: 0.76rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    gap: 6px;
}

.newsletter-privacy-note {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    margin-left: 14px;
}

/* 2. Main Multi-Column Links Directory */
.footer-main-directory {
    padding: 80px 0 60px;
}

.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.25fr;
    gap: 36px;
}

.footer-col-brand .footer-logo-img {
    height: 36px;
    width: auto;
    max-width: 155px;
    margin-bottom: 18px;
    object-fit: contain;
}

.footer-brand-bio {
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 22px;
}

.footer-hours-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 22px;
}

.hours-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-crimson);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.hours-row strong {
    color: #ffffff;
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.social-icon-btn:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

/* Link Columns */
.footer-col-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--color-crimson);
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links-list a {
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.footer-links-list a:hover {
    color: var(--color-crimson);
    transform: translateX(3px);
    display: inline-block;
}

/* Column 5: Austin Concierge */
.footer-contact-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-entry {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.contact-icon {
    color: var(--color-crimson);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-entry strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
}

.contact-entry span,
.contact-entry small {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.contact-phone-link {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    transition: color var(--transition-fast);
}

.contact-phone-link:hover {
    color: var(--color-crimson);
}

.contact-email-link {
    font-size: 0.82rem;
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.contact-email-link:hover {
    color: var(--color-crimson);
}

.btn-footer-wa {
    margin-top: 6px;
    font-size: 0.78rem;
    padding: 10px 16px;
}

/* 3. Compliance Badges & Settlement Strip */
.footer-badges-strip {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.25);
}

.badges-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.strip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-crimson);
}

/* 4. Bottom Legal & Copyright Bar */
.footer-bottom-bar {
    padding: 26px 0;
    background: #040507;
}

.bottom-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright-text {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.copyright-text strong {
    color: #ffffff;
}



.footprint-divider {

    margin: 0 6px;

    opacity: 0.35;

}



.footprint-link {

    color: var(--color-crimson, #e50914);

    font-weight: 700;

    text-decoration: none;

    letter-spacing: 0.02em;

    transition: color 0.2s ease, text-shadow 0.2s ease;

}



.footprint-link:hover {

    color: #ffffff;

    text-decoration: underline;

    text-shadow: 0 0 10px rgba(229, 9, 20, 0.6);

}

.legal-links-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 22px;
}

.legal-links-list a {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.legal-links-list a:hover {
    color: #ffffff;
}

/* Smart Floating Scroll-to-Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(9, 10, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 990;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(229, 9, 20, 0.5);
}

/* ==========================================================================
   UNIFIED RESPONSIVE SYSTEM (Mobile-First 2026 Standards)
   ========================================================================== */

/* Strict zero horizontal overflow across all viewports */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
    width: 100%;
}

/* Compare Badge Dot (Base / Desktop State) */
.compare-badge-dot {
    display: none;
}

/* 1. Large Tablets and Small Laptops (<= 1080px) */
@media (max-width: 1080px) {
    .nav-desktop {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .location-pill {
        display: none;
    }
}

/* 2. Tablets & Mobile Touch Devices (<= 820px) */
@media (max-width: 820px) {
    .category-carousel-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .category-card {
        flex: 0 0 250px;
        scroll-snap-align: start;
    }

    .category-scroll-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }

    .cat-dot {
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.2);
        transition: var(--transition-fast);
        cursor: pointer;
    }

    .cat-dot.active {
        width: 24px;
        background: var(--color-crimson);
        box-shadow: 0 0 10px var(--color-crimson);
    }

    .carousel-nav-controls {
        display: none;
    }
}

/* 3. Small Tablets & Standard Smartphones (<= 768px) */
@media (max-width: 768px) {
    /* Section 7: Footer Mobile Rules */
    .newsletter-inner-box {
        padding: 24px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .newsletter-form-col {
        width: 100%;
        max-width: 100%;
    }

    .newsletter-input-group {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: 8px 12px;
        gap: 8px;
    }

    .btn-newsletter-submit {
        width: 100%;
    }

    .footer-columns-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .badges-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bottom-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .legal-links-list {
        flex-wrap: wrap;
        gap: 14px;
    }

    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    /* Section 6: Trust Numbers Mobile Rules */
    .trust-numbers-section {
        padding: 60px 0;
    }

    .milestone-counters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .counter-card {
        padding: 24px 14px;
    }

    .counter-number {
        font-size: 2.1rem;
    }

    .counter-suffix {
        font-size: 1.5rem;
    }

    .counter-label {
        font-size: 0.92rem;
    }

    .trust-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
        margin-bottom: 32px;
        gap: 14px;
    }

    .google-rating-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .trust-assurance-pills {
        width: 100%;
    }

    .testimonials-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .review-card {
        padding: 24px 20px;
    }

    /* Section 5: Spotlight Specials Mobile Rules */
    .spotlight-section {
        padding: 60px 0;
    }

    .spotlight-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .spotlight-media-wrap {
        height: 260px;
        min-height: 260px;
        order: -1;
    }

    .spotlight-gradient-shield {
        background: linear-gradient(0deg, rgba(14, 16, 24, 0.95) 0%, transparent 60%);
    }

    .spotlight-content {
        padding: 24px 18px;
    }

    .spotlight-title {
        font-size: 1.65rem;
    }

    .spotlight-telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 24px;
    }

    .spotlight-price-action {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .spotlight-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .btn-spotlight-build,
    .btn-spotlight-reserve {
        width: 100%;
        justify-content: center;
    }

    .spotlight-selector-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .spotlight-tab {
        padding: 14px 16px;
    }

    /* Section 4: Export Logistics Mobile Rules */
    .export-logistics-section {
        padding: 60px 0;
    }

    .section-header-centered {
        margin-bottom: 36px;
    }

    .map-card-header {
        padding: 16px;
    }

    .destination-pills {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .destination-pills::-webkit-scrollbar {
        display: none;
    }

    .dest-pill {
        white-space: nowrap;
        font-size: 0.72rem;
        padding: 6px 12px;
    }

    .route-info-badge {
        position: static;
        margin: 14px;
        max-width: 100%;
    }

    .badge-metrics {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dest-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .trust-pillars-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 36px;
    }

    .pillar-card {
        padding: 26px 20px;
    }

    .freight-cta-banner {
        padding: 24px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .freight-cta-title {
        font-size: 1.3rem;
    }

    .freight-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-freight-quote,
    .btn-freight-whatsapp {
        width: 100%;
    }

    :root {
        --header-height: 86px;
    }

    /* Universal Smart Header on Mobile */
    .site-header {
        height: auto !important;
        min-height: 86px !important;
        background: rgba(9, 10, 15, 0.96) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        padding: 0;
    }

    .site-header.header-scrolled {
        height: auto !important;
        min-height: 86px !important;
    }

    .mobile-address-topbar {
        display: block !important;
    }

    .header-inner {
        padding-left: 18px;
        padding-right: 18px;
        height: 68px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .site-brand {
        display: flex;
        align-items: center;
        max-width: 220px;
        flex-shrink: 0;
    }

    .brand-logo-img {
        height: 46px !important;
        max-height: 48px !important;
        width: auto !important;
        max-width: 210px !important;
        object-fit: contain;
        filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgba(229, 9, 20, 0.25)) !important;
        transition: transform 0.2s ease;
    }

    .site-brand:active .brand-logo-img {
        transform: scale(0.97);
    }

    .header-address-capsule {
        display: none !important;
    }

    /* Header Actions Group: Streamlined Mobile Navigation */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0;
    }

    /* 1. Verify VIN Button - Hidden on mobile */
    .site-header .btn-verify-vin {
        display: none !important;
    }

    /* 2. Compare Counter Pill -> Sleek Badge Button */
    .btn-compare-pill {
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
    }

    .btn-compare-pill .compare-label {
        display: none !important;
    }

    .btn-compare-pill .icon-compare {
        width: 17px !important;
        height: 17px !important;
        color: #ffffff;
    }

    .compare-badge-dot {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--color-crimson);
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: 800;
        display: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 8px rgba(229, 9, 20, 0.6);
        border: 1.5px solid #090a0f;
    }

    .compare-badge-dot.active {
        display: flex !important;
    }

    /* 3. Quick Call Button */
    .mobile-quick-call {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
    }

    .mobile-quick-call:hover,
    .mobile-quick-call:active {
        background: var(--color-crimson) !important;
        border-color: var(--color-crimson) !important;
    }

    /* 4. Luxury Mobile Hamburger Button (High-Value Dealership Standard) */
    .mobile-toggle {
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5.5px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }

    .mobile-toggle:hover,
    .mobile-toggle:active {
        background: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(229, 9, 20, 0.3) !important;
    }

    .hamburger-line {
        display: block !important;
        width: 24px !important;
        height: 2.8px !important;
        background-color: #ffffff !important;
        border-radius: 3px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    }

    .mobile-toggle.active {
        background: rgba(229, 9, 20, 0.22) !important;
        border-color: var(--color-crimson) !important;
        box-shadow: 0 0 18px rgba(229, 9, 20, 0.45) !important;
    }

    .mobile-toggle.active .line-1 {
        transform: translateY(8.3px) rotate(45deg) !important;
    }

    .mobile-toggle.active .line-2 {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .mobile-toggle.active .line-3 {
        transform: translateY(-8.3px) rotate(-45deg) !important;
    }

    /* Hero Section */
    .hero-section {
        padding-top: calc(var(--header-height) + 12px);
        min-height: 82vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 24px;
        position: relative;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        gap: 20px;
    }

    .hero-text-block {
        margin-bottom: 0;
        width: 100%;
    }

    .hero-text-card {
        padding: 8px 4px !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    .hero-badge {
        background: rgba(0, 0, 0, 0.65) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 6px 14px !important;
        margin-bottom: 12px !important;
        font-size: 0.72rem !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    }

    .hero-title {
        font-size: clamp(1.85rem, 5.5vw, 2.35rem) !important;
        line-height: 1.14 !important;
        margin-bottom: 10px !important;
        text-shadow: 0 3px 20px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    }

    .hero-subtitle {
        font-size: 0.98rem !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        margin-bottom: 0 !important;
    }

    .hero-search-wrapper {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        background: rgba(10, 13, 20, 0.78) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
        margin-top: auto !important;
        width: 100% !important;
    }

    .condition-tabs-bar {
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .cond-tab-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    .search-fields-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .search-field {
        min-width: 0 !important;
    }

    .search-label {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
    }

    .search-select {
        height: 40px !important;
        font-size: 0.8rem !important;
        padding: 0 28px 0 10px !important;
    }

    .field-chevron {
        right: 10px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .search-action {
        grid-column: 1 / -1 !important;
        margin-top: 4px !important;
    }

    .btn-search-execute {
        height: 44px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* Category Section */
    .category-section {
        padding-top: 36px;
        padding-bottom: 85px;
    }

    /* Inventory Grid */
    .vehicle-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .inventory-section-header {
        margin-bottom: 28px;
    }

    .inventory-filter-chips {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .inventory-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* 4. Ultra-Compact Mobile Phones (<= 420px) */
@media (max-width: 420px) {
    .header-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .brand-logo-img {
        height: 40px !important;
        max-width: 175px !important;
    }

    .header-actions {
        gap: 8px !important;
    }

    .site-header .btn-verify-vin {
        display: none !important;
    }

    .btn-compare-pill,
    .mobile-quick-call {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }

    .mobile-toggle {
        width: 44px !important;
        height: 44px !important;
        border-radius: 11px !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    .hamburger-line {
        width: 22px !important;
        height: 2.6px !important;
    }

    .mobile-toggle.active .line-1 {
        transform: translateY(7.6px) rotate(45deg) !important;
    }

    .mobile-toggle.active .line-3 {
        transform: translateY(-7.6px) rotate(-45deg) !important;
    }

    .hero-text-card {
        padding: 4px 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .hero-title {
        font-size: 2.05rem;
    }
}

/* 5. Small Phones & 320px Screen Precision (Ensures Hamburger is 100% visible & layout never breaks) */
@media (max-width: 360px) {
    :root {
        --header-height: 82px;
    }

    .mobile-address-topbar {
        padding: 4px 0 !important;
    }

    .mobile-topbar-link {
        font-size: 0.65rem !important;
        gap: 4px !important;
    }

    .mobile-topbar-address-text {
        max-width: calc(100vw - 105px) !important;
    }

    .mobile-topbar-map-badge {
        font-size: 0.64rem !important;
    }

    .header-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        height: 60px !important;
        gap: 6px !important;
    }

    .site-brand {
        max-width: 165px !important;
    }

    .brand-logo-img {
        height: 38px !important;
        max-width: 155px !important;
    }

    .header-actions {
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .btn-compare-pill,
    .mobile-quick-call {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }

    .mobile-toggle {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        gap: 4.5px !important;
        flex-shrink: 0 !important;
    }

    .hamburger-line {
        width: 20px !important;
        height: 2.5px !important;
    }

    .hamburger-line {
        width: 17px !important;
        height: 2px !important;
        background-color: #ffffff !important;
    }

    .mobile-toggle.active .line-1 {
        transform: translateY(5.5px) rotate(45deg) !important;
    }

    .mobile-toggle.active .line-3 {
        transform: translateY(-5.5px) rotate(-45deg) !important;
    }

    .hero-title {
        font-size: 1.85rem !important;
    }
}

/* ==========================================================================
   8. VEHICLE INVENTORY CATALOG PAGE (/inventory)
   ========================================================================== */

.catalog-page-main {
    background: var(--color-bg-primary);
    padding-top: calc(var(--header-height) + 16px);
    min-height: 100vh;
}

/* 8.1 Catalog Hero Header */
.catalog-hero-header {
    background: linear-gradient(180deg, rgba(14, 17, 24, 0.85) 0%, rgba(8, 9, 12, 0.4) 100%);
    border-bottom: 1px solid var(--color-border);
    padding: 32px 0 40px;
    position: relative;
}

.catalog-breadcrumbs {
    margin-bottom: 20px;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.breadcrumb-list a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-list a:hover {
    color: #ffffff;
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

.breadcrumb-list [aria-current="page"] {
    color: var(--color-crimson);
    font-weight: 600;
}

.catalog-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
}

.badge-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-crimson);
    box-shadow: 0 0 10px var(--color-crimson);
    animation: pulseDot 2s infinite;
}

.catalog-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.catalog-page-subtitle {
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* 8.2 Sticky Catalog Control Bar */
.catalog-control-section {
    position: sticky;
    top: var(--header-height);
    z-index: 950;
    background: rgba(9, 11, 17, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
    transition: top 0.3s ease;
}

.control-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 0 16px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-wrapper:focus-within {
    border-color: var(--color-crimson);
    box-shadow: 0 0 16px rgba(229, 9, 20, 0.25);
    background: rgba(255, 255, 255, 0.07);
}

.search-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: 8px;
}

.inventory-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.88rem;
    padding: 10px 0;
    width: 100%;
}

.inventory-search-input::placeholder {
    color: var(--color-text-muted);
}

.btn-clear-search {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.btn-clear-search:hover {
    color: #ffffff;
}

.control-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-mobile-filter {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    color: #ffffff;
    padding: 9px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: all var(--transition-fast);
}

.btn-mobile-filter:hover,
.btn-mobile-filter:active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.filter-count-badge {
    background: var(--color-crimson);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.sort-selector-wrapper {
    position: relative;
}

.inventory-sort-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 20px 9px 16px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--transition-fast);
}

.inventory-sort-select:hover,
.inventory-sort-select:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.inventory-sort-select option {
    background: #0d0f17;
    color: #ffffff;
}

.view-mode-switcher {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 3px;
}

.btn-view-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-view-toggle:hover {
    color: #ffffff;
}

.btn-view-toggle.active {
    background: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.45);
}

/* Active Chips & Metric Row */
.active-chips-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.results-metric {
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.results-number {
    color: #ffffff;
    font-weight: 800;
}

.chips-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.chip-remove-btn {
    background: transparent;
    border: none;
    color: var(--color-crimson);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.chip-remove-btn:hover {
    color: #ffffff;
}

.btn-clear-all-chips {
    background: transparent;
    border: none;
    color: var(--color-crimson);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.btn-clear-all-chips:hover {
    color: #ff3838;
}

/* 8.3 Dual Layout (Sidebar + Content) */
.catalog-main-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 80px;
    align-items: start;
}

/* 8.4 Desktop Filter Sidebar */
.catalog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 85px);
    max-height: calc(100vh - var(--header-height) - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.catalog-sidebar::-webkit-scrollbar {
    width: 4px;
}

.catalog-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.sidebar-sticky-inner {
    background: #0d0f17;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.btn-sidebar-reset {
    background: transparent;
    border: none;
    color: var(--color-crimson);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.btn-sidebar-reset:hover {
    color: #ff4757;
    text-decoration: underline;
}

/* Filter Groups */
.filter-group {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.filter-group-title {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.filter-group-header .filter-group-title {
    margin-bottom: 0;
}

/* Condition Pills */
.condition-pills-bar,
.drivetrain-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.filter-pill.active {
    background: var(--color-crimson);
    color: #ffffff;
    border-color: var(--color-crimson);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}

/* Body Style Chips Grid */
.body-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.body-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.body-chip:first-child {
    grid-column: span 2;
    justify-content: center;
}

.body-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.body-chip.active {
    background: rgba(229, 9, 20, 0.16);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.chip-count {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

/* Manufacturer Checkboxes */
.checkbox-filter-list {
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    padding-right: 4px;
}

.custom-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.custom-checkbox-row:hover {
    color: #ffffff;
}

.custom-checkbox-row input {
    display: none;
}

.checkbox-box {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.custom-checkbox-row input:checked + .checkbox-box {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.4);
}

.custom-checkbox-row input:checked + .checkbox-box::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.checkbox-label {
    flex: 1;
}

.checkbox-count {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* Price Range Slider */
.price-range-display {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-crimson);
    font-family: var(--font-heading);
}

.custom-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    margin: 12px 0 6px;
}

.custom-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-crimson);
    cursor: pointer;
    box-shadow: 0 0 10px var(--color-crimson);
    border: 2px solid #ffffff;
}

.slider-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* Export Clearance Toggle */
.filter-toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-info {
    display: flex;
    flex-direction: column;
}

.toggle-title {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
}

.toggle-desc {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--color-border);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
}

.switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}

.switch-toggle input:checked + .switch-slider {
    background-color: var(--color-crimson);
    border-color: var(--color-crimson);
}

.switch-toggle input:checked + .switch-slider::before {
    transform: translateX(20px);
}

/* 8.5 Vehicle Display Grid & List */
.vehicles-display-container.view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.vehicles-display-container.view-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Luxury Inventory Card */
.inventory-card {
    background: #0d0f17;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.32s ease,
                box-shadow 0.32s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.inventory-card:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(229, 9, 20, 0.14);
}

/* Card Media */
.card-media-wrap {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #080a0f;
}

.card-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.card-vehicle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.card-badges-cluster {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.badge-tag {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.badge-tag.badge-dark {
    background: rgba(9, 11, 17, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}

.badge-tag.badge-crimson {
    background: linear-gradient(135deg, #e50914 0%, #b81d24 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5);
}

.badge-tag.badge-cyan {
    background: rgba(0, 210, 211, 0.16);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.35);
    backdrop-filter: blur(8px);
}

.btn-inventory-compare {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(9, 11, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
    z-index: 2;
}

.btn-inventory-compare:hover,
.btn-inventory-compare.active {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.5);
}

/* Card Info Body */
.card-info-wrap {
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-header-meta {
    margin-bottom: 14px;
}

.card-year-eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-crimson);
    margin-bottom: 4px;
}

.card-vehicle-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.card-vehicle-title a {
    color: #ffffff;
    transition: color var(--transition-fast);
}

.card-vehicle-title a:hover {
    color: var(--color-crimson);
}

/* Spec Matrix */
.card-specs-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.spec-matrix-col {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.spec-matrix-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.spec-matrix-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logistics Pill */
.card-logistics-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 210, 211, 0.06);
    border: 1px solid rgba(0, 210, 211, 0.18);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    margin-bottom: 18px;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.pill-icon-shield {
    color: #00d2d3;
    flex-shrink: 0;
}

.logistics-text strong {
    color: #ffffff;
}

/* Action Footer */
.card-footer-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-price-block {
    display: flex;
    flex-direction: column;
}

.price-currency-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.price-value-amount {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.card-ctas-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-card-whatsapp {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #128C7E;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-card-whatsapp:hover {
    background: #25D366;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

.btn-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-card-readmore:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
    transform: translateY(-2px);
}

/* 8.6 List View Styles */
.view-list .inventory-card {
    flex-direction: row;
    align-items: stretch;
}

.view-list .card-media-wrap {
    width: 360px;
    height: auto;
    min-height: 250px;
    flex-shrink: 0;
}

.view-list .card-info-wrap {
    padding: 24px 28px;
}

.view-list .card-specs-matrix {
    grid-template-columns: repeat(4, 1fr);
}

/* 8.7 Empty Search State */
.inventory-empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-state-card {
    background: #0d0f17;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    max-width: 580px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.empty-icon-shield {
    color: var(--color-crimson);
    margin-bottom: 20px;
}

.empty-state-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
}

.empty-state-desc {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 26px;
}

.empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* 8.8 Pagination Controls */
.catalog-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 0 20px;
    border-top: 1px solid var(--color-border);
    margin-top: 36px;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-pagination-nav {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-pagination-nav:not(.disabled):hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
}

.btn-pagination-nav.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-numbers-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-number-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.page-number-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.page-number-btn.active {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}

/* 8.9 VIP Bespoke Sourcing Concierge Banner */
.vip-sourcing-banner {
    margin-top: 48px;
    background: linear-gradient(135deg, rgba(20, 24, 35, 0.95) 0%, rgba(9, 11, 17, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--color-crimson);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.sourcing-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.sourcing-eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-crimson);
    margin-bottom: 8px;
}

.sourcing-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.sourcing-desc {
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.6;
    max-width: 620px;
}

.sourcing-action-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.btn-sourcing-cta {
    padding: 12px 24px;
    font-size: 0.86rem;
}

/* 8.10 Mobile Filter Sheet / Slide-Up Drawer */
.mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 1098;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    touch-action: manipulation;
}

.mobile-filter-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: #0d0f17;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px 24px 0 0;
    z-index: 1099;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.mobile-filter-sheet.active {
    transform: translateY(0);
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.sheet-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sheet-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}

.btn-sheet-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}

.sheet-content-scroll {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.sheet-footer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: #090a0f;
    flex-shrink: 0;
}

.btn-sheet-reset {
    flex: 1;
}

.btn-sheet-apply {
    flex: 2;
}

/* 8.11 Responsive Rules for Catalog */
@media (max-width: 1024px) {
    .catalog-main-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        display: none;
    }

    .btn-mobile-filter {
        display: inline-flex;
    }

    .sourcing-banner-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sourcing-action-col {
        width: 100%;
        flex-direction: row;
    }

    .sourcing-action-col a {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .catalog-hero-header {
        padding: 24px 0 28px;
    }

    .catalog-page-title {
        font-size: 1.85rem;
    }

    .catalog-control-section {
        padding: 10px 0;
    }

    .control-bar-inner {
        gap: 10px;
    }

    .search-input-wrapper {
        min-width: 100%;
        order: 1;
    }

    .control-actions-group {
        width: 100%;
        justify-content: space-between;
        order: 2;
    }

    .vehicles-display-container.view-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* List view on mobile converts gracefully to vertical card */
    .view-list .inventory-card {
        flex-direction: column;
    }

    .view-list .card-media-wrap {
        width: 100%;
        height: 220px;
        min-height: auto;
    }

    .view-list .card-specs-matrix {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-info-wrap {
        padding: 18px 16px 16px;
    }

    .sourcing-banner-inner {
        padding: 24px 20px;
    }

    .sourcing-action-col {
        flex-direction: column;
    }

    .catalog-pagination-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .catalog-page-title {
        font-size: 1.6rem;
    }

    .card-footer-action-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .card-ctas-group {
        width: 100%;
    }

    .btn-card-readmore {
        flex: 1;
        justify-content: center;
    }
}


/* ==========================================================================
   SECTION 9: VEHICLE SINGLE DETAILS PAGE (/inventory/{slug})
   Actualizing Car Single UI Layout Template.jpg & (2).jpg
   ========================================================================== */

.car-single-page {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 90px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Breadcrumbs */
.single-breadcrumbs {
    margin-bottom: 18px;
    max-width: 100%;
    overflow: hidden;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    max-width: 100%;
    word-break: break-word;
}

.breadcrumb-list a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
    color: var(--color-crimson);
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.breadcrumb-list [aria-current="page"] {
    color: #ffffff;
    font-weight: 600;
}

/* Badges Bar */
.single-badges-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    max-width: 100%;
}

.single-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.single-badge.badge-crimson {
    background: var(--color-crimson);
    color: #ffffff;
}

.single-badge.badge-verified {
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.35);
}

.single-badge.badge-cyan {
    background: rgba(0, 210, 211, 0.15);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.35);
}

.single-badge.badge-dark {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Vehicle Headline Title */
.single-car-title {
    font-size: clamp(1.65rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Top Telemetry Strip (4-Cell Meta Strip) */
.single-telemetry-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
    width: 100%;
}

.telemetry-pill {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.telemetry-pill:hover {
    border-color: rgba(229, 9, 20, 0.4);
    transform: translateY(-2px);
}

.telemetry-icon {
    color: var(--color-crimson);
    flex-shrink: 0;
}

.telemetry-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.telemetry-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.telemetry-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Showcase Grid (Gallery on Left, Sidebar on Right) */
.single-showcase-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 60px;
}

/* Left: Gallery Column */
.gallery-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.gallery-main-viewer {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    background: #0d0f17;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.gallery-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.25s ease;
}

.gallery-main-viewer:hover .gallery-hero-img {
    transform: scale(1.02);
}

.gallery-expand-pill {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(10, 12, 19, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Interactive Thumbnail Slider */
.gallery-thumbs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.gallery-nav-arrow {
    width: 38px;
    height: 58px;
    background: rgba(16, 20, 31, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.gallery-nav-arrow:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.thumbs-track-container {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: 4px 2px;
}

.thumbs-track-container::-webkit-scrollbar {
    display: none;
}

.thumbs-track {
    display: flex;
    gap: 10px;
}

.thumb-item-btn {
    width: 86px;
    height: 58px;
    flex-shrink: 0;
    background: #0d0f17;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    opacity: 0.55;
    transition: all 0.25s ease;
    display: block;
}

.thumb-item-btn:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.03);
}

.thumb-item-btn.active {
    opacity: 1;
    border-color: var(--color-crimson);
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
    transform: scale(1.04);
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right: Sticky VIP Purchase & Sidebar */
.single-sidebar-column {
    position: sticky;
    top: 96px;
    align-self: start;
}

.single-sticky-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* VIP Price Card */
.vip-price-card {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.price-header-row {
    margin-bottom: 12px;
}

.price-title-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 4px;
}

.price-main-amount {
    font-size: 2.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.price-tags-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.price-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
}

.price-tag.tag-dark {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-tag.tag-cyan {
    background: rgba(0, 210, 211, 0.12);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.3);
}

.sidebar-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-vip-reserve {
    height: 52px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35);
    border-radius: 10px;
}

.btn-vip-whatsapp {
    height: 50px;
    font-size: 0.92rem;
    font-weight: 700;
    background: #25D366;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-vip-whatsapp:hover {
    background: #1ebc59;
    color: #ffffff;
    transform: translateY(-1px);
}

.sidebar-financing-note {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin: 4px 0;
    line-height: 1.4;
}

.btn-block {
    width: 100%;
}

/* Instant VIN Verification Card */
.instant-vin-card {
    background: rgba(13, 16, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 20px;
}

.vin-card-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.vin-card-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.vin-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
}

.vin-code-val {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-crimson);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-verify-status {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.4);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-verify-status:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
}

/* SECTION 3.2: VEHICLE OVERVIEW & SPECIFICATIONS */
.single-overview-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.overview-header-wrap {
    margin-bottom: 32px;
}

.overview-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.overview-narrative {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    max-width: 950px;
}

/* Essential Specifications Grid (6 Key Highlights) */
.essential-specs-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 36px;
}

.spec-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.spec-card:hover {
    border-color: rgba(229, 9, 20, 0.4);
    transform: translateY(-2px);
}

.spec-card-icon {
    stroke: var(--color-crimson);
    width: 22px;
    height: 22px;
}

.spec-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}

.spec-card-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    word-break: break-word;
}

/* Deep Specs & Equipment Checklists */
.specs-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.spec-col-box {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 28px;
}

.spec-box-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: -0.01em;
}

.spec-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spec-details-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
    gap: 12px;
}

.spec-prop-name {
    color: rgba(255, 255, 255, 0.6);
}

.spec-prop-val {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
}

.features-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.features-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.check-icon {
    flex-shrink: 0;
}

/* SECTION 3.3: GLOBAL LOGISTICS & SHIPPING ESTIMATOR */
.single-logistics-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.logistics-card-wrapper {
    background: rgba(13, 16, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.logistics-card-header {
    margin-bottom: 30px;
}

.logistics-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.logistics-headline {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.logistics-sub {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 800px;
}

.logistics-dual-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 32px;
    align-items: center;
}

.logistics-map-side {
    background: #0a0c13;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    padding: 10px;
}

.shipping-svg-map {
    width: 100%;
    height: auto;
    display: block;
}

.logistics-calc-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.calc-select {
    height: 46px;
    background: rgba(20, 24, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    padding: 0 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.calc-select:focus {
    border-color: var(--color-crimson);
}

.shipping-methods-row {
    display: flex;
    gap: 10px;
}

.method-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.method-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.method-btn.active {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.calc-result-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(0, 210, 211, 0.08);
    border: 1px solid rgba(0, 210, 211, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
}

.result-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
}

.result-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #00d2d3;
}

.btn-calc-quote {
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-radius: 8px;
}

.calc-guarantee-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* SECTION 3.4: DIRECT VEHICLE LEAD FORM & SHOWROOM CONTACT PANEL */
.single-contact-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lead-contact-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 32px;
}

.lead-form-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 32px;
}

.lead-form-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.lead-form-sub {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 24px;
    line-height: 1.5;
}

.form-row-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vehicle-inquiry-form .form-group {
    margin-bottom: 16px;
}

.vehicle-inquiry-form .form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.vehicle-inquiry-form .form-control {
    width: 100%;
    background: rgba(20, 24, 36, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    padding: 10px 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.vehicle-inquiry-form .form-control:focus {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
}

.btn-inq-submit {
    height: 48px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 10px;
    margin-top: 8px;
}

.showroom-info-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.showroom-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.showroom-card-desc {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 22px;
    line-height: 1.5;
}

.showroom-items-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.showroom-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.88rem;
}

.showroom-item-icon {
    color: var(--color-crimson);
    flex-shrink: 0;
    margin-top: 2px;
}

.showroom-item-icon.text-whatsapp {
    color: #25d366;
}

.showroom-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.showroom-item strong {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}

.showroom-item span {
    color: #ffffff;
    line-height: 1.4;
}

.map-text-link {
    font-size: 0.8rem;
    color: var(--color-crimson);
    text-decoration: none;
    font-weight: 700;
    margin-top: 2px;
}

.map-text-link:hover {
    text-decoration: underline;
}

.phone-link, .email-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.phone-link:hover, .email-link:hover {
    color: var(--color-crimson);
}

/* SECTION 3.5: RECOMMENDED VEHICLES CAROUSEL */
.single-recommended-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.recommended-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

.recommended-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.view-all-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-crimson);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.view-all-link:hover {
    opacity: 0.8;
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.recommended-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.recommended-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.rec-media-wrap {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: #0d0f17;
}

.rec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.recommended-card:hover .rec-img {
    transform: scale(1.05);
}

.rec-price-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(10, 12, 19, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.rec-info-wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rec-year {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-crimson);
}

.rec-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MOBILE STICKY BOTTOM ACTION BAR */
.mobile-sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 12, 19, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    padding: 10px 0;
    z-index: 990;
    display: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.mobile-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-bar-price {
    display: flex;
    flex-direction: column;
}

.m-price-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.m-price-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.mobile-bar-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-m-whatsapp {
    width: 44px;
    height: 44px;
    background: #25D366;
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

.btn-m-reserve {
    height: 44px;
    padding: 0 18px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR CAR SINGLE PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .single-showcase-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-width: 0;
        width: 100%;
    }

    .single-sidebar-column {
        position: static;
        min-width: 0;
        width: 100%;
    }

    .essential-specs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .logistics-dual-layout {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .recommended-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .car-single-page {
        padding-top: calc(var(--header-height) + 16px);
        padding-bottom: 96px; /* Space for mobile sticky bottom bar */
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .single-car-title {
        font-size: clamp(1.4rem, 5.5vw, 1.95rem);
        margin-bottom: 16px;
        line-height: 1.18;
    }

    .mobile-sticky-action-bar {
        display: block;
    }

    .single-telemetry-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .telemetry-pill {
        padding: 10px 12px;
        gap: 10px;
        min-width: 0;
    }

    .telemetry-text {
        min-width: 0;
    }

    .telemetry-value {
        font-size: 0.82rem;
    }

    .specs-columns-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        min-width: 0;
        width: 100%;
    }

    .features-checklist {
        grid-template-columns: 1fr;
    }

    .lead-contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        min-width: 0;
        width: 100%;
    }

    .form-row-dual {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .logistics-card-wrapper,
    .lead-form-card,
    .showroom-info-card,
    .spec-col-box,
    .vip-price-card,
    .instant-vin-card {
        padding: 20px 16px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .vin-display-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vin-code-val {
        font-size: 0.8rem;
        word-break: break-all;
    }

    .calc-result-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-calc-quote {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .essential-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        min-width: 0;
        width: 100%;
    }

    .spec-card {
        padding: 12px 10px;
        gap: 10px;
        min-width: 0;
    }

    .spec-card-info {
        min-width: 0;
    }

    .spec-card-value {
        font-size: 0.8rem;
    }

    .single-badges-bar {
        gap: 6px;
    }

    .single-badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .price-main-amount {
        font-size: 1.55rem;
        word-break: break-word;
    }

    .thumb-item-btn {
        width: 62px;
        height: 44px;
    }

    .gallery-nav-arrow {
        width: 28px;
        height: 44px;
        font-size: 1.1rem;
    }

    .recommended-grid {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .shipping-methods-row {
        flex-direction: column;
    }
}


/* ==========================================================================
   SECTION 10: DEDICATED VIN DECODER & TEXAS TITLE CLEARANCE (/vin-checker)
   ========================================================================== */

.vin-checker-page {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 80px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.06) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

.vin-hero-section {
    padding-bottom: 30px;
}

.vin-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.vin-hero-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.vin-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.vin-hero-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto 30px;
    max-width: 820px;
}

.vin-trust-pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.trust-pillar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.trust-pillar-item .pillar-icon {
    flex-shrink: 0;
}

/* SECTION 4.2: INTERACTIVE VIN INPUT CONSOLE */
.vin-console-section {
    padding: 10px 0 50px;
}

.vin-input-console-card {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.vin-input-console-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-crimson) 0%, #00d2d3 50%, var(--color-crimson) 100%);
    background-size: 200% 100%;
    animation: gradientShift 6s ease infinite;
}

.console-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.console-signal-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #25d366;
}

.signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 10px #25d366;
    animation: pulse 2s infinite;
}

.console-standard-pill {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
}

.vin-input-group {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.vin-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.vin-input-icon {
    position: absolute;
    left: 18px;
    color: var(--color-crimson);
    pointer-events: none;
    flex-shrink: 0;
}

.vin-main-input {
    width: 100%;
    height: 60px;
    padding: 0 140px 0 54px;
    background: rgba(10, 12, 19, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffffff;
    text-transform: uppercase;
    outline: none;
    transition: all 0.25s ease;
}

.vin-main-input:focus {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.2);
}

.vin-clear-btn {
    position: absolute;
    right: 88px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease;
}

.vin-clear-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vin-char-counter {
    position: absolute;
    right: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 10px;
    border-radius: 6px;
    user-select: none;
    transition: color 0.2s ease;
}

.vin-char-counter.valid {
    color: #25d366;
    background: rgba(37, 211, 102, 0.12);
}

.vin-char-counter.invalid {
    color: var(--color-crimson);
    background: rgba(229, 9, 20, 0.12);
}

.btn-decode-submit {
    height: 60px;
    padding: 0 32px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35);
}

.btn-radar-icon {
    flex-shrink: 0;
}

.vin-validation-message {
    margin-top: 14px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.4);
    color: #ffffff;
}

.vin-sample-chips-row {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sample-chips-label {
    font-size: 0.76rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sample-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sample-vin-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    transition: all 0.2s ease;
}

.sample-vin-chip:hover {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--color-crimson);
    transform: translateY(-1px);
}

.chip-car-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
}

.chip-vin-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

/* HOLOGRAPHIC SCANNING RADAR STATE */
.vin-scanning-state {
    margin: 40px 0;
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(229, 9, 20, 0.4);
    border-radius: 16px;
    padding: 44px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
}

.scanning-beam-radar {
    position: relative;
    width: 80px;
    height: 80px;
}

.radar-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(229, 9, 20, 0.4);
}

.circle-1 { animation: radarPulse 2s ease-out infinite; }
.circle-2 { animation: radarPulse 2s ease-out 0.6s infinite; }
.circle-3 { animation: radarPulse 2s ease-out 1.2s infinite; }

@keyframes radarPulse {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-crimson);
    border-top-color: transparent;
    border-left-color: transparent;
    animation: spin 1.2s linear infinite;
}

.scanning-headline {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin-bottom: 6px;
}

.scanning-step-text {
    font-size: 0.9rem;
    color: var(--color-crimson);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* DECODED RESULTS CONTAINER */
.vin-results-container {
    margin-top: 40px;
    animation: fadeIn 0.4s ease;
}

.vin-result-hero-card {
    background: rgba(16, 20, 31, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
}

.result-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.result-badges-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.res-vehicle-title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.2;
}

.res-vin-display {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
}

.res-vin-display strong {
    color: var(--color-crimson);
}

.dealership-stock-match-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(229, 9, 20, 0.1);
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-radius: 12px;
    padding: 12px 18px;
}

.match-card-media {
    width: 84px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d0f17;
}

.match-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.match-eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-crimson);
}

.match-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.btn-view-stock {
    padding: 6px 14px;
    font-size: 0.74rem;
    font-weight: 800;
    border-radius: 6px;
    margin-top: 4px;
    display: inline-block;
    text-decoration: none;
}

/* 4-BLOCK TELEMETRY QUAD GRID */
.vin-telemetry-quad-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.telemetry-box {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 24px;
}

.telemetry-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.box-icon {
    color: var(--color-crimson);
    flex-shrink: 0;
}

.box-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.telemetry-data-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.telemetry-data-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    gap: 12px;
}

.data-key {
    color: rgba(255, 255, 255, 0.55);
}

.data-val {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
}

/* OFFICIAL TEXAS TITLE & EXPORT CLEARANCE CERTIFICATE */
.export-title-certificate {
    background: linear-gradient(135deg, rgba(16, 20, 31, 0.95) 0%, rgba(10, 12, 19, 0.98) 100%);
    border: 2px solid rgba(229, 9, 20, 0.35);
    border-radius: 18px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    margin-bottom: 40px;
}

.certificate-watermark-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 14rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.015);
    pointer-events: none;
    letter-spacing: 0.1em;
    user-select: none;
    z-index: 1;
}

.cert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.cert-crest-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cert-shield-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-org-name {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--color-crimson);
    display: block;
}

.cert-main-heading {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    margin: 4px 0;
    letter-spacing: -0.01em;
}

.cert-compliance-note {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.45);
    display: block;
}

.cert-meta-tag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cert-meta-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.cert-token-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 800;
    color: #00d2d3;
    letter-spacing: 0.06em;
}

.cert-timestamp {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.cert-checkpoints-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
}

.checkpoint-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px;
}

.check-badge-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkpoint-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
    margin-bottom: 2px;
}

.checkpoint-status {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 4px;
}

.checkpoint-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.cert-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.cert-seal-text {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    display: block;
}

.cert-address-text {
    font-size: 0.76rem;
    color: #ffffff;
    display: block;
    margin-top: 2px;
}

.cert-actions-cluster {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-print-cert {
    height: 46px;
    padding: 0 20px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cert-whatsapp {
    height: 46px;
    padding: 0 20px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* SECTION 4.5: EDUCATIONAL AUTHORITY SECTION */
.vin-education-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.education-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.edu-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.edu-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 9, 20, 0.4);
}

.edu-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.edu-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}

.edu-card-desc {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
}

/* SECTION 4.6: VIN FAQ ACCORDION */
.vin-faq-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-accordion-wrap {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-accordion-item {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.faq-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    gap: 16px;
}

.faq-arrow-icon {
    font-size: 1.4rem;
    color: var(--color-crimson);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    line-height: 1;
}

.faq-question-btn[aria-expanded="true"] .faq-arrow-icon {
    transform: rotate(45deg);
}

.faq-answer-pane {
    padding: 0 24px 22px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.vin-sourcing-banner-section {
    padding-bottom: 30px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR VIN CHECKER PAGE
   ========================================================================== */

@media (max-width: 991px) {
    .education-cards-grid {
        grid-template-columns: 1fr;
    }

    .vin-telemetry-quad-grid {
        grid-template-columns: 1fr;
    }

    .cert-checkpoints-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vin-checker-page {
        padding-top: calc(var(--header-height) + 20px);
    }

    .vin-input-group {
        flex-direction: column;
    }

    .vin-main-input {
        height: 52px;
        font-size: 1rem;
        padding-right: 120px;
    }

    .btn-decode-submit {
        height: 52px;
        width: 100%;
        justify-content: center;
    }

    .vin-input-console-card {
        padding: 22px 18px;
    }

    .export-title-certificate {
        padding: 24px 18px;
    }

    .cert-meta-tag {
        align-items: flex-start;
    }

    .cert-actions-cluster {
        width: 100%;
        flex-direction: column;
    }

    .btn-print-cert, .btn-cert-whatsapp {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vin-checker-page {
        padding-top: calc(var(--header-height) + 16px);
    }

    .vin-hero-title {
        font-size: 1.45rem;
    }

    .vin-main-input {
        font-size: 0.88rem;
        padding-left: 44px;
        padding-right: 100px;
    }

    .vin-input-icon {
        left: 14px;
        width: 18px;
        height: 18px;
    }

    .vin-clear-btn {
        right: 74px;
    }

    .vin-char-counter {
        right: 10px;
        font-size: 0.68rem;
        padding: 4px 6px;
    }

    .sample-chips-list {
        flex-direction: column;
        width: 100%;
    }

    .sample-vin-chip {
        width: 100%;
        justify-content: space-between;
    }
}


/* ==========================================================================
   SECTION 11: GLOBAL EXPORT & OCEAN FREIGHT LOGISTICS (/global-export)
   ========================================================================== */

.global-export-page {
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 80px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

.export-hero-section {
    padding-bottom: 30px;
}

.export-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.export-hero-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.export-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.export-hero-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto 32px;
    max-width: 820px;
}

.export-telemetry-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.export-metric-pill {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.export-metric-pill:hover {
    border-color: rgba(229, 9, 20, 0.4);
    transform: translateY(-2px);
}

.metric-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-crimson);
    letter-spacing: -0.01em;
}

.metric-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* SECTION 5.2: THE TEXAS EXPORT ADVANTAGE */
.export-advantage-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.advantage-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.advantage-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.advantage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
}

.advantage-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}

.advantage-desc {
    font-size: 0.86rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
}

/* SECTION 5.3: 5-STEP EXPORT JOURNEY */
.export-journey-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.journey-timeline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.journey-step-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.journey-step-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 9, 20, 0.4);
}

.step-badge-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-crimson);
    line-height: 1;
    margin-bottom: 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.step-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.step-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    flex: 1;
    margin-bottom: 14px;
}

.step-meta-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #00d2d3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 210, 211, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    align-self: flex-start;
}

/* SECTION 5.4: INTERACTIVE FREIGHT ESTIMATOR & DIRECTORY */
.export-calculator-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-main-card {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    margin-bottom: 40px;
}

.calc-card-header {
    margin-bottom: 28px;
}

.calc-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.calc-headline {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.calc-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 780px;
}

.calc-inputs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.calc-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-input-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.calc-input-select {
    height: 48px;
    background: rgba(20, 24, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    padding: 0 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.calc-input-select:focus {
    border-color: var(--color-crimson);
}

.shipping-protocol-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.proto-btn {
    flex: 1;
    min-width: 130px;
    padding: 12px 10px;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.proto-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.proto-btn.active {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.calc-live-result-display {
    background: rgba(10, 12, 19, 0.95);
    border: 1px solid rgba(0, 210, 211, 0.3);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.result-route-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.route-hub {
    color: var(--color-crimson);
}

.route-arrow {
    color: rgba(255, 255, 255, 0.3);
}

.route-dest {
    color: #ffffff;
}

.result-metrics-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.res-metric-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}

.res-pill-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.res-pill-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
}

.btn-request-formal-quote {
    height: 48px;
    padding: 0 24px;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quote-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
    display: block;
    text-align: center;
}

/* PORT DIRECTORY TABLE */
.port-directory-wrapper {
    margin-top: 30px;
}

.directory-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.directory-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.directory-tabs-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dir-tab-btn {
    padding: 8px 14px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dir-tab-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.dir-tab-btn.active {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.directory-table-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 14px;
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.port-directory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 720px;
}

.port-directory-table th {
    background: rgba(10, 12, 19, 0.95);
    padding: 14px 18px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.port-directory-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    vertical-align: middle;
}

.port-directory-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.country-flag {
    font-size: 1.1rem;
    margin-right: 6px;
    vertical-align: middle;
}

.country-name {
    color: #ffffff;
    font-weight: 700;
}

.port-name {
    color: #ffffff;
    font-weight: 600;
}

.transit-badge {
    background: rgba(0, 210, 211, 0.12);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.3);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.freq-tag {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.method-specs {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.btn-table-inquire {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--color-crimson);
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(229, 9, 20, 0.1);
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 6px;
    white-space: nowrap;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-table-inquire:hover {
    background: var(--color-crimson);
    color: #ffffff;
}

/* SECTION 5.5: SHIPPING METHODS COMPARISON MATRIX */
.export-methods-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.methods-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.method-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.method-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.method-card.method-featured {
    border-color: rgba(229, 9, 20, 0.45);
    box-shadow: 0 16px 40px rgba(229, 9, 20, 0.15);
}

.method-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 12px;
}

.method-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.method-intro {
    font-size: 0.86rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
}

.method-pros-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    margin-bottom: 22px;
}

.method-pros-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.method-pros-list svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.method-ideal-for {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ideal-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.ideal-val {
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1.4;
}

/* SECTION 5.6: REQUIRED DOCUMENTATION */
.export-docs-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.docs-card-wrapper {
    background: rgba(13, 16, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.docs-header {
    margin-bottom: 28px;
}

.docs-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.docs-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.docs-sub {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 800px;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.doc-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px;
}

.doc-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(229, 9, 20, 0.15);
    color: var(--color-crimson);
    font-weight: 900;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.doc-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
}

.doc-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* SECTION 5.7: FAQ */
.export-faq-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* SECTION 5.8: CONSULTATION CARD */
.export-consultation-section {
    padding: 20px 0 60px;
}

.consultation-card-inner {
    background: linear-gradient(135deg, rgba(20, 24, 36, 0.92) 0%, rgba(10, 12, 19, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.consult-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.consult-headline {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.consult-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
    margin-bottom: 18px;
}

.consult-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.8);
}

.consult-detail strong {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.consult-contact-row a {
    color: var(--color-crimson);
    text-decoration: none;
    font-weight: 700;
}

.consult-contact-row a:hover {
    text-decoration: underline;
}

.consultation-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
}

.btn-consult-cta {
    height: 50px;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-consult-inventory {
    height: 48px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR GLOBAL EXPORT PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .export-telemetry-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantage-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .methods-comparison-grid {
        grid-template-columns: 1fr;
    }

    .docs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .global-export-page {
        padding-top: calc(var(--header-height) + 44px);
    }

    .export-hero-title {
        font-size: 1.7rem;
    }

    .calc-inputs-grid {
        grid-template-columns: 1fr;
    }

    .calc-live-result-display {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-action-right {
        width: 100%;
    }

    .btn-request-formal-quote {
        width: 100%;
    }

    .directory-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .directory-tabs-list {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .advantage-cards-grid,
    .journey-timeline-grid,
    .docs-grid {
        grid-template-columns: 1fr;
    }

    .consultation-card-inner {
        padding: 24px 20px;
    }

    .consultation-action {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .global-export-page {
        padding-top: calc(var(--header-height) + 48px);
    }

    .export-hero-title {
        font-size: 1.45rem;
    }

    .export-telemetry-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .export-metric-pill {
        padding: 12px 10px;
    }

    .shipping-protocol-toggles {
        flex-direction: column;
    }

    .proto-btn {
        width: 100%;
    }

    .consult-contact-row {
        flex-direction: column;
        gap: 8px;
    }
}


/* ==========================================================================
   SECTION 12: ABOUT US & SAN ANTONIO SHOWROOM (/about)
   ========================================================================== */

.about-page {
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 80px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

.about-hero-section {
    padding-bottom: 30px;
}

.about-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-hero-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.about-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.about-hero-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto 32px;
    max-width: 840px;
}

.about-telemetry-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-metric-pill {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.about-metric-pill:hover {
    border-color: rgba(229, 9, 20, 0.4);
    transform: translateY(-2px);
}

/* SECTION 6.2: THE STORY OF I-O AUTOS */
.about-story-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.story-dual-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 40px;
    align-items: center;
}

.story-headline {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 8px 0 20px;
    letter-spacing: -0.01em;
}

.story-paragraphs {
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 26px;
}

.story-quote-card {
    background: rgba(229, 9, 20, 0.08);
    border-left: 4px solid var(--color-crimson);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
}

.quote-text {
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.quote-author-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quote-author-row strong {
    color: #ffffff;
    font-size: 0.85rem;
}

.quote-author-row span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.story-visual-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.visual-img-wrap {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #0d0f17;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-badge-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(10, 12, 19, 0.85);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.visual-card-details {
    padding: 24px;
}

.visual-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.visual-card-sub {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.visual-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.v-stat strong {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-crimson);
    display: block;
}

.v-stat span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* SECTION 6.3: OUR 4 PILLARS OF EXCELLENCE */
.about-pillars-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pillars-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pillar-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
}

.pillar-number {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 1.6rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.pillar-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.pillar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.pillar-desc {
    font-size: 0.86rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
}

/* SECTION 6.4: THE SAN ANTONIO SHOWROOM FACILITY */
.about-showroom-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.showroom-card-wrapper {
    background: rgba(13, 16, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.showroom-headline {
    font-size: 1.9rem;
    font-weight: 800;
    color: #ffffff;
    margin: 8px 0 14px;
    letter-spacing: -0.01em;
}

.showroom-lead {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
}

.showroom-address-highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 24px;
}

.address-full {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    margin: 4px 0 8px;
    line-height: 1.4;
}

.map-link-btn {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-crimson);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.map-link-btn:hover {
    text-decoration: underline;
}

.showroom-amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.amenity-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}

.amenity-item svg {
    flex-shrink: 0;
}

.showroom-hours-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hours-col strong {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hours-col span {
    font-size: 0.84rem;
    color: #ffffff;
    font-weight: 600;
}

.showroom-booking-card {
    background: rgba(16, 20, 31, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
}

.booking-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.booking-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

.btn-booking-wa {
    height: 48px;
    font-weight: 800;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.booking-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 10px;
    display: block;
}

/* SECTION 6.5: EXECUTIVE LEADERSHIP & CONCIERGE TEAM */
.about-team-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.team-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
}

.team-avatar-box {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-crimson) 0%, #1a1e2d 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.team-initials {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.team-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.team-role {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--color-crimson);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    display: block;
}

.team-bio {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    flex: 1;
    margin-bottom: 16px;
}

.team-contact-link a {
    font-size: 0.78rem;
    font-weight: 800;
    color: #00d2d3;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.team-contact-link a:hover {
    text-decoration: underline;
}

/* SECTION 6.6: ACCREDITATIONS */
.about-certifications-section {
    padding: 30px 0;
}

.cert-bar-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 24px 28px;
}

.cert-bar-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    text-align: center;
    margin-bottom: 16px;
}

.cert-logos-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cert-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}

.cert-badge-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--color-crimson);
}

.cert-logo-item span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* SECTION 6.7: TESTIMONIALS */
.about-testimonials-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.testimonials-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testi-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testi-rating {
    color: #ffb800;
    font-size: 1.1rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.testi-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    margin-bottom: 20px;
}

.testi-author-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-meta strong {
    font-size: 0.88rem;
    color: #ffffff;
}

.author-meta span {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
}

/* SECTION 6.8: FINAL CTA BANNER */
.about-cta-section {
    padding: 20px 0 60px;
}

.about-cta-inner {
    background: linear-gradient(135deg, rgba(20, 24, 36, 0.92) 0%, rgba(10, 12, 19, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.cta-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.cta-headline {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.cta-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
}

.about-cta-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-cta-browse {
    height: 48px;
    padding: 0 24px;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 10px;
}

.btn-cta-wa {
    height: 48px;
    padding: 0 24px;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR ABOUT PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .about-telemetry-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .story-dual-grid {
        grid-template-columns: 1fr;
    }

    .pillars-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showroom-card-wrapper {
        grid-template-columns: 1fr;
    }

    .team-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-page {
        padding-top: calc(var(--header-height) + 44px);
    }

    .about-hero-title {
        font-size: 1.7rem;
    }

    .story-headline {
        font-size: 1.6rem;
    }

    .showroom-amenities-list {
        grid-template-columns: 1fr;
    }

    .showroom-card-wrapper {
        padding: 24px 20px;
    }

    .about-cta-inner {
        padding: 24px 20px;
    }

    .about-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .btn-cta-browse, .btn-cta-wa {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-page {
        padding-top: calc(var(--header-height) + 48px);
    }

    .about-hero-title {
        font-size: 1.45rem;
    }

    .about-telemetry-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .about-metric-pill {
        padding: 12px 10px;
    }

    .pillars-cards-grid,
    .team-cards-grid {
        grid-template-columns: 1fr;
    }

    .cert-logos-row {
        flex-direction: column;
        gap: 14px;
    }
}


/* ==========================================================================
   SECTION 13: CONTACT SHOWROOM & CONCIERGE (/contact)
   ========================================================================== */

.contact-page {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 80px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

.contact-hero-section {
    padding-bottom: 30px;
}

.contact-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.contact-hero-badge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.contact-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.contact-hero-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto 32px;
    max-width: 840px;
}

.contact-channels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.channel-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 24px 20px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.channel-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.channel-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.icon-crimson {
    background: rgba(229, 9, 20, 0.12);
    color: var(--color-crimson);
    border: 1px solid rgba(229, 9, 20, 0.3);
}

.icon-cyan {
    background: rgba(0, 210, 211, 0.12);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.3);
}

.icon-green {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.channel-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

.channel-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.channel-action {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--color-crimson);
}

/* SECTION 7.2: DUAL-COLUMN LAYOUT */
.contact-main-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-dual-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 36px;
    align-items: start;
}

.contact-form-card {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.form-header-block {
    margin-bottom: 24px;
}

.form-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 6px;
}

.form-headline {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.form-lead {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.inquiry-type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.type-pill-btn {
    padding: 9px 15px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-pill-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.type-pill-btn.active {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--color-crimson);
    color: #ffffff;
}

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.main-inquiry-form .form-group {
    margin-bottom: 16px;
}

.main-inquiry-form .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    display: block;
}

.main-inquiry-form .form-control {
    width: 100%;
    background: rgba(20, 24, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    padding: 10px 14px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.main-inquiry-form .form-control:focus {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2);
}

.btn-submit-inquiry {
    height: 50px;
    width: 100%;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.form-privacy-note {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-top: 14px;
    line-height: 1.4;
}

/* RIGHT COLUMN: SHOWROOM DETAILS & MAP */
.showroom-detail-card {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sh-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-crimson);
    display: block;
    margin-bottom: 4px;
}

.sh-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.sh-lead {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

.sh-address-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.sh-pin {
    color: var(--color-crimson);
    flex-shrink: 0;
    margin-top: 2px;
}

.sh-addr-text {
    font-size: 0.88rem;
    color: #ffffff;
    display: block;
    line-height: 1.4;
}

.sh-maps-btn {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-crimson);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
}

.sh-maps-btn:hover {
    text-decoration: underline;
}

.map-view-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 220px;
    background: #0a0c13;
}

.google-maps-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(90%) hue-rotate(180deg) contrast(1.1);
}

.sh-operating-schedule {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px;
}

.sched-heading {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sched-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.sched-day {
    color: rgba(255, 255, 255, 0.55);
}

.sched-hours {
    color: #ffffff;
    font-weight: 600;
}

.airport-shuttle-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(0, 210, 211, 0.08);
    border: 1px solid rgba(0, 210, 211, 0.25);
    border-radius: 12px;
    padding: 16px;
}

.plane-icon {
    color: #00d2d3;
    flex-shrink: 0;
    margin-top: 2px;
}

.airport-shuttle-card strong {
    font-size: 0.84rem;
    color: #00d2d3;
    display: block;
    margin-bottom: 2px;
}

.airport-shuttle-card p {
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* SECTION 7.3: SPECIALIZED DEPARTMENTS */
.contact-departments-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.department-card {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.department-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.4);
}

.dept-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.dept-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.dept-desc {
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    flex: 1;
    margin-bottom: 20px;
}

.dept-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dept-link-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dept-link-item:hover {
    color: var(--color-crimson);
}

.dept-link-item.text-green {
    color: #25d366;
}

.dept-link-item.text-green:hover {
    color: #1ebc59;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR CONTACT PAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .contact-channels-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-dual-layout {
        grid-template-columns: 1fr;
    }

    .departments-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-page {
        padding-top: calc(var(--header-height) + 20px);
    }

    .contact-hero-title {
        font-size: 1.7rem;
    }

    .form-row-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-card,
    .showroom-detail-card {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .contact-page {
        padding-top: calc(var(--header-height) + 16px);
    }

    .contact-hero-title {
        font-size: 1.45rem;
    }

    .contact-channels-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-type-selector {
        flex-direction: column;
    }

    .type-pill-btn {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   SECTION 14: DYNAMIC VEHICLE COMPARISON MATRIX (/compare)
   ========================================================================== */

.compare-page-main {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 90px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .compare-page-main {
        padding-top: calc(var(--header-height) + 20px);
    }
}

@media (max-width: 480px) {
    .compare-page-main {
        padding-top: calc(var(--header-height) + 16px);
    }
}

.compare-hero-section {
    padding-bottom: 24px;
}

.compare-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.compare-page-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.compare-page-lead {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 780px;
    line-height: 1.6;
    margin: 0;
}

.compare-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Empty State */
.compare-empty-state {
    background: rgba(16, 20, 31, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 70px 24px;
    text-align: center;
    max-width: 700px;
    margin: 40px auto;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.1);
    border: 1px solid rgba(229, 9, 20, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.empty-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.empty-lead {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.empty-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Populated Matrix */
.compare-matrix-container {
    background: rgba(13, 16, 24, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
}

/* Sticky Top Cards Grid */
.compare-cars-header-grid {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.compare-car-card {
    background: #0d1018;
    padding: 22px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-remove-from-compare {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.btn-remove-from-compare:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
    transform: scale(1.1);
}

.compare-car-thumb-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 160px;
    background: #050608;
}

.compare-car-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.compare-car-thumb-wrap:hover .compare-car-img {
    transform: scale(1.05);
}

.compare-car-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.compare-car-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compare-car-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.compare-car-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.compare-car-title a:hover {
    color: var(--color-crimson);
}

.compare-car-pricing {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.compare-price-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
}

.compare-monthly-est {
    font-size: 0.8rem;
    color: var(--color-crimson);
    font-weight: 700;
}

.compare-car-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* Add Vehicle Slot Card */
.compare-add-slot-card {
    background: rgba(16, 20, 31, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.compare-add-slot-card:hover {
    background: rgba(229, 9, 20, 0.05);
    border-color: rgba(229, 9, 20, 0.4);
}

.add-slot-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.add-slot-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.2s ease;
}

.compare-add-slot-card:hover .add-slot-icon {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    transform: scale(1.1);
}

.add-slot-inner strong {
    font-size: 1.05rem;
    color: #ffffff;
}

.add-slot-inner p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin: 0;
    max-width: 180px;
}

/* Specs Accordion Table */
.compare-specs-table-wrapper {
    display: flex;
    flex-direction: column;
}

.spec-category-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-category-header {
    background: rgba(20, 25, 38, 0.9);
    padding: 14px 24px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.spec-label {
    width: 240px;
    flex-shrink: 0;
    padding: 14px 24px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(10, 13, 20, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
}

.spec-values-grid {
    flex: 1;
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
}

.spec-cell {
    background: #0d1018;
    padding: 14px 18px;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
}

.spec-cell strong {
    color: #ffffff;
}

.spec-cell-empty {
    color: rgba(255, 255, 255, 0.25);
    justify-content: center;
}

.vin-code-cell code {
    font-family: monospace;
    font-size: 0.82rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 6px;
    border-radius: 4px;
}

.cell-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.cell-features-list li {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.feat-check {
    color: #25d366;
    font-weight: 800;
    flex-shrink: 0;
}

/* Add Vehicle Modal */
.compare-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 5, 8, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.compare-modal-box {
    background: #0e111a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.compare-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.modal-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.btn-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-close:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
}

.modal-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
}

.modal-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: inherit;
}

.modal-cars-grid {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
}

.modal-car-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.modal-car-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 9, 20, 0.3);
}

.modal-car-thumb {
    width: 60px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: #000;
}

.modal-car-info {
    flex: 1;
}

.modal-car-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    display: block;
}

.modal-car-meta {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    gap: 6px;
    align-items: center;
}

.modal-car-price {
    color: var(--color-crimson);
}

/* =============================================================================

   CORNER PROMPTED COMPARE MATRIX SYSTEM

   Replaces the intrusive static bottom dock with an elegant corner launcher icon

   that prompts out an interactive flyout box when clicked.

   ============================================================================= */



.compare-corner-container {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 1100;
    font-family: inherit;
    animation: cornerFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.compare-corner-container.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
}

.compare-corner-container.is-dragging .compare-corner-btn {
    cursor: grabbing !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 28px rgba(229, 9, 20, 0.5) !important;
    border-color: var(--color-crimson) !important;
    transition: none !important;
}

@keyframes cornerFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 1. Corner Floating Launcher Button (Draggable Luxury Capsule) */
.compare-corner-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(12, 15, 23, 0.94);
    border: 1.5px solid rgba(229, 9, 20, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #ffffff;
    padding: 9px 16px 9px 11px;
    border-radius: 40px;
    cursor: grab;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 16px rgba(229, 9, 20, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    user-select: none;
    text-decoration: none !important;
}

.compare-corner-btn:hover {
    background: rgba(20, 24, 38, 0.98);
    border-color: #e50914;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75), 0 0 24px rgba(229, 9, 20, 0.4);
}

.compare-corner-btn.is-open {
    background: #e50914;
    border-color: #e50914;
    box-shadow: 0 12px 30px rgba(229, 9, 20, 0.5);
}

.corner-drag-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    cursor: grab;
    margin-right: -2px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.compare-corner-btn:hover .corner-drag-grip {
    color: rgba(255, 255, 255, 0.7);
}

.corner-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #e50914;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.compare-corner-btn:hover .corner-icon-wrap,
.compare-corner-btn.is-open .corner-icon-wrap {
    color: #ffffff;
}

.corner-compare-svg {
    width: 19px;
    height: 19px;
}

.corner-badge-dot {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--color-crimson);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    border: 1.5px solid #090a0f;
    transition: transform 0.2s ease;
}

.corner-btn-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    white-space: nowrap;
}



/* 2. Prompted Out Flyout Box */

.compare-prompt-box {

    position: absolute;

    bottom: calc(100% + 14px);

    left: 0;

    width: 360px;

    max-width: calc(100vw - 40px);

    background: rgba(13, 16, 25, 0.98);

    border: 1px solid rgba(229, 9, 20, 0.45);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(229, 9, 20, 0.25);

    opacity: 0;

    visibility: hidden;

    transform: translateY(14px) scale(0.96);

    transform-origin: bottom left;

    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

    overflow: hidden;

}



.compare-prompt-box.is-active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

    pointer-events: auto;

}



.prompt-box-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.03);

}



.prompt-header-title {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13.5px;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.3px;

}



.prompt-matrix-icon {

    color: #e50914;

}



.prompt-badge {

    background: rgba(0, 210, 211, 0.15);

    color: #00d2d3;

    border: 1px solid rgba(0, 210, 211, 0.35);

    font-size: 11px;

    font-weight: 700;

    padding: 2px 7px;

    border-radius: 12px;

}



.btn-prompt-close {

    background: transparent;

    border: none;

    color: #8e95a5;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    padding: 2px 6px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.btn-prompt-close:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

}



.prompt-box-body {

    padding: 12px 14px;

    max-height: 240px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: rgba(229, 9, 20, 0.4) transparent;

}



.prompt-vehicle-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    margin-bottom: 8px;

    transition: all 0.2s ease;

}



.prompt-vehicle-item:last-child {

    margin-bottom: 0;

}



.prompt-vehicle-item:hover {

    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(229, 9, 20, 0.35);

}



.prompt-item-thumb {

    width: 48px;

    height: 34px;

    object-fit: cover;

    border-radius: 4px;

    background: #000;

    flex-shrink: 0;

}



.prompt-item-info {

    flex: 1;

    min-width: 0;

}



.prompt-item-title {

    font-size: 12px;

    font-weight: 700;

    color: #ffffff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.3;

}



.prompt-item-price {

    font-size: 11px;

    font-weight: 700;

    color: #00d2d3;

}



.btn-prompt-remove-car {

    background: transparent;

    border: none;

    color: #8e95a5;

    font-size: 16px;

    cursor: pointer;

    padding: 4px 6px;

    border-radius: 4px;

    transition: color 0.2s ease;

}



.btn-prompt-remove-car:hover {

    color: #e50914;

}



.prompt-box-footer {

    padding: 12px 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.02);

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.btn-prompt-launch {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 8px;

    font-size: 12.5px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    text-decoration: none;

}



.btn-prompt-clear {

    background: transparent;

    border: none;

    color: #8e95a5;

    font-size: 11.5px;

    cursor: pointer;

    text-align: center;

    padding: 4px;

    transition: color 0.2s ease;

}



.btn-prompt-clear:hover {

    color: #ff6b6b;

    text-decoration: underline;

}



@media (max-width: 768px) {
    .compare-corner-container {
        bottom: 22px;
        left: 16px;
    }

    .compare-corner-btn {
        padding: 8px 14px 8px 9px;
        border-radius: 35px;
        gap: 7px;
    }

    .corner-btn-label {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
    }

    .compare-prompt-box {
        width: 310px;
        max-width: calc(100vw - 32px);
    }
}



@media (max-width: 768px) {
    .compare-matrix-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-cars-header-grid {
        min-width: 600px;
    }

    .compare-specs-table-wrapper {
        min-width: 600px;
    }

    .spec-label {
        width: 160px;
        padding: 12px 14px;
        font-size: 0.78rem;
    }

    .spec-cell {
        padding: 12px 14px;
        font-size: 0.8rem;
    }

    .dock-titles {
        max-width: 140px;
    }
}


/* ==========================================================================
   SECTION 15: CLIENT CONCIERGE PORTAL & CUSTOMER CARE DESK (/my-account)
   ========================================================================== */

.customer-portal-page {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 90px;
    background: radial-gradient(circle at 50% 0%, rgba(229, 9, 20, 0.05) 0%, transparent 60%), #08090c;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .customer-portal-page {
        padding-top: calc(var(--header-height) + 20px);
    }
}

@media (max-width: 480px) {
    .customer-portal-page {
        padding-top: calc(var(--header-height) + 16px);
    }
}

.portal-hero-section {
    padding-bottom: 24px;
}

.portal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.portal-page-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.portal-page-lead {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 760px;
    line-height: 1.6;
    margin: 0;
}

.portal-id-badge-wrap {
    background: rgba(16, 20, 31, 0.85);
    border: 1px solid rgba(229, 9, 20, 0.35);
    backdrop-filter: blur(14px);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.portal-id-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.portal-id-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-crimson);
    letter-spacing: 0.05em;
    font-family: monospace;
}

.portal-switch-link {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}

.portal-switch-link:hover {
    color: #ffffff;
}

/* Lookup Card */
.portal-lookup-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 60px 24px;
    max-width: 620px;
    margin: 40px auto;
    text-align: center;
}

.lookup-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lookup-icon-wrap {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.1);
    border: 1px solid rgba(229, 9, 20, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.lookup-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.lookup-lead {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.portal-lookup-form {
    width: 100%;
    max-width: 480px;
    margin-top: 10px;
}

.lookup-input-group {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 6px;
}

.lookup-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
}

.btn-lookup {
    border-radius: 8px !important;
    padding: 10px 20px !important;
    flex-shrink: 0;
}

.lookup-sample-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.sample-pill-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sample-pill-btn:hover {
    background: var(--color-crimson);
    border-color: var(--color-crimson);
    color: #ffffff;
}

/* Dashboard Dual Grid */
.portal-dashboard-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: flex-start;
}

.portal-card {
    background: rgba(16, 20, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
}

.client-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-crimson);
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.4);
}

.client-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.client-email,
.client-phone {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

.client-meta-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}

.client-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 6px 0;
}

.client-stat-row .stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.client-stat-row .stat-value {
    color: #ffffff;
    font-weight: 600;
}

/* Assigned Concierge Card */
.concierge-rep-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 12px;
}

.rep-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.rep-name {
    font-size: 0.98rem;
    color: #ffffff;
    display: block;
}

.rep-title {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    display: block;
}

.rep-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 16px;
}

.rep-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Nav Hangers */
.portal-nav-hangers {
    display: flex;
    gap: 10px;
    background: rgba(16, 20, 31, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.portal-hanger-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.portal-hanger-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.portal-hanger-tab.active {
    background: var(--color-crimson);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
}

/* Pane Header */
.pane-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pane-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.pane-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* New Inquiry Collapsible Box */
.new-inquiry-box {
    background: rgba(20, 25, 38, 0.85);
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    animation: fadeIn 0.25s ease;
}

.form-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* Tickets Cards */
.portal-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ticket-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px;
    transition: border-color 0.2s ease;
}

.ticket-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-number {
    font-size: 0.95rem;
    color: var(--color-crimson);
    font-family: monospace;
    font-weight: 800;
    margin-right: 8px;
}

.ticket-type {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.ticket-car-subject {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.ticket-notes {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 12px;
}

.ticket-admin-reply {
    background: rgba(229, 9, 20, 0.08);
    border-left: 3px solid var(--color-crimson);
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    margin-top: 10px;
}

.admin-reply-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-crimson);
    margin-bottom: 4px;
}

.admin-reply-text {
    font-size: 0.82rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
}

.ticket-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 14px;
}

/* Wishlist Cards Grid */
.wishlist-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.wishlist-car-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.wishlist-car-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 9, 20, 0.35);
}

.wcar-thumb-wrap {
    position: relative;
    height: 170px;
    background: #000;
}

.wcar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wcar-thumb-wrap .single-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.wcar-info {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wcar-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
}

.wcar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.wcar-price {
    color: var(--color-crimson);
    font-size: 0.95rem;
}

.wcar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* Protocol Cards */
.protocol-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.protocol-card {
    background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
}

.protocol-card .proto-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.protocol-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.protocol-card p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .portal-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .protocol-cards-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================================================================
   TRIG8 FOOTPRINT & BRANDING STYLES (YADI NIGERIA SPEC)
   ============================================================================== */
.trig8-footer-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none !important;
    padding: 6px 14px 6px 14px;
    border-radius: 9999px;
    background: #0b0f19;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    justify-self: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.trig8-footer-brand:hover,
.trig8-footer-brand:focus-visible {
    background: #131826;
    border-color: #22c55e;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.28), 0 0 12px rgba(16, 185, 129, 0.22);
    transform: translateY(-2px);
    outline: none;
}

.trig8-by-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.trig8-footer-img {
    height: 18px;
    max-height: 20px;
    width: auto;
    max-width: 82px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.22s ease;
}

.trig8-footer-brand:hover .trig8-footer-img {
    transform: scale(1.06);
}

.trig8-ext-icon {
    width: 12px;
    height: 12px;
    color: #64748b;
    transition: transform 0.22s ease, color 0.22s ease;
    flex-shrink: 0;
}

.trig8-footer-brand:hover .trig8-ext-icon {
    color: #22c55e;
    transform: translate(1.5px, -1.5px);
}
@media (max-width: 820px) {
    .bottom-bar-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }
    .trig8-footer-brand {
        order: 2;
        margin: 4px auto;
    }
    .copyright-text {
        order: 1;
    }
    .legal-links-list {
        order: 3;
        justify-content: center;
    }
}


/* =============================================================================
   15. ZERO-TOLERANCE ANTI-SPAM & BOT DEFENSE SYSTEM STYLES
   ============================================================================= */

.bot-defense-badge {
    background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 14, 22, 0.98));
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-left: 4px solid #e50914;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.bot-defense-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bot-defense-icon {
    width: 18px;
    height: 18px;
    color: #e50914;
    flex-shrink: 0;
}

.bot-defense-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.bot-defense-status-tag {
    background: rgba(0, 210, 211, 0.15);
    color: #00d2d3;
    border: 1px solid rgba(0, 210, 211, 0.4);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.bot-defense-desc {
    font-size: 12px;
    color: #a4b0be;
    line-height: 1.5;
    margin: 0;
}

.bot-defense-desc strong {
    color: #f0f2f7;
}

.bot-defense-desc code {
    background: rgba(255, 255, 255, 0.08);
    color: #00d2d3;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.security-challenge-block {
    background: rgba(14, 17, 26, 0.85);
    border: 1px solid #23283c;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.security-challenge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.security-question-label {
    font-size: 12px;
    font-weight: 700;
    color: #8e95a5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.security-question-text {
    color: #00d2d3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.btn-refresh-challenge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd3e2;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-refresh-challenge:hover {
    background: rgba(229, 9, 20, 0.18);
    border-color: #e50914;
    color: #ffffff;
}

.security-answer-input {
    width: 100%;
}

.security-feedback-msg {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
}

.security-feedback-msg.is-error {
    background: rgba(229, 9, 20, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(229, 9, 20, 0.3);
}

.security-feedback-msg.is-warning {
    background: rgba(255, 165, 2, 0.15);
    color: #ffa502;
    border: 1px solid rgba(255, 165, 2, 0.3);
}

.textarea-field-wrapper {
    position: relative;
}

.textarea-defense-feedback {
    display: none;
    margin-top: 6px;
    background: rgba(229, 9, 20, 0.14);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: #ff6b6b;
    font-size: 11.5px;
    padding: 6px 10px;
    border-radius: 5px;
    line-height: 1.4;
}

.textarea-has-error {
    border-color: #e50914 !important;
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.25) !important;
}

/* Compact version for newsletter in footer */
.footer-bot-note {
    font-size: 11px;
    color: #636e72;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.footer-bot-note svg {
    color: #00d2d3;
    flex-shrink: 0;
}

/* Enhanced Corner Button & Flyout Styles */
a.compare-corner-btn {
    text-decoration: none !important;
}

.prompt-header-title {
    text-decoration: none;
    color: #ffffff;
}

.prompt-header-title:hover {
    color: #ffffff;
}

.corner-flyout-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    margin-left: 2px;
    transition: all 0.2s ease;
}

.corner-flyout-trigger:hover {
    background: #e50914;
    transform: scale(1.1);
}

.compare-corner-btn.is-open .corner-chevron-svg {
    transform: rotate(180deg);
}

.corner-chevron-svg {
    transition: transform 0.2s ease;
}

.prompt-empty-hint {
    padding: 20px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prompt-empty-hint small {
    color: #64748b;
    font-size: 11.5px;
}

.prompt-item-thumb-link {
    display: block;
    flex-shrink: 0;
}

a.prompt-item-title {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: color 0.15s;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

a.prompt-item-title:hover {
    color: #e50914;
    text-decoration: underline;
}