{"__meta":{"id":"01M5HPBJHW8HZJX13G4MERVT5K","tabUuid":null,"batchId":null,"timestamp":"2026-10-22T11:36:17.725Z","utime":1792668977.7256081104278564453125,"method":"GET","url":"https://www.muralworksai.com.receptive-tan-beaver.43-204-126-107.cpanel.site/cases","component":null,"requestType":"http","status":200,"redirectLocation":null,"serverTimingMs":8.3446200000000008145661922753788530826568603515625,"visitId":null},"http":{"requestHeaders":{"x-https":"1","host":"www.muralworksai.com.receptive-tan-beaver.43-204-126-107.cpanel.site","accept-encoding":"gzip,deflate,br","accept":"*/*","cookie":"[REDACTED]","referer":"https://www.muralworksai.com.receptive-tan-beaver.43-204-126-107.cpanel.site/","user-agent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.4; +https://openai.com/gptbot)","from":"gptbot(at)openai.com","x-openai-host-hash":"616296165"},"responseHeaders":{"content-type":"text/html; charset=utf-8","cache-control":"no-cache, private","date":"Thu, 22 Oct 2026 11:36:17 GMT","vary":"X-Inertia","x-inertia-devtools-id":"01M5HPBJHW8HZJX13G4MERVT5K","x-inertia-devtools-parent-out":"01M5HPBJHW8HZJX13G4MERVT5K"},"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=\"pBNfHqQmSINi0xjGbHSXrpnPeZg4fzAKziGydiJq\">\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=\"is-scrolled\"\n        style=\"position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 214, 176, 0.4); box-shadow: 0 4px 20px rgba(15, 5, 0, 0.04); 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: #6B3A1F; 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 \">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 active\">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 \">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 active\">Case Studies</a>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <main style=\"flex: 1; padding-top: 64px;\">\n            <main style=\"background: #ffffff; min-height: 100vh; color: #0F0500;\">\n\n        <!-- Detail View (Hidden by default) -->\n        <div id=\"detail-view\" style=\"display: none;\">\n            <!-- Top bar -->\n            <div\n                style=\"position: sticky; top: 64px; z-index: 50; background: #ffffff; border-bottom: 1px solid #F0E8E0; padding: 16px 48px; display: flex; align-items: center;\">\n                <button onclick=\"showGrid()\"\n                    style=\"background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #6B3A1F; font-size: 15px; font-weight: 700;\">\n                    ← Back to Case Studies\n                </button>\n            </div>\n\n            <div style=\"max-width: 860px; margin: 0 auto; padding: 64px 40px 120px;\">\n\n                <!-- CASE 1 DETAILS -->\n                <div id=\"case-1\" class=\"case-detail\" style=\"display:none;\">\n                    <h1\n                        style=\"font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; color: #0F0500;\">\n                        Instant Pipeline Growth for Indian Railway Manufacturing\n                    </h1>\n                    <p style=\"font-size: 20px; color: #6B3A1F; line-height: 1.65; margin-bottom: 56px; max-width: 680px;\">\n                        Scaling outbound instantly without sacrificing the professional, authoritative tone required in a\n                        heavily gated industry.\n                    </p>\n\n                    <!-- KPIs -->\n                    <div\n                        style=\"display: flex; gap: 0; margin-bottom: 72px; border: 1px solid #F0E8E0; border-radius: 16px; overflow: hidden; flex-wrap:wrap;\">\n                        <div\n                            style=\"flex: 1; padding: 32px 28px; text-align: center; border-right: 1px solid #F0E8E0; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">15,000+</div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Monthly Calls Made</div>\n                        </div>\n                        <div\n                            style=\"flex: 1; padding: 32px 28px; text-align: center; border-right: 1px solid #F0E8E0; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">7500+</div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Qualified Leads (USA)</div>\n                        </div>\n                        <div style=\"flex: 1; padding: 32px 28px; text-align: center; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">42%</div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Increase in Connect Rate</div>\n                        </div>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                The Challenge</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">Reaching\n                            decision-makers—such as procurement directors and fleet operations managers—in the traditional\n                            and heavily gated railway industry is notoriously difficult. The client’s internal sales team\n                            was spending countless hours dialing numbers, leaving voicemails, and navigating gatekeepers.\n                            This resulted in slow pipeline growth and sales team burnout. They needed a way to scale their\n                            outreach instantly without sacrificing the professional, authoritative tone required in their\n                            industry.</p>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Our Approach</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">We deployed a\n                            conversational AI worker specifically trained on railway industry terminology, common\n                            objections, and the client's core value proposition, targeting the US manufacturing sector.</p>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Execution</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">The AI worker autonomously\n                            dialed over 15,000 prospects per month, bypassing gatekeepers effectively, navigating complex\n                            purchasing hierarchies, and initiating professional conversations with procurement directors\n                            across the United States.</p>\n                    </div>\n\n                    <div style=\"background: #FFF8F3; border-radius: 16px; padding: 40px 44px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 28px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Results</h2>\n                        </div>\n                        <ul style=\"list-style: none; padding: 0; margin: 0;\">\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Generated\n                                7500+ highly qualified leads in the US market within the first quarter</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Successfully\n                                executed 15,000+ outbound calls per month with zero human intervention</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Increased\n                                overall prospect connect rate by 42%</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Eliminated\n                                hours of manual dialing, completely resolving sales team burnout</li>\n                        </ul>\n                    </div>\n                </div>\n\n                <!-- CASE 2 DETAILS -->\n                <div id=\"case-2\" class=\"case-detail\" style=\"display:none;\">\n                    <h1\n                        style=\"font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; color: #0F0500;\">\n                        How AI Workers Are Simplifying Foreign Direct Investment for Global Businesses\n                    </h1>\n                    <p style=\"font-size: 20px; color: #6B3A1F; line-height: 1.65; margin-bottom: 56px; max-width: 680px;\">\n                        Purpose-built to simplify global expansion and foster seamless investment opportunities across\n                        industries and sectors.\n                    </p>\n\n                    <!-- KPIs -->\n                    <div\n                        style=\"display: flex; gap: 0; margin-bottom: 72px; border: 1px solid #F0E8E0; border-radius: 16px; overflow: hidden; flex-wrap:wrap;\">\n                        <div\n                            style=\"flex: 1; padding: 32px 28px; text-align: center; border-right: 1px solid #F0E8E0; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">5 Continents\n                            </div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Reached Simultaneously</div>\n                        </div>\n                        <div\n                            style=\"flex: 1; padding: 32px 28px; text-align: center; border-right: 1px solid #F0E8E0; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">60%</div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Reduction in Lead Acquisition Cost</div>\n                        </div>\n                        <div style=\"flex: 1; padding: 32px 28px; text-align: center; min-width: 150px;\">\n                            <div style=\"font-size: 48px; font-weight: 800; color: #E85D04; line-height: 1;\">4×</div>\n                            <div\n                                style=\"font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6B3A1F; margin-top: 10px;\">\n                                Faster Investor Qualification</div>\n                        </div>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                The Challenge</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">Foreign investors exploring\n                            opportunities in India face an overwhelming landscape: regulatory complexity, cultural nuance,\n                            multiple languages, and a fragmented ecosystem of government bodies and private partners.\n                            Crescendo Worldwide's consulting teams were spending enormous bandwidth on repetitive\n                            first-contact calls to qualify investor interest, explain investment frameworks, and schedule\n                            discovery meetings — leaving little time for high-value advisory work. They needed a scalable,\n                            intelligent front-line solution that could engage global prospects across time zones, languages,\n                            and sectors without adding headcount.</p>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Our Approach</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">We deployed a multilingual\n                            AI worker purpose-built for FDI and global investment consulting. The AI worker was trained on\n                            India's investment landscape — including key sectors (manufacturing, infrastructure, technology,\n                            renewables), regulatory frameworks (DPIIT, SEZs, PLI schemes), and investor personas across the\n                            US, Europe, the Middle East, and Southeast Asia. It was designed to represent Crescendo\n                            Worldwide's strategic and consultative brand voice with precision.</p>\n                    </div>\n\n                    <div style=\"margin-bottom: 56px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 24px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Execution</h2>\n                        </div>\n                        <p style=\"font-size: 18px; line-height: 1.8; color: #2D1200; margin: 0;\">The AI worker proactively\n                            reached out to a database of pre-qualified foreign investor leads across 5 continents, engaging\n                            each prospect in their preferred language, explaining India's FDI opportunity landscape, gauging\n                            investment intent, and booking qualified discovery calls directly with Crescendo's senior\n                            consultants. It handled objections around regulatory risk, sector restrictions, and market entry\n                            timelines fluently — escalating complex queries to human advisors only when truly required.</p>\n                    </div>\n\n                    <div style=\"background: #FFF8F3; border-radius: 16px; padding: 40px 44px;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 28px;\">\n                            <span\n                                style=\"width: 6px; height: 6px; background: #E85D04; border-radius: 50%; flex-shrink: 0;\"></span>\n                            <h2\n                                style=\"font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #E85D04; margin: 0;\">\n                                Results</h2>\n                        </div>\n                        <ul style=\"list-style: none; padding: 0; margin: 0;\">\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Engaged\n                                foreign investor prospects across 5 continents simultaneously, 24/7</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Reduced\n                                lead acquisition cost by 60% compared to traditional outreach methods</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Accelerated\n                                investor qualification by 4× — from weeks to days</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Freed\n                                senior consultants to focus exclusively on high-value advisory and deal structuring</li>\n                            <li\n                                style=\"display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; font-size: 17px; line-height: 1.6; color: #2D1200;\">\n                                <span\n                                    style=\"color: #E85D04; font-weight: 800; flex-shrink: 0; margin-top: 2px;\">✓</span>Maintained\n                                consistent brand voice and compliance-aligned messaging across every conversation</li>\n                        </ul>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n        <!-- Grid View -->\n        <div id=\"grid-view\">\n            <!-- Hero header -->\n            <div style=\"position: relative; padding: 120px 24px 80px; text-align: center; overflow: hidden;\">\n                <div\n                    style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/assets/hero-bg.jpg'); background-size: cover; background-position: center; opacity: 0.4; z-index: 0;\">\n                </div>\n                <div\n                    style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at top, rgba(232,93,4,0.15), transparent 70%); z-index: 0;\">\n                </div>\n                <div style=\"position: relative; z-index: 1;\">\n                    <h1 style=\"font-size: clamp(40px,6vw,72px); margin: 0 auto 24px; font-weight: 800;\">\n                        Customer Stories\n                    </h1>\n                    <p style=\"color: #6B3A1F; font-size: 18px; max-width: 600px; margin: 0 auto;\">\n                        See how forward-thinking teams are using MuralWorks Outbound and MuralWorks Inbound to scale\n                        outbound pipeline and automate inbound support.\n                    </p>\n                </div>\n            </div>\n\n            <!-- Grid -->\n            <section style=\"background: #ffffff; padding: 80px 24px;\">\n                <div style=\"max-width: 1200px; margin: 0 auto;\">\n                    <div style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 32px;\">\n\n                        <!-- Case 1 Card -->\n                        <div class=\"case-card\" onclick=\"showCase('case-1')\"\n                            style=\"background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8)), url('/assets/railway-bg.jpg'); background-size: cover; background-position: center; border: 1px solid #FFD6B0; border-radius: 16px; padding: 48px; min-height: 400px; display: flex; flex-direction: column; cursor: pointer; color: #fff; transition: transform 0.2s, box-shadow 0.2s;\"\n                            onmouseenter=\"this.style.transform='translateY(-6px)'; this.style.boxShadow='0 12px 30px rgba(0,0,0,0.15)';\"\n                            onmouseleave=\"this.style.transform='none'; this.style.boxShadow='none';\">\n                            <div\n                                style=\"min-height: 60px; display: flex; align-items: center; gap: 16px; margin-bottom: 24px;\">\n                                <span\n                                    style=\"font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 1px; text-transform: uppercase;\">Indian\n                                    Railway Manufacturing</span>\n                            </div>\n                            <h3 style=\"font-size: 28px; font-weight: 700; line-height: 1.3; color: #fff;\">Instant Pipeline\n                                Growth for Indian Railway Manufacturing</h3>\n                        </div>\n\n                        <!-- Case 2 Card -->\n                        <div class=\"case-card\" onclick=\"showCase('case-2')\"\n                            style=\"background: linear-gradient(135deg, #E85D04 0%, #BF4200 60%, #7A2900 100%); background-size: cover; background-position: center; border: 1px solid #FFD6B0; border-radius: 16px; padding: 48px; min-height: 400px; display: flex; flex-direction: column; cursor: pointer; color: #fff; transition: transform 0.2s, box-shadow 0.2s;\"\n                            onmouseenter=\"this.style.transform='translateY(-6px)'; this.style.boxShadow='0 12px 30px rgba(0,0,0,0.15)';\"\n                            onmouseleave=\"this.style.transform='none'; this.style.boxShadow='none';\">\n                            <div\n                                style=\"min-height: 60px; display: flex; align-items: center; gap: 16px; margin-bottom: 24px;\">\n                                <span\n                                    style=\"font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 1px; text-transform: uppercase;\">FDI\n                                    & Global Investment Consulting</span>\n                            </div>\n                            <h3 style=\"font-size: 28px; font-weight: 700; line-height: 1.3; color: #fff;\">How AI Workers Are\n                                Simplifying Foreign Direct Investment for Global Businesses</h3>\n                        </div>\n\n                    </div>\n                </div>\n            </section>\n        </div>\n\n    </main>\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 = false;\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        <script>\n        function showCase(caseId) {\n            document.getElementById('grid-view').style.display = 'none';\n            document.getElementById('detail-view').style.display = 'block';\n\n            // Hide all details\n            document.querySelectorAll('.case-detail').forEach(el => {\n                el.style.display = 'none';\n            });\n\n            // Show the specific case detail\n            document.getElementById(caseId).style.display = 'block';\n\n            // Scroll to top\n            window.scrollTo({ top: 0, behavior: 'instant' });\n        }\n\n        function showGrid() {\n            document.getElementById('detail-view').style.display = 'none';\n            document.getElementById('grid-view').style.display = 'block';\n\n            // Hide all details\n            document.querySelectorAll('.case-detail').forEach(el => {\n                el.style.display = 'none';\n            });\n\n            window.scrollTo({ top: 0, behavior: 'instant' });\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=\"pBNfHqQmSINi0xjGbHSXrpnPeZg4fzAKziGydiJq\" 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":"cases","uri":"/cases","action":"App\\Http\\Controllers\\HomeController@cases","actionSource":{"file":"/home/crescendo/public_html/muralworksai.com/app/Http/Controllers/HomeController.php","line":31}},"renderSource":null,"componentPath":null}