{"__meta":{"id":"01M5H51FGJEGESJ8B0DHH6TKTW","tabUuid":null,"batchId":null,"timestamp":"2026-10-22T06:33:41.139Z","utime":1792650821.139543056488037109375,"method":"GET","url":"http://muralworksai.com","component":null,"requestType":"http","status":200,"redirectLocation":null,"serverTimingMs":11.321611000000000757381712901405990123748779296875,"visitId":null},"http":{"requestHeaders":{"accept-encoding":"gzip","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36","host":"muralworksai.com"},"responseHeaders":{"content-type":"text/html; charset=utf-8","cache-control":"no-cache, private","date":"Thu, 22 Oct 2026 06:33:41 GMT","vary":"X-Inertia","x-inertia-devtools-id":"01M5H51FGJEGESJ8B0DHH6TKTW","x-inertia-devtools-parent-out":"01M5H51FGJEGESJ8B0DHH6TKTW"},"requestBody":{"status":"empty"},"responseBody":{"status":"present","value":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"google-site-verification\" content=\"R8j8bD3YQFulJkeKdIRUeoFL2DERm6g9RE--z_aXGJo\" />\n    <meta name=\"csrf-token\" content=\"tBuoRQJKVvEIvQ6UJMhuv2CmZ6HmzHtlYrYrfucw\">\n    <title>MuralWorks AI</title>\n    <!-- Import Google Fonts -->\n    <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\"\n        rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"/css/style.css\">\n\n    <!-- Lucide Icons -->\n    <script src=\"https://unpkg.com/lucide@latest\"></script>\n\n    <!-- Three.js (used in some pages) -->\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n\n    <!-- Lenis smooth scrolling -->\n    <script src=\"https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js\"></script>\n\n    <!-- Google Tag Manager -->\n    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n    })(window,document,'script','dataLayer','GTM-KF7TR3WN');</script>\n   <!-- End Google Tag Manager -->\n\n\n\n    <style>\n        body {\n            margin: 0;\n            font-family: 'Inter', sans-serif;\n            background-color: #ffffff;\n            color: #0F0500;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .nav-desktop {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n        }\n\n        .hamburger-btn {\n            display: none;\n            width: 36px;\n            height: 36px;\n            align-items: center;\n            justify-content: center;\n            border-radius: 8px;\n            border: 1px solid #FFD6B0;\n            color: #E85D04;\n            background: transparent;\n            cursor: pointer;\n        }\n\n        @media (max-width: 768px) {\n            .nav-desktop {\n                display: none !important;\n            }\n\n            .hamburger-btn {\n                display: flex !important;\n            }\n        }\n\n        /* Nav item styles */\n        .nav-item {\n            font-size: 0.88rem;\n            font-weight: 600;\n            color: rgba(255, 255, 255, 0.95);\n            padding: 8px 16px;\n            border-radius: 10px;\n            background: transparent;\n            border: 1px solid transparent;\n            transition: all 0.18s ease;\n            text-decoration: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-family: inherit;\n            cursor: pointer;\n        }\n\n        .nav-item:hover {\n            background: transparent;\n            color: #FF7A2F;\n        }\n\n        .nav-item.active {\n            font-weight: 700;\n            color: #FF7A2F;\n            background: transparent;\n            border-color: transparent;\n        }\n\n        /* Scrolled navbar adaptive colors */\n        #navbar.is-scrolled .nav-item,\n        #navbar.is-scrolled .mega-trigger-btn {\n            color: #522E1B !important;\n        }\n\n        #navbar.is-scrolled .nav-item:hover,\n        #navbar.is-scrolled .mega-trigger-btn:hover,\n        #navbar.is-scrolled .mega-wrapper.is-open .mega-trigger-btn {\n            background: transparent;\n            color: #E85D04 !important;\n        }\n\n        #navbar.is-scrolled .nav-item.active {\n            color: #E85D04 !important;\n            background: transparent;\n            border-color: transparent;\n        }\n\n        #navbar.is-scrolled #logo-ai-tag {\n            color: #6B3A1F !important;\n        }\n\n        /* Mobile menu */\n        #mobile-menu {\n            position: fixed;\n            top: 64px;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            z-index: 999;\n            background: #ffffff;\n            padding: 20px 24px 40px;\n            box-shadow: 0 16px 40px rgba(232, 93, 4, 0.15);\n            display: none;\n            overflow-y: auto;\n        }\n\n        .mobile-nav-item {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: 100%;\n            text-align: left;\n            padding: 14px 0;\n            font-size: 1rem;\n            font-weight: 700;\n            color: #2D1200;\n            border-bottom: 1px solid #FFE8D4;\n            text-decoration: none;\n            background: transparent;\n            cursor: pointer;\n        }\n\n        .mobile-nav-item.active {\n            color: #E85D04;\n        }\n\n        .mobile-segment-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 8px;\n            padding: 12px 0 16px;\n        }\n\n        .mobile-segment-card {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 10px 14px;\n            border-radius: 10px;\n            background: #FFF8F3;\n            border: 1px solid #FFE8D4;\n            text-decoration: none;\n            color: #2D1200;\n            font-weight: 600;\n            font-size: 0.88rem;\n            transition: background 0.15s ease;\n        }\n\n        .mobile-segment-card:hover {\n            background: #FFEAD7;\n            color: #E85D04;\n        }\n\n        /* ─────────────────────────────────────────────────────────────\n           NICE.COM INSPIRED INTERACTIVE MEGA MENU\n           ───────────────────────────────────────────────────────────── */\n        .mega-wrapper {\n            position: relative;\n            display: inline-block;\n        }\n\n        .mega-trigger-btn {\n            font-size: 0.88rem;\n            font-weight: 600;\n            color: rgba(255, 255, 255, 0.95);\n            padding: 8px 16px;\n            border-radius: 10px;\n            background: transparent;\n            border: 1px solid transparent;\n            transition: all 0.18s ease;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-family: inherit;\n            text-decoration: none;\n        }\n\n        .mega-trigger-btn:hover,\n        .mega-wrapper.is-open .mega-trigger-btn,\n        .mega-wrapper:hover .mega-trigger-btn {\n            background: transparent;\n            color: #FF7A2F;\n        }\n\n        .mega-trigger-btn .mega-chevron {\n            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .mega-wrapper.is-open .mega-chevron,\n        .mega-wrapper:hover .mega-chevron {\n            transform: rotate(180deg);\n        }\n\n        /* Backdrop dim */\n        .mega-backdrop-overlay {\n            position: fixed;\n            top: 64px;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(15, 5, 0, 0.35);\n            backdrop-filter: blur(4px);\n            -webkit-backdrop-filter: blur(4px);\n            z-index: 990;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.25s ease;\n        }\n\n        .mega-backdrop-overlay.active {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        /* Mega Menu Flyout Panel */\n        .mega-menu-flyout {\n            position: fixed;\n            top: 64px;\n            left: 50%;\n            transform: translateX(-50%) translateY(10px);\n            width: min(1180px, calc(100vw - 32px));\n            background: #ffffff;\n            border: 1px solid rgba(255, 214, 176, 0.9);\n            border-radius: 20px;\n            box-shadow: 0 24px 60px rgba(15, 5, 0, 0.18), 0 4px 18px rgba(232, 93, 4, 0.08);\n            z-index: 999;\n            opacity: 0;\n            visibility: hidden;\n            pointer-events: none;\n            transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;\n            overflow: hidden;\n        }\n\n        .mega-wrapper:hover .mega-menu-flyout,\n        .mega-wrapper.is-open .mega-menu-flyout {\n            opacity: 1;\n            visibility: visible;\n            pointer-events: auto;\n            transform: translateX(-50%) translateY(0);\n        }\n\n        /* Mega Menu Layout: 3 Columns */\n        .mega-layout {\n            display: grid;\n            grid-template-columns: 290px 1fr 310px;\n            min-height: 460px;\n        }\n\n        /* Left Column: Segments List */\n        .mega-sidebar {\n            background: #FAF6F2;\n            border-right: 1px solid #FFEAD7;\n            padding: 16px 10px;\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n            max-height: 480px;\n            overflow-y: auto;\n        }\n\n        .mega-sidebar::-webkit-scrollbar {\n            width: 4px;\n        }\n\n        .mega-sidebar::-webkit-scrollbar-track {\n            background: #FAF6F2;\n        }\n\n        .mega-sidebar::-webkit-scrollbar-thumb {\n            background: #FFD6B0;\n            border-radius: 4px;\n        }\n\n        .mega-sidebar-title {\n            font-size: 0.72rem;\n            font-weight: 800;\n            color: #8C5335;\n            letter-spacing: 0.08em;\n            text-transform: uppercase;\n            padding: 4px 12px 8px;\n        }\n\n        .mega-segment-btn {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 8px 12px;\n            border-radius: 8px;\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: #381A0B;\n            text-decoration: none;\n            transition: color 0.15s ease, background-color 0.15s ease;\n            cursor: pointer;\n            border: none;\n            background: transparent;\n        }\n\n        .mega-segment-btn:hover {\n            color: #E85D04;\n            background: rgba(232, 93, 4, 0.06);\n        }\n\n        .mega-segment-btn.active {\n            color: #E85D04;\n            font-weight: 700;\n            background: rgba(232, 93, 4, 0.09);\n        }\n\n        .mega-seg-label {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .mega-seg-icon {\n            font-size: 1rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        /* Center Column: Interactive Capabilities & Workflows */\n        .mega-center {\n            padding: 28px 32px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            background: #ffffff;\n            max-height: 480px;\n            overflow-y: auto;\n        }\n\n        .mega-detail-panel {\n            display: none;\n            animation: megaFade 0.2s ease-out;\n        }\n\n        .mega-detail-panel.active {\n            display: block;\n        }\n\n        @keyframes megaFade {\n            from {\n                opacity: 0;\n                transform: translateY(4px);\n            }\n\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .mega-panel-eyebrow {\n            font-size: 0.75rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.08em;\n            color: #E85D04;\n            margin-bottom: 6px;\n        }\n\n        .mega-panel-title {\n            font-size: 1.4rem;\n            font-weight: 800;\n            color: #0F0500;\n            margin: 0 0 8px 0;\n            letter-spacing: -0.02em;\n        }\n\n        .mega-panel-tagline {\n            font-size: 0.88rem;\n            color: #6B3A1F;\n            line-height: 1.55;\n            margin: 0 0 20px 0;\n        }\n\n        .mega-capabilities-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 12px;\n            margin-bottom: 16px;\n        }\n\n        .mega-cap-card {\n            background: #FAF6F2;\n            border: 1px solid #FFEEDF;\n            border-radius: 10px;\n            padding: 12px 14px;\n            transition: all 0.15s ease;\n        }\n\n        .mega-cap-card:hover {\n            background: #FFF5EC;\n            border-color: #FFD6B0;\n        }\n\n        .mega-cap-header {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 0.82rem;\n            font-weight: 700;\n            color: #0F0500;\n            margin-bottom: 4px;\n        }\n\n        .mega-cap-desc {\n            font-size: 0.75rem;\n            color: #6B3A1F;\n            line-height: 1.45;\n            margin: 0;\n        }\n\n        /* Right Column: Featured Action Card */\n        .mega-spotlight {\n            background: #140702;\n            border-left: 1px solid #FFEAD7;\n            padding: 30px 22px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            color: #ffffff;\n            position: relative;\n        }\n\n        .mega-spotlight-title {\n            font-size: 1.08rem;\n            font-weight: 800;\n            line-height: 1.35;\n            color: #ffffff;\n            margin-bottom: 10px;\n        }\n\n        .mega-spotlight-desc {\n            font-size: 0.78rem;\n            color: rgba(255, 255, 255, 0.7);\n            line-height: 1.55;\n            margin-bottom: 20px;\n        }\n\n        .mega-stat-pill {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            padding: 11px 13px;\n            border-radius: 8px;\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            margin-bottom: 22px;\n        }\n\n        .mega-stat-val {\n            font-size: 1.2rem;\n            font-weight: 800;\n            color: #FF7A2F;\n        }\n\n        .mega-stat-lbl {\n            font-size: 0.7rem;\n            color: rgba(255, 255, 255, 0.7);\n            line-height: 1.3;\n        }\n\n        .mega-primary-btn {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            width: 100%;\n            padding: 11px 16px;\n            border-radius: 8px;\n            font-size: 0.84rem;\n            font-weight: 700;\n            color: #ffffff;\n            background: linear-gradient(135deg, #E85D04, #FF7A2F);\n            text-decoration: none;\n            border: none;\n            cursor: pointer;\n            transition: all 0.18s ease;\n            box-sizing: border-box;\n        }\n\n        .mega-primary-btn:hover {\n            opacity: 0.95;\n            color: #ffffff;\n        }\n\n        .mega-sec-btn {\n            display: block;\n            text-align: center;\n            font-size: 0.75rem;\n            font-weight: 600;\n            color: rgba(255, 255, 255, 0.6);\n            text-decoration: none;\n            margin-top: 12px;\n            cursor: pointer;\n            transition: color 0.15s ease;\n        }\n\n        .mega-sec-btn:hover {\n            color: #FF9454;\n        }\n\n        /* Bottom Mega Footer */\n        .mega-footer {\n            background: #FAF6F2;\n            border-top: 1px solid #FFEAD7;\n            padding: 12px 32px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 0.78rem;\n            color: #5C3219;\n        }\n\n        .mega-footer a {\n            color: #E85D04;\n            font-weight: 700;\n            text-decoration: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 4px;\n        }\n\n        .mega-footer a:hover {\n            text-decoration: underline;\n        }\n    </style>\n</head>\n<!-- Google tag (gtag.js) --> \n<script async src=\"https://www.googletagmanager.com/gtag/js?id=G-K765E5Z897\"></script>\n<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-K765E5Z897'); </script>\n\n<body>\n    \n    <!-- Google Tag Manager (noscript) -->\n    <noscript><iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-KF7TR3WN\"\n    height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>\n    <!-- End Google Tag Manager (noscript) -->\n\n\n    <!-- NAVBAR -->\n    <header id=\"navbar\" class=\"\"\n        style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px; display: flex; align-items: center; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\">\n        <div class=\"container\" style=\"display: flex; align-items: center; justify-content: space-between; width: 100%;\">\n\n            <!-- Logo -->\n            <a href=\"/\"\n                style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; text-decoration: none;\">\n                <div\n                    style=\"width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #E85D04, #FF7A2F); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(232,93,4,0.35); animation: pulse-ring 3s ease-in-out infinite;\">\n                    <i data-lucide=\"zap\" style=\"color: #fff; fill: #fff; width: 18px; height: 18px;\"></i>\n                </div>\n                <div style=\"display: flex; align-items: baseline; gap: 2px;\">\n                    <span\n                        style=\"font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: #E85D04;\">MuralWorks</span>\n                    <span id=\"logo-ai-tag\" style=\"font-size: 1.1rem; font-weight: 500; color: #ffffff; transition: color 0.2s ease;\">AI</span>\n                </div>\n            </a>\n\n            <!-- Desktop Nav -->\n            <nav class=\"nav-desktop\">\n                <a href=\"/\" class=\"nav-item active\">Home</a>\n\n                <!-- INTERACTIVE MEGA DROPDOWN (NICE.COM STYLE) -->\n                <div class=\"mega-wrapper\" id=\"mega-wrapper\">\n                    <button class=\"mega-trigger-btn\" id=\"mega-trigger\" aria-expanded=\"false\">\n                        <span>Mural Workers</span>\n                        <i data-lucide=\"chevron-down\" class=\"mega-chevron\" style=\"width:15px; height:15px;\"></i>\n                    </button>\n\n                    <!-- Mega Flyout Canvas -->\n                    <div class=\"mega-menu-flyout\" id=\"mega-flyout\">\n                        <div class=\"mega-layout\">\n\n                            <!-- 1. LEFT: Industry Segments Sidebar -->\n                            <div class=\"mega-sidebar\">\n                                <div class=\"mega-sidebar-title\">Industry Segments</div>\n\n                                <a href=\"https://dev-salesworker.crescendoworldwide.com/demo\"\n                                    target=\"_blank\" class=\"mega-segment-btn active\" data-segment=\"training\"\n                                    onmouseenter=\"activateSegment('training')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏫</span>\n                                        <span>Training Institute</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/logistic-companies\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"logistic\"\n                                    onmouseenter=\"activateSegment('logistic')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🚚</span>\n                                        <span>Logistic Companies</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"/coming-soon\" target=\"_blank\"\n                                    class=\"mega-segment-btn\" data-segment=\"exporters\"\n                                    onmouseenter=\"activateSegment('exporters')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🌍</span>\n                                        <span>Exporters</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/industrial-product-companies\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"industrial\"\n                                    onmouseenter=\"activateSegment('industrial')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏭</span>\n                                        <span>Industrial Products</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/real-estate-developers\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"realestate\"\n                                    onmouseenter=\"activateSegment('realestate')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏗️</span>\n                                        <span>Real Estate Developers</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"/coming-soon\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"education\"\n                                    onmouseenter=\"activateSegment('education')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🎓</span>\n                                        <span>Educational Institutions</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/healthcare-providers\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"healthcare\"\n                                    onmouseenter=\"activateSegment('healthcare')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏥</span>\n                                        <span>Healthcare Providers</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"/coming-soon\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"consulting\"\n                                    onmouseenter=\"activateSegment('consulting')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">💼</span>\n                                        <span>Consulting Firms</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"/coming-soon\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"recruitment\"\n                                    onmouseenter=\"activateSegment('recruitment')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">👥</span>\n                                        <span>Recruitment Agencies</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"/coming-soon\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"insurance\"\n                                    onmouseenter=\"activateSegment('insurance')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🛡️</span>\n                                        <span>Insurance Companies</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/banking\" target=\"_blank\"\n                                    class=\"mega-segment-btn\" data-segment=\"banking\"\n                                    onmouseenter=\"activateSegment('banking')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏦</span>\n                                        <span>Banking</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/it-saas-companies\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"it\"\n                                    onmouseenter=\"activateSegment('it')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">☁️</span>\n                                        <span>IT & SaaS Companies</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/government-public-sector\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"government\"\n                                    onmouseenter=\"activateSegment('government')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏛️</span>\n                                        <span>Government & Public Sector</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/economic-development-agencies\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"economic\"\n                                    onmouseenter=\"activateSegment('economic')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">📈</span>\n                                        <span>Economic Development</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n\n                                <a href=\"http://localhost:5175/industrial-promotion-bodies\"\n                                    target=\"_blank\" class=\"mega-segment-btn\" data-segment=\"promotion\"\n                                    onmouseenter=\"activateSegment('promotion')\">\n                                    <div class=\"mega-seg-label\">\n                                        <span class=\"mega-seg-icon\">🏆</span>\n                                        <span>Industrial Promotion Bodies</span>\n                                    </div>\n                                    <i data-lucide=\"chevron-right\" style=\"width:13px; height:13px; opacity:0.5;\"></i>\n                                </a>\n                            </div>\n\n                            <!-- 2. CENTER: Interactive Capabilities Panel -->\n                            <div class=\"mega-center\">\n\n                                <!-- 0. Training Institute -->\n                                <div class=\"mega-detail-panel active\" id=\"detail-training\">\n                                    <div class=\"mega-panel-eyebrow\">Autonomous Engagement & Support Worker</div>\n                                    <h3 class=\"mega-panel-title\">Training Institute</h3>\n                                    <p class=\"mega-panel-tagline\">Automate course enrollments, proactively gather feedback from students, and boost sales with AI.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"trending-up\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Sales</div>\n                                            <p class=\"mega-cap-desc\">Qualifies leads, provides course details, and drives student enrollments directly over the phone.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"message-square\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Feedback</div>\n                                            <p class=\"mega-cap-desc\">Automatically collects post-training feedback and resolves student queries 24/7.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 1. Logistics -->\n                                <div class=\"mega-detail-panel\" id=\"detail-logistic\">\n                                    <div class=\"mega-panel-eyebrow\">Autonomous Freight & Dispatch Worker</div>\n                                    <h3 class=\"mega-panel-title\">Logistic Companies</h3>\n                                    <p class=\"mega-panel-tagline\">Automate dispatch calls, track shipments with AI in\n                                        real time, and provide 24/7 driver support to eliminate operational bottlenecks.\n                                    </p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"navigation\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Autonomous\n                                                Dispatching</div>\n                                            <p class=\"mega-cap-desc\">Confirms driver readiness, load check-ins, and\n                                                routing instructions with instant CRM syncing.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"map-pin\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Live Shipment\n                                                IVR</div>\n                                            <p class=\"mega-cap-desc\">Shippers and consignees get conversational ETAs,\n                                                GPS updates, and detention status.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"alert-triangle\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Route Delay\n                                                Alerts</div>\n                                            <p class=\"mega-cap-desc\">Proactively dials distribution centers and drivers\n                                                during severe weather or customs delays.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-check\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Proof of\n                                                Delivery Follow-up</div>\n                                            <p class=\"mega-cap-desc\">Automatically confirms BOL signatures and resolves\n                                                accessorial billing items by phone.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 2. Exporters -->\n                                <div class=\"mega-detail-panel\" id=\"detail-exporters\">\n                                    <div class=\"mega-panel-eyebrow\">Cross-Border Trade & Customs Worker</div>\n                                    <h3 class=\"mega-panel-title\">Exporters & Trade Houses</h3>\n                                    <p class=\"mega-panel-tagline\">Coordinate overseas consignments, automate customs\n                                        clearance status calls, and qualify international buyers across time zones.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"globe\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Multi-Lingual\n                                                Inquiries</div>\n                                            <p class=\"mega-cap-desc\">Speaks 40+ languages to converse with international\n                                                buyers in their native tongue.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-text\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Customs Doc\n                                                Follow-up</div>\n                                            <p class=\"mega-cap-desc\">Coordinates Letter of Credit and bill of lading\n                                                document requirements automatically.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"anchor\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Port &\n                                                Container Tracking</div>\n                                            <p class=\"mega-cap-desc\">Provides real-time container demurrage and vessel\n                                                booking status.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"dollar-sign\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Trade Quote\n                                                Screening</div>\n                                            <p class=\"mega-cap-desc\">Screens overseas trade leads on volume, Incoterms,\n                                                and payment escrow terms.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 3. Industrial Products -->\n                                <div class=\"mega-detail-panel\" id=\"detail-industrial\">\n                                    <div class=\"mega-panel-eyebrow\">B2B Technical Sales Worker</div>\n                                    <h3 class=\"mega-panel-title\">Industrial Product Companies</h3>\n                                    <p class=\"mega-panel-tagline\">Qualify commercial buyers instantly, answer complex\n                                        engineering specs directly from CAD/spec sheets, and book distributor demos.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"layers\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Spec Sheet\n                                                Advisory</div>\n                                            <p class=\"mega-cap-desc\">Answers SKU tolerances, certifications, and\n                                                compatibility questions naturally.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"filter\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Commercial\n                                                Qualification</div>\n                                            <p class=\"mega-cap-desc\">Screens buyers on MOQ, delivery timeline, and\n                                                project budget before rep routing.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Distributor\n                                                Scheduling</div>\n                                            <p class=\"mega-cap-desc\">Schedules field engineer consultations and regional\n                                                distributor visits in real time.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-text\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Instant RFQ\n                                                Capture</div>\n                                            <p class=\"mega-cap-desc\">Captures exact quote parameters and transmits\n                                                structured RFQ data into ERP.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 4. Real Estate -->\n                                <div class=\"mega-detail-panel\" id=\"detail-realestate\">\n                                    <div class=\"mega-panel-eyebrow\">Property Concierge & Tour Worker</div>\n                                    <h3 class=\"mega-panel-title\">Real Estate Developers</h3>\n                                    <p class=\"mega-panel-tagline\">Engage high-intent buyers 24/7, book guided site tours\n                                        directly into worker calendars, and provide instant floor plan and pricing\n                                        details.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar-check\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Site Tour\n                                                Booking</div>\n                                            <p class=\"mega-cap-desc\">Syncs with sales gallery schedules to book\n                                                on-premise walkthroughs in seconds.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"home\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Inventory &\n                                                Pricing IVR</div>\n                                            <p class=\"mega-cap-desc\">Shares real-time unit availability, square footage,\n                                                amenities, and payment plans.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"phone-incoming\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> 30s\n                                                Speed-to-Lead</div>\n                                            <p class=\"mega-cap-desc\">Dials portal leads within 30 seconds of form\n                                                submission while intent is at peak.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"user-check\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Warm Sales\n                                                Transfer</div>\n                                            <p class=\"mega-cap-desc\">Seamlessly transfers pre-qualified luxury buyers to\n                                                on-duty sales specialists.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 5. Education -->\n                                <div class=\"mega-detail-panel\" id=\"detail-education\">\n                                    <div class=\"mega-panel-eyebrow\">Admissions & Student Advisor</div>\n                                    <h3 class=\"mega-panel-title\">Educational Institutions</h3>\n                                    <p class=\"mega-panel-tagline\">Support applicants through admissions deadlines,\n                                        schedule 1-on-1 counseling appointments, and handle campus FAQs year-round.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"book-open\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Admissions\n                                                Assistance</div>\n                                            <p class=\"mega-cap-desc\">Guides prospective students on deadlines,\n                                                prerequisites, and program details.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"user-plus\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Counselor\n                                                Scheduling</div>\n                                            <p class=\"mega-cap-desc\">Gauges student career interests and books\n                                                counseling appointments instantly.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"help-circle\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Campus &\n                                                Tuition FAQ</div>\n                                            <p class=\"mega-cap-desc\">Resolves financial aid, dorm housing, and syllabus\n                                                queries without staff load.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"bell\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Enrollment\n                                                Reminders</div>\n                                            <p class=\"mega-cap-desc\">Calls accepted students with personalized\n                                                orientation reminders and next steps.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 6. Healthcare -->\n                                <div class=\"mega-detail-panel\" id=\"detail-healthcare\">\n                                    <div class=\"mega-panel-eyebrow\">Patient Scheduling & Intake Worker</div>\n                                    <h3 class=\"mega-panel-title\">Healthcare Providers</h3>\n                                    <p class=\"mega-panel-tagline\">Handle patient scheduling, automated pre-op reminders,\n                                        and basic intake with empathetic, HIPAA-ready voice AI.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Clinic\n                                                Appointment Booking</div>\n                                            <p class=\"mega-cap-desc\">Matches patients with specialist calendars and\n                                                verifies accepted insurance plans.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"clock\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Pre-Visit\n                                                Reminders</div>\n                                            <p class=\"mega-cap-desc\">Proactively confirms appointments and delivers\n                                                preparation instructions.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"pill\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Prescription\n                                                Refill FAQ</div>\n                                            <p class=\"mega-cap-desc\">Directs refill requests and clinic operating\n                                                queries with zero waiting hold times.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"heart-pulse\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Post-Care\n                                                Follow-ups</div>\n                                            <p class=\"mega-cap-desc\">Checks in on discharged patients to monitor\n                                                recovery milestones automatically.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 7. Consulting -->\n                                <div class=\"mega-detail-panel\" id=\"detail-consulting\">\n                                    <div class=\"mega-panel-eyebrow\">Executive Scheduling & Lead Intake</div>\n                                    <h3 class=\"mega-panel-title\">Consulting Firms</h3>\n                                    <p class=\"mega-panel-tagline\">Capture enterprise inbound leads, screen engagements\n                                        for partner fit, and orchestrate scoping consultations.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"briefcase\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Practice Area\n                                                Routing</div>\n                                            <p class=\"mega-cap-desc\">Routes prospective clients to the right practice\n                                                group partner automatically.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Partner\n                                                Calendar Sync</div>\n                                            <p class=\"mega-cap-desc\">Coordinates executive discovery calls across\n                                                multiple partner schedules.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"shield\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Conflict\n                                                Checking Info</div>\n                                            <p class=\"mega-cap-desc\">Collects initial party information cleanly for\n                                                compliance conflict review.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-check\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Post-Meeting\n                                                Next Steps</div>\n                                            <p class=\"mega-cap-desc\">Sends proposal outlines and follow-up links\n                                                immediately after calls.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 8. Recruitment -->\n                                <div class=\"mega-detail-panel\" id=\"detail-recruitment\">\n                                    <div class=\"mega-panel-eyebrow\">Candidate Screening & Interview Worker</div>\n                                    <h3 class=\"mega-panel-title\">Recruitment Agencies</h3>\n                                    <p class=\"mega-panel-tagline\">Screen hundreds of candidate applicants daily, verify\n                                        salary expectations and availability, and schedule recruiter interviews.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"users\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> High-Volume\n                                                Phone Screen</div>\n                                            <p class=\"mega-cap-desc\">Asks standard qualifying questions and logs\n                                                structured resume responses.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"clock\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Availability &\n                                                Notice Check</div>\n                                            <p class=\"mega-cap-desc\">Confirms current notice period, location\n                                                preference, and compensation.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Recruiter\n                                                Interview Booking</div>\n                                            <p class=\"mega-cap-desc\">Books qualified talent directly onto recruiter\n                                                interview calendars.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"database\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> ATS Auto-Sync\n                                            </div>\n                                            <p class=\"mega-cap-desc\">Pushes call recordings, candidate ratings, and\n                                                transcripts into ATS.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 9. Insurance -->\n                                <div class=\"mega-detail-panel\" id=\"detail-insurance\">\n                                    <div class=\"mega-panel-eyebrow\">FNOL Claims & Policy Worker</div>\n                                    <h3 class=\"mega-panel-title\">Insurance Companies</h3>\n                                    <p class=\"mega-panel-tagline\">Streamline First Notice of Loss (FNOL) intake, answer\n                                        policy coverage questions, and warm-transfer complex claims to adjusters.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"shield-alert\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> 24/7 FNOL\n                                                Claims Intake</div>\n                                            <p class=\"mega-cap-desc\">Collects incident timestamps, policy numbers, and\n                                                damage descriptions cleanly.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-search\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Policy Coverage\n                                                Inquiry</div>\n                                            <p class=\"mega-cap-desc\">Explains deductibles, rider limits, and payment\n                                                schedules in natural language.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"phone-forwarded\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Adjuster Warm\n                                                Transfer</div>\n                                            <p class=\"mega-cap-desc\">Escalates high-priority claims to licensed\n                                                adjusters with complete screen-pop summary.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"refresh-cw\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Policy Renewal\n                                                Calls</div>\n                                            <p class=\"mega-cap-desc\">Proactively contacts policyholders before\n                                                expiration to retain active accounts.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 10. Banking -->\n                                <div class=\"mega-detail-panel\" id=\"detail-banking\">\n                                    <div class=\"mega-panel-eyebrow\">Secure Voice Banking & Screening Worker</div>\n                                    <h3 class=\"mega-panel-title\">Banking & Financial Services</h3>\n                                    <p class=\"mega-panel-tagline\">Deliver secure balance inquiries, loan\n                                        pre-qualification screening, and instant transaction fraud verification with\n                                        conversational AI.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"lock\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Voice Biometric\n                                                Auth</div>\n                                            <p class=\"mega-cap-desc\">Authenticates callers securely for balance checks\n                                                and recent statement inquiries.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"credit-card\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Card Block &\n                                                Replacement</div>\n                                            <p class=\"mega-cap-desc\">Instantly freezes compromised cards and triggers\n                                                expedited replacements.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"trending-up\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Loan\n                                                Pre-Qualification</div>\n                                            <p class=\"mega-cap-desc\">Screens mortgage and credit line applicants on\n                                                criteria before loan officer calls.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"alert-circle\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Proactive Fraud\n                                                Verification</div>\n                                            <p class=\"mega-cap-desc\">Calls account holders in real time to confirm\n                                                flagged card charges.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 11. IT & SaaS -->\n                                <div class=\"mega-detail-panel\" id=\"detail-it\">\n                                    <div class=\"mega-panel-eyebrow\">AI SDR & L1 Helpdesk Worker</div>\n                                    <h3 class=\"mega-panel-title\">IT & SaaS Companies</h3>\n                                    <p class=\"mega-panel-tagline\">Automate outbound pipeline generation, dial inbound\n                                        demo requests in seconds, and resolve Tier-1 technical support without human\n                                        workers.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"zap\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Outbound AI SDR\n                                            </div>\n                                            <p class=\"mega-cap-desc\">Dials targeted ICP contact lists, gauges pain\n                                                points, and books AE demo calls.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"phone-call\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Instant Inbound\n                                                Response</div>\n                                            <p class=\"mega-cap-desc\">Dials form fills within 10 seconds to convert\n                                                website visitors when intent is hottest.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"terminal\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> L1 Technical\n                                                Helpdesk</div>\n                                            <p class=\"mega-cap-desc\">Resolves SSO lockouts, password resets, and API\n                                                endpoint questions 24/7.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"database\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> CRM & Ticket\n                                                Sync</div>\n                                            <p class=\"mega-cap-desc\">Writes full call transcripts, sentiment scores, and\n                                                next steps into HubSpot / Salesforce.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 12. Government -->\n                                <div class=\"mega-detail-panel\" id=\"detail-government\">\n                                    <div class=\"mega-panel-eyebrow\">Public Citizen Services Voice Worker</div>\n                                    <h3 class=\"mega-panel-title\">Government & Public Sector</h3>\n                                    <p class=\"mega-panel-tagline\">Deliver instant 24/7 citizen services, municipal\n                                        permit inquiries, and emergency informational helplines.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"landmark\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> 311 Citizen\n                                                Helpline</div>\n                                            <p class=\"mega-cap-desc\">Resolves public inquiries on trash schedules,\n                                                licenses, and utility bills instantly.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"calendar\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> DMV & Office\n                                                Appointments</div>\n                                            <p class=\"mega-cap-desc\">Schedules in-person department visits and sends\n                                                checklist SMS reminders.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"alert-circle\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Crisis &\n                                                Emergency Broadcasts</div>\n                                            <p class=\"mega-cap-desc\">Broadcasts urgent community safety advisories to\n                                                thousands of residents simultaneously.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"check-square\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Public Records\n                                                & Permits</div>\n                                            <p class=\"mega-cap-desc\">Guides citizens through application requirements\n                                                and status lookups.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 13. Economic Development -->\n                                <div class=\"mega-detail-panel\" id=\"detail-economic\">\n                                    <div class=\"mega-panel-eyebrow\">Inward Investment Concierge</div>\n                                    <h3 class=\"mega-panel-title\">Economic Development Agencies</h3>\n                                    <p class=\"mega-panel-tagline\">Engage corporate site selectors, provide incentive\n                                        package details, and coordinate regional business expansion visits.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"trending-up\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Site Selector\n                                                Inquiries</div>\n                                            <p class=\"mega-cap-desc\">Answers demographic, tax incentive, and zoning\n                                                questions on natural phone calls.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"map\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Regional\n                                                Expansion Tours</div>\n                                            <p class=\"mega-cap-desc\">Schedules business delegation visits and meetings\n                                                with local officials.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"award\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Grant &\n                                                Incentive Screening</div>\n                                            <p class=\"mega-cap-desc\">Pre-qualifies expanding businesses for regional\n                                                workforce tax credits.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"phone-outgoing\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Outbound FDI\n                                                Outreach</div>\n                                            <p class=\"mega-cap-desc\">Dials prospective manufacturing executives to\n                                                present regional advantages.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- 14. Industrial Promotion -->\n                                <div class=\"mega-detail-panel\" id=\"detail-promotion\">\n                                    <div class=\"mega-panel-eyebrow\">Trade Association & Expo Worker</div>\n                                    <h3 class=\"mega-panel-title\">Industrial Promotion Bodies</h3>\n                                    <p class=\"mega-panel-tagline\">Accelerate trade show delegate attendance, coordinate\n                                        B2B buyer-seller matchmaking, and manage member services.</p>\n                                    <div class=\"mega-capabilities-grid\">\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"award\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Expo &\n                                                Conference RSVPs</div>\n                                            <p class=\"mega-cap-desc\">Dials past attendees and prospective exhibitors to\n                                                confirm registration passes.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"handshake\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> B2B Matchmaking\n                                                Schedules</div>\n                                            <p class=\"mega-cap-desc\">Coordinates 1-on-1 business meetings between buyers\n                                                and manufacturing suppliers.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"users\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Member\n                                                Association Renewals</div>\n                                            <p class=\"mega-cap-desc\">Proactively reminds members of annual membership\n                                                renewals and benefits.</p>\n                                        </div>\n                                        <div class=\"mega-cap-card\">\n                                            <div class=\"mega-cap-header\"><i data-lucide=\"file-text\"\n                                                    style=\"width:14px; height:14px; color:#E85D04;\"></i> Export Guide\n                                                Distribution</div>\n                                            <p class=\"mega-cap-desc\">Follows up calls by delivering customized industry\n                                                research reports over SMS/email.</p>\n                                        </div>\n                                    </div>\n                                </div>\n\n                            </div>\n\n                            <!-- 3. RIGHT: Spotlight Action Card -->\n                            <div class=\"mega-spotlight\">\n                                <div id=\"spotlight-text-content\">\n                                    <h4 class=\"mega-spotlight-title\" id=\"spotlight-title\">See Mural Worker for Logistics\n                                    </h4>\n                                    <p class=\"mega-spotlight-desc\" id=\"spotlight-desc\">Experience low-latency,\n                                        human-like voice workflows custom-tuned for this industry segment.</p>\n\n                                    <div class=\"mega-stat-pill\">\n                                        <div class=\"mega-stat-val\" id=\"spotlight-stat-val\">85%</div>\n                                        <div class=\"mega-stat-lbl\" id=\"spotlight-stat-lbl\">Reduction in manual dispatch\n                                            & coordinator calls</div>\n                                    </div>\n                                </div>\n                                <div id=\"spotlight-image-content\" style=\"display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-top-right-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden;\">\n                                    <div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.8) 100%); z-index: 2;\"></div>\n                                    <img id=\"spotlight-image\" src=\"\" alt=\"Industry Image\" style=\"width: 100%; height: 100%; object-fit: cover; object-position: center top; position: relative; z-index: 1;\">\n                                </div>\n\n                                <div style=\"position: relative; z-index: 10;\">\n                                    <a href=\"https://dev-salesworker.crescendoworldwide.com/demo\"\n                                        target=\"_blank\" id=\"spotlight-cta-btn\" class=\"mega-primary-btn\">\n                                        <span>Explore Industry Solution</span>\n                                        <i data-lucide=\"arrow-right\" style=\"width:14px; height:14px;\"></i>\n                                    </a>\n                                    <a href=\"#\" class=\"mega-sec-btn\" style=\"text-shadow: 0 1px 3px rgba(0,0,0,0.6);\">\n                                        Schedule an Enterprise Demo →\n                                    </a>\n                                </div>\n                            </div>\n\n                        </div>\n\n                        <!-- Mega Menu Bottom Bar -->\n                        <div class=\"mega-footer\">\n                            <div>\n                                Need a custom voice model for your specific enterprise workflow?\n                            </div>\n                            <div style=\"display:flex; align-items:center; gap:20px;\">\n                                <a href=\"http://localhost:5175/\" target=\"_blank\"\n                                    style=\"color:#E85D04; font-weight:700;\">\n                                    <span>✨ View All Segments Hub</span>\n                                    <i data-lucide=\"arrow-right\" style=\"width:12px; height:12px;\"></i>\n                                </a>\n                                <a href=\"#\">\n                                    <span>Talk to our AI Solutions Team</span>\n                                    <i data-lucide=\"arrow-right\" style=\"width:12px; height:12px;\"></i>\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <a href=\"/cases\" class=\"nav-item \">Case Studies</a>\n            </nav>\n\n            <!-- CTA -->\n            <div style=\"display: flex; align-items: center; gap: 10px;\">\n                <button type=\"button\" onclick=\"openContactSalesModal()\"\n                    style=\"font-size: 0.84rem; font-weight: 700; color: #ffffff; padding: 8px 18px; border-radius: 9px; border: none; background: linear-gradient(135deg, #E85D04, #FF7A2F); transition: all 0.15s ease; cursor: pointer; box-shadow: 0 3px 12px rgba(232,93,4,0.28); display: inline-flex; align-items: center; gap: 6px;\">\n                    <i data-lucide=\"phone\" style=\"width: 14px; height: 14px;\"></i>\n                    Contact Sales: +91 8956872271\n                </button>\n                <button id=\"hamburger-btn\" class=\"hamburger-btn\">\n                    <i id=\"hamburger-icon\" data-lucide=\"menu\" style=\"width: 18px; height: 18px;\"></i>\n                </button>\n            </div>\n        </div>\n    </header>\n\n    <!-- Mega Menu Backdrop -->\n    <div class=\"mega-backdrop-overlay\" id=\"mega-backdrop\" onclick=\"closeMegaMenu()\"></div>\n\n    <!-- Mobile Drawer -->\n    <div id=\"mobile-menu\">\n        <a href=\"/\" class=\"mobile-nav-item active\">Home</a>\n\n        <!-- Mobile Accordion for Mural Workers -->\n        <div style=\"border-bottom: 1px solid #FFE8D4; padding: 14px 0;\">\n            <div style=\"display:flex; align-items:center; justify-content:space-between; font-size:1rem; font-weight:700; color:#E85D04; cursor:pointer;\"\n                onclick=\"toggleMobileSegments()\">\n                <span>Mural Workers (15 Segments)</span>\n                <i data-lucide=\"chevron-down\" id=\"mobile-seg-icon\" style=\"width:16px; height:16px;\"></i>\n            </div>\n            <div id=\"mobile-seg-list\" class=\"mobile-segment-grid\"\n                style=\"display:none; margin-top:12px; max-height:360px; overflow-y:auto;\">\n                <a class=\"mobile-segment-card\"\n                    href=\"https://dev-salesworker.crescendoworldwide.com/demo\" target=\"_blank\">🏫\n                    Training Institute</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/logistic-companies\" target=\"_blank\">🚚\n                    Logistic Companies</a>\n                <a class=\"mobile-segment-card\" href=\"/coming-soon\"\n                    target=\"_blank\">🌍 Exporters</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/industrial-product-companies\"\n                    target=\"_blank\">🏭 Industrial Products</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/real-estate-developers\" target=\"_blank\">🏗️\n                    Real Estate Developers</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"/coming-soon\"\n                    target=\"_blank\">🎓 Educational Institutions</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/healthcare-providers\" target=\"_blank\">🏥\n                    Healthcare Providers</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"/coming-soon\" target=\"_blank\">💼\n                    Consulting Firms</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"/coming-soon\" target=\"_blank\">👥\n                    Recruitment Agencies</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"/coming-soon\" target=\"_blank\">🛡️\n                    Insurance Companies</a>\n                <a class=\"mobile-segment-card\" href=\"http://localhost:5175/banking\"\n                    target=\"_blank\">🏦 Banking</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/it-saas-companies\" target=\"_blank\">☁️ IT &\n                    SaaS Companies</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/government-public-sector\"\n                    target=\"_blank\">🏛️ Government & Public Sector</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/economic-development-agencies\"\n                    target=\"_blank\">📈 Economic Development</a>\n                <a class=\"mobile-segment-card\"\n                    href=\"http://localhost:5175/industrial-promotion-bodies\"\n                    target=\"_blank\">🏆 Industrial Promotion Bodies</a>\n                <a class=\"mobile-segment-card\" href=\"http://localhost:5175/\"\n                    target=\"_blank\" style=\"color:#ff781f; font-weight:700;\">✨ View All Segments Hub</a>\n            </div>\n        </div>\n\n        <a href=\"/cases\" class=\"mobile-nav-item \">Case Studies</a>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <main style=\"flex: 1; padding-top: 0px;\">\n            <div style=\"background:#ffffff; color:#0F0500;\">\n\n        <!-- ──────────────────────── HERO ──────────────────────── -->\n        <section style=\"position:relative; padding-top:120px; padding-bottom:80px; overflow:hidden;\">\n            <!-- Background video -->\n            <video id=\"hero-video\" autoplay muted playsinline\n                style=\"position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0;\">\n                <source src=\"/assets/hero-bg-video-5.mp4\" type=\"video/mp4\" id=\"hero-video-source\" />\n            </video>\n            <!-- Dark overlay for readability -->\n            <div\n                style=\"position:absolute; inset:0; background:linear-gradient(160deg, rgba(15,5,0,0.72) 0%, rgba(15,5,0,0.55) 60%, rgba(232,93,4,0.25) 100%); z-index:1;\">\n            </div>\n\n            <!-- Decorative blobs -->\n            <div\n                style=\"position:absolute; top:-100px; right:-100px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(232,93,4,0.12) 0%, transparent 70%); pointer-events:none; z-index:2;\">\n            </div>\n            <div\n                style=\"position:absolute; bottom:-60px; left:-80px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(255,122,47,0.08) 0%, transparent 70%); pointer-events:none; z-index:2;\">\n            </div>\n\n            <div class=\"container\" style=\"text-align:left; position:relative; z-index:3;\">\n                <!-- H1 -->\n                <h1\n                    style=\"font-size:clamp(2rem, 4.5vw, 3.8rem); font-weight:800; letter-spacing:-0.03em; line-height:1.08; max-width:700px; margin:0 0 24px; animation:fadeUp 0.6s 0.1s ease both; color:#ffffff;\">\n                    <span style=\"color:#FF7A2F;\">Outbound voice sales.</span>\n                    <span style=\"color:#ffffff;\">Inbound voice support.</span>\n                    <span style=\"color:rgba(255,255,255,0.7);\">One platform.</span>\n                </h1>\n\n                <!-- CTAs -->\n                <div\n                    style=\"display:flex; justify-content:flex-start; gap:14px; flex-wrap:wrap; animation:fadeUp 0.6s 0.3s ease both; align-items:center;\">\n                </div>\n\n                <!-- ── Voice Demo Widget ── -->\n                <div style=\"margin-top:28px; animation:fadeUp 0.6s 0.5s ease both; position:relative;\">\n                    <!-- Bar Container -->\n                    <div id=\"voice-demo-widget\" class=\"voice-demo-bar\">\n                        <!-- Worker Dropdown Trigger -->\n                        <div id=\"worker-display\" class=\"voice-demo-worker\" onclick=\"toggleWorkerDropdown()\" style=\"cursor:pointer;\">\n                            <input type=\"hidden\" id=\"worker-select\" value=\"muralworksai_inbound\">\n                            <span>Meet Mural</span>\n                            <svg id=\"worker-chevron\" width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" style=\"margin-left:8px; transition:transform 0.2s ease;\">\n                                <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            </svg>\n                        </div>\n\n                        <!-- Initiate Call Button -->\n                        <button id=\"initiate-call-btn\" onclick=\"initiateVoiceCall()\" class=\"voice-demo-btn\">\n                            <!-- Play icon -->\n                            <span id=\"call-btn-icon\" class=\"voice-demo-icon\">\n                                <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"currentColor\">\n                                    <path d=\"M1 1.5L11 7L1 12.5V1.5Z\" />\n                                </svg>\n                            </span>\n                            <span id=\"call-btn-text\">Initiate Call</span>\n                        </button>\n                    </div>\n\n                    <!-- Dropdown Panel (outside the bar to avoid overflow:hidden clipping) -->\n                    <div id=\"worker-dropdown\" style=\"display:none; position:absolute; top:calc(52px + 6px); left:0; z-index:100; min-width:240px; background:rgba(15,8,3,0.95); backdrop-filter:blur(24px); border:1px solid rgba(255,122,47,0.25); border-radius:12px; padding:6px 0; box-shadow:0 12px 40px rgba(0,0,0,0.5); animation:fadeUp 0.15s ease;\">\n                        <div class=\"worker-option selected\" data-value=\"muralworksai_inbound\" onclick=\"selectWorker('muralworksai_inbound')\">\n                            <span class=\"worker-option-name\">Meet Mural</span>\n                            <span class=\"worker-option-role\">Website Voice Worker</span>\n                        </div>\n                        <div class=\"worker-option\" data-value=\"demo_logistics_outbound\" onclick=\"selectWorker('demo_logistics_outbound')\">\n                            <span class=\"worker-option-name\">Demo Logistics</span>\n                            <span class=\"worker-option-role\">Outbound Voice Worker</span>\n                        </div>\n                        <div class=\"worker-option\" data-value=\"shipment_tracking_outbound\" onclick=\"selectWorker('shipment_tracking_outbound')\">\n                            <span class=\"worker-option-name\">TPC Logistics</span>\n                            <span class=\"worker-option-role\">Outbound Voice Worker</span>\n                        </div>\n                        <div class=\"worker-option\" data-value=\"shipment_tracking_inbound\" onclick=\"selectWorker('shipment_tracking_inbound')\">\n                            <span class=\"worker-option-name\">SwiftCourier</span>\n                            <span class=\"worker-option-role\">Shipment Tracking Worker</span>\n                        </div>\n                    </div>\n\n                    <!-- Mic Permissions Status -->\n                    <div id=\"mic-status-row\"\n                        style=\"margin-top:10px; padding-left:4px; display:flex; align-items:center; gap:8px;\">\n                        <span id=\"mic-status-text\"\n                            style=\"font-size:0.82rem; color:rgba(255,255,255,0.65); font-weight:500;\">Mic permissions</span>\n                        <span id=\"mic-status-icon\"\n                            style=\"display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(34,197,94,0.15);\">\n                            <svg width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\n                                <path d=\"M1 4l3 3 5-6\" stroke=\"#22c55e\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                    stroke-linejoin=\"round\" />\n                            </svg>\n                        </span>\n                    </div>\n\n                    <!-- Logistics demo unlock CTA (shown after Mura lead save) -->\n                    <div id=\"logistics-demo-cta\" style=\"display:none; margin-top:16px; width:min(480px, 90vw); animation:fadeUp 0.35s ease both;\">\n                        <div style=\"background:rgba(20,12,6,0.88); backdrop-filter:blur(20px); border:1px solid rgba(255,122,47,0.3); border-radius:18px; padding:18px 18px 16px; box-shadow:0 8px 32px rgba(0,0,0,0.35);\">\n                            <div style=\"font-size:0.72rem; font-weight:700; color:rgba(255,122,47,0.85); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;\">Unlocked</div>\n                            <div style=\"font-size:1.05rem; font-weight:800; color:#ffffff; margin-bottom:4px;\">Try Logistics Demo</div>\n                            <div style=\"font-size:0.82rem; color:rgba(255,255,255,0.6); line-height:1.5; margin-bottom:14px;\">TPC outbound + SwiftCourier inbound tracking</div>\n                            <div style=\"display:flex; gap:10px; flex-wrap:wrap;\">\n                                <button type=\"button\" onclick=\"startLogisticsDemo('shipment_tracking_outbound')\"\n                                    style=\"display:inline-flex; align-items:center; gap:8px; background:rgba(232,93,4,0.18); border:1px solid rgba(232,93,4,0.45); border-radius:100px; padding:10px 16px; color:#FF7A2F; font-size:0.82rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s ease;\"\n                                    onmouseenter=\"this.style.background='rgba(232,93,4,0.28)'; this.style.borderColor='rgba(232,93,4,0.7)';\"\n                                    onmouseleave=\"this.style.background='rgba(232,93,4,0.18)'; this.style.borderColor='rgba(232,93,4,0.45)';\">\n                                    Start TPC Outbound\n                                </button>\n                                <button type=\"button\" onclick=\"startLogisticsDemo('shipment_tracking_inbound')\"\n                                    style=\"display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:10px 16px; color:#ffffff; font-size:0.82rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s ease;\"\n                                    onmouseenter=\"this.style.background='rgba(255,255,255,0.14)'; this.style.borderColor='rgba(255,255,255,0.35)';\"\n                                    onmouseleave=\"this.style.background='rgba(255,255,255,0.08)'; this.style.borderColor='rgba(255,255,255,0.18)';\">\n                                    Start SwiftCourier\n                                </button>\n                                <button type=\"button\" onclick=\"startLogisticsDemo('demo_logistics_outbound')\"\n                                    style=\"display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:10px 16px; color:#ffffff; font-size:0.82rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s ease;\"\n                                    onmouseenter=\"this.style.background='rgba(255,255,255,0.14)'; this.style.borderColor='rgba(255,255,255,0.35)';\"\n                                    onmouseleave=\"this.style.background='rgba(255,255,255,0.08)'; this.style.borderColor='rgba(255,255,255,0.18)';\">\n                                    Start Demo Logistics\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- ── Inline Transcript Panel (hidden until call starts) ── -->\n                    <div id=\"transcript-panel\" style=\"display:none; margin-top:16px; width:min(480px, 90vw);\">\n                        <div\n                            style=\"background:rgba(10,5,2,0.9); backdrop-filter:blur(24px); border:1px solid rgba(255,122,47,0.2); border-radius:20px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.5);\">\n\n                            <!-- Transcript header bar -->\n                            <div\n                                style=\"display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.07);\">\n                                <div style=\"display:flex; align-items:center; gap:10px;\">\n                                    <span id=\"live-dot\"\n                                        style=\"width:8px; height:8px; border-radius:50%; background:#E85D04; animation:pulse-dot 1.2s ease-in-out infinite; display:inline-block;\"></span>\n                                    <span id=\"transcript-worker-name\"\n                                        style=\"font-size:0.82rem; font-weight:700; color:#ffffff; letter-spacing:0.02em;\">Meet\n                                        Mural</span>\n                                    <span id=\"transcript-worker-role\"\n                                        style=\"font-size:0.72rem; color:rgba(255,122,47,0.7); font-weight:600; padding:2px 8px; background:rgba(232,93,4,0.12); border-radius:100px;\">Website\n                                        Voice Worker</span>\n                                </div>\n                                <div style=\"display:flex; align-items:center; gap:10px;\">\n                                    <span id=\"call-timer-inline\"\n                                        style=\"font-size:0.78rem; color:rgba(255,255,255,0.4); font-variant-numeric:tabular-nums; font-weight:600;\">00:00</span>\n                                    <!-- End call button -->\n                                    <button onclick=\"endVoiceCall()\"\n                                        style=\"display:inline-flex; align-items:center; gap:6px; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3); border-radius:100px; padding:5px 12px; color:#ef4444; font-size:0.75rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s ease; white-space:nowrap;\"\n                                        onmouseenter=\"this.style.background='rgba(239,68,68,0.22)'; this.style.borderColor='rgba(239,68,68,0.55)';\"\n                                        onmouseleave=\"this.style.background='rgba(239,68,68,0.12)'; this.style.borderColor='rgba(239,68,68,0.3)';\">\n                                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                                            <path\n                                                d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\n                                        </svg>\n                                        End Call\n                                    </button>\n                                </div>\n                            </div>\n\n                            <!-- Live transcript scroll area -->\n                            <div id=\"transcript-messages\"\n                                style=\"height:200px; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth;\">\n                                <!-- Messages injected by JS -->\n                            </div>\n\n                            <!-- Soundwave bar at bottom -->\n                            <div\n                                style=\"padding:10px 18px 14px; border-top:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:8px;\">\n                                <div id=\"wave-container\" style=\"display:flex; align-items:center; gap:3px; height:20px;\">\n                                    <div class=\"soundwave-bar\" style=\"height:4px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:8px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:14px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:20px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:16px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:10px;\"></div>\n                                    <div class=\"soundwave-bar\" style=\"height:4px;\"></div>\n                                </div>\n                                <span id=\"wave-label\"\n                                    style=\"font-size:0.75rem; color:rgba(255,255,255,0.35); margin-left:4px;\">Worker\n                                    speaking...</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ──────────────────── OUTBOUND METRICS BAR ────────────────────── -->\n        <section style=\"background:linear-gradient(135deg, #E85D04 0%, #C44D00 100%); padding:40px 0;\">\n            <div class=\"container\" style=\"display:flex; align-items:center; gap:40px; flex-wrap:wrap;\">\n                <!-- Left: Big Title -->\n                <div style=\"flex-shrink:0; min-width:180px;\">\n                    <div style=\"font-size:clamp(2rem, 3.5vw, 2.8rem); font-weight:900; color:#fff; line-height:1.05; letter-spacing:-0.03em;\">\n                        Outbound</div>\n                    <div style=\"font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.1em; margin-top:6px;\">\n                        Voice Pipeline</div>\n                </div>\n                <!-- Right: Metrics -->\n                <div style=\"flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:28px; text-align:center; border-left:2px solid rgba(255,255,255,0.2); padding-left:40px;\">\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">10K+</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Data Funnel</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">8,450+</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Calls Dialed</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">24.6%</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Connect Rate</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">580+</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Meetings Booked</div>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ──────────────────── INBOUND METRICS BAR ────────────────────── -->\n        <section style=\"background:linear-gradient(135deg, #0F0500 0%, #1a0d06 100%); padding:40px 0;\">\n            <div class=\"container\" style=\"display:flex; align-items:center; gap:40px; flex-wrap:wrap;\">\n                <!-- Left: Big Title -->\n                <div style=\"flex-shrink:0; min-width:180px;\">\n                    <div style=\"font-size:clamp(2rem, 3.5vw, 2.8rem); font-weight:900; color:#fff; line-height:1.05; letter-spacing:-0.03em;\">\n                        Inbound</div>\n                    <div style=\"font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.1em; margin-top:6px;\">\n                        Voice Support</div>\n                </div>\n                <!-- Right: Metrics -->\n                <div style=\"flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:28px; text-align:center; border-left:2px solid rgba(255,255,255,0.1); padding-left:40px;\">\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">&lt; 850ms</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Response Latency</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">94.2%</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            First-Call Resolution</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">12.5K+</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Calls Resolved</div>\n                    </div>\n                    <div>\n                        <div style=\"font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-0.02em;\">98.6%</div>\n                        <div\n                            style=\"font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;\">\n                            Customer CSAT</div>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ─────────────── TWO WORKERS OVERVIEW ─────────────────── -->\n        <section class=\"section-pad\" style=\"background:#ffffff;\">\n            <div class=\"container\">\n                <div style=\"text-align:center; margin-bottom:56px;\">\n                    <div class=\"badge\" style=\"margin-bottom:14px;\">Two Workers. Built for Different Jobs.</div>\n                    <h2 style=\"font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800; color:#0F0500; line-height:1.15;\">\n                        MuralWorks Outbound grows pipeline. MuralWorks Inbound resolves support.<br />\n                        <span style=\"color:#E85D04;\">Both run on voice.</span>\n                    </h2>\n                    <p style=\"color:#6B3A1F; font-size:1rem; max-width:560px; margin:14px auto 0; line-height:1.7;\">\n                        Both plug into your stack, follow your rules, and warm-transfer to humans when needed.\n                    </p>\n                </div>\n\n                <!-- Interactive Diagram Composition -->\n                <div style=\"display:flex; flex-direction:column; gap:100px; max-width:1200px; margin:0 auto 80px;\">\n\n                    <!-- MuralWorks Outbound Composition -->\n                    <div style=\"display:flex; flex-direction:column; gap:20px; align-items:center;\">\n                        <div style=\"text-align:center; margin-bottom:8px;\">\n                            <div class=\"badge\" style=\"margin-bottom:6px;\">MuralWorks Outbound — AI BDR</div>\n                            <h3 style=\"font-size:1.8rem; font-weight:800; color:#0F0500;\">Outbound Voice Sales</h3>\n                        </div>\n                        <div\n                            style=\"position:relative; display:flex; align-items:center; justify-content:center; gap:3vw; width:100%;\">\n                            <div class=\"card\"\n                                style=\"width:35%; max-width:420px; padding:20px; display:flex; flex-direction:column; gap:14px; z-index:20;\">\n                                <div>\n                                    <div\n                                        style=\"font-size:0.75rem; font-weight:800; color:#E85D04; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px;\">\n                                        Outbound Target Industries</div>\n                                    <div style=\"display:flex; flex-wrap:wrap; gap:6px;\">\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Industrial\n                                            Product Companies</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Insurance\n                                            Companies</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Economic\n                                            Development Agencies</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Industrial</span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- MuralWorks Inbound Composition -->\n                    <div style=\"display:flex; flex-direction:column; gap:20px; align-items:center;\">\n                        <div style=\"text-align:center; margin-bottom:8px;\">\n                            <div class=\"badge\" style=\"margin-bottom:6px; background:#FFF1E6; color:#C44D00;\">MuralWorks\n                                Inbound — AI Support</div>\n                            <h3 style=\"font-size:1.8rem; font-weight:800; color:#0F0500;\">Inbound Voice Support 24/7</h3>\n                        </div>\n                        <div\n                            style=\"position:relative; display:flex; align-items:center; justify-content:center; gap:3vw; width:100%;\">\n                            <div class=\"card\"\n                                style=\"width:35%; max-width:420px; padding:20px; display:flex; flex-direction:column; gap:14px; z-index:20;\">\n                                <div>\n                                    <div\n                                        style=\"font-size:0.75rem; font-weight:800; color:#C44D00; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px;\">\n                                        Inbound Target Industries</div>\n                                    <div style=\"display:flex; flex-wrap:wrap; gap:6px;\">\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Educational\n                                            Institutions</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Healthcare\n                                            Providers</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Banking</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Real\n                                            Estate Developers</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Insurance\n                                            Companies</span>\n                                        <span\n                                            style=\"padding:6px 12px; background:#FFF1E6; color:#6B3A1F; border-radius:8px; font-size:0.8rem; font-weight:600; border:1px solid #FFD6B0;\">Logistics\n                                            Companies</span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                </div>\n            </div>\n        </section>\n\n        <!-- ──────────────── FOUR CAPABILITY PILLARS ─────────────── -->\n        <section class=\"section-pad\" style=\"background:#FFF8F3;\">\n            <div class=\"container\">\n                <div style=\"text-align:center; margin-bottom:52px;\">\n                    <div class=\"badge\" style=\"margin-bottom:14px;\">Platform Capabilities</div>\n                    <h2 style=\"font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800; color:#0F0500; line-height:1.15;\">\n                        Everything you need to fill pipeline<br />\n                        <span class=\"text-gradient\">and delight customers — on voice.</span>\n                    </h2>\n                </div>\n\n                <!-- Pillar tabs -->\n                <div style=\"display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px;\"\n                    id=\"pillar-tabs\">\n                    <button class=\"pillar-tab active\" data-index=\"0\">\n                        <i data-lucide=\"phone-call\" style=\"width:15px; height:15px;\"></i>MuralWorks Outbound\n                    </button>\n                    <button class=\"pillar-tab\" data-index=\"1\">\n                        <i data-lucide=\"phone-incoming\" style=\"width:15px; height:15px;\"></i>MuralWorks Inbound\n                    </button>\n                    <button class=\"pillar-tab\" data-index=\"2\">\n                        <i data-lucide=\"refresh-cw\" style=\"width:15px; height:15px;\"></i>Integrations\n                    </button>\n                    <button class=\"pillar-tab\" data-index=\"3\">\n                        <i data-lucide=\"bar-chart-2\" style=\"width:15px; height:15px;\"></i>Analytics\n                    </button>\n                </div>\n\n                <!-- Active pillar content -->\n                <div id=\"pillar-contents\">\n\n                    <!-- Pillar 0 -->\n                    <div class=\"pillar-content active\" data-index=\"0\"\n                        style=\"display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; animation:fadeUp 0.35s ease both;\">\n                        <div>\n                            <div\n                                style=\"display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background:#FFF1E6; margin-bottom:24px;\">\n                                <i data-lucide=\"phone-call\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                                <span style=\"font-size:0.82rem; font-weight:700; color:#E85D04;\">MuralWorks Outbound</span>\n                            </div>\n                            <h3\n                                style=\"font-size:2rem; font-weight:800; color:#0F0500; line-height:1.2; margin-bottom:16px;\">\n                                Never run out of pipeline again.</h3>\n                            <p style=\"font-size:1rem; color:#6B3A1F; line-height:1.75; margin-bottom:28px;\">MuralWorks\n                                Outbound sources prospects, places outbound calls, handles objections, and books meetings —\n                                so your reps spend time closing, not dialing.</p>\n                        </div>\n                        <div\n                            style=\"background:#ffffff; border:1px solid #FFD6B0; border-radius:16px; padding:32px; box-shadow:0 4px 20px rgba(232,93,4,0.07);\">\n                            <div\n                                style=\"font-size:0.72rem; font-weight:800; color:#E85D04; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px;\">\n                                What you get</div>\n                            <ul\n                                style=\"list-style:none; display:flex; flex-direction:column; gap:16px; padding:0; margin:0;\">\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Outbound\n                                    voice calls at scale — 24/7, no burnout\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>250M+\n                                    contact database with real-time enrichment\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Live\n                                    objection handling on every single call\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Meeting\n                                    booking direct on rep calendars\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n\n                    <!-- Pillar 1 -->\n                    <div class=\"pillar-content\" data-index=\"1\"\n                        style=\"display:none; grid-template-columns:1fr 1fr; gap:56px; align-items:start; animation:fadeUp 0.35s ease both;\">\n                        <div>\n                            <div\n                                style=\"display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background:#FFF1E6; margin-bottom:24px;\">\n                                <i data-lucide=\"phone-incoming\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                                <span style=\"font-size:0.82rem; font-weight:700; color:#E85D04;\">MuralWorks Inbound</span>\n                            </div>\n                            <h3\n                                style=\"font-size:2rem; font-weight:800; color:#0F0500; line-height:1.2; margin-bottom:16px;\">\n                                Every inbound call answered instantly.</h3>\n                            <p style=\"font-size:1rem; color:#6B3A1F; line-height:1.75; margin-bottom:28px;\">MuralWorks\n                                Inbound answers inbound calls 24/7 — courier tracking, order status, returns, billing, and\n                                FAQs. She resolves what she can and warm-transfers the rest with full context.</p>\n                        </div>\n                        <div\n                            style=\"background:#ffffff; border:1px solid #FFD6B0; border-radius:16px; padding:32px; box-shadow:0 4px 20px rgba(232,93,4,0.07);\">\n                            <div\n                                style=\"font-size:0.72rem; font-weight:800; color:#E85D04; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px;\">\n                                What you get</div>\n                            <ul\n                                style=\"list-style:none; display:flex; flex-direction:column; gap:16px; padding:0; margin:0;\">\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Inbound\n                                    voice calls answered in under a second\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Order\n                                    and shipment tracking lookups in real time\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Knowledge-base\n                                    powered answers for any FAQ\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Warm\n                                    transfer to human workers with full context\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n\n                    <!-- Pillar 2 -->\n                    <div class=\"pillar-content\" data-index=\"2\"\n                        style=\"display:none; grid-template-columns:1fr 1fr; gap:56px; align-items:start; animation:fadeUp 0.35s ease both;\">\n                        <div>\n                            <div\n                                style=\"display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background:#FFF1E6; margin-bottom:24px;\">\n                                <i data-lucide=\"refresh-cw\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                                <span style=\"font-size:0.82rem; font-weight:700; color:#E85D04;\">Integrations</span>\n                            </div>\n                            <h3\n                                style=\"font-size:2rem; font-weight:800; color:#0F0500; line-height:1.2; margin-bottom:16px;\">\n                                Plug in — or replace the sprawl.</h3>\n                            <p style=\"font-size:1rem; color:#6B3A1F; line-height:1.75; margin-bottom:28px;\">MuralWorks\n                                Outbound lives inside your CRM, inbox, and calendar. Your reps keep their workflows —\n                                MuralWorks Outbound handles the repetitive motion behind the scenes.</p>\n                        </div>\n                        <div\n                            style=\"background:#ffffff; border:1px solid #FFD6B0; border-radius:16px; padding:32px; box-shadow:0 4px 20px rgba(232,93,4,0.07);\">\n                            <div\n                                style=\"font-size:0.72rem; font-weight:800; color:#E85D04; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px;\">\n                                What you get</div>\n                            <ul\n                                style=\"list-style:none; display:flex; flex-direction:column; gap:16px; padding:0; margin:0;\">\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Bi-directional\n                                    CRM sync — no rip-and-replace\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Outreach\n                                    sent under each rep's name and domain\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Reps\n                                    stay in their inbox; MuralWorks Outbound drafts and sends\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Human\n                                    tasks surfaced when a personal touch matters\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n\n                    <!-- Pillar 3 -->\n                    <div class=\"pillar-content\" data-index=\"3\"\n                        style=\"display:none; grid-template-columns:1fr 1fr; gap:56px; align-items:start; animation:fadeUp 0.35s ease both;\">\n                        <div>\n                            <div\n                                style=\"display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; background:#FFF1E6; margin-bottom:24px;\">\n                                <i data-lucide=\"bar-chart-2\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                                <span style=\"font-size:0.82rem; font-weight:700; color:#E85D04;\">Analytics</span>\n                            </div>\n                            <h3\n                                style=\"font-size:2rem; font-weight:800; color:#0F0500; line-height:1.2; margin-bottom:16px;\">\n                                Learn what converts, then double down.</h3>\n                            <p style=\"font-size:1rem; color:#6B3A1F; line-height:1.75; margin-bottom:28px;\">Every call is\n                                transcribed, scored, and fed back into MuralWorks Outbound's targeting engine. You see which\n                                talk tracks book more meetings and which accounts are ready to buy.</p>\n                        </div>\n                        <div\n                            style=\"background:#ffffff; border:1px solid #FFD6B0; border-radius:16px; padding:32px; box-shadow:0 4px 20px rgba(232,93,4,0.07);\">\n                            <div\n                                style=\"font-size:0.72rem; font-weight:800; color:#E85D04; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px;\">\n                                What you get</div>\n                            <ul\n                                style=\"list-style:none; display:flex; flex-direction:column; gap:16px; padding:0; margin:0;\">\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Full\n                                    call transcripts and outcome scoring\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Talk\n                                    track performance analytics by segment\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>Buying\n                                    signal detection: funding, hiring, tech changes\n                                </li>\n                                <li\n                                    style=\"display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:#2D1200; line-height:1.55;\">\n                                    <i data-lucide=\"check-circle\"\n                                        style=\"width:17px; height:17px; color:#E85D04; flex-shrink:0; margin-top:2px;\"></i>ROI\n                                    dashboard with booked pipeline attribution\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n\n                </div>\n            </div>\n        </section>\n\n        <!-- ─────────────── HOW IT WORKS ─────────────────────────── -->\n        <section class=\"section-pad\" style=\"background:#ffffff;\">\n            <div class=\"container\">\n                <div style=\"text-align:center; margin-bottom:52px;\">\n                    <div class=\"badge\" style=\"margin-bottom:14px;\">How MuralWorks Outbound Works</div>\n                    <h2 style=\"font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800; color:#0F0500; line-height:1.15;\">\n                        Four steps from strategy<br />\n                        <span class=\"text-gradient\">to booked meetings.</span>\n                    </h2>\n                    <p style=\"color:#6B3A1F; font-size:1rem; max-width:500px; margin:14px auto 0; line-height:1.7;\">\n                        Define your ICP and talk track once. MuralWorks Outbound handles prospecting, outbound calls,\n                        optimisation, and scheduling from there.\n                    </p>\n                </div>\n\n                <div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px;\">\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#E85D04,#FF7A2F); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; color:#fff; margin-bottom:18px; box-shadow:0 4px 12px rgba(232,93,4,0.3);\">\n                            01</div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:10px; line-height:1.3;\">\n                            Surface the accounts worth calling</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65;\">Pull from 250M+ verified contacts or\n                            sync your CRM. MuralWorks Outbound enriches every record from 22+ data providers and ranks\n                            accounts by buying signals — funding, hiring, tech changes, and more.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#E85D04,#FF7A2F); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; color:#fff; margin-bottom:18px; box-shadow:0 4px 12px rgba(232,93,4,0.3);\">\n                            02</div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:10px; line-height:1.3;\">\n                            Launch outbound calls that feel one-to-one</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65;\">MuralWorks Outbound calls your ICP\n                            with a personalised talk track, handles objections live, and adapts to each conversation in real\n                            time — at the volume of a full SDR team.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#E85D04,#FF7A2F); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; color:#fff; margin-bottom:18px; box-shadow:0 4px 12px rgba(232,93,4,0.3);\">\n                            03</div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:10px; line-height:1.3;\">\n                            Learn what converts, then double down</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65;\">Every call is transcribed and scored.\n                            MuralWorks Outbound automatically adjusts targeting and messaging based on what's booking\n                            meetings — continuous optimisation with no manual work.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#E85D04,#FF7A2F); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; color:#fff; margin-bottom:18px; box-shadow:0 4px 12px rgba(232,93,4,0.3);\">\n                            04</div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:10px; line-height:1.3;\">\n                            Turn conversations into calendar events</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65;\">When a prospect is ready, MuralWorks\n                            Outbound books the meeting directly on your rep's calendar with full notes, context, and next\n                            steps — zero drop-off.</p>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ──────────────── RESULTS / CASE STUDIES ─────────────── -->\n        <section class=\"section-pad\" style=\"background:#FFF1E6;\">\n            <div class=\"container\">\n                <div style=\"text-align:center; margin-bottom:52px;\">\n                    <div class=\"badge\" style=\"margin-bottom:14px;\">Real Results</div>\n                    <h2 style=\"font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800; color:#0F0500; line-height:1.15;\">\n                        What teams achieve<br />\n                        <span class=\"text-gradient\">with MuralWorksAI.</span>\n                    </h2>\n                </div>\n\n                <!-- Result selector -->\n                <div style=\"display:flex; gap:14px; justify-content:center; margin-bottom:40px; flex-wrap:wrap;\"\n                    id=\"case-tabs\">\n                    <button class=\"case-tab active\" data-index=\"0\">US Railway Manufacturer</button>\n                    <button class=\"case-tab\" data-index=\"1\">Apex Health Systems</button>\n                </div>\n\n                <!-- Case Contents -->\n                <div id=\"case-contents\">\n                    <div class=\"case-content active\" data-index=\"0\"\n                        style=\"max-width:700px; margin:0 auto; animation:fadeUp 0.35s ease both;\">\n                        <div style=\"display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px;\">\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">10%\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Lead Conversion Rate</div>\n                            </div>\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">847\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Calls per day</div>\n                            </div>\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">&lt; 2s\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Avg response time</div>\n                            </div>\n                        </div>\n                        <blockquote style=\"text-align:center;\">\n                            <p\n                                style=\"font-size:1.35rem; font-weight:700; color:#0F0500; line-height:1.55; margin-bottom:20px; font-style:italic;\">\n                                \"By generating a 10% lead conversion rate instantly, we filled our sales pipeline with\n                                high-intent prospects. This freed up our human sales team to focus entirely on closing deals\n                                rather than hunting for them.\"\n                            </p>\n                            <div style=\"display:flex; justify-content:center; gap:4px; margin-bottom:12px;\">\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                            </div>\n                            <p style=\"font-weight:700; color:#0F0500; font-size:0.95rem; margin:0;\">Project Impact</p>\n                            <p style=\"color:#9A6040; font-size:0.85rem; margin:0;\">Instant Pipeline Growth</p>\n                        </blockquote>\n                    </div>\n\n                    <div class=\"case-content\" data-index=\"1\"\n                        style=\"display:none; max-width:700px; margin:0 auto; animation:fadeUp 0.35s ease both;\">\n                        <div style=\"display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px;\">\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">84%\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Inbound calls resolved</div>\n                            </div>\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">847\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Calls per day</div>\n                            </div>\n                            <div\n                                style=\"background:#fff; border:1px solid #FFD6B0; border-radius:14px; padding:24px; text-align:center; box-shadow:0 2px 10px rgba(232,93,4,0.07);\">\n                                <div style=\"font-size:2rem; font-weight:800; color:#E85D04; letter-spacing:-0.02em;\">&lt; 2s\n                                </div>\n                                <div\n                                    style=\"font-size:0.75rem; color:#9A6040; text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;\">\n                                    Avg response time</div>\n                            </div>\n                        </div>\n                        <blockquote style=\"text-align:center;\">\n                            <p\n                                style=\"font-size:1.35rem; font-weight:700; color:#0F0500; line-height:1.55; margin-bottom:20px; font-style:italic;\">\n                                \"MuralWorks Inbound transformed our patient support. Routine inquiries are handled\n                                instantly, allowing our human workers to focus on complex, sensitive cases that require\n                                empathy and nuance.\"\n                            </p>\n                            <div style=\"display:flex; justify-content:center; gap:4px; margin-bottom:12px;\">\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                                <i data-lucide=\"star\" style=\"color:#E85D04; fill:#E85D04; width:16px; height:16px;\"></i>\n                            </div>\n                            <p style=\"font-weight:700; color:#0F0500; font-size:0.95rem; margin:0;\">David Alvey</p>\n                            <p style=\"color:#9A6040; font-size:0.85rem; margin:0;\">Director of Patient Experience, Apex</p>\n                        </blockquote>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ──────────────── PLATFORM FEATURES GRID ─────────────── -->\n        <section class=\"section-pad\" style=\"background:#ffffff;\">\n            <div class=\"container\">\n                <div style=\"text-align:center; margin-bottom:52px;\">\n                    <div class=\"badge\" style=\"margin-bottom:14px;\">Voice Sales &amp; Support — One Workspace</div>\n                    <h2 style=\"font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800; color:#0F0500; line-height:1.15;\">\n                        Outbound, inbound, data, and automation<br />\n                        <span class=\"text-gradient\">under one roof.</span>\n                    </h2>\n                </div>\n\n                <div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px;\">\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"phone-call\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">Outbound Voice at\n                            Scale</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">MuralWorks Outbound dials\n                            hundreds of prospects per day per rep equivalent — with personalised, live voice conversations\n                            on every call.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"mic\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">Real-time Objection\n                            Handling</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">On-call intelligence adapts\n                            the conversation in real time to handle pushback, hesitation, and competitor questions.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"calendar\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">Meeting Booking on\n                            Autopilot</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">When a prospect is ready,\n                            MuralWorks Outbound books straight to your rep's calendar — no hold music, no email tag.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"headphones\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">Warm-Transfer to\n                            Humans</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">MuralWorks Inbound hands\n                            off complex calls with full context — the human worker knows the full history before saying\n                            hello.</p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"users\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">250M+ Verified\n                            Contacts</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">Access and enrich the\n                            largest B2B database, ranked by real-time buying signals like funding, hiring, and tech changes.\n                        </p>\n                    </div>\n                    <div class=\"card\" style=\"padding:28px;\">\n                        <div\n                            style=\"width:44px; height:44px; border-radius:12px; background:#FFF1E6; display:flex; align-items:center; justify-content:center; margin-bottom:16px;\">\n                            <i data-lucide=\"shield\" style=\"width:20px; height:20px; color:#E85D04;\"></i>\n                        </div>\n                        <h4 style=\"font-size:1rem; font-weight:700; color:#0F0500; margin-bottom:8px;\">SOC 2 Type II\n                            Compliant</h4>\n                        <p style=\"font-size:0.86rem; color:#6B3A1F; line-height:1.65; margin:0;\">Enterprise-grade security,\n                            GDPR compliance, and full call logging so your legal and security teams can rest easy.</p>\n                    </div>\n                </div>\n            </div>\n        </section>\n\n        <!-- ────────────────── CTA BANNER ────────────────────────── -->\n        <section style=\"background:linear-gradient(135deg, #E85D04 0%, #C44D00 100%); padding:88px 0;\">\n            <div class=\"container\" style=\"text-align:center;\">\n                <div\n                    style=\"font-size:0.75rem; font-weight:800; color:rgba(255,255,255,0.65); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:18px;\">\n                    Ready to add an AI worker to your team\n                </div>\n                <h2\n                    style=\"font-size:clamp(2rem, 5vw, 3.8rem); font-weight:800; color:#fff; line-height:1.1; margin-bottom:18px;\">\n                    MuralWorks Outbound and MuralWorks Inbound work 24/7.<br />\n                    <span style=\"color:rgba(255,255,255,0.65);\">Your reps don't have to.</span>\n                </h2>\n                <p\n                    style=\"color:rgba(255,255,255,0.8); font-size:1.05rem; max-width:520px; margin:0 auto 40px; line-height:1.7;\">\n                    Prospect by phone, resolve customer calls, and warm-transfer when it matters — without adding headcount.\n                </p>\n                <div style=\"display:flex; justify-content:center; gap:14px; flex-wrap:wrap;\">\n                </div>\n            </div>\n        </section>\n\n    </div>\n\n    </main>\n\n    <!-- FOOTER -->\n    <footer\n        style=\"background: #0F0500; border-top: 3px solid #E85D04; padding: 64px 0 28px; color: #fff; font-size: 0.85rem;\">\n        <div class=\"container\">\n            <div\n                style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; margin-bottom: 52px;\">\n\n                <!-- Brand -->\n                <div>\n                    <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 14px;\">\n                        <div\n                            style=\"width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,#E85D04,#FF7A2F); display: flex; align-items: center; justify-content: center;\">\n                            <i data-lucide=\"zap\" style=\"color: #fff; fill: #fff; width: 17px; height: 17px;\"></i>\n                        </div>\n                        <div>\n                            <span style=\"font-size: 1rem; font-weight: 800; color: #E85D04;\">MuralWorks</span>\n                            <span style=\"font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.6);\">AI</span>\n                        </div>\n                    </div>\n                    <p style=\"line-height: 1.7; color: rgba(255,255,255,0.5); margin-bottom: 18px; font-size: 0.82rem;\">\n                        AI workers for outbound sales and inbound support. Prospect by phone, resolve customer calls,\n                        and warm-transfer when it matters — without adding headcount.\n                    </p>\n                    <div style=\"display: flex; gap: 10px;\">\n                        <a href=\"#\" class=\"social-icon\"\n                            style=\"width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); transition: all 0.15s ease;\"\n                            onmouseenter=\"this.style.borderColor='#E85D04'; this.style.color='#E85D04';\"\n                            onmouseleave=\"this.style.borderColor='rgba(255,255,255,0.15)'; this.style.color='rgba(255,255,255,0.5)';\">\n                            <i data-lucide=\"twitter\" style=\"width: 15px; height: 15px;\"></i>\n                        </a>\n                        <a href=\"#\" class=\"social-icon\"\n                            style=\"width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); transition: all 0.15s ease;\"\n                            onmouseenter=\"this.style.borderColor='#E85D04'; this.style.color='#E85D04';\"\n                            onmouseleave=\"this.style.borderColor='rgba(255,255,255,0.15)'; this.style.color='rgba(255,255,255,0.5)';\">\n                            <i data-lucide=\"linkedin\" style=\"width: 15px; height: 15px;\"></i>\n                        </a>\n                    </div>\n                </div>\n\n                <!-- Product -->\n                <div>\n                    <h4\n                        style=\"color: #E85D04; font-size: 0.75rem; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.08em; text-transform: uppercase;\">\n                        Product</h4>\n                    <ul style=\"list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0;\">\n                        <li><a href=\"/cases\" class=\"footer-link\">Case Studies</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Book a\n                                Demo</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Integrations</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Changelog</a></li>\n                    </ul>\n                </div>\n\n                <!-- Solutions -->\n                <div>\n                    <h4\n                        style=\"color: #E85D04; font-size: 0.75rem; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.08em; text-transform: uppercase;\">\n                        Solutions</h4>\n                    <ul style=\"list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0;\">\n                        <li><a href=\"#\" class=\"footer-link\">Outbound\n                                Sales</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Inbound\n                                Support</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Pipeline\n                                Generation</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Customer\n                                Service</a></li>\n                    </ul>\n                </div>\n\n                <!-- Resources -->\n                <div>\n                    <h4\n                        style=\"color: #E85D04; font-size: 0.75rem; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.08em; text-transform: uppercase;\">\n                        Resources</h4>\n                    <ul style=\"list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0;\">\n                        <li><a href=\"#\" class=\"footer-link\">Documentation</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">API Reference</a></li>\n                        <li><a href=\"#\" class=\"footer-link\">Blog</a></li>\n                        <li><a href=\"/cases\" class=\"footer-link\">Case Studies</a></li>\n                    </ul>\n                </div>\n\n                <!-- Contact -->\n                <div>\n                    <h4\n                        style=\"color: #E85D04; font-size: 0.75rem; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.08em; text-transform: uppercase;\">\n                        Contact Us</h4>\n                    <a href=\"#\" class=\"footer-link\"\n                        style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 12px;\">\n                        <i data-lucide=\"calendar\" style=\"width: 14px; height: 14px; color: #E85D04;\"></i>Schedule a Demo\n                    </a>\n                    <a href=\"mailto:info@muralworksai.com\" class=\"footer-link\"\n                        style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 20px;\">\n                        <i data-lucide=\"mail\" style=\"width: 14px; height: 14px;\"></i>info@muralworksai.com\n                    </a>\n                </div>\n            </div>\n\n            <!-- Trust badges row -->\n            <div style=\"display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap;\">\n                <span class=\"trust-badge\">SOC 2 Type II</span>\n                <span class=\"trust-badge\">GDPR</span>\n                <span class=\"trust-badge\">Stackline CRM</span>\n                <span class=\"trust-badge\">Relay CRM</span>\n            </div>\n\n            <!-- Sub footer -->\n            <div\n                style=\"border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: rgba(255,255,255,0.3);\">\n                <div>© 2026 MuralWorksAI. All rights reserved. AI workers for sales and support.</div>\n                <div style=\"display: flex; gap: 20px;\">\n                    <a href=\"#\" class=\"footer-sub-link\">Privacy Policy</a>\n                    <a href=\"#\" class=\"footer-sub-link\">Terms of Service</a>\n                    <a href=\"#\" class=\"footer-sub-link\">Cookie Policy</a>\n                </div>\n            </div>\n        </div>\n    </footer>\n\n    <style>\n        .footer-link {\n            color: rgba(255, 255, 255, 0.55);\n            transition: color 0.15s ease;\n            text-decoration: none;\n        }\n\n        .footer-link:hover {\n            color: #E85D04;\n        }\n\n        .footer-sub-link {\n            color: rgba(255, 255, 255, 0.3);\n            transition: color 0.15s ease;\n            text-decoration: none;\n        }\n\n        .footer-sub-link:hover {\n            color: #E85D04;\n        }\n\n        .trust-badge {\n            padding: 4px 12px;\n            border-radius: 9999px;\n            font-size: 0.7rem;\n            font-weight: 600;\n            border: 1px solid rgba(255, 255, 255, 0.12);\n            color: rgba(255, 255, 255, 0.4);\n            background: rgba(255, 255, 255, 0.04);\n        }\n\n        </style>\n\n    <!-- Global JS -->\n    <script>\n        // Initialize Lucide Icons\n        lucide.createIcons();\n\n        // ─────────────────────────────────────────────────────────────\n        // NICE.COM-STYLE MEGA MENU INTERACTIVITY\n        // ─────────────────────────────────────────────────────────────\n        const demoAppBase = \"http://localhost:5175\";\n        let activeSegmentId = 'training';\n\n        const segmentData = {\n            training: {\n                title: \"See Mural Worker for Training Institutes\",\n                desc: \"Automate course enrollments, proactively gather feedback from students, and boost sales with AI.\",\n                statVal: \"3x\",\n                statLbl: \"Increase in course enrollments and sales\",\n                url: \"https://dev-salesworker.crescendoworldwide.com/demo\"\n            },\n            logistic: {\n                title: \"See Mural Worker for Logistics\",\n                desc: \"Autonomous freight dispatch, live load check-ins & 24/7 driver support.\",\n                statVal: \"85%\",\n                statLbl: \"Reduction in manual dispatch & coordinator calls\",\n                url: demoAppBase + \"/logistic-companies\"\n            },\n            exporters: {\n                title: \"See Mural Worker for Exporters\",\n                desc: \"Multilingual trade desk, container customs clearance & international buyer triage.\",\n                statVal: \"40+\",\n                statLbl: \"Global languages spoken fluently in real time\",\n                url: \"/coming-soon\"\n            },\n            industrial: {\n                title: \"See Mural Worker for Industrial Products\",\n                desc: \"Instant technical qualification, spec sheet consultation & distributor routing.\",\n                statVal: \"3.8x\",\n                statLbl: \"Faster quote-to-call response time\",\n                url: demoAppBase + \"/industrial-product-companies\"\n            },\n            realestate: {\n                title: \"See Mural Worker for Real Estate\",\n                desc: \"24/7 buyer capture, site visit booking & instant floor plan/pricing answers.\",\n                statVal: \"42%\",\n                statLbl: \"Increase in scheduled on-site tour appointments\",\n                url: demoAppBase + \"/real-estate-developers\"\n            },\n            education: {\n                title: \"See Mural Worker for Education\",\n                desc: \"Round-the-clock admissions counseling & automated campus services.\",\n                statVal: \"94%\",\n                statLbl: \"First-contact inquiry resolution rate\",\n                url: \"/coming-soon\"\n            },\n            healthcare: {\n                title: \"See Mural Worker for Healthcare\",\n                desc: \"Patient appointment scheduling, pre-op reminders & HIPAA-ready intake.\",\n                statVal: \"60%\",\n                statLbl: \"Reduction in clinic appointment no-shows\",\n                url: demoAppBase + \"/healthcare-providers\"\n            },\n            consulting: {\n                title: \"See Mural Worker for Consulting\",\n                desc: \"Executive partner scheduling, engagement fit screening & proposal follow-up.\",\n                statVal: \"10s\",\n                statLbl: \"Speed-to-lead response for inbound inquiries\",\n                url: \"/coming-soon\"\n            },\n            recruitment: {\n                title: \"See Mural Worker for Recruitment\",\n                desc: \"High-volume phone screens, salary verification & ATS automated synchronization.\",\n                statVal: \"500+\",\n                statLbl: \"Candidate phone screens completed daily\",\n                url: \"/coming-soon\"\n            },\n            insurance: {\n                title: \"See Mural Worker for Insurance\",\n                desc: \"Instant 24/7 FNOL claims intake, coverage advisory & adjuster warm-transfer.\",\n                statVal: \"< 45s\",\n                statLbl: \"Average FNOL claim collection time\",\n                url: \"/coming-soon\"\n            },\n            banking: {\n                title: \"See Mural Worker for Banking\",\n                desc: \"Voice biometric authentication, card freeze & loan qualification screening.\",\n                statVal: \"99.2%\",\n                statLbl: \"Voice biometric accuracy & fraud deterrence\",\n                url: demoAppBase + \"/banking\"\n            },\n            it: {\n                title: \"See Mural Worker for IT & SaaS\",\n                desc: \"Outbound AI SDR cold-dialing, 10s speed-to-lead & Tier-1 helpdesk support.\",\n                statVal: \"10x\",\n                statLbl: \"Outbound pipeline prospecting dial volume\",\n                url: demoAppBase + \"/it-saas-companies\"\n            },\n            government: {\n                title: \"See Mural Worker for Government\",\n                desc: \"311 citizen helpline, DMV scheduling & emergency alert broadcasting.\",\n                statVal: \"24/7\",\n                statLbl: \"Automated public citizen service coverage\",\n                url: demoAppBase + \"/government-public-sector\"\n            },\n            economic: {\n                title: \"See Mural Worker for Economic Development\",\n                desc: \"Inward investment concierge, site selector inquiries & incentive screening.\",\n                statVal: \"3x\",\n                statLbl: \"Increase in qualified corporate site inquiries\",\n                url: demoAppBase + \"/economic-development-agencies\"\n            },\n            promotion: {\n                title: \"See Mural Worker for Industrial Promotion\",\n                desc: \"Expo & conference registrations, B2B buyer matchmaking & member renewals.\",\n                statVal: \"80%\",\n                statLbl: \"Faster delegate RSVP and expo check-in rate\",\n                url: demoAppBase + \"/industrial-promotion-bodies\"\n            }\n        };\n\n        function activateSegment(segmentId) {\n            activeSegmentId = segmentId;\n\n            // 1. Update left sidebar active states\n            document.querySelectorAll('.mega-segment-btn').forEach(btn => {\n                btn.classList.toggle('active', btn.getAttribute('data-segment') === segmentId);\n            });\n\n            // 2. Switch center detail panel\n            document.querySelectorAll('.mega-detail-panel').forEach(panel => {\n                panel.classList.remove('active');\n            });\n            const targetPanel = document.getElementById('detail-' + segmentId);\n            if (targetPanel) {\n                targetPanel.classList.add('active');\n            }\n\n            // 3. Update right spotlight action card\n            const data = segmentData[segmentId];\n            if (data) {\n                const textContent = document.getElementById('spotlight-text-content');\n                const imageContent = document.getElementById('spotlight-image-content');\n                const titleEl = document.getElementById('spotlight-title');\n                const descEl = document.getElementById('spotlight-desc');\n                const statValEl = document.getElementById('spotlight-stat-val');\n                const statLblEl = document.getElementById('spotlight-stat-lbl');\n                const ctaBtn = document.getElementById('spotlight-cta-btn');\n                const imgEl = document.getElementById('spotlight-image');\n\n                if (data.image) {\n                    if (textContent) textContent.style.display = 'none';\n                    if (imageContent) {\n                        imageContent.style.display = 'block';\n                        if (imgEl) imgEl.src = data.image;\n                    }\n                } else {\n                    if (textContent) textContent.style.display = 'block';\n                    if (imageContent) imageContent.style.display = 'none';\n                    if (titleEl) titleEl.textContent = data.title;\n                    if (descEl) descEl.textContent = data.desc;\n                    if (statValEl) statValEl.textContent = data.statVal;\n                    if (statLblEl) statLblEl.textContent = data.statLbl;\n                }\n                \n                if (ctaBtn && data.url) ctaBtn.href = data.url;\n            }\n\n            // Re-render icons if dynamically updated\n            lucide.createIcons();\n        }\n\n        // Initialize with default segment\n        activateSegment('training');\n\n        // Mega menu click & hover handling\n        const megaWrapper = document.getElementById('mega-wrapper');\n        const megaTrigger = document.getElementById('mega-trigger');\n        const megaBackdrop = document.getElementById('mega-backdrop');\n\n        if (megaWrapper && megaTrigger) {\n            megaTrigger.addEventListener('click', (e) => {\n                e.preventDefault();\n                const isOpen = megaWrapper.classList.contains('is-open');\n                if (isOpen) {\n                    closeMegaMenu();\n                } else {\n                    openMegaMenu();\n                }\n            });\n\n            megaWrapper.addEventListener('mouseenter', () => {\n                if (window.innerWidth > 768) {\n                    if (megaBackdrop) megaBackdrop.classList.add('active');\n                }\n            });\n\n            megaWrapper.addEventListener('mouseleave', () => {\n                if (!megaWrapper.classList.contains('is-open')) {\n                    if (megaBackdrop) megaBackdrop.classList.remove('active');\n                }\n            });\n        }\n\n        function openMegaMenu() {\n            if (megaWrapper) megaWrapper.classList.add('is-open');\n            if (megaTrigger) megaTrigger.setAttribute('aria-expanded', 'true');\n            if (megaBackdrop) megaBackdrop.classList.add('active');\n        }\n\n        function closeMegaMenu() {\n            if (megaWrapper) megaWrapper.classList.remove('is-open');\n            if (megaTrigger) megaTrigger.setAttribute('aria-expanded', 'false');\n            if (megaBackdrop) megaBackdrop.classList.remove('active');\n        }\n\n        // Close on ESC or click outside\n        document.addEventListener('click', (e) => {\n            if (megaWrapper && !megaWrapper.contains(e.target) && !e.target.closest('#mega-trigger')) {\n                closeMegaMenu();\n            }\n        });\n\n        // Mobile Segments Accordion Toggle\n        function toggleMobileSegments() {\n            const list = document.getElementById('mobile-seg-list');\n            const icon = document.getElementById('mobile-seg-icon');\n            if (!list) return;\n            const isOpen = list.style.display === 'grid';\n            list.style.display = isOpen ? 'none' : 'grid';\n            if (icon) {\n                icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';\n                icon.style.transition = 'transform 0.2s ease';\n            }\n            lucide.createIcons();\n        }\n\n        // Navbar Scroll Glass Effect\n        const navbar = document.getElementById('navbar');\n        const isHomePage = true;\n        function handleNavScroll() {\n            if (!isHomePage || window.scrollY > 20) {\n                navbar.classList.add('is-scrolled');\n                navbar.style.background = isHomePage ? 'rgba(255, 255, 255, 0.92)' : 'rgba(255, 255, 255, 0.95)';\n                navbar.style.backdropFilter = 'blur(16px)';\n                navbar.style.webkitBackdropFilter = 'blur(16px)';\n                navbar.style.borderBottom = '1px solid rgba(255, 214, 176, 0.4)';\n                navbar.style.boxShadow = '0 4px 20px rgba(15, 5, 0, 0.04)';\n            } else {\n                navbar.classList.remove('is-scrolled');\n                navbar.style.background = 'transparent';\n                navbar.style.backdropFilter = 'none';\n                navbar.style.webkitBackdropFilter = 'none';\n                navbar.style.borderBottom = '1px solid transparent';\n                navbar.style.boxShadow = 'none';\n            }\n        }\n        window.addEventListener('scroll', handleNavScroll);\n        handleNavScroll();\n\n        // Mobile Menu Toggle\n        const hamburgerBtn = document.getElementById('hamburger-btn');\n        const mobileMenu = document.getElementById('mobile-menu');\n        const hamburgerIcon = document.getElementById('hamburger-icon');\n        let mobileOpen = false;\n\n        hamburgerBtn.addEventListener('click', () => {\n            mobileOpen = !mobileOpen;\n            if (mobileOpen) {\n                mobileMenu.style.display = 'block';\n                hamburgerIcon.setAttribute('data-lucide', 'x');\n            } else {\n                mobileMenu.style.display = 'none';\n                hamburgerIcon.setAttribute('data-lucide', 'menu');\n            }\n            lucide.createIcons(); // re-init icons\n        });\n\n        // Lenis Smooth Scrolling\n        const lenis = new Lenis({\n            duration: 1.2,\n            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n            orientation: 'vertical',\n            gestureOrientation: 'vertical',\n            smoothWheel: true,\n            wheelMultiplier: 1,\n            smoothTouch: false,\n            touchMultiplier: 2,\n        });\n\n        function raf(time) {\n            lenis.raf(time);\n            requestAnimationFrame(raf);\n        }\n        requestAnimationFrame(raf);\n    </script>\n        <style>\n        .pillar-tab {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 10px 20px;\n            border-radius: 10px;\n            font-size: 0.87rem;\n            font-weight: 700;\n            background: #ffffff;\n            color: #6B3A1F;\n            border: 2px solid #FFD6B0;\n            box-shadow: none;\n            transition: all 0.2s ease;\n            cursor: pointer;\n        }\n\n        .pillar-tab.active {\n            background: #E85D04;\n            color: #ffffff;\n            border: 2px solid #E85D04;\n            box-shadow: 0 4px 16px rgba(232, 93, 4, 0.3);\n        }\n\n        .case-tab {\n            padding: 10px 22px;\n            border-radius: 10px;\n            font-size: 0.87rem;\n            font-weight: 700;\n            background: #ffffff;\n            color: #6B3A1F;\n            border: 2px solid #FFD6B0;\n            transition: all 0.2s ease;\n            cursor: pointer;\n        }\n\n        .case-tab.active {\n            background: #E85D04;\n            color: #fff;\n            border: 2px solid #E85D04;\n        }\n\n        .pillar-content {\n            display: none;\n        }\n\n        .pillar-content.active {\n            display: grid;\n        }\n\n        .case-content {\n            display: none;\n        }\n\n        .case-content.active {\n            display: block;\n        }\n\n        /* ── Voice Demo Widget Styles ── */\n        @keyframes pulse-dot {\n\n            0%,\n            100% {\n                opacity: 1;\n                transform: scale(1);\n            }\n\n            50% {\n                opacity: 0.5;\n                transform: scale(1.3);\n            }\n        }\n\n        @keyframes soundwave {\n\n            0%,\n            100% {\n                height: 4px;\n            }\n\n            50% {\n                height: 16px;\n            }\n        }\n\n        @keyframes widget-glow {\n\n            0%,\n            100% {\n                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);\n            }\n\n            50% {\n                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 20px rgba(232, 93, 4, 0.2);\n            }\n        }\n\n        #voice-demo-widget.calling {\n            animation: widget-glow 2s ease-in-out infinite;\n            border-color: rgba(232, 93, 4, 0.5) !important;\n        }\n\n        .soundwave-bars {\n            display: none;\n            align-items: center;\n            gap: 3px;\n            height: 20px;\n        }\n\n        .soundwave-bars.active {\n            display: flex;\n        }\n\n        .soundwave-bar {\n            width: 3px;\n            border-radius: 2px;\n            background: #FF7A2F;\n            animation: soundwave 0.8s ease-in-out infinite;\n        }\n\n        .soundwave-bar:nth-child(2) {\n            animation-delay: 0.1s;\n        }\n\n        .soundwave-bar:nth-child(3) {\n            animation-delay: 0.2s;\n        }\n\n        .soundwave-bar:nth-child(4) {\n            animation-delay: 0.3s;\n        }\n\n        .soundwave-bar:nth-child(5) {\n            animation-delay: 0.15s;\n        }\n\n        /* ── Voice Demo Button Bar (Exact layout match) ── */\n        .voice-demo-bar {\n            display: inline-flex;\n            align-items: stretch;\n            background: transparent;\n            border: 1px solid rgba(255, 255, 255, 0.2);\n            border-radius: 12px;\n            padding: 0;\n            gap: 0;\n            position: relative;\n            overflow: hidden;\n            height: 52px;\n            box-sizing: border-box;\n            transition: border-color 0.25s ease, background 0.25s ease;\n        }\n\n        .voice-demo-bar:hover {\n            border-color: rgba(255, 122, 47, 0.4);\n        }\n\n        .voice-demo-worker {\n            display: flex;\n            align-items: center;\n            padding: 0 28px 0 24px;\n            color: #ffffff;\n            font-size: 1.05rem;\n            font-weight: 500;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n            letter-spacing: -0.01em;\n            white-space: nowrap;\n            border-right: 1px solid rgba(255, 255, 255, 0.2);\n            transition: color 0.2s ease;\n            user-select: none;\n            cursor: pointer;\n        }\n\n        /* Worker dropdown options */\n        .worker-option {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n            padding: 10px 16px;\n            cursor: pointer;\n            transition: background 0.15s ease;\n        }\n        .worker-option:hover {\n            background: rgba(255, 122, 47, 0.12);\n        }\n        .worker-option.selected {\n            background: rgba(255, 122, 47, 0.08);\n        }\n        .worker-option-name {\n            font-size: 0.9rem;\n            font-weight: 600;\n            color: #ffffff;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n        .worker-option:hover .worker-option-name {\n            color: #FF7A2F;\n        }\n        .worker-option-role {\n            font-size: 0.72rem;\n            font-weight: 500;\n            color: rgba(255, 255, 255, 0.45);\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n\n        .voice-demo-worker:hover {\n            color: #FF7A2F;\n        }\n\n        .voice-demo-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            background: transparent;\n            border: none;\n            outline: none;\n            padding: 0 28px 0 22px;\n            color: #ffffff;\n            font-size: 1.05rem;\n            font-weight: 500;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n            letter-spacing: -0.01em;\n            cursor: pointer;\n            transition: color 0.2s ease, background 0.2s ease;\n            white-space: nowrap;\n            height: 100%;\n        }\n\n        .voice-demo-btn:hover {\n            color: #FF7A2F !important;\n            background: rgba(255, 122, 47, 0.08) !important;\n        }\n\n        .voice-demo-btn:hover .voice-demo-icon svg,\n        .voice-demo-btn:hover svg {\n            fill: #FF7A2F !important;\n            color: #FF7A2F !important;\n        }\n\n        .voice-demo-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 14px;\n            height: 14px;\n            color: inherit;\n            transition: transform 0.2s ease;\n        }\n\n        .voice-demo-btn:hover .voice-demo-icon {\n            transform: scale(1.08);\n        }\n\n        .transcript-line.partial .transcript-text {\n            opacity: 0.7;\n        }\n\n        /* Modal overlay */\n        #voice-modal-overlay {\n            display: none;\n            position: fixed;\n            inset: 0;\n            z-index: 9999;\n            background: rgba(0, 0, 0, 0.7);\n            backdrop-filter: blur(8px);\n            align-items: center;\n            justify-content: center;\n        }\n\n        #voice-modal-overlay.active {\n            display: flex;\n        }\n\n        #voice-modal {\n            background: linear-gradient(145deg, #1a0d06, #0F0500);\n            border: 1px solid rgba(255, 122, 47, 0.3);\n            border-radius: 24px;\n            padding: 40px;\n            width: 420px;\n            max-width: 90vw;\n            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);\n            text-align: center;\n            position: relative;\n            animation: fadeUp 0.3s ease both;\n        }\n\n        .voice-avatar-ring {\n            width: 100px;\n            height: 100px;\n            border-radius: 50%;\n            background: linear-gradient(135deg, #E85D04, #FF7A2F);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 24px;\n            position: relative;\n            box-shadow: 0 0 0 0 rgba(232, 93, 4, 0.4);\n        }\n\n        .voice-avatar-ring.pulsing {\n            animation: avatar-pulse 1.5s ease-in-out infinite;\n        }\n\n        @keyframes avatar-pulse {\n            0% {\n                box-shadow: 0 0 0 0 rgba(232, 93, 4, 0.5);\n            }\n\n            70% {\n                box-shadow: 0 0 0 24px rgba(232, 93, 4, 0);\n            }\n\n            100% {\n                box-shadow: 0 0 0 0 rgba(232, 93, 4, 0);\n            }\n        }\n\n        .end-call-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            background: rgba(239, 68, 68, 0.15);\n            border: 1px solid rgba(239, 68, 68, 0.4);\n            border-radius: 100px;\n            padding: 12px 28px;\n            color: #ef4444;\n            font-size: 0.95rem;\n            font-weight: 700;\n            font-family: 'Inter', sans-serif;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            margin-top: 24px;\n        }\n\n        .end-call-btn:hover {\n            background: rgba(239, 68, 68, 0.25);\n            border-color: rgba(239, 68, 68, 0.7);\n        }\n    </style>\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            // Hero Video Cycling\n            const videoElement = document.getElementById('hero-video');\n            const videoSource = document.getElementById('hero-video-source');\n            const videos = ['/assets/hero-bg-video-5.mp4', '/assets/hero-bg-video-4.mp4'];\n            let currentVideoIndex = 0;\n\n            videoElement.addEventListener('ended', () => {\n                currentVideoIndex = (currentVideoIndex + 1) % videos.length;\n                videoSource.src = videos[currentVideoIndex];\n                videoElement.load();\n                videoElement.play().catch(e => console.log('Autoplay prevented:', e));\n            });\n\n            // Pillar Tabs Logic\n            const pillarTabs = document.querySelectorAll('.pillar-tab');\n            const pillarContents = document.querySelectorAll('.pillar-content');\n\n            pillarTabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const index = tab.getAttribute('data-index');\n\n                    pillarTabs.forEach(t => t.classList.remove('active'));\n                    tab.classList.add('active');\n\n                    pillarContents.forEach(content => {\n                        if (content.getAttribute('data-index') === index) {\n                            content.classList.add('active');\n                        } else {\n                            content.classList.remove('active');\n                        }\n                    });\n                });\n            });\n\n            // Case Tabs Logic\n            const caseTabs = document.querySelectorAll('.case-tab');\n            const caseContents = document.querySelectorAll('.case-content');\n\n            caseTabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const index = tab.getAttribute('data-index');\n\n                    caseTabs.forEach(t => t.classList.remove('active'));\n                    tab.classList.add('active');\n\n                    caseContents.forEach(content => {\n                        if (content.getAttribute('data-index') === index) {\n                            content.classList.add('active');\n                        } else {\n                            content.classList.remove('active');\n                        }\n                    });\n                });\n            });\n\n            // ── Mic Permission Check ──\n            checkMicPermission();\n            try { sessionStorage.removeItem('mw_logistics_demo_unlock'); } catch (_) {}\n        });\n\n        async function checkMicPermission() {\n            const micText = document.getElementById('mic-status-text');\n            const micIcon = document.getElementById('mic-status-icon');\n            try {\n                const result = await navigator.permissions.query({ name: 'microphone' });\n                updateMicUI(result.state);\n                result.onchange = () => updateMicUI(result.state);\n            } catch (e) {\n                // fallback: show as pending\n                updateMicUI('prompt');\n            }\n        }\n\n        function updateMicUI(state) {\n            const micText = document.getElementById('mic-status-text');\n            const micIcon = document.getElementById('mic-status-icon');\n            if (state === 'granted') {\n                micText.textContent = 'Mic permissions';\n                micText.style.color = 'rgba(255,255,255,0.65)';\n                micIcon.innerHTML = '<svg width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\"><path d=\"M1 4l3 3 5-6\" stroke=\"#22c55e\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>';\n                micIcon.style.background = 'rgba(34,197,94,0.15)';\n            } else if (state === 'denied') {\n                micText.textContent = 'Mic blocked — click to allow';\n                micText.style.color = 'rgba(239,68,68,0.8)';\n                micIcon.innerHTML = '<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M1 1l8 8M9 1l-8 8\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>';\n                micIcon.style.background = 'rgba(239,68,68,0.15)';\n            } else {\n                micText.textContent = 'Mic permissions needed';\n                micText.style.color = 'rgba(255,186,47,0.8)';\n                micIcon.innerHTML = '<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M5 2v4M5 8v.5\" stroke=\"#ffba2f\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>';\n                micIcon.style.background = 'rgba(255,186,47,0.15)';\n            }\n        }\n\n        // ── Worker configs ──\n        const agentConfigs = {\n            muralworksai_inbound: {\n                name: 'Meet Mural',\n                role: 'Website Voice Worker',\n                lead_name: 'Visitor',\n                script: [\n                    { role: 'agent', text: 'Hello! Welcome to MuralWorks AI. How can I assist you with our AI voice solutions today?' },\n                    { role: 'user', text: 'Can you tell me more about your inbound and outbound voice workers?' },\n                    { role: 'agent', text: 'MuralWorks AI provides autonomous voice workers for 24/7 customer support and scalable outbound sales pipeline generation.' }\n                ]\n            },\n            shipment_tracking_outbound: {\n                name: 'TPC Logistics',\n                role: 'Outbound Voice Worker',\n                lead_name: 'Visitor',\n                script: []\n            },\n            shipment_tracking_inbound: {\n                name: 'SwiftCourier',\n                role: 'Shipment Tracking Worker',\n                lead_name: 'Visitor',\n                script: []\n            },\n            demo_logistics_outbound: {\n                name: 'Demo Logistics',\n                role: 'Outbound Voice Worker',\n                lead_name: 'Visitor',\n                script: []\n            }\n        };\n\n        const API_BASE_URL = '';\n        const WS_BASE_URL = \"wss:\\/\\/dev-salesworker.crescendoworldwide.com\";\n        const TARGET_SR = 16000;\n        let callTimer = null;\n        let callSeconds = 0;\n        let transcriptQueue = [];\n        let transcriptIndex = 0;\n        let typingTimeout = null;\n        let voiceEngine = null;\n        let activeSessionId = null;\n        let activeCustomerId = null;\n        let isEndingCall = false;\n        let unlockedDemoRequestId = null;\n        const transcriptByUtterance = new Map();\n        window.callActive = false;\n\n        function showLogisticsDemoCta(demo = null) {\n            const cta = document.getElementById('logistics-demo-cta');\n            if (!cta) return;\n            cta.style.display = 'block';\n            if (demo?.request_id) {\n                unlockedDemoRequestId = demo.request_id;\n            }\n        }\n\n        function hideLogisticsDemoCta() {\n            const cta = document.getElementById('logistics-demo-cta');\n            if (cta) cta.style.display = 'none';\n            unlockedDemoRequestId = null;\n        }\n\n        function setSelectedAgent(customerId) {\n            const select = document.getElementById('worker-select');\n            const agentDisplay = document.getElementById('worker-display');\n            const worker = agentConfigs[customerId] || agentConfigs.muralworksai_inbound;\n            if (select) select.value = customerId;\n            if (agentDisplay) {\n                const label = agentDisplay.querySelector('span');\n                if (label) label.textContent = worker.name;\n            }\n            // Update selected state in dropdown\n            document.querySelectorAll('.worker-option').forEach(opt => {\n                opt.classList.toggle('selected', opt.dataset.value === customerId);\n            });\n        }\n\n        function toggleWorkerDropdown() {\n            if (window.callActive) return;\n            const dropdown = document.getElementById('worker-dropdown');\n            const chevron = document.getElementById('worker-chevron');\n            const isOpen = dropdown.style.display !== 'none';\n            dropdown.style.display = isOpen ? 'none' : 'block';\n            chevron.style.transform = isOpen ? '' : 'rotate(180deg)';\n        }\n\n        function selectWorker(customerId) {\n            setSelectedAgent(customerId);\n            const dropdown = document.getElementById('worker-dropdown');\n            const chevron = document.getElementById('worker-chevron');\n            dropdown.style.display = 'none';\n            chevron.style.transform = '';\n        }\n\n        // Close dropdown when clicking outside\n        document.addEventListener('click', function(e) {\n            const display = document.getElementById('worker-display');\n            const dropdown = document.getElementById('worker-dropdown');\n            if (display && dropdown && !display.contains(e.target) && !dropdown.contains(e.target)) {\n                dropdown.style.display = 'none';\n                const chevron = document.getElementById('worker-chevron');\n                if (chevron) chevron.style.transform = '';\n            }\n        });\n\n        async function fetchUnlockedDemos(sessionId) {\n            const res = await fetch(`${API_BASE_URL}/api/public-demo/unlocked-demos?session_id=${encodeURIComponent(sessionId)}`, {\n                headers: { 'Accept': 'application/json' }\n            });\n            if (!res.ok) return null;\n            return res.json();\n        }\n\n        async function checkLogisticsUnlock(sessionId, { polls = 3, delayMs = 2000 } = {}) {\n            if (!sessionId) return false;\n\n            for (let i = 0; i < polls; i++) {\n                try {\n                    const data = await fetchUnlockedDemos(sessionId);\n                    if (data?.show_logistics_demo) {\n                        const logisticsDemo = Array.isArray(data.demos)\n                            ? data.demos.find(d => d.demo_type === 'logistics') || data.demos[0]\n                            : null;\n                        showLogisticsDemoCta(logisticsDemo);\n                        return true;\n                    }\n                } catch (error) {\n                    console.error('unlocked-demos check failed:', error);\n                }\n\n                if (i < polls - 1) {\n                    await new Promise(resolve => setTimeout(resolve, delayMs));\n                }\n            }\n\n            return false;\n        }\n\n        async function markDemoRequestViewed(requestId) {\n            if (!requestId) return;\n            try {\n                await fetch(`${API_BASE_URL}/api/public-demo/demo-requests/${encodeURIComponent(requestId)}/status`, {\n                    method: 'PATCH',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Accept': 'application/json'\n                    },\n                    body: JSON.stringify({ status: 'viewed' })\n                });\n            } catch (error) {\n                console.error('Failed to mark demo request viewed:', error);\n            }\n        }\n\n        async function startLogisticsDemo(customerId) {\n            if (window.callActive) return;\n            setSelectedAgent(customerId);\n            await markDemoRequestViewed(unlockedDemoRequestId);\n            await initiateVoiceCall();\n        }\n\n        function int16ToBase64(int16) {\n            const u8 = new Uint8Array(int16.buffer, int16.byteOffset, int16.byteLength);\n            let s = '';\n            for (let i = 0; i < u8.length; i++) s += String.fromCharCode(u8[i]);\n            return btoa(s);\n        }\n\n        function base64ToInt16(b64) {\n            const bin = atob(b64);\n            const u8 = new Uint8Array(bin.length);\n            for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);\n            return new Int16Array(u8.buffer);\n        }\n\n        function downsampleTo8k(float32, inRate) {\n            const ratio = inRate / TARGET_SR;\n            const outLen = Math.max(1, Math.floor(float32.length / ratio));\n            const out = new Int16Array(outLen);\n            for (let i = 0; i < outLen; i++) {\n                const s = float32[Math.min(float32.length - 1, Math.floor(i * ratio))] || 0;\n                const c = Math.max(-1, Math.min(1, s));\n                out[i] = c < 0 ? c * 0x8000 : c * 0x7fff;\n            }\n            return out;\n        }\n\n        function escapeHtml(text) {\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n\n        function clearLiveTranscript() {\n            transcriptByUtterance.clear();\n            const container = document.getElementById('transcript-messages');\n            if (container) container.innerHTML = '';\n        }\n\n        function handleTranscriptEvent(msg) {\n            if (!msg?.utterance_id || !msg?.speaker || typeof msg.text !== 'string') return;\n\n            transcriptByUtterance.set(msg.utterance_id, {\n                utterance_id: msg.utterance_id,\n                speaker: msg.speaker,\n                text: msg.text,\n                is_final: msg.event === 'transcript.final',\n                seq: Number(msg.seq) || 0,\n                start_ms: msg.start_ms,\n                end_ms: msg.end_ms,\n            });\n\n            renderLiveTranscript();\n\n            const waveLabel = document.getElementById('wave-label');\n            if (waveLabel) {\n                waveLabel.textContent = msg.speaker === 'user' ? 'You speaking...' : 'Worker speaking...';\n            }\n        }\n\n        function renderLiveTranscript() {\n            const container = document.getElementById('transcript-messages');\n            if (!container) return;\n\n            const lines = [...transcriptByUtterance.values()].sort((a, b) => a.seq - b.seq);\n            container.innerHTML = lines.map(line => {\n                const isAgent = line.speaker === 'agent';\n                const partialClass = line.is_final ? '' : ' partial';\n                const suffix = line.is_final ? '' : ' …';\n                return `\n                        <div class=\"transcript-line${partialClass}\" data-utterance-id=\"${escapeHtml(line.utterance_id)}\" style=\"display:flex; align-items:flex-start; gap:10px; animation:fadeUp 0.25s ease both; ${isAgent ? '' : 'flex-direction:row-reverse;'}\">\n                            <div style=\"width:26px;height:26px;border-radius:50%;background:${isAgent ? 'rgba(232,93,4,0.25)' : 'rgba(255,255,255,0.1)'};display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;\">\n                                ${isAgent\n                        ? '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"#FF7A2F\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>'\n                        : '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"rgba(255,255,255,0.5)\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>'\n                    }\n                            </div>\n                            <div style=\"max-width:80%;\">\n                                <div style=\"font-size:0.68rem;font-weight:600;color:${isAgent ? 'rgba(255,122,47,0.7)' : 'rgba(255,255,255,0.35)'};margin-bottom:4px;${isAgent ? '' : 'text-align:right;'}\">${isAgent ? 'Worker' : 'You'}</div>\n                                <div class=\"transcript-text\" style=\"background:${isAgent ? 'rgba(232,93,4,0.1)' : 'rgba(255,255,255,0.07)'};border:1px solid ${isAgent ? 'rgba(232,93,4,0.18)' : 'rgba(255,255,255,0.08)'};border-radius:${isAgent ? '4px 12px 12px 12px' : '12px 4px 12px 12px'};padding:10px 14px;font-size:0.83rem;line-height:1.55;color:rgba(255,255,255,0.88);font-family:'Inter',sans-serif;\">${escapeHtml(line.text)}${suffix}</div>\n                            </div>\n                        </div>`;\n            }).join('');\n\n            container.scrollTop = container.scrollHeight;\n        }\n\n        async function fetchFinalTranscript(sessionId) {\n            if (!sessionId) return;\n\n            try {\n                const res = await fetch(`${API_BASE_URL}/api/public-demo/transcript?session_id=${encodeURIComponent(sessionId)}`, {\n                    headers: { 'Accept': 'application/json' }\n                });\n                if (!res.ok) return;\n\n                const data = await res.json();\n                const items = data.transcript || data.items || [];\n                if (!Array.isArray(items)) return;\n\n                items.forEach(item => {\n                    if (!item?.utterance_id || !item?.speaker || typeof item.text !== 'string') return;\n                    transcriptByUtterance.set(item.utterance_id, {\n                        utterance_id: item.utterance_id,\n                        speaker: item.speaker,\n                        text: item.text,\n                        is_final: true,\n                        seq: Number(item.seq) || 0,\n                        start_ms: item.start_ms,\n                        end_ms: item.end_ms,\n                    });\n                });\n\n                renderLiveTranscript();\n            } catch (error) {\n                console.error('Failed to fetch final transcript:', error);\n            }\n        }\n\n        async function startVoiceEngine(wsUrl) {\n            const ctx = new AudioContext();\n            await ctx.resume();\n\n            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n            updateMicUI('granted');\n\n            const source = ctx.createMediaStreamSource(stream);\n            const processor = ctx.createScriptProcessor(4096, 1, 1);\n            const silentGain = ctx.createGain();\n            silentGain.gain.value = 0;\n            source.connect(processor);\n            processor.connect(silentGain);\n            silentGain.connect(ctx.destination);\n\n            const ws = new WebSocket(wsUrl);\n            let nextPlay = 0;\n            let playbackSources = [];\n\n            const playPcm = (samples) => {\n                const f = new Float32Array(samples.length);\n                for (let i = 0; i < samples.length; i++) f[i] = samples[i] / 32768;\n                const buf = ctx.createBuffer(1, f.length, TARGET_SR);\n                buf.getChannelData(0).set(f);\n                const node = ctx.createBufferSource();\n                node.buffer = buf;\n                node.connect(ctx.destination);\n                const t = Math.max(nextPlay, ctx.currentTime);\n                node.start(t);\n                nextPlay = t + buf.duration;\n                playbackSources.push(node);\n                const waveLabel = document.getElementById('wave-label');\n                if (waveLabel) waveLabel.textContent = 'Worker speaking...';\n            };\n\n            const clearPlayback = () => {\n                playbackSources.forEach(s => { try { s.stop(); } catch (_) { } });\n                playbackSources = [];\n                nextPlay = ctx.currentTime;\n                const waveLabel = document.getElementById('wave-label');\n                if (waveLabel) waveLabel.textContent = 'Listening...';\n            };\n\n            ws.onopen = () => {\n                processor.onaudioprocess = (e) => {\n                    if (ws.readyState !== WebSocket.OPEN || !window.callActive) return;\n                    const pcm = downsampleTo8k(e.inputBuffer.getChannelData(0), ctx.sampleRate);\n                    const payload = int16ToBase64(pcm);\n                    ws.send(JSON.stringify({ event: 'media', media: { payload } }));\n                };\n            };\n\n            ws.onmessage = (ev) => {\n                let msg;\n                try { msg = JSON.parse(ev.data); } catch (_) { return; }\n\n                if (msg.event === 'clear') {\n                    clearPlayback();\n                    return;\n                }\n\n                if (msg.event === 'media' && msg.media?.payload) {\n                    playPcm(base64ToInt16(msg.media.payload));\n                    return;\n                }\n\n                if (msg.event === 'transcript.partial' || msg.event === 'transcript.final') {\n                    handleTranscriptEvent(msg);\n                    return;\n                }\n            };\n\n            ws.onerror = () => { };\n\n            ws.onclose = async () => {\n                if (window.callActive && !isEndingCall) {\n                    await endVoiceCall({ reason: 'server' });\n                }\n            };\n\n            voiceEngine = {\n                ws,\n                ctx,\n                stream,\n                processor,\n                source,\n                silentGain,\n                clearPlayback,\n                stop() {\n                    try {\n                        if (ws.readyState === WebSocket.OPEN) {\n                            ws.send(JSON.stringify({ event: 'stop', stop: { reason: 'user_hangup' } }));\n                        }\n                    } catch (_) { }\n                    processor.onaudioprocess = null;\n                    try { processor.disconnect(); } catch (_) { }\n                    try { source.disconnect(); } catch (_) { }\n                    try { silentGain.disconnect(); } catch (_) { }\n                    stream.getTracks().forEach(t => t.stop());\n                    clearPlayback();\n                    try { ws.close(); } catch (_) { }\n                    ctx.close().catch(() => { });\n                }\n            };\n\n            return voiceEngine;\n        }\n\n        function stopVoiceEngine() {\n            if (!voiceEngine) return;\n            try { voiceEngine.stop(); } catch (e) { console.error('Error stopping voice engine:', e); }\n            voiceEngine = null;\n        }\n\n        async function initiateVoiceCall() {\n            if (window.callActive) return;\n\n            const select = document.getElementById('worker-select');\n            const selectedCustomerId = select ? select.value : 'muralworksai_inbound';\n            const worker = agentConfigs[selectedCustomerId] || agentConfigs.muralworksai_inbound;\n            const agentDisplay = document.getElementById('worker-display');\n            const btn = document.getElementById('initiate-call-btn');\n            const btnText = document.getElementById('call-btn-text');\n            const btnIcon = document.getElementById('call-btn-icon');\n\n            activeCustomerId = selectedCustomerId;\n\n            if (agentDisplay) {\n                agentDisplay.style.opacity = '0.6';\n                const label = agentDisplay.querySelector('span');\n                if (label) label.textContent = worker.name;\n            }\n\n            btn.style.background = 'rgba(255,255,255,0.08)';\n            btn.style.borderColor = 'rgba(255,255,255,0.1)';\n            btn.style.cursor = 'default';\n            btnText.textContent = 'Connecting...';\n            btnIcon.innerHTML = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\"/></path></svg>';\n\n            try {\n                await fetch(`${API_BASE_URL}/api/public-demo/workers`, {\n                    method: 'GET',\n                    headers: { 'Accept': 'application/json' }\n                });\n\n                const sessionResponse = await fetch(`${API_BASE_URL}/api/public-demo/session`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Accept': 'application/json'\n                    },\n                    body: JSON.stringify({\n                        customer_id: selectedCustomerId,\n                        lead_name: worker.lead_name || 'Visitor'\n                    })\n                });\n\n                if (!sessionResponse.ok) {\n                    throw new Error(`Session creation failed with status ${sessionResponse.status}`);\n                }\n\n                const sessionData = await sessionResponse.json();\n                const wsPath = sessionData?.ws_path;\n                const wsUrl = sessionData?.ws_url || (wsPath ? `${WS_BASE_URL}${wsPath}` : null);\n                activeSessionId = sessionData?.session_id || null;\n\n                if (!wsUrl) {\n                    throw new Error('Missing ws_path/ws_url in session response');\n                }\n\n                openTranscriptPanel(worker, false);\n                try {\n                    await startVoiceEngine(wsUrl);\n                } catch (engineError) {\n                    endVoiceCall();\n                    throw engineError;\n                }\n            } catch (error) {\n                console.error('Voice demo failed:', error);\n                updateMicUI('denied');\n                activeCustomerId = null;\n                if (agentDisplay) agentDisplay.style.opacity = '1';\n                btn.style.background = '';\n                btn.style.borderColor = '';\n                btn.style.cursor = 'pointer';\n                btnText.textContent = 'Initiate Call';\n                btnIcon.innerHTML = '<svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"currentColor\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg>';\n                alert(`Could not start live call: ${error.message}`);\n            }\n        }\n\n        function openTranscriptPanel(worker, useScriptedFallback = false) {\n            window.callActive = true;\n\n            const btn = document.getElementById('initiate-call-btn');\n            const btnText = document.getElementById('call-btn-text');\n            const btnIcon = document.getElementById('call-btn-icon');\n            const widget = document.getElementById('voice-demo-widget');\n            const panel = document.getElementById('transcript-panel');\n\n            // Update button to \"In Call\"\n            btn.style.background = 'rgba(232,93,4,0.2)';\n            btn.style.borderColor = 'rgba(232,93,4,0.45)';\n            btnText.textContent = 'In Call';\n            btnIcon.innerHTML = '<span style=\"display:inline-flex;align-items:center;gap:2px;height:14px;\"><span style=\"width:3px;border-radius:2px;background:#FF7A2F;animation:soundwave 0.8s ease-in-out infinite;height:6px;\"></span><span style=\"width:3px;border-radius:2px;background:#FF7A2F;animation:soundwave 0.8s 0.1s ease-in-out infinite;height:12px;\"></span><span style=\"width:3px;border-radius:2px;background:#FF7A2F;animation:soundwave 0.8s 0.2s ease-in-out infinite;height:14px;\"></span><span style=\"width:3px;border-radius:2px;background:#FF7A2F;animation:soundwave 0.8s 0.1s ease-in-out infinite;height:10px;\"></span><span style=\"width:3px;border-radius:2px;background:#FF7A2F;animation:soundwave 0.8s ease-in-out infinite;height:6px;\"></span></span>';\n            widget.classList.add('calling');\n\n            // Set worker name/role in panel\n            document.getElementById('transcript-worker-name').textContent = worker.name;\n            document.getElementById('transcript-worker-role').textContent = worker.role;\n\n            // Clear old messages\n            clearLiveTranscript();\n\n            // Show panel with animation\n            panel.style.display = 'block';\n            panel.style.opacity = '0';\n            panel.style.transform = 'translateY(-10px)';\n            requestAnimationFrame(() => {\n                panel.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n                panel.style.opacity = '1';\n                panel.style.transform = 'translateY(0)';\n            });\n\n            // Start call timer\n            callSeconds = 0;\n            callTimer = setInterval(() => {\n                callSeconds++;\n                const mins = String(Math.floor(callSeconds / 60)).padStart(2, '0');\n                const secs = String(callSeconds % 60).padStart(2, '0');\n                const timerEl = document.getElementById('call-timer-inline');\n                if (timerEl) timerEl.textContent = `${mins}:${secs}`;\n            }, 1000);\n\n            if (useScriptedFallback) {\n                transcriptQueue = worker.script;\n                transcriptIndex = 0;\n                scheduleNextMessage();\n                appendTranscriptMessage('agent', 'Connected in local demo mode. Live backend unavailable, showing scripted conversation.');\n            } else {\n                const waveLabel = document.getElementById('wave-label');\n                if (waveLabel) waveLabel.textContent = 'Connecting audio...';\n            }\n        }\n\n        function safelyParseJson(input) {\n            try {\n                return JSON.parse(input);\n            } catch (_) {\n                return null;\n            }\n        }\n\n        function normalizeIncomingMessage(message) {\n            const eventName = message?.event || message?.type || '';\n            const text = message?.text\n                || message?.message\n                || message?.transcript\n                || message?.content\n                || message?.data?.text\n                || message?.data?.message\n                || null;\n\n            if (!text || typeof text !== 'string') return null;\n\n            // Try to infer speaker from common fields\n            const speaker = (\n                message?.role\n                || message?.speaker\n                || message?.source\n                || message?.data?.role\n                || message?.data?.speaker\n                || ''\n            ).toString().toLowerCase();\n\n            const role = speaker.includes('user') || speaker.includes('human') || speaker.includes('lead')\n                ? 'user'\n                : 'agent';\n\n            // Ignore pure status events unless they include transcript text\n            if (!text.trim()) return null;\n            if (eventName && /ping|heartbeat|status|connected/i.test(eventName) && text.length < 2) return null;\n\n            return { role, text };\n        }\n\n        function scheduleNextMessage() {\n            if (transcriptIndex >= transcriptQueue.length || !window.callActive) return;\n            const msg = transcriptQueue[transcriptIndex];\n            const delay = transcriptIndex === 0 ? 600 : 2200;\n\n            typingTimeout = setTimeout(() => {\n                if (!window.callActive) return;\n                // Show \"typing\" indicator first\n                showTypingIndicator(msg.role);\n                setTimeout(() => {\n                    if (!window.callActive) return;\n                    removeTypingIndicator();\n                    appendTranscriptMessage(msg.role, msg.text);\n                    transcriptIndex++;\n                    scheduleNextMessage();\n                }, msg.text.length * 22 + 300);\n            }, delay);\n        }\n\n        function showTypingIndicator(role) {\n            const container = document.getElementById('transcript-messages');\n            const isAgent = role === 'agent';\n            const el = document.createElement('div');\n            el.id = 'typing-indicator';\n            el.style.cssText = `display:flex; align-items:center; gap:8px; ${isAgent ? '' : 'flex-direction:row-reverse;'}`;\n            el.innerHTML = `\n                    <div style=\"width:24px;height:24px;border-radius:50%;background:${isAgent ? 'rgba(232,93,4,0.3)' : 'rgba(255,255,255,0.12)'};display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"${isAgent ? '#FF7A2F' : 'rgba(255,255,255,0.6)'}\"><path d=\"M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\"/></svg>\n                    </div>\n                    <div style=\"background:${isAgent ? 'rgba(232,93,4,0.1)' : 'rgba(255,255,255,0.07)'};border:1px solid ${isAgent ? 'rgba(232,93,4,0.2)' : 'rgba(255,255,255,0.1)'};border-radius:12px;padding:8px 14px;display:flex;gap:5px;align-items:center;\">\n                        <span style=\"width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.35);animation:pulse-dot 1s 0s ease-in-out infinite;\"></span>\n                        <span style=\"width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.35);animation:pulse-dot 1s 0.2s ease-in-out infinite;\"></span>\n                        <span style=\"width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.35);animation:pulse-dot 1s 0.4s ease-in-out infinite;\"></span>\n                    </div>`;\n            container.appendChild(el);\n            container.scrollTop = container.scrollHeight;\n            // Update wave label\n            document.getElementById('wave-label').textContent = isAgent ? 'Worker speaking...' : 'You speaking...';\n        }\n\n        function removeTypingIndicator() {\n            const el = document.getElementById('typing-indicator');\n            if (el) el.remove();\n        }\n\n        function appendTranscriptMessage(role, text) {\n            const container = document.getElementById('transcript-messages');\n            if (!container) return;\n            const isAgent = role === 'agent';\n            const el = document.createElement('div');\n            el.style.cssText = `display:flex; align-items:flex-start; gap:10px; animation:fadeUp 0.25s ease both; ${isAgent ? '' : 'flex-direction:row-reverse;'}`;\n            el.innerHTML = `\n                    <div style=\"width:26px;height:26px;border-radius:50%;background:${isAgent ? 'rgba(232,93,4,0.25)' : 'rgba(255,255,255,0.1)'};display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;\">\n                        ${isAgent\n                    ? '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"#FF7A2F\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"/></svg>'\n                    : '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"rgba(255,255,255,0.5)\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>'\n                }\n                    </div>\n                    <div style=\"max-width:80%;\">\n                        <div style=\"font-size:0.68rem;font-weight:600;color:${isAgent ? 'rgba(255,122,47,0.7)' : 'rgba(255,255,255,0.35)'};margin-bottom:4px;${isAgent ? '' : 'text-align:right;'}\">${isAgent ? 'Worker' : 'You'}</div>\n                        <div style=\"background:${isAgent ? 'rgba(232,93,4,0.1)' : 'rgba(255,255,255,0.07)'};border:1px solid ${isAgent ? 'rgba(232,93,4,0.18)' : 'rgba(255,255,255,0.08)'};border-radius:${isAgent ? '4px 12px 12px 12px' : '12px 4px 12px 12px'};padding:10px 14px;font-size:0.83rem;line-height:1.55;color:rgba(255,255,255,0.88);font-family:'Inter',sans-serif;\">${text}</div>\n                    </div>`;\n            container.appendChild(el);\n            container.scrollTop = container.scrollHeight;\n        }\n\n        async function endVoiceCall(options = {}) {\n            if (isEndingCall) return;\n            isEndingCall = true;\n\n            const sessionId = activeSessionId;\n            const endedCustomerId = activeCustomerId;\n            clearInterval(callTimer);\n            clearTimeout(typingTimeout);\n            window.callActive = false;\n\n            stopVoiceEngine();\n            await fetchFinalTranscript(sessionId);\n\n            activeSessionId = null;\n            activeCustomerId = null;\n\n            const agentDisplay = document.getElementById('worker-display');\n            const btn = document.getElementById('initiate-call-btn');\n            const btnText = document.getElementById('call-btn-text');\n            const btnIcon = document.getElementById('call-btn-icon');\n            const widget = document.getElementById('voice-demo-widget');\n            const panel = document.getElementById('transcript-panel');\n\n            // Reset worker display opacity\n            if (agentDisplay) {\n                agentDisplay.style.opacity = '1';\n            }\n\n            // Reset button\n            widget.classList.remove('calling');\n            btn.style.background = '';\n            btn.style.borderColor = '';\n            btn.style.cursor = 'pointer';\n            btnText.textContent = 'Initiate Call';\n            btnIcon.innerHTML = '<svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"currentColor\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg>';\n\n            // Hide transcript panel with fade\n            panel.style.opacity = '0';\n            panel.style.transform = 'translateY(-8px)';\n            setTimeout(() => { panel.style.display = 'none'; panel.style.transform = ''; }, 280);\n\n            // Add \"Call ended\" message\n            removeTypingIndicator();\n            document.getElementById('wave-label').textContent = 'Worker speaking...';\n\n            // After Mura call, check if logistics demo should unlock\n            if (endedCustomerId === 'muralworksai_inbound' && sessionId) {\n                checkLogisticsUnlock(sessionId).catch(err => {\n                    console.error('Logistics unlock check failed:', err);\n                });\n            }\n\n            isEndingCall = false;\n        }\n    </script>\n    <!-- CONTACT SALES MODAL -->\n<div id=\"contact-sales-modal\" class=\"cs-modal-overlay\" style=\"display:none;\" aria-hidden=\"true\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"cs-modal-backdrop\" onclick=\"closeContactSalesModal()\"></div>\n    <div class=\"cs-modal-container\">\n        <div class=\"cs-modal-card\">\n            <button type=\"button\" class=\"cs-close-btn\" onclick=\"closeContactSalesModal()\" aria-label=\"Close dialog\">\n                <i data-lucide=\"x\" style=\"width: 17px; height: 17px;\"></i>\n            </button>\n\n            <div class=\"cs-modal-header\">\n                <h3 class=\"cs-title\">Contact Sales</h3>\n                <p class=\"cs-subtitle\">Provide your details and our team will get in touch.</p>\n            </div>\n\n            <div id=\"cs-form-wrapper\">\n                <form id=\"contact-sales-form\" onsubmit=\"handleContactSalesSubmit(event)\" novalidate>\n                    <input type=\"hidden\" name=\"_token\" value=\"tBuoRQJKVvEIvQ6UJMhuv2CmZ6HmzHtlYrYrfucw\" autocomplete=\"off\">                    <div class=\"cs-form-group\">\n                        <label for=\"cs_name\" class=\"cs-label\">Name <span class=\"cs-req\">*</span></label>\n                        <input type=\"text\" id=\"cs_name\" name=\"name\" class=\"cs-input\" placeholder=\"Your name\" required>\n                        <div class=\"cs-error\" id=\"err-name\"></div>\n                    </div>\n\n                    <div class=\"cs-form-group\">\n                        <label for=\"cs_email\" class=\"cs-label\">Email Address <span class=\"cs-req\">*</span></label>\n                        <input type=\"email\" id=\"cs_email\" name=\"email\" class=\"cs-input\" placeholder=\"name@company.com\" required>\n                        <div class=\"cs-error\" id=\"err-email\"></div>\n                    </div>\n\n                    <div class=\"cs-form-group\">\n                        <label for=\"cs_phone\" class=\"cs-label\">Phone Number <span class=\"cs-req\">*</span></label>\n                        <input type=\"text\" id=\"cs_phone\" name=\"phone\" class=\"cs-input\" placeholder=\"+1 234 567 8900\" required>\n                        <div class=\"cs-error\" id=\"err-phone\"></div>\n                    </div>\n\n                    <div id=\"cs-form-alert\" class=\"cs-alert\" style=\"display:none;\"></div>\n\n                    <div style=\"margin-top: 16px;\">\n                        <button type=\"submit\" id=\"cs-submit-btn\" class=\"cs-submit-btn\">\n                            <span id=\"cs-submit-label\">Submit</span>\n                            <span id=\"cs-submit-spinner\" style=\"display:none; align-items:center; justify-content:center; gap:8px;\">\n                                <svg class=\"cs-spin-icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke-opacity=\"0.25\"></circle>\n                                    <path d=\"M12 3a9 9 0 0 1 9 9\" stroke-linecap=\"round\"></path>\n                                </svg>\n                                <span>Submitting...</span>\n                            </span>\n                        </button>\n                    </div>\n                </form>\n            </div>\n\n            <div id=\"cs-success-wrapper\" style=\"display:none; text-align:center; padding:24px 12px 12px;\">\n                <div class=\"cs-success-icon-badge\">\n                    <i data-lucide=\"check\" style=\"width: 26px; height: 26px; color: #fff;\"></i>\n                </div>\n                <h3 style=\"font-size: 1.4rem; font-weight: 800; color: #0F0500; margin: 14px 0 4px;\">Thank You!</h3>\n                <p id=\"cs-success-msg\" style=\"font-size: 0.88rem; color: #6B3A1F; line-height: 1.5; margin: 0 auto 16px;\">\n                    Our sales team will contact you shortly.\n                </p>\n                <button type=\"button\" onclick=\"closeContactSalesModal()\" class=\"cs-modal-done-btn\">Done</button>\n            </div>\n        </div>\n    </div>\n</div>\n\n<style>\n    .cs-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }\n    .cs-modal-overlay.active { opacity: 1; pointer-events: auto; }\n    .cs-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 5, 0, 0.65); backdrop-filter: blur(8px); }\n    .cs-modal-container { position: relative; z-index: 2; width: 100%; max-width: 440px; }\n    .cs-modal-card { background: #ffffff; border-radius: 18px; width: 100%; padding: 20px 24px; position: relative; transform: scale(0.95); transition: transform 0.25s ease; box-shadow: 0 20px 60px rgba(15, 5, 0, 0.25); }\n    .cs-modal-overlay.active .cs-modal-card { transform: scale(1); }\n    .cs-close-btn { position: absolute; top: 16px; right: 16px; background: #f3f4f6; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }\n    .cs-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }\n    .cs-subtitle { font-size: 0.9rem; color: #666; margin-bottom: 20px; }\n    .cs-form-group { margin-bottom: 16px; }\n    .cs-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }\n    .cs-req { color: #E85D04; }\n    .cs-input { width: 100%; padding: 10px 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 0.95rem; }\n    .cs-input.is-invalid { border-color: #ef4444; }\n    .cs-error { font-size: 0.75rem; color: #ef4444; display: none; margin-top: 4px; }\n    .cs-error.show { display: block; }\n    .cs-submit-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #E85D04, #FF7A2F); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }\n    .cs-modal-done-btn { width: 100%; padding: 12px; background: #f3f4f6; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }\n    .cs-alert { padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; }\n    .cs-alert.error { background: #fee2e2; color: #b91c1c; }\n    .cs-success-icon-badge { display: inline-flex; background: #10b981; padding: 12px; border-radius: 50%; margin-bottom: 10px; }\n    @keyframes spin { 100% { transform: rotate(360deg); } }\n    .cs-spin-icon { animation: spin 1s linear infinite; }\n</style>\n\n<script>\n    function openContactSalesModal() {\n        const modal = document.getElementById('contact-sales-modal');\n        if (!modal) return;\n        document.getElementById('cs-form-wrapper').style.display = 'block';\n        document.getElementById('cs-success-wrapper').style.display = 'none';\n        document.getElementById('contact-sales-form').reset();\n        document.querySelectorAll('.cs-error').forEach(e => e.classList.remove('show'));\n        document.querySelectorAll('.cs-input').forEach(e => e.classList.remove('is-invalid'));\n        const alertBox = document.getElementById('cs-form-alert');\n        if (alertBox) alertBox.style.display = 'none';\n        \n        modal.style.display = 'flex';\n        requestAnimationFrame(() => modal.classList.add('active'));\n    }\n\n    function closeContactSalesModal() {\n        const modal = document.getElementById('contact-sales-modal');\n        if (!modal) return;\n        modal.classList.remove('active');\n        setTimeout(() => modal.style.display = 'none', 250);\n    }\n\n    async function handleContactSalesSubmit(e) {\n        e.preventDefault();\n        \n        document.querySelectorAll('.cs-error').forEach(e => e.classList.remove('show'));\n        document.querySelectorAll('.cs-input').forEach(e => e.classList.remove('is-invalid'));\n        const alertBox = document.getElementById('cs-form-alert');\n        if (alertBox) alertBox.style.display = 'none';\n\n        const name = document.getElementById('cs_name').value.trim();\n        const email = document.getElementById('cs_email').value.trim();\n        const phone = document.getElementById('cs_phone').value.trim();\n        let hasError = false;\n\n        if (!name) {\n            document.getElementById('cs_name').classList.add('is-invalid');\n            const err = document.getElementById('err-name');\n            err.textContent = 'Please enter your name.';\n            err.classList.add('show');\n            hasError = true;\n        }\n        if (!email) {\n            document.getElementById('cs_email').classList.add('is-invalid');\n            const err = document.getElementById('err-email');\n            err.textContent = 'Please enter your email.';\n            err.classList.add('show');\n            hasError = true;\n        }\n        if (!phone) {\n            document.getElementById('cs_phone').classList.add('is-invalid');\n            const err = document.getElementById('err-phone');\n            err.textContent = 'Please enter your phone number.';\n            err.classList.add('show');\n            hasError = true;\n        }\n\n        if (hasError) return;\n\n        const submitBtn = document.getElementById('cs-submit-btn');\n        document.getElementById('cs-submit-label').style.display = 'none';\n        document.getElementById('cs-submit-spinner').style.display = 'inline-flex';\n        submitBtn.disabled = true;\n\n        const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content') || '';\n\n        try {\n            const response = await fetch('/contact-sales', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application/json',\n                    'Accept': 'application/json',\n                    'X-CSRF-TOKEN': csrfToken\n                },\n                body: JSON.stringify({ name, email, phone })\n            });\n\n            const data = await response.json();\n\n            if (response.ok && data.success) {\n                document.getElementById('cs-form-wrapper').style.display = 'none';\n                document.getElementById('cs-success-wrapper').style.display = 'block';\n                if (data.message) {\n                    document.getElementById('cs-success-msg').textContent = data.message;\n                }\n            } else {\n                if (alertBox) {\n                    alertBox.className = 'cs-alert error';\n                    alertBox.textContent = data.message || 'Something went wrong. Please try again.';\n                    alertBox.style.display = 'block';\n                }\n            }\n        } catch (err) {\n            if (alertBox) {\n                alertBox.className = 'cs-alert error';\n                alertBox.textContent = 'A network error occurred. Please check your connection and try again.';\n                alertBox.style.display = 'block';\n            }\n        } finally {\n            submitBtn.disabled = false;\n            document.getElementById('cs-submit-label').style.display = 'inline';\n            document.getElementById('cs-submit-spinner').style.display = 'none';\n        }\n    }\n</script>\n  <script src=\"//code.tidio.co/w6s0dqpplrb3n7jnh5yd5lmjnib20nsq.js\" async></script>\n</body>\n\n</html>"}},"props":[],"propValues":[],"route":{"name":"home","uri":"/","action":"App\\Http\\Controllers\\HomeController@index","actionSource":{"file":"/home/crescendo/public_html/muralworksai.com/app/Http/Controllers/HomeController.php","line":26}},"renderSource":null,"componentPath":null}