{"id":22,"date":"2026-07-16T07:45:18","date_gmt":"2026-07-16T07:45:18","guid":{"rendered":"https:\/\/nuftp.com\/vk_check_this\/home-2\/"},"modified":"2026-07-16T09:40:58","modified_gmt":"2026-07-16T09:40:58","slug":"home-2","status":"publish","type":"page","link":"https:\/\/nuftp.com\/vk_check_this\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;family=Outfit:wght@300;400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n    \/* Scope everything to override WP block styles and create our premium design system *\/\n    :root {\n        --bg-primary: #030306;\n        --bg-secondary: #08080d;\n        --bg-tertiary: #101019;\n        --accent: #00f0ff;\n        --accent-glow: rgba(0, 240, 255, 0.2);\n        --accent-gradient: linear-gradient(135deg, #00f0ff 0%, #0052ff 100%);\n        --accent-orange: #ff6b00;\n        --accent-red: #ff0055;\n        --accent-green: #39ff14;\n        --text-main: #ffffff;\n        --text-muted: #9ba0b0;\n        --border-color: rgba(255, 255, 255, 0.05);\n        --glass-bg: rgba(8, 8, 13, 0.7);\n        --glass-border: rgba(255, 255, 255, 0.03);\n        --font-main: 'Inter', sans-serif;\n        --font-title: 'Outfit', sans-serif;\n        --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);\n        --accent-shadow: 0 0 25px rgba(0, 240, 255, 0.35);\n        --transition-premium: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    body, .wp-site-blocks, main, .entry-content {\n        background-color: var(--bg-primary) !important;\n        color: var(--text-main) !important;\n        font-family: var(--font-main) !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        overflow-x: hidden;\n    }\n\n    \/* Reset default header\/footer parts elements padding *\/\n    .wp-block-template-part, header, footer {\n        padding: 0 !important;\n        margin: 0 !important;\n        max-width: 100% !important;\n    }\n\n    * {\n        box-sizing: border-box;\n        scrollbar-width: thin;\n        scrollbar-color: var(--bg-tertiary) var(--bg-primary);\n    }\n    \n    a {\n        color: inherit;\n        text-decoration: none;\n    }\n\n    \/* Custom Scrollbar *\/\n    ::-webkit-scrollbar {\n        width: 8px;\n    }\n    ::-webkit-scrollbar-track {\n        background: var(--bg-primary);\n    }\n    ::-webkit-scrollbar-thumb {\n        background: var(--bg-tertiary);\n        border-radius: 4px;\n    }\n    ::-webkit-scrollbar-thumb:hover {\n        background: var(--accent);\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        font-family: var(--font-title) !important;\n        font-weight: 700 !important;\n        letter-spacing: -0.02em !important;\n        color: #fff !important;\n    }\n\n    \/* Section Header *\/\n    .section-header {\n        text-align: center;\n        margin-bottom: 70px;\n        position: relative;\n    }\n\n    .section-header h2 {\n        font-size: 2.8rem !important;\n        margin-bottom: 15px !important;\n        font-weight: 800 !important;\n        text-transform: uppercase !important;\n        letter-spacing: 1.5px !important;\n        background: linear-gradient(180deg, #ffffff 0%, #8e94a5 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .section-header p {\n        color: var(--text-muted) !important;\n        font-size: 1.15rem !important;\n        max-width: 650px;\n        margin: 0 auto !important;\n        font-weight: 300;\n        line-height: 1.6;\n    }\n\n    .section-header::after {\n        content: '';\n        display: block;\n        width: 50px;\n        height: 2px;\n        background: var(--accent-gradient);\n        margin: 20px auto 0;\n        border-radius: 2px;\n    }\n\n    \/* Fade-in & Scroll Animations *\/\n    .animate-on-scroll {\n        opacity: 0;\n        transform: translateY(40px);\n        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .animate-on-scroll.visible {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    \/* Floating mesh gradient background decorations *\/\n    .mesh-gradient-bg {\n        position: absolute;\n        width: 600px;\n        height: 600px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, rgba(0, 82, 255, 0.03) 50%, rgba(0, 0, 0, 0) 70%);\n        filter: blur(80px);\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Sticky Navigation *\/\n    .navbar {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        z-index: 1000;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 25px 6%;\n        background: transparent;\n        border-bottom: 1px solid transparent;\n        transition: var(--transition-premium);\n    }\n\n    .navbar.scrolled {\n        background: rgba(3, 3, 6, 0.75);\n        backdrop-filter: blur(25px);\n        border-bottom: 1px solid var(--border-color);\n        padding: 16px 6%;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n    }\n\n    .nav-logo {\n        font-family: var(--font-title);\n        font-size: 1.7rem;\n        font-weight: 900;\n        color: var(--text-main);\n        letter-spacing: 2px;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n\n    .nav-logo span {\n        color: var(--accent);\n        background: var(--accent-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .nav-links {\n        display: flex;\n        list-style: none;\n        gap: 35px;\n        align-items: center;\n        margin: 0;\n        padding: 0;\n    }\n\n    .nav-links a {\n        color: var(--text-muted);\n        font-size: 0.95rem;\n        font-weight: 500;\n        letter-spacing: 0.5px;\n        transition: var(--transition-premium);\n        position: relative;\n        padding: 5px 0;\n    }\n\n    .nav-links a::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 0;\n        height: 2px;\n        background: var(--accent-gradient);\n        transition: var(--transition-premium);\n    }\n\n    .nav-links a:hover::after {\n        width: 100%;\n    }\n\n    .nav-links a:hover, .nav-links a.active {\n        color: var(--text-main);\n    }\n\n    .nav-cta {\n        background: var(--accent-gradient);\n        color: #000 !important;\n        padding: 12px 26px;\n        border-radius: 6px;\n        font-weight: 700 !important;\n        letter-spacing: 0.5px;\n        box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25);\n        transition: var(--transition-premium) !important;\n        text-transform: uppercase;\n        font-size: 0.85rem !important;\n    }\n\n    .nav-cta:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 25px rgba(0, 240, 255, 0.45);\n    }\n\n    .menu-btn {\n        display: none;\n        color: var(--text-main);\n        font-size: 1.6rem;\n        cursor: pointer;\n        transition: color 0.3s ease;\n    }\n\n    \/* Hero Section *\/\n    .hero {\n        height: 100vh;\n        width: 100%;\n        position: relative;\n        background: url('https:\/\/images.unsplash.com\/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1920&q=80') no-repeat center center\/cover;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 8%;\n        overflow: hidden;\n    }\n\n    .hero::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(180deg, rgba(3,3,6,0.3) 0%, rgba(3,3,6,0.95) 100%);\n        z-index: 1;\n    }\n\n    .hero-grid {\n        display: grid;\n        grid-template-columns: 1.2fr 0.8fr;\n        gap: 50px;\n        align-items: center;\n        width: 100%;\n        max-width: 1400px;\n        position: relative;\n        z-index: 2;\n        margin-top: 80px;\n    }\n\n    .hero-content {\n        text-align: left;\n    }\n\n    .hero-content h1 {\n        font-size: 4.8rem !important;\n        font-weight: 900 !important;\n        text-transform: uppercase;\n        line-height: 1.05;\n        letter-spacing: -1px;\n        margin-bottom: 25px !important;\n        background: linear-gradient(180deg, #ffffff 0%, #b2bac7 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .hero-content h1 span {\n        background: var(--accent-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .hero-content p {\n        font-size: 1.25rem !important;\n        color: var(--text-muted) !important;\n        margin-bottom: 45px !important;\n        max-width: 650px;\n        font-weight: 300;\n        line-height: 1.7;\n    }\n\n    .hero-btns {\n        display: flex;\n        gap: 20px;\n    }\n\n    .btn {\n        padding: 18px 38px;\n        font-family: var(--font-title);\n        font-size: 0.95rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: var(--transition-premium);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n    }\n\n    .btn-primary {\n        background: var(--accent-gradient);\n        color: #000;\n        box-shadow: 0 5px 25px rgba(0, 240, 255, 0.35);\n        border: none;\n    }\n\n    .btn-primary:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 8px 35px rgba(0, 240, 255, 0.6);\n    }\n\n    .btn-secondary {\n        background: rgba(255, 255, 255, 0.03);\n        color: var(--text-main);\n        border: 1px solid var(--border-color);\n        backdrop-filter: blur(10px);\n    }\n\n    .btn-secondary:hover {\n        background: rgba(255, 255, 255, 0.08);\n        border-color: rgba(255, 255, 255, 0.3);\n        transform: translateY(-4px);\n    }\n\n    \/* Floating Hero Badge Card *\/\n    .hero-badge-card {\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 12px;\n        padding: 30px;\n        backdrop-filter: blur(20px);\n        box-shadow: var(--card-shadow);\n        position: relative;\n        animation: floatAnimation 6s ease-in-out infinite;\n        max-width: 380px;\n        margin-left: auto;\n    }\n\n    @keyframes floatAnimation {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-15px); }\n    }\n\n    .hero-badge-title {\n        font-size: 0.8rem;\n        text-transform: uppercase;\n        color: var(--accent);\n        font-weight: 700;\n        letter-spacing: 2px;\n        margin-bottom: 15px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .hero-badge-car {\n        font-size: 1.6rem !important;\n        font-weight: 800 !important;\n        margin-bottom: 20px !important;\n    }\n\n    .hero-badge-stats {\n        display: flex;\n        flex-direction: column;\n        gap: 15px;\n    }\n\n    .stat-row {\n        display: flex;\n        justify-content: space-between;\n        border-bottom: 1px solid var(--border-color);\n        padding-bottom: 10px;\n    }\n\n    .stat-row:last-child {\n        border-bottom: none;\n        padding-bottom: 0;\n    }\n\n    .stat-label {\n        font-size: 0.85rem;\n        color: var(--text-muted);\n    }\n\n    .stat-value {\n        font-size: 0.95rem;\n        font-weight: 700;\n        color: #fff;\n    }\n\n    \/* Mouse scroll indicator *\/\n    .scroll-indicator {\n        position: absolute;\n        bottom: 30px;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 2;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 8px;\n        opacity: 0.8;\n    }\n\n    .mouse-icon {\n        width: 25px;\n        height: 42px;\n        border: 2px solid var(--text-muted);\n        border-radius: 15px;\n        position: relative;\n    }\n\n    .mouse-wheel {\n        width: 4px;\n        height: 8px;\n        background-color: var(--accent);\n        border-radius: 2px;\n        position: absolute;\n        top: 8px;\n        left: 50%;\n        transform: translateX(-50%);\n        animation: scrollWheel 1.5s ease-in-out infinite;\n    }\n\n    @keyframes scrollWheel {\n        0% { top: 8px; opacity: 1; }\n        100% { top: 22px; opacity: 0; }\n    }\n\n    \/* Section Settings *\/\n    .section-padding {\n        padding: 120px 8%;\n        position: relative;\n    }\n\n    \/* Dynamic Showcase Tab Selector *\/\n    .showcase-tabs {\n        display: flex;\n        justify-content: center;\n        gap: 15px;\n        margin-bottom: 50px;\n    }\n\n    .tab-btn {\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        color: var(--text-muted);\n        padding: 12px 30px;\n        border-radius: 50px;\n        cursor: pointer;\n        font-family: var(--font-title);\n        font-weight: 600;\n        font-size: 0.95rem;\n        transition: var(--transition-premium);\n    }\n\n    .tab-btn:hover {\n        color: #fff;\n        border-color: rgba(255, 255, 255, 0.2);\n    }\n\n    .tab-btn.active {\n        background: var(--accent-gradient);\n        color: #000;\n        border-color: transparent;\n        box-shadow: var(--accent-shadow);\n    }\n\n    \/* Featured Cars Grid & Luxury Cards *\/\n    .featured-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 40px;\n    }\n\n    .car-card {\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: var(--card-shadow);\n        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease, box-shadow 0.6s ease;\n        position: relative;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .car-card:hover {\n        transform: translateY(-12px);\n        border-color: rgba(0, 240, 255, 0.3);\n        box-shadow: 0 20px 40px rgba(0, 240, 255, 0.12), var(--card-shadow);\n    }\n\n    .car-img-wrapper {\n        width: 100%;\n        height: 250px;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .car-img-wrapper img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .car-card:hover .car-img-wrapper img {\n        transform: scale(1.08);\n    }\n\n    \/* Elegant shines on hover *\/\n    .car-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100%;\n        width: 50%;\n        height: 100%;\n        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);\n        transform: skewX(-25deg);\n        transition: none;\n        z-index: 2;\n        pointer-events: none;\n    }\n\n    .car-card:hover::before {\n        left: 150%;\n        transition: all 1s ease-in-out;\n    }\n\n    .car-badge {\n        position: absolute;\n        top: 20px;\n        right: 20px;\n        background: rgba(3, 3, 6, 0.8);\n        backdrop-filter: blur(10px);\n        border: 1px solid var(--accent);\n        color: var(--accent);\n        padding: 6px 14px;\n        border-radius: 6px;\n        font-size: 0.75rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        z-index: 3;\n    }\n\n    .car-info {\n        padding: 30px;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n    }\n\n    .car-brand-name {\n        font-size: 0.85rem;\n        color: var(--accent);\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        font-weight: 600;\n        margin-bottom: 8px;\n    }\n\n    .car-title {\n        font-size: 1.6rem !important;\n        font-weight: 800 !important;\n        margin-bottom: 20px !important;\n        line-height: 1.2;\n    }\n\n    .car-specs {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 15px;\n        margin-bottom: 30px;\n        padding-bottom: 25px;\n        border-bottom: 1px solid var(--border-color);\n    }\n\n    .spec-item {\n        font-size: 0.9rem;\n        color: var(--text-muted);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .spec-item i {\n        color: var(--accent);\n        font-size: 1rem;\n        width: 16px;\n    }\n\n    .car-price-row {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-top: auto;\n    }\n\n    .car-price {\n        font-family: var(--font-title);\n        font-size: 1.7rem;\n        font-weight: 900;\n        color: #fff;\n    }\n\n    .btn-sm {\n        padding: 10px 22px;\n        font-size: 0.85rem;\n        font-weight: 700;\n        border-radius: 4px;\n    }\n\n    \/* Configurator Studio Section *\/\n    .configurator-section {\n        background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);\n    }\n\n    .configurator-grid {\n        display: grid;\n        grid-template-columns: 1.1fr 0.9fr;\n        gap: 60px;\n        align-items: center;\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 16px;\n        padding: 60px;\n        box-shadow: var(--card-shadow);\n        backdrop-filter: blur(20px);\n    }\n\n    .configurator-visual {\n        position: relative;\n        text-align: center;\n    }\n\n    .configurator-glow {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 80%;\n        height: 70%;\n        background: radial-gradient(circle, var(--accent-glow) 0%, rgba(0,0,0,0) 70%);\n        z-index: 1;\n        pointer-events: none;\n        transition: var(--transition-premium);\n    }\n\n    .configurator-car-img {\n        width: 100%;\n        max-width: 650px;\n        height: auto;\n        position: relative;\n        z-index: 2;\n        transition: var(--transition-premium);\n        filter: drop-shadow(0 15px 15px rgba(0,0,0,0.5));\n    }\n\n    .configurator-specs {\n        position: absolute;\n        bottom: -30px;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        gap: 30px;\n        z-index: 3;\n        background: rgba(3, 3, 6, 0.85);\n        border: 1px solid var(--border-color);\n        padding: 15px 35px;\n        border-radius: 50px;\n        backdrop-filter: blur(10px);\n    }\n\n    .config-spec-badge {\n        text-align: center;\n    }\n\n    .config-spec-val {\n        font-family: var(--font-title);\n        font-weight: 800;\n        font-size: 1.1rem;\n        color: #fff;\n    }\n\n    .config-spec-lbl {\n        font-size: 0.7rem;\n        color: var(--text-muted);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .configurator-controls {\n        display: flex;\n        flex-direction: column;\n        gap: 35px;\n    }\n\n    .configurator-title h3 {\n        font-size: 2.2rem !important;\n        font-weight: 900 !important;\n        text-transform: uppercase;\n        margin-bottom: 10px !important;\n        letter-spacing: 1px;\n    }\n\n    .configurator-title p {\n        color: var(--text-muted);\n        font-size: 1rem;\n        font-weight: 300;\n        line-height: 1.6;\n    }\n\n    .control-group {\n        border-bottom: 1px solid var(--border-color);\n        padding-bottom: 25px;\n    }\n\n    .control-group:last-child {\n        border-bottom: none;\n        padding-bottom: 0;\n    }\n\n    .control-label {\n        font-family: var(--font-title);\n        font-weight: 700;\n        font-size: 1rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        margin-bottom: 15px;\n        display: flex;\n        justify-content: space-between;\n    }\n\n    .control-selection-lbl {\n        font-size: 0.9rem;\n        color: var(--accent);\n        font-weight: 500;\n        text-transform: none;\n        letter-spacing: 0;\n    }\n\n    \/* Color Swatches *\/\n    .color-swatches {\n        display: flex;\n        gap: 15px;\n    }\n\n    .swatch {\n        width: 36px;\n        height: 36px;\n        border-radius: 50%;\n        cursor: pointer;\n        position: relative;\n        border: 2px solid transparent;\n        transition: var(--transition-premium);\n    }\n\n    .swatch::after {\n        content: '';\n        position: absolute;\n        inset: -5px;\n        border: 1px solid transparent;\n        border-radius: 50%;\n        transition: var(--transition-premium);\n    }\n\n    .swatch:hover::after, .swatch.active::after {\n        border-color: var(--accent);\n    }\n\n    .swatch.silver { background-color: #d1d5db; }\n    .swatch.black { background-color: #1e293b; }\n    .swatch.red { background-color: #ff0055; }\n    .swatch.blue { background-color: #00aaff; }\n    .swatch.orange { background-color: #ff6b00; }\n    .swatch.green { background-color: #39ff14; }\n\n    \/* Button options group *\/\n    .option-cards {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 12px;\n    }\n\n    .opt-card {\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        padding: 15px 10px;\n        border-radius: 8px;\n        text-align: center;\n        cursor: pointer;\n        transition: var(--transition-premium);\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n    }\n\n    .opt-card:hover {\n        border-color: rgba(255,255,255,0.15);\n    }\n\n    .opt-card.active {\n        border-color: var(--accent);\n        background: rgba(0, 240, 255, 0.02);\n    }\n\n    .opt-title {\n        font-size: 0.85rem;\n        font-weight: 700;\n        color: #fff;\n    }\n\n    .opt-price {\n        font-size: 0.75rem;\n        color: var(--text-muted);\n    }\n\n    .opt-card.active .opt-price {\n        color: var(--accent);\n    }\n\n    \/* Price and Action Row *\/\n    .configurator-footer {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        padding: 20px 30px;\n        border-radius: 12px;\n        margin-top: 10px;\n    }\n\n    .price-display {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .price-lbl {\n        font-size: 0.75rem;\n        color: var(--text-muted);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .price-val {\n        font-family: var(--font-title);\n        font-size: 1.8rem;\n        font-weight: 900;\n        color: #fff;\n    }\n\n    \/* Brands Section *\/\n    .brands-grid {\n        display: grid;\n        grid-template-columns: repeat(8, 1fr);\n        gap: 20px;\n    }\n\n    .brand-card {\n        background: var(--bg-secondary);\n        border: 1px solid var(--border-color);\n        border-radius: 10px;\n        padding: 30px 15px;\n        text-align: center;\n        cursor: pointer;\n        transition: var(--transition-premium);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 15px;\n    }\n\n    .brand-card:hover {\n        border-color: var(--accent);\n        background: var(--bg-tertiary);\n        transform: translateY(-8px);\n        box-shadow: 0 15px 30px rgba(0, 240, 255, 0.08);\n    }\n\n    .brand-card i {\n        font-size: 2.4rem;\n        color: var(--text-muted);\n        transition: var(--transition-premium);\n    }\n\n    .brand-card:hover i {\n        color: var(--accent);\n        text-shadow: 0 0 10px var(--accent-glow);\n    }\n\n    .brand-card span {\n        font-family: var(--font-title);\n        font-size: 0.95rem;\n        font-weight: 600;\n        color: var(--text-muted);\n        transition: var(--transition-premium);\n    }\n\n    .brand-card:hover span {\n        color: #fff;\n    }\n\n    \/* Why Choose Us Section *\/\n    .why-us-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 30px;\n    }\n\n    .why-card {\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 12px;\n        padding: 45px 35px;\n        transition: var(--transition-premium);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .why-card:hover {\n        transform: translateY(-8px);\n        border-color: rgba(255, 255, 255, 0.12);\n        background: var(--bg-tertiary);\n    }\n\n    .why-icon {\n        width: 65px;\n        height: 65px;\n        background: rgba(0, 240, 255, 0.03);\n        border: 1px solid rgba(0, 240, 255, 0.12);\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 30px;\n        font-size: 1.8rem;\n        color: var(--accent);\n        transition: var(--transition-premium);\n    }\n\n    .why-card:hover .why-icon {\n        background: var(--accent-gradient);\n        color: #000;\n        box-shadow: var(--accent-shadow);\n        border-color: transparent;\n    }\n\n    .why-card h3 {\n        font-size: 1.4rem !important;\n        margin-bottom: 15px !important;\n        font-weight: 700 !important;\n    }\n\n    .why-card p {\n        color: var(--text-muted) !important;\n        font-size: 1rem;\n        line-height: 1.6;\n        font-weight: 300;\n    }\n\n    \/* Latest Arrivals (Horizontal Cards) *\/\n    .arrivals-list {\n        display: flex;\n        flex-direction: column;\n        gap: 50px;\n    }\n\n    .arrival-card {\n        display: grid;\n        grid-template-columns: 1.25fr 0.75fr;\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: var(--card-shadow);\n        transition: var(--transition-premium);\n    }\n\n    .arrival-card:hover {\n        border-color: rgba(0, 240, 255, 0.25);\n        box-shadow: 0 20px 45px rgba(0, 240, 255, 0.1), var(--card-shadow);\n    }\n\n    .arrival-img {\n        width: 100%;\n        height: 420px;\n        overflow: hidden;\n    }\n\n    .arrival-img img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .arrival-card:hover .arrival-img img {\n        transform: scale(1.05);\n    }\n\n    .arrival-info {\n        padding: 50px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        background: linear-gradient(90deg, rgba(8,8,13,0.5) 0%, rgba(16,16,25,0.2) 100%);\n    }\n\n    .arrival-tag {\n        color: var(--accent-red);\n        font-size: 0.8rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 2.5px;\n        margin-bottom: 15px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .arrival-title {\n        font-size: 2.2rem !important;\n        margin-bottom: 20px !important;\n        font-weight: 800 !important;\n    }\n\n    .arrival-desc {\n        color: var(--text-muted);\n        font-size: 1rem;\n        margin-bottom: 30px;\n        font-weight: 300;\n        line-height: 1.6;\n    }\n\n    .arrivals-specs {\n        display: flex;\n        gap: 30px;\n        margin-bottom: 40px;\n    }\n\n    .arrival-spec-item {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        color: var(--text-main);\n        font-size: 0.95rem;\n        font-weight: 600;\n    }\n\n    .arrival-spec-item i {\n        color: var(--accent);\n    }\n\n    .arrival-footer {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .arrival-price {\n        font-family: var(--font-title);\n        font-size: 2rem;\n        font-weight: 900;\n        color: #fff;\n    }\n\n    \/* Financing Section *\/\n    .financing-container {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 70px;\n        align-items: center;\n        background: linear-gradient(135deg, rgba(16,16,25,0.7) 0%, rgba(4,4,8,0.7) 100%);\n        border: 1px solid var(--glass-border);\n        border-radius: 16px;\n        padding: 70px;\n        box-shadow: var(--card-shadow);\n        backdrop-filter: blur(20px);\n    }\n\n    .finance-text h2 {\n        font-size: 2.8rem !important;\n        font-weight: 800 !important;\n        margin-bottom: 25px !important;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        background: linear-gradient(180deg, #ffffff 0%, #a2abbc 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .finance-text p {\n        color: var(--text-muted) !important;\n        font-size: 1.1rem !important;\n        margin-bottom: 35px !important;\n        line-height: 1.7;\n    }\n\n    .finance-list {\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n        margin: 0;\n        padding: 0;\n    }\n\n    .finance-list li {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        color: var(--text-main);\n        font-weight: 500;\n    }\n\n    .finance-list li i {\n        color: var(--accent);\n        font-size: 1.2rem;\n    }\n\n    .finance-calculator {\n        background: var(--bg-primary);\n        border: 1px solid var(--border-color);\n        border-radius: 12px;\n        padding: 45px;\n        box-shadow: var(--card-shadow);\n    }\n\n    .finance-calculator h3 {\n        font-size: 1.6rem !important;\n        margin-bottom: 35px !important;\n        text-align: center;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .calc-group {\n        margin-bottom: 30px;\n    }\n\n    .calc-label-row {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 12px;\n        font-size: 0.95rem;\n        color: var(--text-muted);\n    }\n\n    .calc-val {\n        color: #fff;\n        font-weight: 700;\n    }\n\n    .calc-slider-wrapper {\n        position: relative;\n    }\n\n    .calc-slider {\n        width: 100%;\n        height: 6px;\n        border-radius: 3px;\n        background: var(--bg-tertiary);\n        outline: none;\n        -webkit-appearance: none;\n        transition: background 0.3s;\n    }\n\n    .calc-slider::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        width: 20px;\n        height: 20px;\n        border-radius: 50%;\n        background: var(--accent);\n        cursor: pointer;\n        box-shadow: 0 0 10px var(--accent);\n        border: 2px solid #fff;\n        transition: transform 0.1s;\n    }\n\n    .calc-slider::-webkit-slider-thumb:hover {\n        transform: scale(1.2);\n    }\n\n    .calc-result {\n        background: rgba(0, 240, 255, 0.02);\n        border: 1px dashed rgba(0, 240, 255, 0.2);\n        border-radius: 8px;\n        padding: 25px;\n        text-align: center;\n        margin-bottom: 35px;\n    }\n\n    .calc-result-title {\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        color: var(--text-muted);\n        letter-spacing: 1.5px;\n        margin-bottom: 8px;\n    }\n\n    .calc-result-val {\n        font-family: var(--font-title);\n        font-size: 2.2rem;\n        font-weight: 900;\n        color: var(--accent);\n        text-shadow: 0 0 15px rgba(0,240,255,0.2);\n    }\n\n    .calc-btn-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n    }\n\n    \/* Client Testimonials Section *\/\n    .testimonials-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 35px;\n    }\n\n    .testi-card {\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 12px;\n        padding: 40px;\n        position: relative;\n        box-shadow: var(--card-shadow);\n        transition: var(--transition-premium);\n    }\n\n    .testi-card:hover {\n        border-color: rgba(255,255,255,0.1);\n        transform: translateY(-5px);\n    }\n\n    .stars {\n        color: #ffb703;\n        margin-bottom: 25px;\n        font-size: 1rem;\n    }\n\n    .testi-text {\n        color: var(--text-muted) !important;\n        font-size: 1rem !important;\n        font-style: italic;\n        margin-bottom: 30px !important;\n        line-height: 1.7;\n        position: relative;\n        z-index: 2;\n        font-weight: 300;\n    }\n\n    .testi-quote-icon {\n        position: absolute;\n        top: 30px;\n        right: 35px;\n        font-size: 4.5rem;\n        color: rgba(255,255,255,0.015);\n        z-index: 1;\n        pointer-events: none;\n    }\n\n    .client-info {\n        display: flex;\n        align-items: center;\n        gap: 15px;\n    }\n\n    .client-avatar {\n        width: 55px;\n        height: 55px;\n        border-radius: 50%;\n        object-fit: cover;\n        border: 2px solid var(--accent);\n    }\n\n    .client-name {\n        font-size: 1.05rem;\n        font-weight: 700;\n        color: #fff;\n    }\n\n    .client-title {\n        font-size: 0.8rem;\n        color: var(--text-muted);\n    }\n\n    \/* Luxury Gallery Section *\/\n    .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        grid-auto-rows: 240px;\n        gap: 25px;\n    }\n\n    .gallery-item {\n        overflow: hidden;\n        border-radius: 12px;\n        position: relative;\n        cursor: pointer;\n        border: 1px solid var(--glass-border);\n        box-shadow: var(--card-shadow);\n    }\n\n    .gallery-item.tall {\n        grid-row: span 2;\n    }\n\n    .gallery-item.wide {\n        grid-column: span 2;\n    }\n\n    .gallery-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .gallery-overlay {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(3,3,6,0.9) 100%);\n        display: flex;\n        align-items: flex-end;\n        padding: 30px;\n        opacity: 0;\n        transition: opacity 0.5s ease;\n        z-index: 2;\n    }\n\n    .gallery-item:hover .gallery-overlay {\n        opacity: 1;\n    }\n\n    .gallery-item:hover img {\n        transform: scale(1.08);\n    }\n\n    .gallery-title {\n        font-size: 1.25rem;\n        color: #fff;\n        font-family: var(--font-title);\n        font-weight: 700;\n        transform: translateY(15px);\n        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .gallery-item:hover .gallery-title {\n        transform: translateY(0);\n    }\n\n    \/* Call To Action Banner *\/\n    .cta-banner {\n        background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(3,3,6,0.97) 100%), \n                    url('https:\/\/images.unsplash.com\/photo-1542282088-fe8426682b8f?auto=format&fit=crop&w=1920&q=80') no-repeat center center\/cover;\n        border: 1px solid var(--glass-border);\n        border-radius: 16px;\n        padding: 90px 40px;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n        box-shadow: var(--card-shadow);\n        backdrop-filter: blur(10px);\n    }\n\n    .cta-banner h2 {\n        font-size: 3.2rem !important;\n        margin-bottom: 25px !important;\n        font-weight: 900 !important;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .cta-banner p {\n        color: var(--text-muted) !important;\n        font-size: 1.25rem !important;\n        max-width: 650px;\n        margin: 0 auto 45px !important;\n        font-weight: 300;\n        line-height: 1.6;\n    }\n\n    \/* Footer *\/\n    .footer {\n        background: var(--bg-secondary);\n        border-top: 1px solid var(--border-color);\n        padding: 90px 8% 40px;\n    }\n\n    .footer-grid {\n        display: grid;\n        grid-template-columns: 1.4fr 0.8fr 0.9fr 1.1fr;\n        gap: 50px;\n        margin-bottom: 60px;\n    }\n\n    .footer-col h4 {\n        font-size: 1.15rem !important;\n        margin-bottom: 30px !important;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .footer-logo {\n        font-family: var(--font-title);\n        font-size: 1.6rem;\n        font-weight: 900;\n        color: #fff;\n        letter-spacing: 2px;\n        margin-bottom: 25px;\n        display: inline-block;\n    }\n\n    .footer-logo span {\n        color: var(--accent);\n        background: var(--accent-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .footer-about-text {\n        color: var(--text-muted);\n        font-size: 0.95rem;\n        margin-bottom: 30px;\n        line-height: 1.7;\n        font-weight: 300;\n    }\n\n    .footer-socials {\n        display: flex;\n        gap: 15px;\n    }\n\n    .footer-socials a {\n        width: 42px;\n        height: 42px;\n        border-radius: 50%;\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        color: var(--text-muted);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: var(--transition-premium);\n    }\n\n    .footer-socials a:hover {\n        color: #000;\n        background: var(--accent);\n        border-color: var(--accent);\n        transform: translateY(-4px);\n        box-shadow: var(--accent-shadow);\n    }\n\n    .footer-links {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .footer-links li {\n        margin-bottom: 15px;\n    }\n\n    .footer-links a {\n        color: var(--text-muted);\n        font-size: 0.95rem;\n        transition: color 0.3s ease;\n    }\n\n    .footer-links a:hover {\n        color: var(--accent);\n    }\n\n    .footer-contact-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .footer-contact-list li {\n        display: flex;\n        align-items: flex-start;\n        gap: 15px;\n        color: var(--text-muted);\n        font-size: 0.95rem;\n        margin-bottom: 20px;\n        line-height: 1.5;\n    }\n\n    .footer-contact-list li i {\n        color: var(--accent);\n        margin-top: 3px;\n        width: 16px;\n    }\n\n    .newsletter-form {\n        display: flex;\n        flex-direction: column;\n        gap: 15px;\n    }\n\n    .newsletter-input-wrapper {\n        position: relative;\n    }\n\n    .newsletter-input {\n        width: 100%;\n        background: var(--bg-primary);\n        border: 1px solid var(--border-color);\n        border-radius: 6px;\n        padding: 16px 20px;\n        color: #fff;\n        font-size: 0.95rem;\n        outline: none;\n        transition: var(--transition-premium);\n    }\n\n    .newsletter-input:focus {\n        border-color: var(--accent);\n        box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);\n    }\n\n    .newsletter-btn {\n        background: var(--accent-gradient);\n        color: #000;\n        border: none;\n        padding: 16px 25px;\n        border-radius: 6px;\n        font-weight: 700;\n        cursor: pointer;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        transition: var(--transition-premium);\n    }\n\n    .newsletter-btn:hover {\n        box-shadow: 0 5px 25px rgba(0, 240, 255, 0.45);\n        transform: translateY(-2px);\n    }\n\n    .footer-bottom {\n        border-top: 1px solid var(--border-color);\n        padding-top: 35px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: var(--text-muted);\n        font-size: 0.9rem;\n    }\n\n    \/* Modal Styling *\/\n    .modal-overlay {\n        position: fixed;\n        inset: 0;\n        background: rgba(3, 3, 6, 0.85);\n        backdrop-filter: blur(15px);\n        z-index: 2000;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.4s ease;\n    }\n\n    .modal-overlay.active {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    .modal-container {\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        border-radius: 16px;\n        width: 100%;\n        max-width: 550px;\n        padding: 45px;\n        box-shadow: var(--card-shadow);\n        position: relative;\n        transform: translateY(30px) scale(0.95);\n        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n\n    .modal-overlay.active .modal-container {\n        transform: translateY(0) scale(1);\n    }\n\n    .modal-close-btn {\n        position: absolute;\n        top: 25px;\n        right: 25px;\n        background: transparent;\n        border: none;\n        color: var(--text-muted);\n        font-size: 1.4rem;\n        cursor: pointer;\n        transition: color 0.3s;\n    }\n\n    .modal-close-btn:hover {\n        color: #fff;\n    }\n\n    .modal-header h3 {\n        font-size: 1.8rem !important;\n        font-weight: 800 !important;\n        margin-bottom: 10px !important;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .modal-header p {\n        color: var(--text-muted);\n        font-size: 0.95rem;\n        margin-bottom: 30px;\n    }\n\n    .form-group {\n        margin-bottom: 20px;\n    }\n\n    .form-label {\n        display: block;\n        font-size: 0.85rem;\n        color: var(--text-muted);\n        margin-bottom: 8px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 600;\n    }\n\n    .form-input {\n        width: 100%;\n        background: var(--bg-primary);\n        border: 1px solid var(--border-color);\n        border-radius: 6px;\n        padding: 14px 18px;\n        color: #fff;\n        font-size: 0.95rem;\n        outline: none;\n        transition: var(--transition-premium);\n    }\n\n    .form-input:focus {\n        border-color: var(--accent);\n        box-shadow: 0 0 10px rgba(0,240,255,0.1);\n    }\n\n    .modal-form-btn {\n        width: 100%;\n        background: var(--accent-gradient);\n        color: #000;\n        border: none;\n        padding: 16px;\n        border-radius: 6px;\n        font-weight: 700;\n        cursor: pointer;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        margin-top: 15px;\n        transition: var(--transition-premium);\n    }\n\n    .modal-form-btn:hover {\n        box-shadow: var(--accent-shadow);\n        transform: translateY(-2px);\n    }\n\n    \/* Live Concierge Chat Widget *\/\n    .chat-widget-wrapper {\n        position: fixed;\n        bottom: 30px;\n        right: 30px;\n        z-index: 1500;\n    }\n\n    .chat-bubble-btn {\n        width: 60px;\n        height: 60px;\n        border-radius: 50%;\n        background: var(--accent-gradient);\n        color: #000;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.5rem;\n        cursor: pointer;\n        box-shadow: 0 8px 30px rgba(0, 240, 255, 0.4);\n        transition: var(--transition-premium);\n        position: relative;\n    }\n\n    .chat-bubble-btn:hover {\n        transform: scale(1.1) rotate(5deg);\n    }\n\n    .chat-notification-dot {\n        position: absolute;\n        top: 2px;\n        right: 2px;\n        width: 14px;\n        height: 14px;\n        background-color: var(--accent-red);\n        border: 2px solid var(--bg-primary);\n        border-radius: 50%;\n        animation: pulseRed 2s infinite;\n    }\n\n    @keyframes pulseRed {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.2); }\n    }\n\n    .chat-window {\n        position: absolute;\n        bottom: 75px;\n        right: 0;\n        width: 380px;\n        height: 500px;\n        background: var(--glass-bg);\n        border: 1px solid var(--glass-border);\n        border-radius: 16px;\n        box-shadow: var(--card-shadow);\n        backdrop-filter: blur(25px);\n        display: flex;\n        flex-direction: column;\n        opacity: 0;\n        pointer-events: none;\n        transform: translateY(30px) scale(0.95);\n        transition: var(--transition-premium);\n    }\n\n    .chat-window.active {\n        opacity: 1;\n        pointer-events: all;\n        transform: translateY(0) scale(1);\n    }\n\n    .chat-header {\n        background: var(--bg-tertiary);\n        border-bottom: 1px solid var(--border-color);\n        padding: 20px;\n        border-radius: 16px 16px 0 0;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .chat-agent-info {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n\n    .chat-agent-avatar {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        object-fit: cover;\n        border: 1.5px solid var(--accent);\n    }\n\n    .chat-agent-name {\n        font-weight: 700;\n        color: #fff;\n        font-size: 0.95rem;\n    }\n\n    .chat-agent-status {\n        font-size: 0.75rem;\n        color: var(--accent-green);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n    }\n\n    .chat-close-btn {\n        background: transparent;\n        border: none;\n        color: var(--text-muted);\n        font-size: 1.1rem;\n        cursor: pointer;\n        transition: color 0.3s;\n    }\n\n    .chat-close-btn:hover {\n        color: #fff;\n    }\n\n    .chat-messages {\n        flex-grow: 1;\n        padding: 20px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 15px;\n        scrollbar-width: none;\n    }\n\n    .chat-messages::-webkit-scrollbar {\n        display: none;\n    }\n\n    .chat-bubble {\n        max-width: 80%;\n        padding: 14px 18px;\n        border-radius: 12px;\n        font-size: 0.9rem;\n        line-height: 1.5;\n    }\n\n    .chat-bubble.agent {\n        background: var(--bg-tertiary);\n        border: 1px solid var(--border-color);\n        color: #fff;\n        align-self: flex-start;\n        border-top-left-radius: 2px;\n    }\n\n    .chat-bubble.user {\n        background: var(--accent-gradient);\n        color: #000;\n        align-self: flex-end;\n        border-top-right-radius: 2px;\n        font-weight: 500;\n    }\n\n    .chat-options-group {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        margin-top: 10px;\n    }\n\n    .chat-opt-bubble {\n        background: rgba(255,255,255,0.03);\n        border: 1px solid var(--border-color);\n        color: var(--accent);\n        padding: 10px 16px;\n        border-radius: 20px;\n        cursor: pointer;\n        font-size: 0.85rem;\n        font-weight: 600;\n        text-align: center;\n        transition: var(--transition-premium);\n    }\n\n    .chat-opt-bubble:hover {\n        background: rgba(0, 240, 255, 0.05);\n        border-color: var(--accent);\n        transform: translateY(-2px);\n    }\n\n    .chat-input-area {\n        background: var(--bg-tertiary);\n        border-top: 1px solid var(--border-color);\n        padding: 15px;\n        display: flex;\n        gap: 10px;\n        border-radius: 0 0 16px 16px;\n    }\n\n    .chat-text-input {\n        flex-grow: 1;\n        background: var(--bg-primary);\n        border: 1px solid var(--border-color);\n        border-radius: 6px;\n        padding: 12px 15px;\n        color: #fff;\n        font-size: 0.9rem;\n        outline: none;\n        transition: border-color 0.3s;\n    }\n\n    .chat-text-input:focus {\n        border-color: var(--accent);\n    }\n\n    .chat-send-btn {\n        width: 44px;\n        height: 44px;\n        border-radius: 6px;\n        background: var(--accent-gradient);\n        color: #000;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.1rem;\n        transition: var(--transition-premium);\n    }\n\n    .chat-send-btn:hover {\n        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);\n    }\n\n    \/* Responsive Grid Styling *\/\n    @media (max-width: 1200px) {\n        .hero-grid {\n            grid-template-columns: 1fr;\n            gap: 40px;\n            text-align: center;\n        }\n        .hero-content {\n            text-align: center;\n        }\n        .hero-content p {\n            margin-left: auto;\n            margin-right: auto;\n        }\n        .hero-btns {\n            justify-content: center;\n        }\n        .hero-badge-card {\n            margin-left: auto;\n            margin-right: auto;\n        }\n        .featured-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        .configurator-grid {\n            grid-template-columns: 1fr;\n            padding: 40px;\n        }\n        .configurator-car-img {\n            max-width: 500px;\n        }\n        .brands-grid {\n            grid-template-columns: repeat(4, 1fr);\n        }\n        .testimonials-grid {\n            grid-template-columns: 1fr;\n            gap: 25px;\n        }\n        .gallery-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        .footer-grid {\n            grid-template-columns: 1fr 1fr;\n        }\n    }\n\n    @media (max-width: 900px) {\n        .navbar {\n            padding: 15px 30px;\n        }\n        .menu-btn {\n            display: block;\n        }\n        .nav-links {\n            position: fixed;\n            top: 70px;\n            left: -100%;\n            width: 100%;\n            height: calc(100vh - 70px);\n            background: var(--bg-primary);\n            flex-direction: column;\n            justify-content: center;\n            gap: 35px;\n            transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n            border-top: 1px solid var(--border-color);\n            z-index: 999;\n        }\n        .nav-links.active {\n            left: 0;\n        }\n        .hero-content h1 {\n            font-size: 3.2rem !important;\n        }\n        .why-us-grid {\n            grid-template-columns: 1fr;\n        }\n        .arrival-card {\n            grid-template-columns: 1fr;\n        }\n        .arrival-img {\n            height: 280px;\n        }\n        .arrival-info {\n            padding: 35px;\n        }\n        .financing-container {\n            grid-template-columns: 1fr;\n            padding: 45px 30px;\n        }\n        .chat-window {\n            width: calc(100vw - 60px);\n        }\n    }\n\n    @media (max-width: 600px) {\n        .featured-grid {\n            grid-template-columns: 1fr;\n        }\n        .brands-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        .hero-btns {\n            flex-direction: column;\n            align-items: stretch;\n        }\n        .btn {\n            width: 100%;\n        }\n        .footer-grid {\n            grid-template-columns: 1fr;\n            gap: 30px;\n        }\n        .footer-bottom {\n            flex-direction: column;\n            gap: 15px;\n            text-align: center;\n        }\n        .calc-btn-row {\n            grid-template-columns: 1fr;\n        }\n        .configurator-footer {\n            flex-direction: column;\n            gap: 20px;\n            text-align: center;\n        }\n        .modal-container {\n            padding: 30px 20px;\n        }\n        .option-cards {\n            grid-template-columns: 1fr;\n        }\n    }\n<\/style>\n\n<!-- Sticky Navigation Bar -->\n<nav class=\"navbar\" id=\"main-nav\">\n    <a href=\"#\" class=\"nav-logo\">\n        <span><i class=\"fa-solid fa-gauge-high\"><\/i><\/span> APEX <span>AUTOS<\/span>\n    <\/a>\n    <ul class=\"nav-links\" id=\"menu-links\">\n        <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>\n        <li><a href=\"#featured\">Inventory<\/a><\/li>\n        <li><a href=\"#studio\">Design Studio<\/a><\/li>\n        <li><a href=\"#about\">Why Us<\/a><\/li>\n        <li><a href=\"#financing\">Financing<\/a><\/li>\n        <li><a href=\"#gallery\">Gallery<\/a><\/li>\n        <li><a href=\"#\" class=\"nav-cta\" id=\"nav-book-btn\">Book Test Drive<\/a><\/li>\n    <\/ul>\n    <div class=\"menu-btn\" id=\"mobile-toggle\">\n        <i class=\"fa-solid fa-bars\"><\/i>\n    <\/div>\n<\/nav>\n\n<!-- Hero Section -->\n<header class=\"hero\" id=\"home\">\n    <div class=\"hero-grid\">\n        <div class=\"hero-content\">\n            <h1 class=\"animate-on-scroll\">The Pinnacle of <span>Automotive Artistry<\/span><\/h1>\n            <p class=\"animate-on-scroll\">Experience an elite collection of world-class supercars, sports classics, and hyper hybrids. Curated for the most discerning collectors and drivers.<\/p>\n            <div class=\"hero-btns animate-on-scroll\">\n                <a href=\"#featured\" class=\"btn btn-primary\">Explore Inventory <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n                <a href=\"#\" class=\"btn btn-secondary\" id=\"hero-book-btn\">Schedule Private Tour<\/a>\n            <\/div>\n        <\/div>\n        <div class=\"animate-on-scroll\">\n            <div class=\"hero-badge-card\">\n                <div class=\"hero-badge-title\">\n                    <i class=\"fa-solid fa-circle-play\" style=\"color: var(--accent); font-size: 0.6rem;\"><\/i> Flagship Spotlight\n                <\/div>\n                <div class=\"hero-badge-car\">Porsche 911 GT3 RS<\/div>\n                <div class=\"hero-badge-stats\">\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Power Output<\/span>\n                        <span class=\"stat-value\">525 Horsepower<\/span>\n                    <\/div>\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Acceleration (0-100 km\/h)<\/span>\n                        <span class=\"stat-value\">3.2 Seconds<\/span>\n                    <\/div>\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">N\u00fcrburgring Record<\/span>\n                        <span class=\"stat-value\">6:49.328 min<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <div class=\"scroll-indicator\">\n        <span style=\"font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted);\">Explore<\/span>\n        <div class=\"mouse-icon\">\n            <div class=\"mouse-wheel\"><\/div>\n        <\/div>\n    <\/div>\n<\/header>\n\n<!-- Featured Cars Section -->\n<section class=\"section-padding\" id=\"featured\">\n    <div class=\"mesh-gradient-bg\" style=\"top: 10%; left: -200px;\"><\/div>\n    <div class=\"mesh-gradient-bg\" style=\"bottom: 10%; right: -200px;\"><\/div>\n\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Flagship Showroom<\/h2>\n        <p>A curated collection of exceptional luxury and sports vehicles meticulously detailed and ready for immediate delivery.<\/p>\n    <\/div>\n\n    <!-- Dynamic Showcase Tabs -->\n    <div class=\"showcase-tabs animate-on-scroll\">\n        <button class=\"tab-btn active\" onclick=\"filterShowcase('all', this)\">All Showcase<\/button>\n        <button class=\"tab-btn\" onclick=\"filterShowcase('petrol', this)\">Petrol \/ Hybrid<\/button>\n        <button class=\"tab-btn\" onclick=\"filterShowcase('electric', this)\">Electric<\/button>\n    <\/div>\n\n    <div class=\"featured-grid\">\n        <!-- Car 1: Porsche 911 -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"petrol\">\n            <span class=\"car-badge\">Petrol<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1614162692292-7ac56d7f7f1e?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Porsche 911 GT3 RS\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">Porsche<\/div>\n                <h3 class=\"car-title\">911 GT3 RS<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2024<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 525 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> RWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$223,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"Porsche 911 GT3 RS\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Car 2: Tesla Model S -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"electric\">\n            <span class=\"car-badge\">Electric<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1617788138017-80ad40651399?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Tesla Model S Plaid\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">Tesla<\/div>\n                <h3 class=\"car-title\">Model S Plaid<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2024<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 1,020 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> AWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$89,990<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"Tesla Model S Plaid\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Car 3: Audi R8 -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"petrol\">\n            <span class=\"car-badge\">Petrol<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1603584173870-7f23fdae1b7a?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Audi R8 V10\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">Audi<\/div>\n                <h3 class=\"car-title\">R8 V10 Performance<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2023<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 620 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> AWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$159,900<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"Audi R8 V10\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Car 4: Mercedes AMG -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"petrol\">\n            <span class=\"car-badge\">Petrol<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618843479313-40f8afb4b4d8?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Mercedes-AMG GT\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">Mercedes-Benz<\/div>\n                <h3 class=\"car-title\">AMG GT Black Series<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2024<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 730 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> RWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$325,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"Mercedes AMG GT Black Series\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Car 5: BMW M8 -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"petrol\">\n            <span class=\"car-badge\">Petrol<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555215695-3004980ad54e?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"BMW M8\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">BMW<\/div>\n                <h3 class=\"car-title\">M8 Competition<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2024<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 625 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> AWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$130,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"BMW M8 Competition\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Car 6: Lamborghini Huracan -->\n        <div class=\"car-card animate-on-scroll\" data-fuel=\"petrol\">\n            <span class=\"car-badge\">Petrol<\/span>\n            <div class=\"car-img-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1621135802920-133df287f89c?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Lamborghini Huracan\">\n            <\/div>\n            <div class=\"car-info\">\n                <div class=\"car-brand-name\">Lamborghini<\/div>\n                <h3 class=\"car-title\">Hurac\u00e1n Tecnica<\/h3>\n                <div class=\"car-specs\">\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-calendar\"><\/i> 2024<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gear\"><\/i> Automatic<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-gauge\"><\/i> 640 HP<\/div>\n                    <div class=\"spec-item\"><i class=\"fa-solid fa-road\"><\/i> RWD<\/div>\n                <\/div>\n                <div class=\"car-price-row\">\n                    <div class=\"car-price\">$249,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-sm btn-view-details\" data-car=\"Lamborghini Huracan\">Inquire<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Customization Studio Section -->\n<section class=\"section-padding configurator-section\" id=\"studio\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Apex Bespoke Studio<\/h2>\n        <p>Breathe life into your imagination. Customize paint finishes, forged wheels, and interior materials for your bespoke commission.<\/p>\n    <\/div>\n\n    <div class=\"configurator-grid animate-on-scroll\">\n        <!-- Visualizer Area -->\n        <div class=\"configurator-visual\">\n            <div class=\"configurator-glow\" id=\"car-glow-layer\"><\/div>\n            <!-- Using Unsplash silver sports car profile -->\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1525609004556-c46c7d6cf0a3?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Custom Supercar Studio\" class=\"configurator-car-img\" id=\"configurator-car\">\n            \n            <div class=\"configurator-specs\">\n                <div class=\"config-spec-badge\">\n                    <div class=\"config-spec-val\">V8 Biturbo<\/div>\n                    <div class=\"config-spec-lbl\">Engine<\/div>\n                <\/div>\n                <div style=\"width: 1px; background: var(--border-color);\"><\/div>\n                <div class=\"config-spec-badge\">\n                    <div class=\"config-spec-val\">710 HP<\/div>\n                    <div class=\"config-spec-lbl\">Power<\/div>\n                <\/div>\n                <div style=\"width: 1px; background: var(--border-color);\"><\/div>\n                <div class=\"config-spec-badge\">\n                    <div class=\"config-spec-val\">2.8s<\/div>\n                    <div class=\"config-spec-lbl\">0-100 km\/h<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Controls Area -->\n        <div class=\"configurator-controls\">\n            <div class=\"configurator-title\">\n                <h3>Vantage Spec Studio<\/h3>\n                <p>Customize the specifications of your custom-spec Vantage Supercoupe. Watch the updates in real-time below.<\/p>\n            <\/div>\n\n            <!-- Paint selector -->\n            <div class=\"control-group\">\n                <div class=\"control-label\">\n                    <span>1. Paint Color<\/span>\n                    <span class=\"control-selection-lbl\" id=\"paint-label\">Liquid Silver<\/span>\n                <\/div>\n                <div class=\"color-swatches\">\n                    <div class=\"swatch silver active\" onclick=\"configurePaint('silver', 'Liquid Silver', this)\"><\/div>\n                    <div class=\"swatch black\" onclick=\"configurePaint('black', 'Stealth Graphite', this)\"><\/div>\n                    <div class=\"swatch red\" onclick=\"configurePaint('red', 'Volcano Crimson', this)\"><\/div>\n                    <div class=\"swatch blue\" onclick=\"configurePaint('blue', 'Miami Blue Metallic', this)\"><\/div>\n                    <div class=\"swatch orange\" onclick=\"configurePaint('orange', 'Sunset Sunburst', this)\"><\/div>\n                    <div class=\"swatch green\" onclick=\"configurePaint('green', 'Acid Green Pearl', this)\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Wheels Selector -->\n            <div class=\"control-group\">\n                <div class=\"control-label\">\n                    <span>2. Forged Wheels<\/span>\n                    <span class=\"control-selection-lbl\" id=\"wheels-label\">20&#8243; Aero Sport (Included)<\/span>\n                <\/div>\n                <div class=\"option-cards\">\n                    <div class=\"opt-card active\" onclick=\"configureOption('wheels', 0, '20&quot; Aero Sport (Included)', this)\">\n                        <span class=\"opt-title\">Aero Sport 20&#8243;<\/span>\n                        <span class=\"opt-price\">Included<\/span>\n                    <\/div>\n                    <div class=\"opt-card\" onclick=\"configureOption('wheels', 3000, '20&quot; Classic Mesh (+$3,000)', this)\">\n                        <span class=\"opt-title\">Classic Mesh 20&#8243;<\/span>\n                        <span class=\"opt-price\">+$3,000<\/span>\n                    <\/div>\n                    <div class=\"opt-card\" onclick=\"configureOption('wheels', 5000, '21&quot; Forged Carbon (+$5,000)', this)\">\n                        <span class=\"opt-title\">Forged Carbon 21&#8243;<\/span>\n                        <span class=\"opt-price\">+$5,000<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Interior trim selector -->\n            <div class=\"control-group\">\n                <div class=\"control-label\">\n                    <span>3. Interior Design<\/span>\n                    <span class=\"control-selection-lbl\" id=\"interior-label\">Alcantara Track Styling (Included)<\/span>\n                <\/div>\n                <div class=\"option-cards\">\n                    <div class=\"opt-card active\" onclick=\"configureOption('interior', 0, 'Alcantara Track Styling (Included)', this)\">\n                        <span class=\"opt-title\">Alcantara Track<\/span>\n                        <span class=\"opt-price\">Included<\/span>\n                    <\/div>\n                    <div class=\"opt-card\" onclick=\"configureOption('interior', 4000, 'Nappa Luxury Leather (+$4,000)', this)\">\n                        <span class=\"opt-title\">Nappa Leather<\/span>\n                        <span class=\"opt-price\">+$4,000<\/span>\n                    <\/div>\n                    <div class=\"opt-card\" onclick=\"configureOption('interior', 6000, 'Carbon Bespoke Trim (+$6,000)', this)\">\n                        <span class=\"opt-title\">Carbon Bespoke<\/span>\n                        <span class=\"opt-price\">+$6,000<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Bottom summary and CTA -->\n            <div class=\"configurator-footer\">\n                <div class=\"price-display\">\n                    <span class=\"price-lbl\">Bespoke Estimate<\/span>\n                    <span class=\"price-val\" id=\"configurator-total-val\">$220,000<\/span>\n                <\/div>\n                <button class=\"btn btn-primary btn-sm\" onclick=\"openReservationModal()\" style=\"padding: 14px 28px;\">Reserve Build<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Browse by Brand Section -->\n<section class=\"section-padding\" id=\"brands\" style=\"background-color: var(--bg-secondary);\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Premium Manufacturers<\/h2>\n        <p>Filter vehicles from our portfolio of premium global automotive brands.<\/p>\n    <\/div>\n\n    <div class=\"brands-grid\">\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-car-side\"><\/i>\n            <span>BMW<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-gem\"><\/i>\n            <span>Mercedes-Benz<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-ring\"><\/i>\n            <span>Audi<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-crown\"><\/i>\n            <span>Porsche<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-bolt\"><\/i>\n            <span>Tesla<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-fire\"><\/i>\n            <span>Lamborghini<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-horse\"><\/i>\n            <span>Ferrari<\/span>\n        <\/div>\n        <div class=\"brand-card animate-on-scroll\">\n            <i class=\"fa-solid fa-compass\"><\/i>\n            <span>Rolls-Royce<\/span>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Why Choose Us Section -->\n<section class=\"section-padding\" id=\"about\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Why Choose Apex Autos<\/h2>\n        <p>We pride ourselves on offering the world&#8217;s most streamlined and high-end automotive purchase process.<\/p>\n    <\/div>\n\n    <div class=\"why-us-grid\">\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-award\"><\/i><\/div>\n            <h3>Curated Flagship Fleet<\/h3>\n            <p>Every vehicle in our collection goes through multiple checks to ensure absolute luxury, build quality, and unmatched road performance.<\/p>\n        <\/div>\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\n            <h3>150-Point Technical Audit<\/h3>\n            <p>A rigorous 150-point inspection covering everything from aesthetics, transmission, battery cell diagnostics, and engine health.<\/p>\n        <\/div>\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-hand-holding-dollar\"><\/i><\/div>\n            <h3>Tailored Premium Finance<\/h3>\n            <p>Tailored luxury financing options featuring competitive interest rates, flexible loan terms, and fast, hassle-free approvals.<\/p>\n        <\/div>\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div>\n            <h3>Comprehensive Coverage<\/h3>\n            <p>Complete peace of mind. Every luxury car purchased includes a comprehensive bumper-to-bumper extended dealership warranty.<\/p>\n        <\/div>\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-truck-ramp-box\"><\/i><\/div>\n            <h3>Secure Enclosed Transit<\/h3>\n            <p>Secure, enclosed vehicle transport carriers delivering your brand-new premium vehicle straight to your doorstep, anywhere in the country.<\/p>\n        <\/div>\n        <div class=\"why-card animate-on-scroll\">\n            <div class=\"why-icon\"><i class=\"fa-solid fa-headset\"><\/i><\/div>\n            <h3>Bespoke VIP Concierge<\/h3>\n            <p>Your dedicated concierge consultant is on-call 24 hours a day, 7 days a week, to assist with servicing, updates, or query resolutions.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Latest Arrivals Section -->\n<section class=\"section-padding\" style=\"background-color: var(--bg-secondary);\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Latest Additions<\/h2>\n        <p>Fresh additions to our international showroom. Witness the latest engineering accomplishments.<\/p>\n    <\/div>\n\n    <div class=\"arrivals-list\">\n        <!-- Arrival 1 -->\n        <div class=\"arrival-card animate-on-scroll\">\n            <div class=\"arrival-img\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592853625527-711bd154779e?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Ferrari SF90 Stradale\">\n            <\/div>\n            <div class=\"arrival-info\">\n                <span class=\"arrival-tag\"><i class=\"fa-solid fa-bolt-lightning\"><\/i> New Release<\/span>\n                <h3 class=\"arrival-title\">Ferrari SF90 Stradale<\/h3>\n                <p class=\"arrival-desc\">Witness a paradigm shift in performance. A hybrid supercar pushing the boundaries of automotive technology, packing a twin-turbo V8 combined with three electric motors generating a colossal 1000 Horsepower.<\/p>\n                <div class=\"arrivals-specs\">\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-bolt\"><\/i> Hybrid<\/div>\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-gauge-high\"><\/i> 0-100 km\/h in 2.5s<\/div>\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-road\"><\/i> AWD<\/div>\n                <\/div>\n                <div class=\"arrival-footer\">\n                    <div class=\"arrival-price\">$524,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-inquire-arrival\" data-car=\"Ferrari SF90 Stradale\">Reserve Vehicle<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Arrival 2 -->\n        <div class=\"arrival-card animate-on-scroll\">\n            <div class=\"arrival-img\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1632245889027-e406faaa19ca?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Rolls-Royce Spectre\">\n            <\/div>\n            <div class=\"arrival-info\">\n                <span class=\"arrival-tag\"><i class=\"fa-solid fa-star\"><\/i> Flagship Luxury<\/span>\n                <h3 class=\"arrival-title\">Rolls-Royce Spectre<\/h3>\n                <p class=\"arrival-desc\">Propelled by a silent electric powertrain, the Rolls-Royce Spectre represents ultimate refinement. Unrivaled whisper-quiet glide, majestic starlight doors, and a meticulously crafted hand-sewn leather cabin.<\/p>\n                <div class=\"arrivals-specs\">\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-bolt\"><\/i> 100% Electric<\/div>\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-battery-three-quarters\"><\/i> 530 km Range<\/div>\n                    <div class=\"arrival-spec-item\"><i class=\"fa-solid fa-couch\"><\/i> Ultra-Comfort<\/div>\n                <\/div>\n                <div class=\"arrival-footer\">\n                    <div class=\"arrival-price\">$420,000<\/div>\n                    <a href=\"#\" class=\"btn btn-primary btn-inquire-arrival\" data-car=\"Rolls-Royce Spectre\">Reserve Vehicle<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Financing Section -->\n<section class=\"section-padding\" id=\"financing\">\n    <div class=\"financing-container\">\n        <div class=\"finance-text animate-on-scroll\">\n            <h2>Bespoke Financing Solutions<\/h2>\n            <p>Acquiring your luxury vehicle should be just as smooth as driving it. Our exclusive finance division works with top-tier international institutions to customize plans tailored to your financial profile.<\/p>\n            <ul class=\"finance-list\">\n                <li><i class=\"fa-solid fa-check\"><\/i> Competitive starting interest rates<\/li>\n                <li><i class=\"fa-solid fa-check\"><\/i> Flexible repayment tenures up to 84 months<\/li>\n                <li><i class=\"fa-solid fa-check\"><\/i> Direct zero-down-payment options available<\/li>\n                <li><i class=\"fa-solid fa-check\"><\/i> Complete privacy and VIP confidentiality<\/li>\n            <\/ul>\n        <\/div>\n        \n        <div class=\"finance-calculator animate-on-scroll\">\n            <h3>Bespoke EMI Calculator<\/h3>\n            \n            <div class=\"calc-group\">\n                <div class=\"calc-label-row\">\n                    <span>Loan Amount ($)<\/span>\n                    <span class=\"calc-val\" id=\"loan-amount-val\">$100,000<\/span>\n                <\/div>\n                <div class=\"calc-slider-wrapper\">\n                    <input type=\"range\" class=\"calc-slider\" id=\"loan-amount\" min=\"20000\" max=\"500000\" step=\"5000\" value=\"100000\">\n                <\/div>\n            <\/div>\n\n            <div class=\"calc-group\">\n                <div class=\"calc-label-row\">\n                    <span>Interest Rate (%)<\/span>\n                    <span class=\"calc-val\" id=\"interest-rate-val\">4.5%<\/span>\n                <\/div>\n                <div class=\"calc-slider-wrapper\">\n                    <input type=\"range\" class=\"calc-slider\" id=\"interest-rate\" min=\"2.0\" max=\"12.0\" step=\"0.1\" value=\"4.5\">\n                <\/div>\n            <\/div>\n\n            <div class=\"calc-group\">\n                <div class=\"calc-label-row\">\n                    <span>Tenure (Months)<\/span>\n                    <span class=\"calc-val\" id=\"tenure-val\">60 Months<\/span>\n                <\/div>\n                <div class=\"calc-slider-wrapper\">\n                    <input type=\"range\" class=\"calc-slider\" id=\"tenure\" min=\"12\" max=\"84\" step=\"12\" value=\"60\">\n                <\/div>\n            <\/div>\n\n            <div class=\"calc-result\">\n                <div class=\"calc-result-title\">Estimated Monthly EMI<\/div>\n                <div class=\"calc-result-val\" id=\"monthly-emi\">$1,864<\/div>\n            <\/div>\n\n            <div class=\"calc-btn-row\">\n                <a href=\"#\" class=\"btn btn-secondary btn-sm\" style=\"justify-content: center;\" id=\"calc-recalculate-btn\">Recalculate<\/a>\n                <a href=\"#\" class=\"btn btn-primary btn-sm\" style=\"justify-content: center;\" id=\"calc-apply-btn\">Apply Now<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Customer Testimonials Section -->\n<section class=\"section-padding\" style=\"background-color: var(--bg-secondary);\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Global Experiences<\/h2>\n        <p>Join an international family of car collectors and luxury vehicle owners.<\/p>\n    <\/div>\n\n    <div class=\"testimonials-grid\">\n        <!-- Review 1 -->\n        <div class=\"testi-card animate-on-scroll\">\n            <i class=\"fa-solid fa-quote-right testi-quote-icon\"><\/i>\n            <div class=\"stars\">\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n            <\/div>\n            <p class=\"testi-text\">&#8220;Buying my Porsche 911 GT3 RS here was a masterclass in customer service. The dealership staff was highly knowledgeable, arranged secure transport, and made the entire process incredibly straightforward.&#8221;<\/p>\n            <div class=\"client-info\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?auto=format&#038;fit=crop&#038;w=150&#038;q=80\" alt=\"David Miller\" class=\"client-avatar\">\n                <div>\n                    <div class=\"client-name\">David Miller<\/div>\n                    <div class=\"client-title\">CEO, Nexa Systems<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Review 2 -->\n        <div class=\"testi-card animate-on-scroll\">\n            <i class=\"fa-solid fa-quote-right testi-quote-icon\"><\/i>\n            <div class=\"stars\">\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n            <\/div>\n            <p class=\"testi-text\">&#8220;The bespoke financing option they offered made acquiring the Rolls-Royce Spectre highly convenient. Professional support, seamless trade-in validation, and the doorstep enclosed delivery was top-tier.&#8221;<\/p>\n            <div class=\"client-info\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580489944761-15a19d654956?auto=format&#038;fit=crop&#038;w=150&#038;q=80\" alt=\"Sophia Chen\" class=\"client-avatar\">\n                <div>\n                    <div class=\"client-name\">Sophia Chen<\/div>\n                    <div class=\"client-title\">Founder, Aura Ventures<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Review 3 -->\n        <div class=\"testi-card animate-on-scroll\">\n            <i class=\"fa-solid fa-quote-right testi-quote-icon\"><\/i>\n            <div class=\"stars\">\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n                <i class=\"fa-solid fa-star\"><\/i>\n            <\/div>\n            <p class=\"testi-text\">&#8220;Outstanding service! From dynamic test drives to technical configuration advice on high-end EV powertrains, Apex Autos delivers an elite automotive purchase experience without rival.&#8221;<\/p>\n            <div class=\"client-info\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?auto=format&#038;fit=crop&#038;w=150&#038;q=80\" alt=\"Marcus Vance\" class=\"client-avatar\">\n                <div>\n                    <div class=\"client-name\">Marcus Vance<\/div>\n                    <div class=\"client-title\">Real Estate Developer<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Luxury Gallery Section -->\n<section class=\"section-padding\" id=\"gallery\">\n    <div class=\"section-header animate-on-scroll\">\n        <h2>Showroom Gallery<\/h2>\n        <p>A visual gallery showcasing mechanical excellence, precision engineering, and bespoke luxury styling.<\/p>\n    <\/div>\n\n    <div class=\"gallery-grid\">\n        <div class=\"gallery-item tall animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1525609004556-c46c7d6cf0a3?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Gallery Sportscar\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Aerodynamic Styling<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"gallery-item wide animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1568605114967-8130f3a36994?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Gallery Luxury Car\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Bespoke Elegance<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"gallery-item animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552519507-da3b142c6e3d?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Gallery Supercar\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Pure Power<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"gallery-item animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580273916550-e323be2ae537?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Gallery Engine Wheel\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Precision Handling<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"gallery-item wide animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1492144534655-ae79c964c9d7?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" alt=\"Gallery Dark Supercar\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Night Cruise<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"gallery-item tall animate-on-scroll\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1494976388531-d1058494cdd8?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" alt=\"Gallery Mustang Vintage\">\n            <div class=\"gallery-overlay\">\n                <div class=\"gallery-title\">Heritage Legacy<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Call to Action Banner -->\n<section class=\"section-padding\" style=\"padding-top: 0;\">\n    <div class=\"cta-banner animate-on-scroll\">\n        <h2>Experience Premium Performance<\/h2>\n        <p>Schedule a personal VIP viewing or custom specification consultation at your nearest showroom location.<\/p>\n        <button class=\"btn btn-primary\" id=\"cta-book-btn\">Schedule Private Tour <i class=\"fa-solid fa-calendar-days\"><\/i><\/button>\n    <\/div>\n<\/section>\n\n<!-- Footer -->\n<footer class=\"footer\">\n    <div class=\"footer-grid\">\n        <!-- Col 1 -->\n        <div class=\"footer-col\">\n            <a href=\"#\" class=\"footer-logo\">\n                <span><i class=\"fa-solid fa-gauge-high\"><\/i><\/span> APEX <span>AUTOS<\/span>\n            <\/a>\n            <p class=\"footer-about-text\">Delivering exceptional performance, luxury, and unmatched design. Apex Autos is the world&#8217;s leading boutique automotive group serving direct luxury car collectors and enthusiasts globally.<\/p>\n            <div class=\"footer-socials\">\n                <a href=\"#\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fa-brands fa-youtube\"><\/i><\/a>\n            <\/div>\n        <\/div>\n        <!-- Col 2 -->\n        <div class=\"footer-col\">\n            <h4>Quick Links<\/h4>\n            <ul class=\"footer-links\">\n                <li><a href=\"#home\">Home<\/a><\/li>\n                <li><a href=\"#featured\">Featured Cars<\/a><\/li>\n                <li><a href=\"#studio\">Bespoke Studio<\/a><\/li>\n                <li><a href=\"#about\">Why Choose Us<\/a><\/li>\n                <li><a href=\"#financing\">Financing Plans<\/a><\/li>\n                <li><a href=\"#gallery\">Showroom Gallery<\/a><\/li>\n            <\/ul>\n        <\/div>\n        <!-- Col 3 -->\n        <div class=\"footer-col\">\n            <h4>Concierge details<\/h4>\n            <ul class=\"footer-contact-list\">\n                <li><i class=\"fa-solid fa-location-dot\"><\/i> 500 Luxury Drive, Beverly Hills, CA 90210<\/li>\n                <li><i class=\"fa-solid fa-phone\"><\/i> +1 (800) 555-APEX<\/li>\n                <li><i class=\"fa-solid fa-envelope\"><\/i> concierge@apexautos.luxury<\/li>\n                <li><i class=\"fa-solid fa-clock\"><\/i> Mon &#8211; Sat: 9:00 AM &#8211; 8:00 PM<\/li>\n            <\/ul>\n        <\/div>\n        <!-- Col 4 -->\n        <div class=\"footer-col\">\n            <h4>VIP Newsletter<\/h4>\n            <p class=\"footer-about-text\">Subscribe to receive exclusive access to off-market arrivals, custom specifications, and vip dealership events.<\/p>\n            <form class=\"newsletter-form\" onsubmit=\"event.preventDefault(); alert('Subscribed successfully to the VIP Newsletter!');\">\n                <div class=\"newsletter-input-wrapper\">\n                    <input type=\"email\" class=\"newsletter-input\" placeholder=\"Your Professional Email\" required>\n                <\/div>\n                <button type=\"submit\" class=\"newsletter-btn\">Subscribe <i class=\"fa-solid fa-paper-plane\"><\/i><\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <div class=\"footer-bottom\">\n        <div>&copy; 2026 Apex Autos. All Rights Reserved. Private Concierge Group.<\/div>\n        <div style=\"display: flex; gap: 20px;\">\n            <a href=\"#\" style=\"color: var(--text-muted); text-decoration: none;\">Privacy Policy<\/a>\n            <a href=\"#\" style=\"color: var(--text-muted); text-decoration: none;\">Terms of Service<\/a>\n        <\/div>\n    <\/div>\n<\/footer>\n\n<!-- Luxury Booking Modal -->\n<div class=\"modal-overlay\" id=\"booking-modal\">\n    <div class=\"modal-container\">\n        <button class=\"modal-close-btn\" id=\"modal-close\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n        <div class=\"modal-header\">\n            <h3>Schedule Private Tour<\/h3>\n            <p>Submit your preferred models and timing, and a private VIP concierge will get in touch with you shortly.<\/p>\n        <\/div>\n        <form id=\"booking-form\" onsubmit=\"handleBookingSubmit(event)\">\n            <div class=\"form-group\">\n                <label class=\"form-label\" for=\"booking-name\">Full Name<\/label>\n                <input type=\"text\" class=\"form-input\" id=\"booking-name\" required placeholder=\"John Doe\">\n            <\/div>\n            <div class=\"form-group\">\n                <label class=\"form-label\" for=\"booking-email\">Email Address<\/label>\n                <input type=\"email\" class=\"form-input\" id=\"booking-email\" required placeholder=\"john@example.com\">\n            <\/div>\n            <div class=\"form-group\">\n                <label class=\"form-label\" for=\"booking-phone\">Phone Number<\/label>\n                <input type=\"tel\" class=\"form-input\" id=\"booking-phone\" required placeholder=\"+1 (555) 000-0000\">\n            <\/div>\n            <div class=\"form-group\">\n                <label class=\"form-label\" for=\"booking-model\">Vehicle of Interest<\/label>\n                <input type=\"text\" class=\"form-input\" id=\"booking-model\" placeholder=\"e.g. Porsche 911 GT3 RS \/ Custom Vantage\">\n            <\/div>\n            <button type=\"submit\" class=\"modal-form-btn\">Submit Request<\/button>\n        <\/form>\n    <\/div>\n<\/div>\n\n<!-- Live Concierge Chat Widget -->\n<div class=\"chat-widget-wrapper\">\n    <div class=\"chat-bubble-btn\" id=\"chat-toggle-btn\">\n        <i class=\"fa-solid fa-comments\"><\/i>\n        <div class=\"chat-notification-dot\"><\/div>\n    <\/div>\n    <div class=\"chat-window\" id=\"chat-window-box\">\n        <div class=\"chat-header\">\n            <div class=\"chat-agent-info\">\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573496359142-b8d87734a5a2?auto=format&#038;fit=crop&#038;w=150&#038;q=80\" alt=\"Elena Concierge\" class=\"chat-agent-avatar\">\n                <div>\n                    <div class=\"chat-agent-name\">Elena<\/div>\n                    <div class=\"chat-agent-status\">\n                        <i class=\"fa-solid fa-circle\" style=\"font-size: 0.5rem;\"><\/i> Active Online\n                    <\/div>\n                <\/div>\n            <\/div>\n            <button class=\"chat-close-btn\" id=\"chat-close-btn\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n        <\/div>\n        <div class=\"chat-messages\" id=\"chat-messages-container\">\n            <div class=\"chat-bubble agent\">\n                Welcome to Apex Autos. I&#8217;m Elena, your digital client concierge. How can I assist you with your luxury vehicle acquisition today?\n            <\/div>\n            <div class=\"chat-options-group\" id=\"chat-options\">\n                <div class=\"chat-opt-bubble\" onclick=\"selectChatOption('schedule')\">Schedule a VIP Showroom Tour<\/div>\n                <div class=\"chat-opt-bubble\" onclick=\"selectChatOption('bespoke')\">Inquire about Bespoke Customization<\/div>\n                <div class=\"chat-opt-bubble\" onclick=\"selectChatOption('financing')\">Request Financing Solutions<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"chat-input-area\">\n            <input type=\"text\" class=\"chat-text-input\" id=\"chat-user-input\" placeholder=\"Type your message...\">\n            <button class=\"chat-send-btn\" id=\"chat-send-btn-action\"><i class=\"fa-solid fa-paper-plane\"><\/i><\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ Configuration Studio state variables\n    let configPriceBase = 220000;\n    let configPriceWheels = 0;\n    let configPriceInterior = 0;\n    \n    \/\/ Dynamic Paint Filters lookup map\n    const paintFilters = {\n        silver: 'none',\n        black: 'grayscale(1) brightness(0.35) contrast(1.1)',\n        red: 'hue-rotate(320deg) saturate(2) brightness(0.7) contrast(1.2)',\n        blue: 'hue-rotate(155deg) saturate(1.8) brightness(0.9) contrast(1.05)',\n        orange: 'hue-rotate(345deg) saturate(2.2) brightness(0.9) contrast(1.1)',\n        green: 'hue-rotate(55deg) saturate(2) brightness(0.85) contrast(1.15)'\n    };\n\n    function configurePaint(colorKey, paintName, element) {\n        \/\/ Update active swatch visual state\n        document.querySelectorAll('.swatch').forEach(el => el.classList.remove('active'));\n        element.classList.add('active');\n        \n        \/\/ Update selection label\n        document.getElementById('paint-label').textContent = paintName;\n        \n        \/\/ Apply filter to simulate dynamic car paint\n        const carImg = document.getElementById('configurator-car');\n        const glowLayer = document.getElementById('car-glow-layer');\n        carImg.style.filter = paintFilters[colorKey] || 'none';\n        \n        \/\/ Dynamic glow effects\n        if (colorKey === 'silver') glowLayer.style.background = 'radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 70%)';\n        else if (colorKey === 'black') glowLayer.style.background = 'radial-gradient(circle, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 70%)';\n        else if (colorKey === 'red') glowLayer.style.background = 'radial-gradient(circle, rgba(255,0,85,0.12) 0%, rgba(0,0,0,0) 70%)';\n        else if (colorKey === 'blue') glowLayer.style.background = 'radial-gradient(circle, rgba(0,170,255,0.12) 0%, rgba(0,0,0,0) 70%)';\n        else if (colorKey === 'orange') glowLayer.style.background = 'radial-gradient(circle, rgba(255,107,0,0.12) 0%, rgba(0,0,0,0) 70%)';\n        else if (colorKey === 'green') glowLayer.style.background = 'radial-gradient(circle, rgba(57,255,20,0.12) 0%, rgba(0,0,0,0) 70%)';\n    }\n\n    function configureOption(category, cost, labelText, element) {\n        \/\/ Toggle selected state in list\n        const optionGroup = element.parentElement;\n        optionGroup.querySelectorAll('.opt-card').forEach(card => card.classList.remove('active'));\n        element.classList.add('active');\n\n        \/\/ Update option configurations\n        if (category === 'wheels') {\n            configPriceWheels = cost;\n            document.getElementById('wheels-label').textContent = labelText;\n        } else if (category === 'interior') {\n            configPriceInterior = cost;\n            document.getElementById('interior-label').textContent = labelText;\n        }\n\n        \/\/ Calculate and render price summary\n        const totalEstimate = configPriceBase + configPriceWheels + configPriceInterior;\n        document.getElementById('configurator-total-val').textContent = '$' + totalEstimate.toLocaleString();\n    }\n\n    function openReservationModal() {\n        const selectedPaint = document.getElementById('paint-label').textContent;\n        const selectedWheels = document.getElementById('wheels-label').textContent;\n        const selectedInterior = document.getElementById('interior-label').textContent;\n        const totalPrice = document.getElementById('configurator-total-val').textContent;\n\n        const modelInput = document.getElementById('booking-model');\n        modelInput.value = `Custom Vantage Coupe [Paint: ${selectedPaint} | Wheels: ${selectedWheels} | Interior: ${selectedInterior} | Price: ${totalPrice}]`;\n        \n        openModal();\n    }\n\n    \/\/ Modal state controls\n    const bookingModal = document.getElementById('booking-modal');\n    \n    function openModal() {\n        bookingModal.classList.add('active');\n    }\n    \n    function closeModal() {\n        bookingModal.classList.remove('active');\n        document.getElementById('booking-form').reset();\n    }\n\n    document.getElementById('modal-close').addEventListener('click', closeModal);\n    bookingModal.addEventListener('click', (e) => {\n        if (e.target === bookingModal) closeModal();\n    });\n\n    function handleBookingSubmit(event) {\n        event.preventDefault();\n        const clientName = document.getElementById('booking-name').value;\n        const clientEmail = document.getElementById('booking-email').value;\n        const carModel = document.getElementById('booking-model').value;\n        \n        alert(`Thank you, ${clientName}! Your request for the ${carModel} has been received. A VIP Concierge representative will contact you at ${clientEmail} within 15 minutes to finalize the schedule.`);\n        closeModal();\n    }\n\n    \/\/ Showcase Filtering system\n    function filterShowcase(category, element) {\n        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\n        element.classList.add('active');\n\n        const cards = document.querySelectorAll('.car-card');\n        cards.forEach(card => {\n            card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\n            if (category === 'all' || card.getAttribute('data-fuel') === category) {\n                card.style.display = 'flex';\n                setTimeout(() => {\n                    card.style.opacity = '1';\n                    card.style.transform = 'translateY(0) scale(1)';\n                }, 50);\n            } else {\n                card.style.opacity = '0';\n                card.style.transform = 'translateY(15px) scale(0.95)';\n                setTimeout(() => {\n                    card.style.display = 'none';\n                }, 400);\n            }\n        });\n    }\n\n    \/\/ Floating Live Concierge Chat Widget Script\n    const chatToggleBtn = document.getElementById('chat-toggle-btn');\n    const chatWindowBox = document.getElementById('chat-window-box');\n    const chatCloseBtn = document.getElementById('chat-close-btn');\n    const chatMsgContainer = document.getElementById('chat-messages-container');\n    const chatOptions = document.getElementById('chat-options');\n    const chatUserInput = document.getElementById('chat-user-input');\n    const chatSendBtn = document.getElementById('chat-send-btn-action');\n\n    chatToggleBtn.addEventListener('click', () => {\n        chatWindowBox.classList.toggle('active');\n        const notifDot = chatToggleBtn.querySelector('.chat-notification-dot');\n        if (notifDot) notifDot.remove();\n    });\n\n    chatCloseBtn.addEventListener('click', () => {\n        chatWindowBox.classList.remove('active');\n    });\n\n    function appendMessage(text, isUser = false) {\n        const bubble = document.createElement('div');\n        bubble.className = `chat-bubble ${isUser ? 'user' : 'agent'}`;\n        bubble.textContent = text;\n        chatMsgContainer.appendChild(bubble);\n        chatMsgContainer.scrollTop = chatMsgContainer.scrollHeight;\n    }\n\n    function selectChatOption(optionKey) {\n        chatOptions.style.display = 'none';\n        \n        let userMsg = '';\n        let agentReply = '';\n        \n        if (optionKey === 'schedule') {\n            userMsg = 'I want to schedule a VIP showroom tour.';\n            agentReply = 'Excellent choice. To arrange a private tour, please enter your contact info (email\/phone) below and I will verify open slots.';\n        } else if (optionKey === 'bespoke') {\n            userMsg = 'I want to inquire about custom bespoking.';\n            agentReply = 'Our Design Studio produces unique commissions. Please let us know your preferred model or color, and enter your contact details below.';\n        } else if (optionKey === 'financing') {\n            userMsg = 'I want to request custom financing information.';\n            agentReply = 'Certainly. Please enter your email and phone number, and our senior financial advisor will contact you with specific plans.';\n        }\n\n        appendMessage(userMsg, true);\n        \n        setTimeout(() => {\n            appendMessage(agentReply, false);\n            \/\/ Create a small contact form inside the chat\n            const chatForm = document.createElement('div');\n            chatForm.style.marginTop = '10px';\n            chatForm.style.background = 'rgba(0,0,0,0.1)';\n            chatForm.style.padding = '12px';\n            chatForm.style.borderRadius = '8px';\n            chatForm.style.border = '1px solid var(--border-color)';\n            chatForm.innerHTML = `\n                <input type=\"text\" id=\"chat-form-name\" placeholder=\"Your Name\" style=\"width:100%; padding:8px; margin-bottom:8px; background:var(--bg-primary); border:1px solid var(--border-color); color:#fff; border-radius:4px; font-size:0.8rem;\">\n                <input type=\"text\" id=\"chat-form-contact\" placeholder=\"Email or Phone Number\" style=\"width:100%; padding:8px; margin-bottom:8px; background:var(--bg-primary); border:1px solid var(--border-color); color:#fff; border-radius:4px; font-size:0.8rem;\">\n                <button onclick=\"submitChatContact()\" style=\"width:100%; padding:8px; background:var(--accent-gradient); color:#000; border:none; border-radius:4px; font-weight:700; cursor:pointer; font-size:0.8rem;\">Submit Details<\/button>\n            `;\n            chatMsgContainer.appendChild(chatForm);\n            chatMsgContainer.scrollTop = chatMsgContainer.scrollHeight;\n        }, 800);\n    }\n\n    function submitChatContact() {\n        const clientName = document.getElementById('chat-form-name').value || 'Guest';\n        const clientContact = document.getElementById('chat-form-contact').value;\n        \n        if (!clientContact) {\n            alert('Please enter your contact details to submit.');\n            return;\n        }\n\n        \/\/ Remove contact form input boxes\n        const lastChild = chatMsgContainer.lastChild;\n        if (lastChild) lastChild.remove();\n\n        appendMessage(`Submitted Name: ${clientName} | Contact: ${clientContact}`, true);\n        \n        setTimeout(() => {\n            appendMessage(`Thank you, ${clientName}! Your information has been registered with our Beverly Hills headquarters. A dedicated concierge agent will contact you shortly.`, false);\n        }, 800);\n    }\n\n    \/\/ Enable custom chat typing input\n    function sendTypedMessage() {\n        const text = chatUserInput.value.trim();\n        if (!text) return;\n\n        appendMessage(text, true);\n        chatUserInput.value = '';\n\n        setTimeout(() => {\n            appendMessage(\"Thank you for your message. Our digital assistant has registered your query. A senior client concierge will respond to you directly via email shortly.\", false);\n        }, 1000);\n    }\n\n    chatSendBtn.addEventListener('click', sendTypedMessage);\n    chatUserInput.addEventListener('keypress', (e) => {\n        if (e.key === 'Enter') sendTypedMessage();\n    });\n\n    document.addEventListener('DOMContentLoaded', () => {\n        \/\/ Sticky Navbar Scroll Listener\n        const nav = document.getElementById('main-nav');\n        window.addEventListener('scroll', () => {\n            if (window.scrollY > 50) {\n                nav.classList.add('scrolled');\n            } else {\n                nav.classList.remove('scrolled');\n            }\n        });\n\n        \/\/ Mobile Menu toggles\n        const toggle = document.getElementById('mobile-toggle');\n        const links = document.getElementById('menu-links');\n        toggle.addEventListener('click', () => {\n            links.classList.toggle('active');\n            const icon = toggle.querySelector('i');\n            if (links.classList.contains('active')) {\n                icon.className = 'fa-solid fa-xmark';\n            } else {\n                icon.className = 'fa-solid fa-bars';\n            }\n        });\n\n        links.querySelectorAll('a').forEach(link => {\n            link.addEventListener('click', () => {\n                links.classList.remove('active');\n                toggle.querySelector('i').className = 'fa-solid fa-bars';\n            });\n        });\n\n        \/\/ Register Showroom buttons to modal trigger\n        document.getElementById('nav-book-btn').addEventListener('click', (e) => {\n            e.preventDefault();\n            const modelInput = document.getElementById('booking-model');\n            modelInput.value = 'General Showroom Test Drive & Private Tour';\n            openModal();\n        });\n\n        document.getElementById('hero-book-btn').addEventListener('click', (e) => {\n            e.preventDefault();\n            const modelInput = document.getElementById('booking-model');\n            modelInput.value = 'Bespoke Studio Private Tour & Consultation';\n            openModal();\n        });\n\n        document.getElementById('cta-book-btn').addEventListener('click', (e) => {\n            e.preventDefault();\n            const modelInput = document.getElementById('booking-model');\n            modelInput.value = 'Private VIP Consultation Tour';\n            openModal();\n        });\n\n        \/\/ Set Inquiry click handlers on featured car catalog\n        document.querySelectorAll('.btn-view-details').forEach(btn => {\n            btn.addEventListener('click', (e) => {\n                e.preventDefault();\n                const carName = btn.getAttribute('data-car');\n                const modelInput = document.getElementById('booking-model');\n                modelInput.value = `Inquiry: ${carName}`;\n                openModal();\n            });\n        });\n\n        \/\/ Inquire handler for arrivals catalog\n        document.querySelectorAll('.btn-inquire-arrival').forEach(btn => {\n            btn.addEventListener('click', (e) => {\n                e.preventDefault();\n                const carName = btn.getAttribute('data-car');\n                const modelInput = document.getElementById('booking-model');\n                modelInput.value = `Showroom Reservation: ${carName}`;\n                openModal();\n            });\n        });\n\n        \/\/ EMI Loan Calculator calculations\n        const loanAmountSlider = document.getElementById('loan-amount');\n        const interestRateSlider = document.getElementById('interest-rate');\n        const tenureSlider = document.getElementById('tenure');\n\n        const loanAmountVal = document.getElementById('loan-amount-val');\n        const interestRateVal = document.getElementById('interest-rate-val');\n        const tenureVal = document.getElementById('tenure-val');\n        const monthlyEmiDisplay = document.getElementById('monthly-emi');\n\n        function calculateEMI() {\n            const P = parseFloat(loanAmountSlider.value);\n            const annualR = parseFloat(interestRateSlider.value);\n            const N = parseFloat(tenureSlider.value);\n\n            const R = (annualR \/ 12) \/ 100;\n\n            let emi = 0;\n            if (R > 0) {\n                emi = (P * R * Math.pow(1 + R, N)) \/ (Math.pow(1 + R, N) - 1);\n            } else {\n                emi = P \/ N;\n            }\n\n            loanAmountVal.textContent = '$' + P.toLocaleString();\n            interestRateVal.textContent = annualR + '%';\n            tenureVal.textContent = N + ' Months';\n            monthlyEmiDisplay.textContent = '$' + Math.round(emi).toLocaleString();\n            \n            \/\/ Render nice CSS slider progress color fill matching track\n            const sliders = [loanAmountSlider, interestRateSlider, tenureSlider];\n            sliders.forEach(slider => {\n                const percent = (slider.value - slider.min) \/ (slider.max - slider.min) * 100;\n                slider.style.background = `linear-gradient(to right, var(--accent) 0%, var(--accent) ${percent}%, var(--bg-tertiary) ${percent}%, var(--bg-tertiary) 100%)`;\n            });\n        }\n\n        loanAmountSlider.addEventListener('input', calculateEMI);\n        interestRateSlider.addEventListener('input', calculateEMI);\n        tenureSlider.addEventListener('input', calculateEMI);\n\n        calculateEMI();\n\n        document.getElementById('calc-recalculate-btn').addEventListener('click', (e) => {\n            e.preventDefault();\n            calculateEMI();\n        });\n\n        document.getElementById('calc-apply-btn').addEventListener('click', (e) => {\n            e.preventDefault();\n            const loanAmt = loanAmountSlider.value;\n            const tenureM = tenureSlider.value;\n            const emiVal = monthlyEmiDisplay.textContent;\n            const modelInput = document.getElementById('booking-model');\n            modelInput.value = `Finance Request: $${parseInt(loanAmt).toLocaleString()} Loan over ${tenureM} months (${emiVal}\/mo)`;\n            openModal();\n        });\n\n        \/\/ Intersection Observer scroll listener\n        const observerOptions = {\n            root: null,\n            rootMargin: '0px',\n            threshold: 0.1\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('visible');\n                    \/\/ Stop observing once visible\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, observerOptions);\n\n        document.querySelectorAll('.animate-on-scroll').forEach(el => {\n            observer.observe(el);\n        });\n\n        \/\/ Scroll spy to highlight navbar links on active scroll section\n        const sections = document.querySelectorAll('header, section');\n        const navLinks = document.querySelectorAll('.nav-links a:not(.nav-cta)');\n\n        window.addEventListener('scroll', () => {\n            let currentSecId = '';\n            sections.forEach(sec => {\n                const top = window.scrollY;\n                const offset = sec.offsetTop - 120;\n                const height = sec.offsetHeight;\n                const id = sec.getAttribute('id');\n                if (top >= offset && top < offset + height) {\n                    currentSecId = id;\n                }\n            });\n\n            if (currentSecId) {\n                navLinks.forEach(link => {\n                    link.classList.remove('active');\n                    if (link.getAttribute('href') === `#${currentSecId}`) {\n                        link.classList.add('active');\n                    }\n                });\n            }\n        });\n    });\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":2,"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/pages\/22\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/nuftp.com\/vk_check_this\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}