{"componentChunkName":"component---src-templates-raw-html-js","path":"/home-page-new-test/","result":{"pageContext":{"pageContent":{"HTML":{"order":0,"visible":true,"scriptJS":"// PARTICLE ANIMATION\nconst canvas = document.getElementById('particleCanvas');\nif (canvas) {\n    const ctx = canvas.getContext('2d');\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n\n    const particles = [];\n    const particleCount = 50;\n\n    for (let i = 0; i < particleCount; i++) {\n        particles.push({\n            x: Math.random() * canvas.width,\n            y: Math.random() * canvas.height,\n            vx: (Math.random() - 0.5) * 0.5,\n            vy: (Math.random() - 0.5) * 0.5,\n            radius: Math.random() * 2 + 1\n        });\n    }\n\n    function animate() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.fillStyle = 'rgba(94, 185, 222, 0.5)';\n        \n        particles.forEach(p => {\n            p.x += p.vx;\n            p.y += p.vy;\n            \n            if (p.x < 0 || p.x > canvas.width) p.vx *= -1;\n            if (p.y < 0 || p.y > canvas.height) p.vy *= -1;\n            \n            ctx.beginPath();\n            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n            ctx.fill();\n        });\n        \n        requestAnimationFrame(animate);\n    }\n    animate();\n\n    window.addEventListener('resize', () => {\n        canvas.width = window.innerWidth;\n        canvas.height = window.innerHeight;\n    });\n}\n\n// ACCORDION FUNCTIONALITY\nfunction toggleAccordion(header) {\n    const item = header.parentElement;\n    const content = item.querySelector('.accordion-content');\n    const icon = header.querySelector('.accordion-icon');\n    const isActive = item.classList.contains('active');\n    \n    // Close all accordions in the same parent\n    const parent = item.parentElement;\n    parent.querySelectorAll('.accordion-item').forEach(accItem => {\n        accItem.classList.remove('active');\n        const accContent = accItem.querySelector('.accordion-content');\n        const accIcon = accItem.querySelector('.accordion-icon');\n        if (accContent) accContent.style.maxHeight = null;\n        if (accIcon) accIcon.textContent = '+';\n    });\n    \n    // Open clicked accordion if it wasn't active\n    if (!isActive) {\n        item.classList.add('active');\n        content.style.maxHeight = content.scrollHeight + 'px';\n        icon.textContent = '−';\n    }\n}\n\n// VERTICAL SWITCHER FUNCTIONALITY\nfunction switchVertical(index) {\n    const tabs = document.querySelectorAll('.vertical-tab');\n    tabs.forEach(tab => tab.classList.remove('active'));\n    tabs[index].classList.add('active');\n    const contents = document.querySelectorAll('.vertical-content');\n    contents.forEach(content => content.classList.remove('active'));\n    contents[index].classList.add('active');\n}\n\n// STARFIELD ANIMATION\nconst starfield = document.getElementById('starfield');\nif (starfield) {\n    const numStars = 100;\n    const fragment = document.createDocumentFragment();\n    \n    for (let i = 0; i < numStars; i++) {\n        const star = document.createElement('div');\n        star.className = 'star ' + ['small', 'medium', 'large'][Math.floor(Math.random() * 3)];\n        star.style.left = Math.random() * 100 + '%';\n        star.style.top = Math.random() * 100 + '%';\n        star.style.animationDelay = Math.random() * 3 + 's';\n        fragment.appendChild(star);\n    }\n    \n    starfield.appendChild(fragment);\n}\n\n// INFINITE SCROLLING DOTS BACKGROUND\nconst dotsContainer = document.getElementById('dotsContainer');\nif (dotsContainer) {\n    const numDots = 200;\n    const sizes = ['tiny', 'small', 'medium', 'large'];\n    const fragment = document.createDocumentFragment();\n    \n    for (let i = 0; i < numDots; i++) {\n        const dot = document.createElement('div');\n        dot.className = 'dot ' + sizes[Math.floor(Math.random() * sizes.length)];\n        dot.style.left = Math.random() * 100 + '%';\n        dot.style.top = Math.random() * 100 + '%';\n        fragment.appendChild(dot);\n    }\n    \n    dotsContainer.appendChild(fragment);\n}\n","rawHTML":"<!-- Montserrat Font -->\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=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n<style>\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    :root {\n        --black: #0e121f;\n        --dark: #0d1220;\n        --dark-blue: #1a2b3e;\n        --navy: #2a497b;\n        --blue: #4177c3;\n        --cyan: #5eb9de;\n        --light-blue: #c7e3f1;\n        --neon-blue: #5eb9de;\n        --electric-blue: #4177c3;\n        --pop-blue: #3b6ce9;\n        --pop-cyan: #2dbce3;\n        --white: #ffffff;\n        --accent: #5eb9de;\n        --red: #ff0055;\n        --dark-red: #8b0000;\n        --border-radius: 4px;\n    }\n\n    body {\n        font-family: 'Montserrat', sans-serif;\n        font-weight: 400;\n        line-height: 1.7;\n        color: var(--white);\n        background: var(--black);\n        overflow-x: hidden;\n        position: relative;\n    }\n\n\n\n    .background-container {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: -1;\n        overflow: hidden;\n        background: linear-gradient(180deg, #0d1b2a 0%, #1a2b3e 50%, #0d1b2a 100%);\n    }\n\n    /* INFINITE SCROLLING DOTS */\n    .dots-container {\n        position: absolute;\n        width: 100%;\n        height: 200%;\n        animation: scrollDots 60s linear infinite;\n    }\n\n    @keyframes scrollDots {\n        0% { transform: translateY(0); }\n        100% { transform: translateY(-50%); }\n    }\n\n    .dot {\n        position: absolute;\n        background: white;\n        border-radius: 50%;\n    }\n\n    .dot.tiny {\n        width: 1px;\n        height: 1px;\n        opacity: 0.4;\n    }\n\n    .dot.small {\n        width: 2px;\n        height: 2px;\n        opacity: 0.5;\n    }\n\n    .dot.medium {\n        width: 3px;\n        height: 3px;\n        opacity: 0.6;\n    }\n\n    .dot.large {\n        width: 4px;\n        height: 4px;\n        opacity: 0.7;\n    }\n\n    #particleCanvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n    }\n\n    .grid-container {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        perspective: 1000px;\n        overflow: hidden;\n    }\n\n    .grid-lines {\n        position: absolute;\n        width: 200%;\n        height: 200%;\n        top: -50%;\n        left: -50%;\n        background-image: \n            linear-gradient(0deg, transparent 24%, rgba(41, 128, 185, 0.03) 25%, rgba(41, 128, 185, 0.03) 26%, transparent 27%, transparent 74%, rgba(41, 128, 185, 0.03) 75%, rgba(41, 128, 185, 0.03) 76%, transparent 77%, transparent),\n            linear-gradient(90deg, transparent 24%, rgba(41, 128, 185, 0.03) 25%, rgba(41, 128, 185, 0.03) 26%, transparent 27%, transparent 74%, rgba(41, 128, 185, 0.03) 75%, rgba(41, 128, 185, 0.03) 76%, transparent 77%, transparent);\n        background-size: 80px 80px;\n        animation: gridMove 60s linear infinite;\n        opacity: 0.4;\n    }\n\n    @keyframes gridMove {\n        0% { transform: translate(0, 0); }\n        100% { transform: translate(80px, 80px); }\n    }\n\n\n\n    .speed-line-container {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n    }\n\n    .speed-line {\n        position: absolute;\n        height: 1px;\n        background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.6), rgba(52, 152, 219, 0.3), transparent);\n        box-shadow: 0 0 4px rgba(52, 152, 219, 0.5);\n        animation: speedLineMove 4s linear infinite;\n        opacity: 0;\n    }\n\n    .speed-line:nth-child(1) { top: 15%; width: 300px; animation-delay: 0s; }\n    .speed-line:nth-child(2) { top: 28%; width: 200px; animation-delay: 1.2s; }\n    .speed-line:nth-child(3) { top: 42%; width: 250px; animation-delay: 2.4s; }\n    .speed-line:nth-child(4) { top: 55%; width: 180px; animation-delay: 0.8s; }\n    .speed-line:nth-child(5) { top: 68%; width: 220px; animation-delay: 1.8s; }\n    .speed-line:nth-child(6) { top: 82%; width: 270px; animation-delay: 3s; }\n\n    @keyframes speedLineMove {\n        0% { left: -300px; opacity: 0; }\n        20% { opacity: 1; }\n        80% { opacity: 1; }\n        100% { left: 110%; opacity: 0; }\n    }\n\n    .content-wrapper {\n        position: relative;\n        z-index: 1;\n        padding-top: 0;\n        margin-top: 0;\n    }\n\n    h1 {\n        font-family: 'Montserrat', sans-serif;\n        font-weight: 900;\n        text-transform: uppercase;\n    }\n\n    h2 {\n        font-family: 'Montserrat', sans-serif;\n        font-weight: 800;\n    }\n\n    h3, h4 {\n        font-family: 'Montserrat', sans-serif;\n        font-weight: 700;\n    }\n\n    .hero {\n        min-height: 75vh;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        padding: 80px 40px 80px;\n        background: white;\n    }\n\n    .hero-content {\n        max-width: 1400px;\n        margin: 0 auto;\n        width: 100%;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 60px;\n        align-items: center;\n    }\n\n    .hero-text {\n        text-align: left;\n    }\n\n    .hero-image {\n        width: 100%;\n        height: 500px;\n        background: #f5f5f5;\n        border-radius: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        border: 2px solid #e8ecf1;\n        overflow: hidden;\n    }\n\n    .hero-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .hero-eyebrow {\n        font-size: 13px;\n        font-weight: 900;\n        text-transform: uppercase;\n        letter-spacing: 4px;\n        color: var(--blue);\n        margin-bottom: 20px;\n    }\n\n    .hero h1 {\n        font-size: 50px;\n        font-weight: 900;\n        line-height: 1.05;\n        margin-bottom: 24px;\n        color: var(--dark-blue);\n        letter-spacing: -3px;\n    }\n\n    .hero h1 .digital-italic {\n        font-style: italic;\n        font-weight: 400;\n        background: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan), var(--cyan));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n\n    .hero h1 span {\n        background: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan), var(--cyan));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n\n    .hero-subtitle {\n        font-size: 14px;\n        line-height: 1.7;\n        color: #1a1f35;\n        margin-bottom: 48px;\n        font-weight: 400;\n    }\n\n    .hero-buttons {\n        display: flex;\n        gap: 24px;\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        margin-bottom: 0;\n    }\n\n    .button-primary {\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n        color: var(--white);\n        padding: 22px 56px;\n        border: none;\n        border-radius: var(--border-radius);\n        font-size: 13px;\n        font-weight: 900;\n        cursor: pointer;\n        transition: all 0.3s;\n        text-decoration: none;\n        display: inline-block;\n        letter-spacing: 2px;\n        text-transform: uppercase;\n        box-shadow: 0 0 30px rgba(43, 188, 227, 0.5), 0 8px 24px rgba(59, 108, 233, 0.4);\n    }\n\n    .button-primary:hover {\n        transform: translateY(-4px) scale(1.05);\n        box-shadow: 0 0 50px rgba(43, 188, 227, 0.9), 0 15px 40px rgba(59, 108, 233, 0.6);\n        background: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan));\n    }\n\n    .button-secondary {\n        background: transparent;\n        color: var(--blue);\n        padding: 22px 56px;\n        border: 3px solid var(--blue);\n        border-radius: var(--border-radius);\n        font-size: 13px;\n        font-weight: 900;\n        cursor: pointer;\n        transition: all 0.3s;\n        text-decoration: none;\n        display: inline-block;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n    }\n\n    .button-secondary:hover {\n        background: var(--blue);\n        color: white;\n        transform: translateY(-4px);\n    }\n\n    .button-white {\n        background: white;\n        color: var(--blue);\n        padding: 22px 56px;\n        border: 3px solid white;\n        border-radius: var(--border-radius);\n        font-size: 13px;\n        font-weight: 900;\n        cursor: pointer;\n        transition: all 0.3s;\n        text-decoration: none;\n        display: inline-block;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n    }\n\n    .button-white:hover {\n        background: var(--blue);\n        color: white;\n        border-color: var(--blue);\n        transform: translateY(-4px);\n    }\n\n    .services-scroll-section {\n        background: white;\n        padding: 0;\n        margin: 0;\n    }\n\n    .services-scroll-wrapper {\n        width: 100%;\n        padding: 32px 0;\n        background: rgba(0, 10, 30, 0.95);\n        border-top: 2px solid var(--neon-blue);\n        border-bottom: 2px solid var(--neon-blue);\n        box-shadow: \n            0 0 30px rgba(0, 217, 255, 0.4),\n            inset 0 0 30px rgba(0, 217, 255, 0.1);\n        overflow: hidden;\n    }\n\n    .services-track {\n        display: flex;\n        gap: 24px;\n        animation: scroll-infinite 30s linear infinite;\n        width: fit-content;\n    }\n\n    .services-track:hover {\n        animation-play-state: paused;\n    }\n\n    @keyframes scroll-infinite {\n        0% { transform: translateX(0); }\n        100% { transform: translateX(-50%); }\n    }\n\n    .service-pill {\n        background: rgba(0, 0, 0, 0.9);\n        padding: 18px 48px;\n        border-radius: var(--border-radius);\n        font-size: 13px;\n        font-weight: 900;\n        color: var(--pop-cyan);\n        white-space: nowrap;\n        border: 2px solid var(--pop-cyan);\n        transition: all 0.3s;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        box-shadow: 0 0 15px rgba(43, 188, 227, 0.4);\n    }\n\n    .service-pill:hover {\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n        color: var(--white);\n        transform: translateY(-4px) scale(1.05);\n        box-shadow: 0 0 30px rgba(43, 188, 227, 1), 0 10px 25px rgba(59, 108, 233, 0.5);\n        border-color: transparent;\n    }\n\n    section {\n        padding: 120px 40px;\n        position: relative;\n    }\n\n    .section-centered {\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    section h2 {\n        font-size: 48px;\n        font-weight: 900;\n        color: var(--dark-blue);\n        margin-bottom: 32px;\n        line-height: 1.05;\n        letter-spacing: -2px;\n        text-transform: uppercase;\n    }\n\n    section p {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.8);\n        line-height: 1.8;\n    }\n\n    .problem-section {\n        text-align: center;\n    }\n\n    .problem-header {\n        max-width: 1000px;\n        margin: 0 auto 60px;\n    }\n\n    .problem-header h2 {\n        font-size: 48px;\n        margin-bottom: 20px;\n        color: var(--white);\n    }\n\n    .probably-text {\n        font-style: italic;\n        font-weight: 400;\n    }\n\n    .heres-why {\n        font-size: 48px;\n        font-weight: 900;\n        color: var(--red);\n        text-transform: uppercase;\n        margin-bottom: 60px;\n        text-shadow: 0 0 30px rgba(255, 0, 85, 0.6);\n    }\n\n    .problem-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 32px;\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .problem-card {\n        background: rgba(0, 10, 30, 0.7);\n        padding: 48px 40px;\n        border-radius: var(--border-radius);\n        border: 2px solid rgba(139, 0, 0, 0.4);\n        transition: all 0.5s ease;\n        position: relative;\n        overflow: hidden;\n        backdrop-filter: blur(10px);\n    }\n\n    .problem-card:after {\n        content: '';\n        position: absolute;\n        top: -4px;\n        left: -4px;\n        right: -4px;\n        bottom: -4px;\n        background: linear-gradient(135deg, \n            var(--dark-red),\n            var(--red),\n            var(--pop-blue),\n            var(--pop-cyan),\n            var(--dark-blue));\n        background-size: 400% 400%;\n        border-radius: var(--border-radius);\n        opacity: 0;\n        z-index: -1;\n        transition: opacity 0.5s;\n        animation: gradient-shift 4s ease infinite;\n    }\n\n    @keyframes gradient-shift {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }\n\n    .problem-card:hover:after {\n        opacity: 1;\n    }\n\n    .problem-card:hover {\n        transform: translateY(-12px) scale(1.02);\n        box-shadow: 0 25px 80px rgba(255, 0, 85, 0.3);\n        border-color: transparent;\n    }\n\n    .problem-icon {\n        width: 72px;\n        height: 72px;\n        background: linear-gradient(135deg, var(--red), var(--dark-red));\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin: 0 auto 24px;\n        transition: all 0.5s ease;\n        box-shadow: 0 8px 32px rgba(255, 0, 85, 0.5);\n    }\n\n    .problem-card:hover .problem-icon {\n        transform: rotateY(360deg) scale(1.1);\n        box-shadow: 0 15px 50px rgba(255, 0, 85, 0.8);\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n    }\n\n    .problem-icon svg {\n        width: 36px;\n        height: 36px;\n        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));\n    }\n\n    .problem-card h3 {\n        color: var(--white);\n        font-size: 16px;\n        font-weight: 800;\n        margin-bottom: 16px;\n        text-align: center;\n    }\n\n    .problem-card p {\n        color: rgba(255, 255, 255, 0.75);\n        font-size: 16px;\n        line-height: 1.7;\n        text-align: center;\n    }\n\n    .seo-protection-banner {\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue), var(--cyan));\n        padding: 60px 40px;\n        box-shadow: 0 10px 40px rgba(43, 188, 227, 0.4);\n    }\n\n    .seo-banner-content {\n        max-width: 1400px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 60px;\n        align-items: center;\n    }\n\n    .seo-banner-image {\n        width: 100%;\n        height: 400px;\n        background: rgba(0, 0, 0, 0.1);\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        overflow: hidden;\n        border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n\n    .seo-banner-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .seo-banner-text h3 {\n        font-size: 29px;\n        font-weight: 900;\n        color: var(--white);\n        margin-bottom: 20px;\n        line-height: 1.2;\n        text-align: left;\n    }\n\n    .seo-banner-text p {\n        font-size: 14px;\n        color: var(--white);\n        line-height: 1.7;\n        text-align: left;\n    }\n\n    /* WEBSITE BUILT DIFFERENT - TWO COLUMN ACCORDION */\n    .website-built-section {\n        background: var(--white);\n        padding: 120px 40px;\n    }\n\n    .website-built-inner {\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .website-built-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n\n    .website-built-header h1 {\n        font-size: 54px;\n        color: var(--dark-blue);\n        margin-bottom: 16px;\n        line-height: 1.1;\n    }\n\n    .website-built-header .subheading {\n        font-size: 16px;\n        font-weight: 700;\n        color: var(--blue);\n        margin-bottom: 16px;\n    }\n\n    .website-built-header p {\n        font-size: 13px;\n        color: #1a1f35;\n        max-width: 900px;\n        margin: 0 auto;\n    }\n\n    .website-built-container {\n        display: grid;\n        grid-template-columns: 1.5fr 1fr;\n        gap: 60px;\n        align-items: start;\n    }\n\n    .website-built-accordion .accordion-item {\n        background: white;\n        border: 2px solid #e8ecf1;\n        border-left: 4px solid var(--blue);\n        margin-bottom: 12px;\n    }\n\n    .website-built-accordion .accordion-header {\n        color: var(--blue);\n        background: white;\n        padding: 20px 28px;\n    }\n\n    .website-built-accordion .accordion-header:hover {\n        color: var(--black);\n    }\n\n    .website-built-accordion .accordion-icon {\n        color: var(--blue);\n    }\n\n    .website-built-accordion .accordion-content {\n        background: #f9fafb;\n    }\n\n    .website-built-accordion .accordion-body {\n        color: #1a1f35;\n    }\n\n    .website-built-accordion .accordion-body ul li:before {\n        color: var(--blue);\n    }\n\n    .website-built-image {\n        position: relative;\n        top: 100px;\n    }\n\n    .website-image-placeholder {\n        width: 100%;\n        height: 200px;\n        background: #f5f5f5;\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        border: 2px solid #e8ecf1;\n        overflow: hidden;\n    }\n\n    .website-image-placeholder img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    /* FEATURES SECTION */\n    .features-section {\n        text-align: center;\n    }\n\n    .features-intro {\n        max-width: 900px;\n        margin: 0 auto 60px;\n    }\n\n    .features-intro h2 {\n        margin-bottom: 24px;\n        color: var(--white);\n    }\n\n    .features-intro .subtitle {\n        font-size: 16px;\n        font-weight: 600;\n        color: var(--neon-blue);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .features-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 32px;\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .feature-card {\n        background: rgba(0, 10, 30, 0.8);\n        padding: 40px 32px;\n        border-radius: var(--border-radius);\n        border: 2px solid rgba(43, 188, 227, 0.3);\n        transition: all 0.4s;\n        backdrop-filter: blur(20px);\n    }\n\n    .feature-card:hover {\n        transform: translateY(-10px);\n        border-color: var(--pop-cyan);\n        box-shadow: 0 20px 60px rgba(43, 188, 227, 0.4);\n    }\n\n    .feature-icon {\n        width: 64px;\n        height: 64px;\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        margin: 0 auto 24px;\n        font-size: 29px;\n    }\n\n    .feature-card h4 {\n        font-size: 16px;\n        font-weight: 900;\n        color: var(--white);\n        margin-bottom: 16px;\n    }\n\n    .feature-card p {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    /* WHO WE SERVE BANNER */\n    .who-we-serve-banner {\n        background: linear-gradient(180deg, #0d1b2a 0%, #1a2b3e 100%);\n        padding: 80px 40px;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .who-we-serve-content {\n        max-width: 1400px;\n        margin: 0 auto;\n        text-align: center;\n    }\n\n    .who-we-serve-title {\n        font-size: 36px;\n        font-weight: 900;\n        color: var(--white);\n        margin-bottom: 60px;\n        text-transform: none;\n        letter-spacing: 0px;\n    }\n\n    .who-we-serve-title span {\n        color: var(--pop-cyan);\n    }\n\n    .who-we-serve-grid {\n        display: grid;\n        grid-template-columns: 1fr 80px 1fr 80px 1fr 80px 1fr;\n        gap: 0;\n        align-items: center;\n        max-width: 1300px;\n        margin: 0 auto;\n    }\n\n    .who-card {\n        background: rgba(15, 25, 45, 0.4);\n        padding: 50px 30px;\n        border-radius: 12px;\n        border: 2px solid rgba(43, 188, 227, 0.2);\n        transition: all 0.4s;\n        text-align: center;\n        min-height: 280px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        backdrop-filter: blur(10px);\n        position: relative;\n        overflow: hidden;\n        cursor: pointer;\n    }\n\n    .who-card-content {\n        position: relative;\n        z-index: 2;\n        transition: opacity 0.4s;\n    }\n\n    .who-card-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan));\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        padding: 30px;\n        opacity: 0;\n        transition: opacity 0.4s;\n        z-index: 3;\n    }\n\n    .who-card-overlay-text {\n        color: white;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.5;\n    }\n\n    .who-card:hover .who-card-overlay {\n        opacity: 1;\n    }\n\n    .who-icon-3d {\n        width: 120px;\n        height: 120px;\n        margin-bottom: 24px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    /* Simple icon display */\n    .who-icon-img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n    }\n\n    .custom-icon {\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        display: block;\n    }\n\n    .emoji-fallback {\n        font-size: 80px;\n    }\n\n    .who-label {\n        font-size: 14px;\n        font-weight: 800;\n        color: var(--white);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .who-arrow {\n        font-size: 40px;\n        color: var(--pop-cyan);\n        font-weight: 300;\n        text-align: center;\n    }\n\n    /* ANIMATED STARFIELD BACKGROUND */\n    .starfield {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        pointer-events: none;\n    }\n\n    .star {\n        position: absolute;\n        background: white;\n        border-radius: 50%;\n        animation: twinkle 3s infinite ease-in-out;\n    }\n\n    .star.small {\n        width: 2px;\n        height: 2px;\n    }\n\n    .star.medium {\n        width: 3px;\n        height: 3px;\n    }\n\n    .star.large {\n        width: 4px;\n        height: 4px;\n    }\n\n    @keyframes twinkle {\n        0%, 100% { opacity: 0.3; }\n        50% { opacity: 1; }\n    }\n\n    /* VERTICAL SWITCHER */\n    .vertical-switcher-section {\n        background: var(--dark-blue);\n        padding: 120px 40px;\n    }\n\n    .vertical-switcher-inner {\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .vertical-switcher-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n\n    .vertical-switcher-header h2 {\n        font-size: 32px;\n        margin-bottom: 20px;\n        color: var(--white);\n    }\n\n    .vertical-switcher-header p {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.7);\n        max-width: 900px;\n        margin: 0 auto;\n    }\n\n    .vertical-tabs {\n        display: flex;\n        gap: 16px;\n        justify-content: center;\n        margin-bottom: 60px;\n        flex-wrap: wrap;\n    }\n\n    .vertical-tab {\n        background: rgba(0, 10, 30, 0.6);\n        padding: 16px 40px;\n        border: 2px solid rgba(43, 188, 227, 0.3);\n        border-radius: var(--border-radius);\n        font-size: 13px;\n        font-weight: 700;\n        color: rgba(255, 255, 255, 0.6);\n        cursor: pointer;\n        transition: all 0.3s;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .vertical-tab:hover {\n        border-color: var(--pop-cyan);\n        color: var(--white);\n        box-shadow: 0 0 15px rgba(43, 188, 227, 0.4);\n    }\n\n    .vertical-tab.active {\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n        color: var(--white);\n        border-color: transparent;\n        box-shadow: 0 0 20px rgba(43, 188, 227, 0.6);\n    }\n\n    .vertical-content-wrapper {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 60px;\n        align-items: center;\n    }\n\n    .vertical-content {\n        display: none;\n        grid-column: 1;\n    }\n\n    .vertical-content.active {\n        display: block;\n    }\n\n    .vertical-text {\n        background: rgba(0, 10, 30, 0.7);\n        padding: 48px;\n        border-radius: var(--border-radius);\n        border: 2px solid rgba(0, 217, 255, 0.2);\n        backdrop-filter: blur(10px);\n    }\n\n    .vertical-text h3 {\n        font-size: 16px;\n        font-weight: 900;\n        color: var(--pop-cyan);\n        margin-bottom: 24px;\n    }\n\n    .vertical-text p {\n        font-size: 16px;\n        color: rgba(255, 255, 255, 0.85);\n        margin-bottom: 24px;\n        line-height: 1.7;\n    }\n\n    .vertical-text ul {\n        list-style: none;\n        padding: 0;\n    }\n\n    .vertical-text ul li {\n        padding: 8px 0;\n        display: flex;\n        align-items: flex-start;\n        color: rgba(255, 255, 255, 0.85);\n        font-size: 14px;\n    }\n\n    .vertical-text ul li:before {\n        content: \"→\";\n        color: var(--pop-cyan);\n        margin-right: 12px;\n        font-weight: 700;\n    }\n\n    .vertical-image-container {\n        grid-column: 2;\n        grid-row: 1;\n        position: relative;\n        top: 100px;\n    }\n\n    .vertical-image {\n        background: rgba(0, 10, 30, 0.5);\n        border-radius: var(--border-radius);\n        border: 2px solid rgba(0, 217, 255, 0.2);\n        padding: 8px;\n        min-height: 500px;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        overflow: hidden;\n    }\n\n    .vertical-image-inner {\n        width: 100%;\n        height: 100%;\n        min-height: 480px;\n        background: #0d1b2a;\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        color: rgba(255, 255, 255, 0.3);\n        font-size: 13px;\n    }\n\n    .vertical-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        border-radius: var(--border-radius);\n    }\n\n    /* ADVANTAGE SECTION */\n    .advantage-section {\n        padding: 120px 40px;\n    }\n\n    .advantage-container {\n        display: grid;\n        grid-template-columns: 1fr 1.5fr;\n        gap: 60px;\n        max-width: 1400px;\n        margin: 0 auto;\n        align-items: start;\n    }\n\n    .advantage-left {\n        position: relative;\n        top: 100px;\n    }\n\n    .advantage-left h1 {\n        font-size: 36px;\n        font-weight: 900;\n        color: var(--white);\n        margin-bottom: 32px;\n        line-height: 1.1;\n        text-transform: uppercase;\n        letter-spacing: -2px;\n    }\n\n    .advantage-left h2 {\n        font-size: 29px;\n        font-weight: 900;\n        color: var(--pop-cyan);\n        margin-bottom: 24px;\n        line-height: 1.2;\n    }\n\n    .advantage-left p {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.8);\n        line-height: 1.7;\n    }\n\n    .advantage-cta {\n        margin-top: 32px;\n    }\n\n    .accordion {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .accordion-item {\n        background: rgba(0, 10, 30, 0.8);\n        border: 2px solid rgba(43, 188, 227, 0.3);\n        border-radius: var(--border-radius);\n        overflow: hidden;\n        transition: all 0.3s;\n        backdrop-filter: blur(20px);\n    }\n\n    .accordion-item:hover {\n        box-shadow: 0 8px 30px rgba(43, 188, 227, 0.3);\n        border-color: var(--pop-cyan);\n    }\n\n    .accordion-header {\n        padding: 20px 28px;\n        cursor: pointer;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        font-weight: 800;\n        font-size: 14px;\n        color: var(--pop-cyan);\n        transition: all 0.3s;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n\n    .accordion-header:hover {\n        color: var(--white);\n    }\n\n    .accordion-icon {\n        font-size: 16px;\n        font-weight: 300;\n        transition: transform 0.3s;\n        color: var(--pop-cyan);\n    }\n\n    .accordion-item.active .accordion-icon {\n        transform: rotate(45deg);\n    }\n\n    .accordion-content {\n        max-height: 0;\n        overflow: hidden;\n        transition: max-height 0.4s ease;\n        background: rgba(0, 5, 15, 0.6);\n    }\n\n    .accordion-item.active .accordion-content {\n        max-height: 600px;\n    }\n\n    .accordion-body {\n        padding: 24px 28px;\n        color: rgba(255, 255, 255, 0.85);\n        font-size: 14px;\n        line-height: 1.8;\n    }\n\n    .accordion-body ul {\n        margin-top: 0;\n        padding-left: 0;\n        list-style: none;\n    }\n\n    .accordion-body ul li {\n        padding: 8px 0;\n        display: flex;\n        align-items: flex-start;\n        font-size: 16px;\n    }\n\n    .accordion-body ul li:before {\n        content: \"→\";\n        color: var(--pop-cyan);\n        margin-right: 12px;\n        font-weight: 700;\n    }\n\n    /* OEM SECTION */\n    .oem-section {\n        background: var(--white);\n        padding: 120px 40px;\n    }\n\n    .oem-content {\n        max-width: 1400px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 60px;\n        align-items: start;\n    }\n\n    .oem-left h2 {\n        color: var(--dark-blue);\n        text-shadow: none;\n        text-align: left;\n        margin-bottom: 32px;\n        font-size: 32px;\n    }\n\n    .oem-left p {\n        color: #1a1f35;\n        text-align: left;\n        margin-bottom: 32px;\n        font-size: 14px;\n        line-height: 1.7;\n    }\n\n    .oem-grid {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 16px;\n        margin-bottom: 40px;\n    }\n\n    .oem-badge {\n        background: white;\n        border: 2px solid #e8ecf1;\n        padding: 16px 28px;\n        border-radius: var(--border-radius);\n        transition: all 0.3s;\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n    }\n\n    .oem-badge:hover {\n        border-color: var(--blue);\n        transform: translateY(-4px);\n        box-shadow: 0 10px 30px rgba(3, 64, 120, 0.3);\n    }\n\n    .oem-logo-placeholder {\n        font-size: 13px;\n        font-weight: 800;\n        color: var(--dark);\n        letter-spacing: 1px;\n    }\n\n    .oem-badge:hover .oem-logo-placeholder {\n        color: var(--blue);\n    }\n\n    .oem-right {\n        display: flex;\n        flex-direction: column;\n        gap: 32px;\n    }\n\n    .oem-image-placeholder {\n        width: 100%;\n        height: 400px;\n        background: #f5f5f5;\n        border-radius: var(--border-radius);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        border: 2px solid #e8ecf1;\n        overflow: hidden;\n    }\n\n    .oem-image-placeholder img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .oem-subtext {\n        font-style: italic;\n        font-weight: 600;\n        color: var(--blue);\n        font-size: 14px;\n        text-align: center;\n    }\n\n    .oem-buttons {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .oem-buttons .button-primary,\n    .oem-buttons .button-white {\n        width: 100%;\n        text-align: center;\n    }\n\n    /* QUALIFIER SECTION */\n    .qualifier {\n        padding: 100px 40px;\n    }\n\n    .qualifier-intro {\n        text-align: center;\n        max-width: 900px;\n        margin: 0 auto 60px;\n    }\n\n    .qualifier-intro h2 {\n        margin-bottom: 24px;\n        color: var(--white);\n    }\n\n    .qualifier-intro p {\n        font-size: 18px;\n        color: rgba(255, 255, 255, 0.8);\n    }\n\n    .qualifier-split {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 48px;\n        max-width: 1400px;\n        margin: 0 auto;\n    }\n\n    .qualifier-side {\n        padding: 48px;\n        border-radius: var(--border-radius);\n        background: rgba(0, 10, 30, 0.6);\n        border: 2px solid rgba(0, 217, 255, 0.2);\n        backdrop-filter: blur(10px);\n    }\n\n    .qualifier-side h3 {\n        font-size: 16px;\n        font-weight: 900;\n        margin-bottom: 32px;\n    }\n\n    .qualifier-left {\n        background: rgba(10, 10, 20, 0.7);\n    }\n\n    .qualifier-right {\n        background: rgba(0, 10, 30, 0.7);\n    }\n\n    .qualifier-left h3 {\n        color: var(--red);\n    }\n\n    .qualifier-right h3 {\n        color: var(--pop-cyan);\n    }\n\n    .qualifier-side p {\n        font-size: 16px;\n        margin-bottom: 20px;\n        padding-left: 28px;\n        position: relative;\n        color: rgba(255, 255, 255, 0.85);\n        font-weight: 400;\n    }\n\n    .qualifier-left p:before {\n        content: \"✗\";\n        position: absolute;\n        left: 0;\n        color: var(--red);\n        font-weight: 900;\n        font-size: 14px;\n    }\n\n    .qualifier-right p:before {\n        content: \"✓\";\n        position: absolute;\n        left: 0;\n        color: var(--pop-cyan);\n        font-weight: 900;\n        font-size: 14px;\n    }\n\n    .qualifier-side strong {\n        font-weight: 900;\n        color: var(--white);\n    }\n\n    /* CONTACT FORM */\n    .contact {\n        text-align: center;\n        padding: 120px 40px;\n        background: rgba(10, 10, 20, 0.7);\n    }\n\n    .contact-inner {\n        max-width: 650px;\n        margin: 0 auto;\n    }\n\n    .contact h2 {\n        margin-bottom: 48px;\n        color: var(--white);\n    }\n\n    .contact-form {\n        max-width: 650px;\n        margin: 0 auto;\n    }\n\n    .form-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 24px;\n        margin-bottom: 24px;\n    }\n\n    .form-group {\n        margin-bottom: 24px;\n    }\n\n    .form-group input {\n        width: 100%;\n        padding: 20px;\n        border: 2px solid rgba(43, 188, 227, 0.3);\n        border-radius: var(--border-radius);\n        font-size: 14px;\n        font-family: 'Montserrat', sans-serif;\n        background: rgba(0, 10, 30, 0.8);\n        color: var(--white);\n        transition: all 0.3s;\n    }\n\n    .form-group input::placeholder {\n        color: rgba(255, 255, 255, 0.4);\n    }\n\n    .form-group input:focus {\n        outline: none;\n        border-color: var(--pop-cyan);\n        box-shadow: 0 0 0 4px rgba(43, 188, 227, 0.2), 0 0 30px rgba(59, 108, 233, 0.3);\n        transform: translateY(-2px);\n    }\n\n    .submit-button {\n        background: linear-gradient(135deg, var(--pop-cyan), var(--pop-blue));\n        color: var(--white);\n        padding: 20px 56px;\n        border: none;\n        border-radius: var(--border-radius);\n        font-size: 14px;\n        font-weight: 900;\n        cursor: pointer;\n        transition: all 0.3s;\n        width: 100%;\n        letter-spacing: 2px;\n        text-transform: uppercase;\n        box-shadow: 0 0 30px rgba(43, 188, 227, 0.5);\n    }\n\n    .submit-button:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 0 50px rgba(43, 188, 227, 0.8), 0 15px 40px rgba(59, 108, 233, 0.5);\n        background: linear-gradient(135deg, var(--pop-blue), var(--pop-cyan));\n    }\n\n    .alt-contact {\n        margin-top: 32px;\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.8);\n    }\n\n    .alt-contact a {\n        color: var(--pop-cyan);\n        text-decoration: none;\n        font-weight: 700;\n    }\n\n    /* RESPONSIVE */\n    @media (max-width: 1024px) {\n        .hero h1 { font-size: 44px; }\n        section h2 { font-size: 34px; }\n        .problem-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }\n        .qualifier-split { grid-template-columns: 1fr; }\n        .advantage-container { grid-template-columns: 1fr; }\n        .advantage-left { position: relative; top: 0; }\n        .oem-content { grid-template-columns: 1fr; }\n        .vertical-content-wrapper { grid-template-columns: 1fr; }\n        .vertical-image-container { grid-column: 1; grid-row: auto; position: relative; top: 0; }\n        .website-built-container { grid-template-columns: 1fr; }\n        .seo-banner-content { grid-template-columns: 1fr; }\n        .who-we-serve-grid { grid-template-columns: 1fr; gap: 20px; }\n        .who-arrow { display: none; }\n    }\n\n    @media (max-width: 768px) {\n        .hero h1 { font-size: 29px; }\n        .heres-why { font-size: 26px; }\n        .problem-grid, .features-grid { grid-template-columns: 1fr; }\n        .form-row { grid-template-columns: 1fr; }\n    }\n</style>\n\n<!-- FIXED ANIMATED BACKGROUND -->\n<div class=\"background-container\">\n    <div class=\"dots-container\" id=\"dotsContainer\"></div>\n    <canvas id=\"particleCanvas\"></canvas>\n    \n    <div class=\"grid-container\">\n        <div class=\"grid-lines\"></div>\n    </div>\n\n    <div class=\"speed-line-container\">\n        <div class=\"speed-line\"></div>\n        <div class=\"speed-line\"></div>\n        <div class=\"speed-line\"></div>\n        <div class=\"speed-line\"></div>\n        <div class=\"speed-line\"></div>\n        <div class=\"speed-line\"></div>\n    </div>\n</div>\n\n<!-- CONTENT WRAPPER -->\n<div class=\"content-wrapper\">\n    <!-- HERO -->\n    <section class=\"hero\">\n        <div class=\"hero-content\">\n            <div class=\"hero-text\">\n                <div class=\"hero-eyebrow\">Automotive Digital Experts</div>\n                <h1>We Engineer an<br><span>Unfair <em class=\"digital-italic\">Digital</em> Advantage</span><br>for Car Dealers</h1>\n                \n                <p class=\"hero-subtitle\">\n                    We're automotive people first, tech experts only slightly behind that. Every decision we make is rooted in real dealership operations, not vendor theory.\n                </p>\n                <div class=\"hero-buttons\">\n                    <a href=\"#contact\" class=\"button-primary\">Let's Talk Strategy</a>\n                    <a href=\"#solution\" class=\"button-secondary\">See How We Do It</a>\n                </div>\n            </div>\n            <div class=\"hero-image\">\n                <img src=\"YOUR_HERO_IMAGE_URL_HERE\" alt=\"Hero Image\" style=\"display: none;\">\n                <span style=\"color: #999; font-size: 14px;\">Upload Hero Image Here</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- FULL WIDTH SERVICE SCROLL -->\n    <section class=\"services-scroll-section\">\n        <div class=\"services-scroll-wrapper\">\n            <div class=\"services-track\">\n                <span class=\"service-pill\">Custom Websites</span>\n                <span class=\"service-pill\">Organic SEO</span>\n                <span class=\"service-pill\">Paid Search</span>\n                <span class=\"service-pill\">Social Advertising</span>\n                <span class=\"service-pill\">Reputation Management</span>\n                <span class=\"service-pill\">Analytics & CRO</span>\n                <span class=\"service-pill\">AI Search</span>\n                <span class=\"service-pill\">AEO</span>\n                <span class=\"service-pill\">Video Production</span>\n                <span class=\"service-pill\">Model Pages</span>\n                <span class=\"service-pill\">Graphic Design</span>\n                <span class=\"service-pill\">Specials Management</span>\n                <span class=\"service-pill\">Custom Websites</span>\n                <span class=\"service-pill\">Organic SEO</span>\n                <span class=\"service-pill\">Paid Search</span>\n                <span class=\"service-pill\">Social Advertising</span>\n                <span class=\"service-pill\">Reputation Management</span>\n                <span class=\"service-pill\">Analytics & CRO</span>\n                <span class=\"service-pill\">AI Search</span>\n                <span class=\"service-pill\">AEO</span>\n                <span class=\"service-pill\">Video Production</span>\n                <span class=\"service-pill\">Model Pages</span>\n                <span class=\"service-pill\">Graphic Design</span>\n                <span class=\"service-pill\">Specials Management</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- THE PROBLEM -->\n    <section class=\"problem-section\">\n        <div class=\"section-centered\">\n            <div class=\"problem-header\">\n                <h2>The Traffic You're Paying For<br>Is <span class=\"probably-text\">(Probably)</span> Going To Waste</h2>\n                <div class=\"heres-why\">HERE'S WHY:</div>\n            </div>\n            \n            <div class=\"problem-grid\">\n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                        </svg>\n                    </div>\n                    <h3>Slow and Invisible = Dead</h3>\n                    <p>Your site needs JSON-LD inventory for AI visibility, structured specials so ChatGPT recommends you, and sub-2-second mobile load times. If your competitor has all three and you don't, they're getting the lead even if your inventory is better.</p>\n                </div>\n                \n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" />\n                        </svg>\n                    </div>\n                    <h3>Templates Don't Convert</h3>\n                    <p>Logo-swap templates look like every other dealer. You're not special to them. You're invoice #47 this month.</p>\n                </div>\n                \n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\" />\n                        </svg>\n                    </div>\n                    <h3>Bad Website Migrations</h3>\n                    <p>Other vendors vaporize years of SEO work and Google sitemap links during migrations. Rankings disappear overnight. Traffic never recovers.</p>\n                </div>\n                \n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" />\n                        </svg>\n                    </div>\n                    <h3>Can't See SEO Work</h3>\n                    <p>They say they're \"optimizing\" but you can't see what changed. Reports are fancy but results are flat. No transparency = no trust.</p>\n                </div>\n                \n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z\" />\n                        </svg>\n                    </div>\n                    <h3>Poor Organic Rankings Force Paid Ads</h3>\n                    <p>Weak SEO means you're forced to buy clicks for your own dealership name. With strong organic presence, you rank #1 naturally and save thousands monthly.</p>\n                </div>\n                \n                <div class=\"problem-card\">\n                    <div class=\"problem-icon\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\" />\n                        </svg>\n                    </div>\n                    <h3>Wrong Traffic</h3>\n                    <p>High traffic numbers mean nothing if they're not in-market buyers. You need shoppers ready to buy, not tire-kickers and bots.</p>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- WEBSITE BUILT DIFFERENT - TWO COLUMN ACCORDION -->\n    <section class=\"website-built-section\" id=\"solution\">\n        <div class=\"website-built-inner\">\n            <div class=\"website-built-header\">\n                <h1>Websites Built for How Dealerships Truly Run</h1>\n                <p class=\"subheading\">Built to support campaigns, inventory, and sales.</p>\n                <p>Custom built to support campaigns, inventory, and sales operations from day one.</p>\n            </div>\n\n            <div class=\"website-built-container\">\n                <div class=\"website-built-accordion accordion\">\n                    <div class=\"accordion-item\">\n                        <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                            More Qualified Leads Not Just More Traffic\n                            <span class=\"accordion-icon\">+</span>\n                        </div>\n                        <div class=\"accordion-content\">\n                            <div class=\"accordion-body\">\n                                <p>We design websites to convert in-market shoppers, not inflate traffic numbers. Every layout, CTA, and SRP is built to turn searchers into leads your sales team can actually close.</p>\n                                <ul>\n                                    <li>Inventory-first layouts that surface sellable units</li>\n                                    <li>Model and trim pages built for ready-to-buy searches</li>\n                                    <li>Clear CTAs that drive calls, forms, and appointments</li>\n                                    <li>Mobile speed optimized for real shoppers, not vanity scores</li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"accordion-item\">\n                        <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                            We Think Like Dealers And Vendors\n                            <span class=\"accordion-icon\">+</span>\n                        </div>\n                        <div class=\"accordion-content\">\n                            <div class=\"accordion-body\">\n                                <p>Most vendors execute tasks. We think in outcomes. Every recommendation we make is filtered through one question: Does this help this dealership sell more cars more efficiently?</p>\n                                <ul>\n                                    <li>Strategy rooted in real dealership operations</li>\n                                    <li>Decisions based on inventory realities not theory</li>\n                                    <li>Marketing aligned with sales not vanity metrics</li>\n                                    <li>Advice you would expect from an operator not an account manager</li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"accordion-item\">\n                        <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                            Accountability You Can Actually See\n                            <span class=\"accordion-icon\">+</span>\n                        </div>\n                        <div class=\"accordion-content\">\n                            <div class=\"accordion-body\">\n                                <p>If something is not working we do not hide it in a report. We surface it explain it and fix it. You always know what is being worked on why it matters and what it is producing.</p>\n                                <ul>\n                                    <li>Clear visibility into changes and priorities</li>\n                                    <li>No mystery optimizations or black box tactics</li>\n                                    <li>Straight answers when performance falls short</li>\n                                    <li>Adjustments driven by results not contracts</li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"accordion-item\">\n                        <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                            Built for How Dealers Actually Operate\n                            <span class=\"accordion-icon\">+</span>\n                        </div>\n                        <div class=\"accordion-content\">\n                            <div class=\"accordion-body\">\n                                <p>Dealers do not run in a vacuum. OEM rules inventory feeds ad platforms and CRMs all have to work together. Your website is built to support the way your dealership actually operates day to day.</p>\n                                <ul>\n                                    <li>OEM compliant without slowing launches</li>\n                                    <li>Inventory aware layouts and specials</li>\n                                    <li>Clean integrations with your existing stack</li>\n                                    <li>Scales with groups rooftops and future growth</li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"website-built-image\">\n                    <div class=\"website-image-placeholder\">\n                        <!-- Replace src with actual image URL -->\n                        <img src=\"YOUR_WEBSITE_IMAGE_URL_HERE\" alt=\"Website Screenshot\" style=\"display: none;\">\n                        <span style=\"color: #999; font-size: 14px;\">Upload Website Image Here</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- SEO PROTECTION BANNER -->\n    <section class=\"seo-protection-banner\">\n        <div class=\"seo-banner-content\">\n            <div class=\"seo-banner-image\">\n                <!-- Replace src with actual image URL -->\n                <img src=\"YOUR_SEO_IMAGE_URL_HERE\" alt=\"SEO Protection\" style=\"display: none;\">\n                <span style=\"color: rgba(255,255,255,0.3); font-size: 13px;\">Upload Image Here</span>\n            </div>\n            <div class=\"seo-banner-text\">\n                <h3>NEVER LOSE YOUR SEO RANKINGS WHEN SWITCHING WEBSITES</h3>\n                <p>Other vendors vaporize years of SEO work during migrations. We preserve every ranking, every backlink, every ounce of Google equity you've earned. Zero downtime. Zero keyword loss. Guaranteed.</p>\n                <p style=\"margin-top: 16px; font-weight: 700;\">Team MXS is the only website platform that guarantees this level of SEO protection.</p>\n            </div>\n        </div>\n    </section>\n\n    <!-- FEATURES THAT MAKE DEALERS UNSTOPPABLE -->\n    <section class=\"features-section\">\n        <div class=\"section-centered\">\n            <div class=\"features-intro\">\n                <h2>Features That Make<br>Dealers Unstoppable</h2>\n                <p class=\"subtitle\">Not Just A Website. An Offensive Weapon.</p>\n            </div>\n\n            <div class=\"features-grid\">\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">▶</div>\n                    <h4>Inline SRP Videos</h4>\n                    <p>Video reviews embedded directly in search results. Shoppers see your inventory come alive before they even click.</p>\n                </div>\n\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">⚡</div>\n                    <h4>Animated HTML Banners</h4>\n                    <p>Banners that update as shoppers choose models. Your specials change dynamically with their search. Real-time relevance.</p>\n                </div>\n\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">🤖</div>\n                    <h4>AI-Optimized Specials</h4>\n                    <p>Place AI-crawlable special offers anywhere on your site in various sizes. Model pages, SRPs, VDPs, specials pages, home page. All happen instantly without a designer.</p>\n                </div>\n\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">📊</div>\n                    <h4>Model Comparison Generator</h4>\n                    <p>The only tier 1 interactive model comparison generator with side-by-side details and specials. Helps with results and users love the interactions on a tier 3 site. Levels it up.</p>\n                </div>\n\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">📄</div>\n                    <h4>Tier 1 Model Pages</h4>\n                    <p>Model pages that help SEO and user education. We syndicate them for authority SEO building without duplicate content penalties. Strategic content that ranks.</p>\n                </div>\n\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">⚙️</div>\n                    <h4>Custom SRPs</h4>\n                    <p>Create your own custom SRP landing pages in 2 minutes or less. No waiting for a ticket. Build and land traffic on custom inventory pages instantly.</p>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- WHO WE SERVE BANNER -->\n    <section class=\"who-we-serve-banner\">\n        <div class=\"starfield\" id=\"starfield\"></div>\n        <div class=\"who-we-serve-content\">\n            <div class=\"who-we-serve-title\"><span>&lt;/</span>Team MXS's Custom Website Platform<span>&gt;</span></div>\n            <div class=\"who-we-serve-grid\">\n                <div class=\"who-card\">\n                    <div class=\"who-card-content\">\n                        <div class=\"who-icon-3d\">\n                            <img src=\"YOUR_OEM_ICON_URL\" alt=\"OEMs\" class=\"custom-icon\" style=\"display: none;\">\n                            <span class=\"emoji-fallback\">🏢</span>\n                        </div>\n                        <div class=\"who-label\">OEMs</div>\n                    </div>\n                    <div class=\"who-card-overlay\">\n                        <div class=\"who-card-overlay-text\">\n                            Custom integrations to content, finance tools, and other functionalities\n                        </div>\n                    </div>\n                </div>\n                <div class=\"who-arrow\">→</div>\n                <div class=\"who-card\">\n                    <div class=\"who-card-content\">\n                        <div class=\"who-icon-3d\">\n                            <img src=\"YOUR_TIER2_ICON_URL\" alt=\"Tier 2\" class=\"custom-icon\" style=\"display: none;\">\n                            <span class=\"emoji-fallback\">📦</span>\n                        </div>\n                        <div class=\"who-label\">Tier 2</div>\n                    </div>\n                    <div class=\"who-card-overlay\">\n                        <div class=\"who-card-overlay-text\">\n                            Built for associations and dealer groups - capture your local market region with a blazing fast Dealer Masters website\n                        </div>\n                    </div>\n                </div>\n                <div class=\"who-arrow\">→</div>\n                <div class=\"who-card\">\n                    <div class=\"who-card-content\">\n                        <div class=\"who-icon-3d\">\n                            <img src=\"YOUR_DEALERS_ICON_URL\" alt=\"Dealerships\" class=\"custom-icon\" style=\"display: none;\">\n                            <span class=\"emoji-fallback\">🚗</span>\n                        </div>\n                        <div class=\"who-label\">Dealerships</div>\n                    </div>\n                    <div class=\"who-card-overlay\">\n                        <div class=\"who-card-overlay-text\">\n                            Easily manage your content, site settings, 3rd party tools, and inventory\n                        </div>\n                    </div>\n                </div>\n                <div class=\"who-arrow\">→</div>\n                <div class=\"who-card\">\n                    <div class=\"who-card-content\">\n                        <div class=\"who-icon-3d\">\n                            <img src=\"YOUR_AGENCIES_ICON_URL\" alt=\"Agencies\" class=\"custom-icon\" style=\"display: none;\">\n                            <span class=\"emoji-fallback\">💼</span>\n                        </div>\n                        <div class=\"who-label\">Agencies</div>\n                    </div>\n                    <div class=\"who-card-overlay\">\n                        <div class=\"who-card-overlay-text\">\n                            Access all websites you manage with one login\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- DEALER MASTERS LOGO -->\n    <section style=\"background: white; padding: 60px 40px; text-align: center;\">\n        <div style=\"max-width: 600px; margin: 0 auto;\">\n            <img src=\"YOUR_DEALER_MASTERS_LOGO_URL\" alt=\"Dealer Masters\" style=\"max-width: 100%; height: auto; display: none;\">\n            <div style=\"color: #1a2b3e; font-size: 14px; font-weight: 700;\">Upload Dealer Masters Logo Here</div>\n        </div>\n    </section>\n\n    <!-- VERTICAL SWITCHER - FLEXIBLE FOR EVERY TYPE OF DEALER -->\n    <section class=\"vertical-switcher-section\">\n        <div class=\"vertical-switcher-inner\">\n            <div class=\"vertical-switcher-header\">\n                <h2>Flexible for Every Type of Car Dealer</h2>\n                <p>Custom-engineered solutions for every dealership type. Click a category to explore what we build.</p>\n            </div>\n\n            <div class=\"vertical-tabs\">\n                <div class=\"vertical-tab active\" onclick=\"switchVertical(0)\">Volume</div>\n                <div class=\"vertical-tab\" onclick=\"switchVertical(1)\">Luxury</div>\n                <div class=\"vertical-tab\" onclick=\"switchVertical(2)\">Highline</div>\n                <div class=\"vertical-tab\" onclick=\"switchVertical(3)\">Groups</div>\n            </div>\n\n            <div class=\"vertical-content-wrapper\">\n                <div class=\"vertical-content active\" data-vertical=\"0\">\n                    <div class=\"vertical-text\">\n                        <h3>Volume</h3>\n                        <p>Built for speed and conversion. Handle high inventory turnover with sites engineered for volume dealers who move units fast.</p>\n                        <ul>\n                            <li>Lightning-fast inventory search</li>\n                            <li>Dynamic pricing and incentive displays</li>\n                            <li>Automated inventory feed optimization</li>\n                            <li>High-capacity infrastructure</li>\n                            <li>Real-time inventory synchronization</li>\n                        </ul>\n                    </div>\n                </div>\n\n                <div class=\"vertical-content\" data-vertical=\"1\">\n                    <div class=\"vertical-text\">\n                        <h3>Luxury</h3>\n                        <p>Attract, engage, and convert high-value buyers with custom-engineered experiences designed for Maserati, Aston Martin, Lotus, and other luxury brands.</p>\n                        <ul>\n                            <li>AI-powered visibility optimization</li>\n                            <li>Integrated video walkthroughs</li>\n                            <li>Custom search result pages</li>\n                            <li>Bespoke design systems</li>\n                            <li>White-glove concierge support</li>\n                        </ul>\n                    </div>\n                </div>\n\n                <div class=\"vertical-content\" data-vertical=\"2\">\n                    <div class=\"vertical-text\">\n                        <h3>Highline</h3>\n                        <p>Sophisticated websites for premium import brands. Balance performance with elegant design that matches your brand standards.</p>\n                        <ul>\n                            <li>OEM-compliant modern design</li>\n                            <li>Advanced inventory merchandising</li>\n                            <li>Multi-language support where needed</li>\n                            <li>Premium customer experience focus</li>\n                            <li>Integration with luxury CRMs</li>\n                        </ul>\n                    </div>\n                </div>\n\n                <div class=\"vertical-content\" data-vertical=\"3\">\n                    <div class=\"vertical-text\">\n                        <h3>Groups</h3>\n                        <p>Scalable architecture for dealer groups. Manage multiple rooftops with centralized control and location-specific customization.</p>\n                        <ul>\n                            <li>Multi-site management dashboard</li>\n                            <li>Shared inventory across locations</li>\n                            <li>Centralized reporting and analytics</li>\n                            <li>Location-specific branding and offers</li>\n                            <li>Group-wide campaign coordination</li>\n                        </ul>\n                    </div>\n                </div>\n\n                <div class=\"vertical-image-container\">\n                    <div class=\"vertical-image\">\n                        <div class=\"vertical-image-inner\">\n                            <!-- Replace src with actual image URL -->\n                            <img src=\"YOUR_VERTICAL_IMAGE_URL_HERE\" alt=\"Dealer Type Preview\" style=\"display: none;\">\n                            <span>📸 Upload Preview Image Here</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- HOW WE ENGINEER YOUR UNFAIR ADVANTAGE -->\n    <section class=\"advantage-section\">\n        <div class=\"advantage-container\">\n            <div class=\"advantage-left\">\n                <h1>Full-Stack Automotive Digital Services</h1>\n                <h2>How We Engineer Your Dealership's Unfair Advantage</h2>\n                <p>Click any service item below to see why dealers choose MXS when they're serious about dominating their market.</p>\n                <p style=\"margin-top: 32px; font-size: 17px; font-weight: 600; color: var(--neon-blue);\">One Partner. Less Headaches. It's possible.</p>\n                <div class=\"advantage-cta\">\n                    <a href=\"#contact\" class=\"button-white\">Learn How Now</a>\n                </div>\n            </div>\n\n            <div class=\"accordion\">\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Custom Website Development\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Purpose-built sites engineered for your brand and optimized for conversions. Not templates, custom solutions.</p>\n                            <ul>\n                                <li>QuickGen™ Technology: Launch custom sites in days</li>\n                                <li>AI-Ready Architecture for voice search dominance</li>\n                                <li>Inline video integration without speed penalties</li>\n                                <li>Custom SRP layouts designed for your inventory</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Organic Visibility (SEO)\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Dominate local search and own your market. Real SEO that drives traffic, not just reports that look impressive.</p>\n                            <ul>\n                                <li>Local Market Domination: Own Page 1 for high-intent searches</li>\n                                <li>AI Search Optimization for ChatGPT & Perplexity</li>\n                                <li>Technical SEO: Site speed, Core Web Vitals, mobile optimization</li>\n                                <li>Content strategy that ranks and converts</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Paid Search, Display & OTT/CTV\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Hyper-targeted digital advertising that actually generates showroom traffic. No wasted spend on tire-kickers.</p>\n                            <ul>\n                                <li>Google Search Campaigns: Capture high-intent shoppers</li>\n                                <li>Dynamic Retargeting: Show them the exact vehicles they viewed</li>\n                                <li>Conquest Campaigns: Target competitors' brand searches</li>\n                                <li>OTT/CTV: Connected TV advertising for maximum reach</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Social Media Management & Advertising\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Facebook, Instagram, TikTok campaigns that generate leads and build brands.</p>\n                            <ul>\n                                <li>Dynamic vehicle ads that update with inventory</li>\n                                <li>Retargeting campaigns across all platforms</li>\n                                <li>Video content that drives engagement</li>\n                                <li>Audience targeting that finds in-market buyers</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        AI Search Visibility: AEO, GEO, AIO\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Optimize for AI-powered search engines and voice assistants. Be found where your customers are searching.</p>\n                            <ul>\n                                <li>Answer Engine Optimization (AEO) for voice search</li>\n                                <li>Generative Engine Optimization (GEO) for ChatGPT, Perplexity</li>\n                                <li>AI-driven content optimization</li>\n                                <li>Structured data implementation for rich results</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Google Business Profile & Review Management\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Own your local presence and reputation. Build trust with authentic reviews and optimized profiles.</p>\n                            <ul>\n                                <li>Google Business Profile optimization and management</li>\n                                <li>Review generation campaigns that get results</li>\n                                <li>Reputation monitoring across all platforms</li>\n                                <li>Response management for positive brand building</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Video Production\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Professional video content that engages and converts. From social ads to website hero videos.</p>\n                            <ul>\n                                <li>Commercial-grade video production</li>\n                                <li>Social media video content</li>\n                                <li>Inventory showcase videos</li>\n                                <li>Testimonial and staff introduction videos</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Graphic Design\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Professional design that elevates your brand across all touchpoints.</p>\n                            <ul>\n                                <li>Custom banner and display ad creation</li>\n                                <li>Social media graphics and templates</li>\n                                <li>Email marketing design</li>\n                                <li>Print collateral and promotional materials</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"accordion-item\">\n                    <div class=\"accordion-header\" onclick=\"toggleAccordion(this)\">\n                        Specials Management\n                        <span class=\"accordion-icon\">+</span>\n                    </div>\n                    <div class=\"accordion-content\">\n                        <div class=\"accordion-body\">\n                            <p>Strategic special offers that drive traffic and close deals. Expertly crafted and optimized for conversion.</p>\n                            <ul>\n                                <li>Data-driven special offer creation</li>\n                                <li>Automated specials page updates</li>\n                                <li>A/B testing for maximum effectiveness</li>\n                                <li>Seasonal campaign planning and execution</li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- OEM COMPLIANCE -->\n    <section class=\"oem-section\">\n        <div class=\"oem-content\">\n            <div class=\"oem-right\">\n                <div class=\"oem-image-placeholder\">\n                    <!-- Replace src with actual image URL -->\n                    <img src=\"YOUR_OEM_IMAGE_URL_HERE\" alt=\"OEM Certifications\" style=\"display: none;\">\n                    <span style=\"color: #999; font-size: 14px;\">Upload Image Here<br>(500x400px recommended)</span>\n                </div>\n\n            <div class=\"oem-left\">\n                <h2>Automotive OEM Compliant</h2>\n                <p>We work with select manufacturers and are actively in talks with more. Even if we can't build your website yet, we can often handle SEO, AI visibility, digital advertising, video, graphics, specials management, and more.</p>\n\n                <div class=\"oem-grid\">\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">HONDA</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">NISSAN</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">TOYOTA</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">LEXUS</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">KIA</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">FORD</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">ASTON MARTIN</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">LOTUS</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">MASERATI</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">MERCEDES-BENZ</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">BENTLEY</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">ROLLS-ROYCE</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">LAMBORGHINI</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">MCLAREN</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">INEOS</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">POLESTAR</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">ALFA ROMEO</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">BUICK</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">GMC</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">CHEVROLET</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">AUDI</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">RAM</div></div>\n                    <div class=\"oem-badge\"><div class=\"oem-logo-placeholder\">JEEP</div></div>\n                </div>\n            </div>\n\n                <p class=\"oem-subtext\">If we aren't in a program, odds are we're in talks or dealers are actively advocating to have us.</p>\n\n                <div class=\"oem-buttons\">\n                    <a href=\"#contact\" class=\"button-white\">Request Your Brand Template</a>\n                    <a href=\"#contact\" class=\"button-primary\">Book a Call</a>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- QUALIFIER -->\n    <section class=\"qualifier\">\n        <div class=\"section-centered\">\n            <div class=\"qualifier-intro\">\n                <h2>Let's Make Sure We're Right For Each Other</h2>\n                <p>Even if we are not in your program for websites (yet) may not mean we can't help with other services. Every program is different and ever changing. We don't believe in duplicate sites, but if we are forced to do them for the dealer's best interest - we will on a case-by-case basis.</p>\n            </div>\n\n            <div class=\"qualifier-split\">\n                <div class=\"qualifier-side qualifier-left\">\n                    <h3>Not For You If:</h3>\n                    <p>You view your website as <strong>\"just a brochure\"</strong></p>\n                    <p>You want the <strong>cheapest option</strong>, not the best</p>\n                    <p>You think <strong>\"good enough\"</strong> is acceptable in 2026</p>\n                    <p>You <strong>don't want proactive partnered support</strong> that actually cares about your results</p>\n                    <p>You're fine being <strong>treated like a ticket number</strong></p>\n                </div>\n                <div class=\"qualifier-side qualifier-right\">\n                    <h3>Perfect For You If:</h3>\n                    <p>You see your website as your <strong>#1 salesperson</strong></p>\n                    <p>You want <strong>AI visibility</strong> before your competitors</p>\n                    <p>You demand <strong>flexibility and control</strong></p>\n                    <p>You value <strong>fast, proactive support</strong> that cares</p>\n                    <p>You want <strong>constant innovation</strong>, not stagnation</p>\n                    <p>You're ready to <strong>dominate your market</strong></p>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- CONTACT -->\n    <section class=\"contact\" id=\"contact\">\n        <div class=\"contact-inner\">\n            <h2>Ready to Dominate Your Market?</h2>\n            <form class=\"contact-form\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <input type=\"text\" placeholder=\"First Name\" required>\n                    </div>\n                    <div class=\"form-group\">\n                        <input type=\"text\" placeholder=\"Last Name\" required>\n                    </div>\n                </div>\n                <div class=\"form-group\">\n                    <input type=\"email\" placeholder=\"Email\" required>\n                </div>\n                <div class=\"form-group\">\n                    <input type=\"tel\" placeholder=\"Phone\" required>\n                </div>\n                <div class=\"form-group\">\n                    <input type=\"text\" placeholder=\"Dealership, Group, or Agency Name\" required>\n                </div>\n                <button type=\"submit\" class=\"submit-button\">Submit</button>\n            </form>\n            <p class=\"alt-contact\">\n                Or call: <a href=\"tel:866-665-4669\">866-665-4669</a>\n            </p>\n        </div>\n    </section>\n\n    <!-- FOOTER BANNER IMAGE -->\n    <section style=\"background: #0d1b2a; padding: 0; margin: 0;\">\n        <div style=\"max-width: 1920px; margin: 0 auto; height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #1a2b3e;\">\n            <img src=\"YOUR_FOOTER_BANNER_1920x200_URL\" alt=\"Footer Banner\" style=\"width: 100%; height: 100%; object-fit: cover; display: none;\">\n            <div style=\"color: rgba(255,255,255,0.5); font-size: 14px; text-align: center; padding: 40px;\">\n                Upload Footer Banner Image Here<br>\n                <span style=\"font-size: 16px;\">(1920x200px)</span>\n            </div>\n        </div>\n    </section>\n</div>\n\n"},"SEO":{"order":15,"visible":true,"seo":{"MetaData":"","MetaTitle":"","tags":[""]}}},"title":"home-page-new-test","theme":{"colors":{"primary":"#0a0f1c","secondary":"white","text":"#ffffff","secondarytext":"#272727","accent1":"#276df1","accent2":"#276df1"}},"dealerInfo":{"dealerAddress":"333 N Lantana Street, Suite 122,,Camarillo, CA 93010","dealerLogo":"https://media.dealermasters.com/Nissan/MXS/MXS_logo_04.webp","dealerName":"Team MXS","salesNumber":"866-665-4669","serviceNumber":"866-665-4669","partsNumber":"866-665-4669","bodyShopNumber":"866-665-4669","financeNumber":"866-665-4669","manufacturer":"","website":"Team MXS","websiteLink":"/","directions":"https://www.google.com/maps/","newInventory":"/","usedInventory":"/","bgBackground":"","salesHours":[{"day":"Mon - Fri","time":"8 AM - 5 PM PST"}],"financeHours":[],"serviceHours":[],"partsHours":[],"collisionHours":[],"managerSpecialPage":"/manager","financeSpecialPage":"/finance","leaseSpecialPage":"/lease","privacy":"/","termsOfService":"/","favicon":"https://media.dealermasters.com/6351ab9310c6d3e9abe42c4b/dbf217aa4f6ef4a9a7227a195766d659.png","gtmId":"GTM-PZD6C7W","socialThumbnail":"https://media.dealermasters.com/6351ab9310c6d3e9abe42c4b/dbf217aa4f6ef4a9a7227a195766d659.png"},"inventorymanagement":{"filterOptions":"NUC","costrange":"5000","mileagerange":"10000","months":"180","downpayment":"15","aRate":"0","bRate":"0","cRate":"0","dRate":"0","eRate":"0","fRate":"0","unavailableImg":"","vehiclecardbutton":[{"btnleft":"","btnleftlink":"","btnright":"","btnrightlink":"","overrideTheme":false,"btncolor":"","btntxtcolor":""}],"topHtmlVDP":"<p></p>","botHtmlVDP":"<p></p>","topHtmlSRP":"<p></p>","botHtmlSRP":"<p></p>","disclaimerSRP":"<p dir = \"auto\">We make every effort to present information that is accurate. However, it is based on data provided by the vehicle manufacturar and/or other sources and therefore exact configuration, color, specifications & accesories should be used as a guide only and are not guaranteed. Under no circumstances will be liable for any inaccuracies, claims or losses of any nature. Furthermore inventory is subject to prior sale and prices are subject ot change without notice., cannot be combined with any other offer(s), do not include provincial or local taxes, tags, registration or title fees. To ensure your complete satisfaction, please verify accuracy prior to purchase.</p>\n","vdpslug":"{{year}}/{{make}}/{{model}}/{{vin}}","actionButtons":[{"buttonText":"Check availability","buttonLink":"","buttonImage":"","overrideTheme":"","btncolor":"","btntxtcolor":""}],"disclaimerVDP":"<p dir = \"auto\">We make every effort to present information that is accurate. However, it is based on data provided by the vehicle manufacturar and/or other sources and therefore exact configuration, color, specifications & accesories should be used as a guide only and are not guaranteed. Under no circumstances will be liable for any inaccuracies, claims or losses of any nature. Furthermore inventory is subject to prior sale and prices are subject ot change without notice., cannot be combined with any other offer(s), do not include provincial or local taxes, tags, registration or title fees. To ensure your complete satisfaction, please verify accuracy prior to purchase.</p>\n","disclaimerCalculator":"<p></p>","disclaimerFinanceApp":"<p></p>","disclaimerContact":"<p></p>","fallbackText":"Call for Price","PosDifText":"Dealer Accessories","NegDifText":"Dealer Discount","netPriceCustomText":"","LocationFilter":false},"footer":{"logo":"https://media.dealermasters.com/242ebbad91ba7e3a4af114846cbcd19a.png","links":[{"linkName":"SERVICE & PARTS","linkValue":"/service","subLinks":[{"linkName":"Shop Parts","linkValue":"/parts"}]}],"cookieDisclaimer":"<div></div>","linkLI":"","linkIOS":"","linkAndroid":"","bottomLinks":[{"linkName":"Dealer Masters","linkValue":"/dealermasters"},{"linkName":"eCommerce","linkValue":"/ecommerce-services"},{"linkName":"About","linkValue":"/about"},{"linkName":"Contact Us","linkValue":"?title=Get%20In%20Touch%20With%20Us#contact-form"},{"linkName":"Privacy Policy","linkValue":"/privacy-policy-and-cookie-policy"},{"linkName":"SOC 2 | Trust Center","linkValue":"https://trust.teammxs.com/"}]},"lead_url":"https://leads.dealermasters.com/leads","site_id":"6351ab9310c6d3e9abe42c4b","blogmanagement":{"blogResultsTopHTML":"<style>\n</style>\n","blogResultsBottomHTML":"<div class=\"wrapper\">\n<!--Alignment valid values: \"left-align\", \"center-left-align\", \"middle-align\", \"right-align\". Defaults to left-align.-->\n<!--Theme valid values: \"no-bg\" \"dark\", \"light\". Defaults to no-bg.-->\n    <section id=\"main-bg\" class=\"content-section light middle-align\">\n        <h3 id=\"content-title\">MEET WITH TEAM MXS</h3>\n        <a id=\"a-link\" class=\"content-cta\" href=\"#contact-form\">BOOK NOW</a>\n    </section>\n</div>\n<style>\n  .blog-module--blog-jumbotron--1yRvV {\n    max-width: 1920px;\n    margin: 54px auto 0;\n    background-position: left;\n\t}\n  \n  .wrapper {\n    max-width: 1920px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-wrap: wrap;\n    margin: 0 auto;\n  }\n  section.content-section {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    padding: 4rem;\n    gap: 1.5rem;\n  }\n  .content-section h3 {\n    font-size: 32px;\n    font-family: var(--primary-font);\n    text-align: center;\n    font-weight: 300;\n  }\n  .content-section p {\n    letter-spacing: 0.1px;\n    line-height: 1.5;\n    font-size: 16px;\n  }\n  a.content-cta {\n    background-color: var(--primary-text);\n    padding: 1rem;\n    font-size: 16px;\n    box-shadow: 3px 3px 5px rgba(0,0,0,0.15);\n    width: fit-content;\n  }\n  @media only screen and (max-width: 576px) {\n    .content-section h3 { font-size: 28px; }\n  }\n  /*Alignment*/\n  /**Left**/\n  section.content-section.left-align {\n    align-items: flex-start;\n  } \n  .left-align.content-section p {\n    text-align: left;\n  }\n  /**Center Left**/\n  section.content-section.center-left-align {\n    align-items: center;\n  } \n  .center-left-align.content-section p {\n    text-align: left;\n  }\n  /**Middle**/\n  section.content-section.middle-align {\n    align-items: center;\n  } \n  .middle-align.content-section p {\n    text-align: center;\n  }\n  /**Right**/\n  section.content-section.right-align {\n    align-items: flex-end;\n  }\n  .right-align.content-section p {\n    text-align: right;\n  }\n  /*Themes*/\n  /**No BG**/\n  section.content-section.no-bg {\n    background-color: transparent;\n  }\n  .content-section.no-bg a.content-cta {\n    background: var(--primary-accent) linear-gradient(295.53deg,#276df1 22.68%,#539cff 98.61%);\n    color: var(--primary-text);\n  }\n  /**Light**/\n  section.content-section.light {\n    background: var(--primary-accent) linear-gradient(295.53deg,#276df1 22.68%,#539cff 98.61%);\n  }\n  .content-section.light a.content-cta {\n    background-color: var(--primary-text);\n    color: var(--primary-accent);\n  }\n  /**Dark**/\n  section.content-section.dark {\n    background: #272727;\n  }\n  .content-section.dark a.content-cta {\n    background: var(--primary-accent) linear-gradient(295.53deg,#276df1 22.68%,#539cff 98.61%);\n    color: var(--primary-text);\n  }\n  \n  /** MOBILE ADJUSTMENTS **/ \n  @media screen and (max-width: 750px) {\n    .blog-module--blog-jumbotron--1yRvV {\n     min-height: 300px !important;  \n    }\n    \n    .blog-module--blog-jumbotron--1yRvV p {\n      font-size: 30px !important; \n    }\n  }\n</style>","allBlogPagesBottomHTML":"","categoriesBlogResultsHTML":"","blogResultsPageSlug":"/blogs"},"gtmId":"GTM-PZD6C7W"}},"staticQueryHashes":["952559061"]}