{"id":1057,"date":"2026-03-31T11:35:29","date_gmt":"2026-03-31T03:35:29","guid":{"rendered":"https:\/\/www.lucas-admedia.com\/?page_id=1057"},"modified":"2026-04-20T12:34:56","modified_gmt":"2026-04-20T04:34:56","slug":"case-studies","status":"publish","type":"page","link":"https:\/\/www.lucas-admedia.com\/index.php\/case-studies\/","title":{"rendered":"Case Studies"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1057\" class=\"elementor elementor-1057\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c845e1 e-con-full e-flex e-con e-parent\" data-id=\"2c845e1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0be21f8 elementor-widget elementor-widget-heading\" data-id=\"0be21f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Execution That Produces Measurable Outcomes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f3015f3 e-con-full e-flex e-con e-child\" data-id=\"f3015f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-21aacdf e-con-full e-flex e-con e-child\" data-id=\"21aacdf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-135ed06 elementor-widget elementor-widget-heading\" data-id=\"135ed06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HOW TO READ THESE RESULTS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68306cf elementor-widget elementor-widget-text-editor\" data-id=\"68306cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Each case below shows:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ddaefb4 e-con-full e-flex e-con e-child\" data-id=\"ddaefb4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdee081 path-node elementor-widget elementor-widget-image-box\" data-id=\"bdee081\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">The starting problem<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9109e9e path-node elementor-widget elementor-widget-image-box\" data-id=\"9109e9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">The system we implemented<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2efd0c0 path-node elementor-widget elementor-widget-image-box\" data-id=\"2efd0c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">The measurable outcome<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e755d02 elementor-widget elementor-widget-text-editor\" data-id=\"e755d02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can filter by service, result type, or industry<\/p><p>to quickly find examples relevant to your business.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c4850c e-flex e-con-boxed e-con e-parent\" data-id=\"0c4850c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-299d18a elementor-widget elementor-widget-heading\" data-id=\"299d18a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">FILTER SYSTEM<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5290779 elementor-widget elementor-widget-html\" data-id=\"5290779\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <style>\r\n    \r\n\r\n        .filter-system-wrapper {\r\n            width: 100%;\r\n        font-family: \"Roboto\", Sans-serif;\r\n\r\n            border-radius: 12px;\r\n            \r\n            text-align: center; \/* \u6807\u9898\u5c45\u4e2d *\/\r\n        }\r\n\r\n      \r\n\r\n        .filter-section {\r\n            margin-bottom: 35px;\r\n            text-align: left; \/* \u7b5b\u9009\u6807\u9898\u5de6\u5bf9\u9f50 *\/\r\n        }\r\n\r\n        .filter-section:last-of-type {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .filter-title {\r\n                color: var(--primary-text-clr);\r\n    font-size: 20px;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    margin-bottom: 35px;\r\n    border-bottom: 1px solid rgb(223 223 223);\r\n    padding-bottom: 21px;\r\n        }\r\n\r\n        .filter-tags {\r\n            display: flex;\r\n            flex-wrap: wrap; \/* \u5141\u8bb8\u6807\u7b7e\u6362\u884c *\/\r\n            gap: 12px; \/* \u6807\u7b7e\u4e4b\u95f4\u7684\u95f4\u8ddd *\/\r\n        }\r\n\r\n        .pill-tag {\r\n            background-color: #8c7dff;\r\n    color: #fff;\r\n    padding: 10px 22px;\r\n    border-radius: 360px;\r\n            padding: 10px 22px;\r\n         \r\n            cursor: pointer;\r\n            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;\r\n            border: 1px solid transparent; \/* \u9ed8\u8ba4\u900f\u660e\u8fb9\u6846 *\/\r\n            font-size: 0.95em;\r\n            font-weight: 500;\r\n            user-select: none; \/* \u9632\u6b62\u6587\u672c\u88ab\u9009\u4e2d *\/\r\n            white-space: nowrap; \/* \u9632\u6b62\u6807\u7b7e\u6587\u672c\u6362\u884c *\/\r\n        }\r\n\r\n        .pill-tag:hover {\r\n            background-color: rgba(var(--accent-clr), 0.2); \/* \u60ac\u505c\u6548\u679c *\/\r\n            color: var(--primary-text-clr);\r\n            border-color: var(--accent-clr);\r\n        }\r\n\r\n        .pill-tag.selected {\r\n            background-color: var(--bg-clr-selected);\r\n            color: #fff;\r\n            border-color: var(--accent-clr);\r\n            box-shadow: 0 0 8px rgba(var(--accent-clr), 0.4);\r\n        }\r\n        \r\n        .pill-tag.selected:hover {\r\n            background-color: var(--bg-clr-selected); \/* \u9009\u4e2d\u72b6\u6001\u60ac\u505c\u4e0d\u53d8 *\/\r\n        }\r\n\r\n        \/* \u5e95\u90e8\u63d0\u793a *\/\r\n        p.tip {\r\n            font-size: 0.9em;\r\n            color: var(--secondary-text-clr);\r\n            margin-top: 40px;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* \u54cd\u5e94\u5f0f\u8c03\u6574 *\/\r\n        @media (max-width: 768px) {\r\n            .filter-system-wrapper {\r\n                padding: 20px;\r\n            }\r\n            h2.main-title {\r\n                font-size: 1.8em;\r\n            }\r\n            .filter-title {\r\n                font-size: 1.1em;\r\n            }\r\n            .pill-tag {\r\n                padding: 8px 18px;\r\n                font-size: 0.9em;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"filter-system-wrapper\">\r\n       \r\n\r\n        <div class=\"filter-section\">\r\n            <h3 class=\"filter-title\">Filter by Service<\/h3>\r\n            <div class=\"filter-tags\" data-filter-group=\"services\">\r\n                <span class=\"pill-tag\" data-value=\"full-funnel-growth\">Full-Funnel Growth<\/span>\r\n                <span class=\"pill-tag\" data-value=\"video-production\">Video Production<\/span>\r\n                <span class=\"pill-tag\" data-value=\"social-growth\">Social Growth<\/span>\r\n                <span class=\"pill-tag\" data-value=\"tiktok-commerce\">TikTok Commerce<\/span>\r\n                <span class=\"pill-tag\" data-value=\"sell-first-websites\">Sell-First Websites<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"filter-section\">\r\n            <h3 class=\"filter-title\">Filter by Outcome<\/h3>\r\n            <div class=\"filter-tags\" data-filter-group=\"outcomes\">\r\n                <span class=\"pill-tag\" data-value=\"revenue-growth\">Revenue Growth<\/span>\r\n                <span class=\"pill-tag\" data-value=\"conversion-increase\">Conversion Increase<\/span>\r\n                <span class=\"pill-tag\" data-value=\"cac-reduction\">CAC Reduction<\/span>\r\n                <span class=\"pill-tag\" data-value=\"lead-generation\">Lead Generation<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"filter-section\">\r\n            <h3 class=\"filter-title\">Filter by Industry <\/h3>\r\n            <div class=\"filter-tags\" data-filter-group=\"industries\">\r\n                <span class=\"pill-tag\" data-value=\"e-commerce\">E-commerce<\/span>\r\n                <span class=\"pill-tag\" data-value=\"dtc\">DTC (Direct-To-Consumer)<\/span>\r\n                <span class=\"pill-tag\" data-value=\"saas\">SaaS<\/span>\r\n                <span class=\"pill-tag\" data-value=\"local-business\">Local Business<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n      \r\n\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const filterTags = document.querySelectorAll('.pill-tag');\r\n\r\n            filterTags.forEach(tag => {\r\n                tag.addEventListener('click', () => {\r\n                    tag.classList.toggle('selected'); \/\/ \u5207\u6362 'selected' \u7c7b\r\n\r\n                    \/\/ \u5728\u8fd9\u91cc\u4f60\u53ef\u4ee5\u83b7\u53d6\u5f53\u524d\u6240\u6709\u9009\u4e2d\u6807\u7b7e\u7684\u503c\uff0c\u5e76\u8fdb\u884c\u540e\u7eed\u7684\u7b5b\u9009\u903b\u8f91\r\n                    \/\/ \u4f8b\u5982\uff0c\u5c06\u5176\u53d1\u9001\u5230\u540e\u7aef\u6216\u66f4\u65b0\u524d\u7aef\u7684\u6848\u4f8b\u5217\u8868\r\n\r\n                    const selectedServices = [];\r\n                    const selectedOutcomes = [];\r\n                    const selectedIndustries = [];\r\n\r\n                    document.querySelectorAll('.filter-tags[data-filter-group=\"services\"] .pill-tag.selected').forEach(sTag => {\r\n                        selectedServices.push(sTag.dataset.value);\r\n                    });\r\n                    document.querySelectorAll('.filter-tags[data-filter-group=\"outcomes\"] .pill-tag.selected').forEach(oTag => {\r\n                        selectedOutcomes.push(oTag.dataset.value);\r\n                    });\r\n                    document.querySelectorAll('.filter-tags[data-filter-group=\"industries\"] .pill-tag.selected').forEach(iTag => {\r\n                        selectedIndustries.push(iTag.dataset.value);\r\n                    });\r\n\r\n                    console.log('Selected Services:', selectedServices);\r\n                    console.log('Selected Outcomes:', selectedOutcomes);\r\n                    console.log('Selected Industries:', selectedIndustries);\r\n\r\n                    \/\/ \u793a\u4f8b\uff1a\u663e\u793a\u5f53\u524d\u9009\u4e2d\u7684\u6240\u6709\u6807\u7b7e\uff08\u4ec5\u7528\u4e8e\u6f14\u793a\uff09\r\n                    const allSelected = [];\r\n                    document.querySelectorAll('.pill-tag.selected').forEach(sTag => {\r\n                        allSelected.push(sTag.textContent);\r\n                    });\r\n                    const tipElement = document.querySelector('.tip');\r\n                    if (tipElement) {\r\n                         if (allSelected.length > 0) {\r\n                             tipElement.innerHTML = `\u2705 \u5df2\u9009\u4e2d\uff1a ${allSelected.join(' | ')}`;\r\n                             tipElement.style.color = var('--accent-clr');\r\n                         } else {\r\n                             tipElement.innerHTML = '\ud83d\udccc \u70b9\u51fb\u6807\u7b7e\u53ef\u591a\u9009\u6216\u53d6\u6d88\u9009\u62e9\u3002\u5f53\u524d\u9009\u4e2d\u7684\u7b5b\u9009\u6761\u4ef6\u5c06\u5e94\u7528\u4e8e\u6848\u4f8b\u5e93\u3002';\r\n                             tipElement.style.color = var('--secondary-text-clr');\r\n                         }\r\n                    }\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cd2905 e-flex e-con-boxed e-con e-parent\" data-id=\"0cd2905\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8be1366 elementor-widget elementor-widget-heading\" data-id=\"8be1366\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CASE GRID<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01eb263 elementor-widget elementor-widget-html\" data-id=\"01eb263\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <style>\r\n        \r\n\r\n        \/* \u6838\u5fc3\u5e03\u5c40\uff1a3\u5217\u7f51\u683c *\/\r\n        .cases-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 30px;\r\n            width: 100%;\r\n              font-family: \"Roboto\", Sans-serif;\r\n        }\r\n\r\n        \/* \u5361\u7247\u57fa\u7840\u6837\u5f0f *\/\r\n        .case-card {\r\n            background-color:#efefef;\r\n            border: 1px solid efefef;\r\n            border-radius: 16px;\r\n            padding: 32px 28px;\r\n            position: relative;\r\n            display: flex;\r\n            flex-direction: column;\r\n            min-height: 260px;\r\n            border-top: 1px solid #eee; \/* \u9876\u90e8\u5fae\u5149\u6548\u679c *\/\r\n            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); \/* \u987a\u6ed1\u7684\u7269\u7406\u7f13\u52a8 *\/\r\n            cursor: pointer;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* \u60ac\u505c\u65f6\u5361\u7247\u6574\u4f53\u4e0a\u6d6e\u5e76\u6cdb\u5149 *\/\r\n        .case-card:hover {\r\n            transform: translateY(-6px);\r\n            border-color: #8c7dff;\r\n            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(162, 155, 254, 0.2);\r\n        }\r\n\r\n        \/* \u9876\u90e8\u5185\u5bb9\uff1a\u6807\u9898\u4e0e\u8f6c\u5316\u6d41 *\/\r\n        .card-header {\r\n            flex-grow: 1; \/* \u5360\u636e\u4e0a\u65b9\u7a7a\u95f4\uff0c\u628a\u5e95\u90e8\u63a8\u4e0b\u53bb *\/\r\n        }\r\n\r\n        .case-title {\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            margin: 0 0 12px 0;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .case-flow {\r\n            font-size: 13px;\r\n            color: var(--secondary-text);\r\n            line-height: 1.6;\r\n            margin: 0;\r\n            font-weight: 500;\r\n        }\r\n\r\n        \/* \u7bad\u5934\u9ad8\u4eae\u989c\u8272 *\/\r\n        .case-flow span {\r\n            color: var(--accent-purple);\r\n            opacity: 0.7;\r\n            margin: 0 4px;\r\n        }\r\n\r\n        \/* \u5e95\u90e8\u4ea4\u4e92\u533a\u5bb9\u5668 *\/\r\n        .card-bottom-area {\r\n            position: relative;\r\n            height: 60px; \/* \u56fa\u5b9a\u9ad8\u5ea6\uff0c\u9884\u7559\u7ed9 Service \u80f6\u56ca\u548c Hover \u6570\u636e\u4ea4\u4e92 *\/\r\n            margin-top: 24px;\r\n        }\r\n\r\n        \/* \u9ed8\u8ba4\u663e\u793a\uff1aService \u6807\u7b7e (Pill) *\/\r\n        .services-list {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 8px;\r\n            position: absolute;\r\n            top: 0; left: 0; right: 0;\r\n            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n        }\r\n\r\n        .service-pill {\r\n                background-color: #8c7dff;\r\n    color: #fff;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n            padding: 6px 14px;\r\n            border-radius: 50px;\r\n            border: 1px solid rgba(255, 255, 255, 0.05);\r\n        }\r\n\r\n        \/* \u9690\u85cf\u663e\u793a\uff1a\u6838\u5fc3\u6570\u636e\u533a *\/\r\n        .case-data {\r\n            display: flex;\r\n            gap: 24px;\r\n            position: absolute;\r\n            bottom: 0px; left: 0; right: 0;\r\n            opacity: 0;\r\n            transform: translateY(20px); \/* \u521d\u59cb\u72b6\u6001\u9760\u4e0b\u5e76\u900f\u660e *\/\r\n            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n        }\r\n\r\n        .data-item {\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .data-num {\r\n            font-size: 28px;\r\n            font-weight: 800;\r\n            color: #8c7dff;\r\n            line-height: 1.1;\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        .data-label {\r\n            font-size: 12px;\r\n            color: var(--primary-text);\r\n            font-weight: 500;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        \/* --- \u6838\u5fc3 Hover \u4ea4\u4e92\u52a8\u753b --- *\/\r\n        \/* 1. \u60ac\u505c\u65f6\uff1a\u670d\u52a1\u6807\u7b7e\u6de1\u51fa\u5e76\u4e0a\u79fb *\/\r\n        .case-card:hover .services-list {\r\n            opacity: 0;\r\n            transform: translateY(-15px);\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* 2. \u60ac\u505c\u65f6\uff1a\u6570\u636e\u4ece\u4e0b\u65b9\u6ed1\u5165\u5e76\u663e\u73b0 *\/\r\n        .case-card:hover .case-data {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* \u54cd\u5e94\u5f0f\uff1a\u5e73\u677f\u53d82\u5217\uff0c\u624b\u673a\u53d81\u5217 *\/\r\n        @media (max-width: 992px) {\r\n            .cases-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n        @media (max-width: 600px) {\r\n            .cases-grid { grid-template-columns: 1fr; }\r\n            .case-card { min-height: 240px; padding: 24px; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cases-grid\">\r\n\r\n        <!-- Case 1 -->\r\n        <div class=\"case-card\">\r\n            <div class=\"card-header\">\r\n                <h3 class=\"case-title\">DTC Water Bottle Brand<\/h3>\r\n                <p class=\"case-flow\">TikTok <span>\u2192<\/span> Private Community <span>\u2192<\/span> Email <span>\u2192<\/span> Checkout<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"card-bottom-area\">\r\n                <!-- \u9ed8\u8ba4\u6001\uff1a\u4f7f\u7528\u7684\u670d\u52a1 -->\r\n                <div class=\"services-list\">\r\n                    <span class=\"service-pill\">Growth System<\/span>\r\n                    <span class=\"service-pill\">Social<\/span>\r\n                    <span class=\"service-pill\">Funnel<\/span>\r\n                <\/div>\r\n                <!-- \u60ac\u505c\u6001\uff1a\u6838\u5fc3\u6570\u636e -->\r\n                <div class=\"case-data\">\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">+210%<\/span>\r\n                        <span class=\"data-label\">Conversion Increase<\/span>\r\n                    <\/div>\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">-32%<\/span>\r\n                        <span class=\"data-label\">CAC<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Case 2 -->\r\n        <div class=\"case-card\">\r\n            <div class=\"card-header\">\r\n                <h3 class=\"case-title\">E-commerce Fashion Brand<\/h3>\r\n                <p class=\"case-flow\">Short-form content <span>\u2192<\/span> Landing page <span>\u2192<\/span> Checkout<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"card-bottom-area\">\r\n                <div class=\"services-list\">\r\n                    <span class=\"service-pill\">Social Growth<\/span>\r\n                    <span class=\"service-pill\">Website<\/span>\r\n                <\/div>\r\n                <div class=\"case-data\">\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">+180%<\/span>\r\n                        <span class=\"data-label\">Leads<\/span>\r\n                    <\/div>\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">3x<\/span>\r\n                        <span class=\"data-label\">Conversion Rate<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Case 3 -->\r\n        <div class=\"case-card\">\r\n            <div class=\"card-header\">\r\n                <h3 class=\"case-title\">Luggage Brand<\/h3>\r\n                <p class=\"case-flow\">Creator videos + TikTok Live<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"card-bottom-area\">\r\n                <div class=\"services-list\">\r\n                    <span class=\"service-pill\">TikTok Commerce<\/span>\r\n                <\/div>\r\n                <div class=\"case-data\">\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">$50K+<\/span>\r\n                        <span class=\"data-label\">Revenue Per Session<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Case 4 -->\r\n        <div class=\"case-card\">\r\n            <div class=\"card-header\">\r\n                <h3 class=\"case-title\">DTC Product Launch<\/h3>\r\n                <p class=\"case-flow\">Commercial video <span>\u2192<\/span> Ads <span>\u2192<\/span> Funnel<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"card-bottom-area\">\r\n                <div class=\"services-list\">\r\n                    <span class=\"service-pill\">Video Production<\/span>\r\n                    <span class=\"service-pill\">Ads<\/span>\r\n                <\/div>\r\n                <div class=\"case-data\">\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">40+<\/span>\r\n                        <span class=\"data-label\">Assets Created<\/span>\r\n                    <\/div>\r\n                    <div class=\"data-item\">\r\n                        <span class=\"data-num\">3 Mos<\/span>\r\n                        <span class=\"data-label\">Campaign Support<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-272c869 e-flex e-con-boxed e-con e-parent\" data-id=\"272c869\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c57e997 elementor-widget elementor-widget-heading\" data-id=\"c57e997\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SERVICE-BASED GROUPING<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df809fd elementor-widget elementor-widget-heading\" data-id=\"df809fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Revenue Engine\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-503489f elementor-widget elementor-widget-html\" data-id=\"503489f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"UNIQUE-scrolly-container\">\r\n    \r\n    <!-- \u5de6\u4fa7\uff1a\u5438\u9876\u624b\u673a -->\r\n    <div class=\"UNIQUE-left-sticky\">\r\n        <div class=\"UNIQUE-phone-frame\">\r\n            <div class=\"UNIQUE-notch\"><\/div>\r\n            <div class=\"UNIQUE-phone-screen\">\r\n                <!-- \uff01\uff01\uff0112\u5c4f\u6eda\u52a8\u8f68\u9053 \uff01\uff01\uff01 -->\r\n                <div class=\"UNIQUE-phone-inner-content\" id=\"js-scroll-engine-track\">\r\n                    \r\n                    <!-- \u3010\u7b2c\u4e00\u7ec4\uff1aStep 1 - 3\u5f20\u56fe\u3011 -->\r\n                    <div class=\"UNIQUE-mockup-ui ui-1\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/\u56fe\u72471-1.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-1\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/\u56fe\u72472-1.png\"><\/div><\/div>\r\n                    \r\n                    <div class=\"UNIQUE-mockup-ui ui-1\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/03\/\u56fe\u72473-1.png\"><\/div><\/div>\r\n\r\n                    <!-- \u3010\u7b2c\u4e8c\u7ec4\uff1aStep 2 - 4\u5f20\u56fe\u3011 -->\r\n                    <div class=\"UNIQUE-mockup-ui ui-2\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72473.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-2\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72474.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-2\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72475.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-2\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72476-1.png\"><\/div><\/div>\r\n\r\n                    <!-- \u3010\u7b2c\u4e09\u7ec4\uff1aStep 3 - 4\u5f20\u56fe\u3011 -->\r\n                    <div class=\"UNIQUE-mockup-ui ui-3\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72477-1.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-3\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72478-1.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-3\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u72479-1.png\"><\/div><\/div>\r\n                    <div class=\"UNIQUE-mockup-ui ui-3\"><div class=\"UNIQUE-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724710-1.png\"><\/div><\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u53f3\u4fa7\uff1a\u6eda\u52a8\u7684\u6587\u672c\u533a (\u517111\u6bb5) -->\r\n    <div class=\"UNIQUE-right-scroll\">\r\n        <!-- Step 1 \u7684\u6587\u5b57\u91cd\u590d 3 \u6b21 -->\r\n        <div class=\"UNIQUE-text-step\" data-index=\"0\">\r\n            <div class=\"UNIQUE-step-num\">STEP 1<\/div>\r\n            <p><b>@Sumi Lash<\/b><br> A U.S. lash brand chain with 10+ offline stores and hundreds of trainees through its academy.<br><br>\r\n\r\n\r\n\r\nWe provide comprehensive services that integrate social media and website strategies, designed to drive measurable online-to-offline (O2O) conversions and seamlessly connect every campaign to tangible business results.\r\n<\/p>\r\n<a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"1\">\r\n             <p><b>@Sumi Lash<\/b><br> A U.S. lash brand chain with 10+ offline stores and hundreds of trainees through its academy.<br><br>\r\n\r\n\r\n\r\nWe provide comprehensive services that integrate social media and website strategies, designed to drive measurable online-to-offline (O2O) conversions and seamlessly connect every campaign to tangible business results.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"2\">\r\n              <p><b>@Sumi Lash<\/b><br> A U.S. lash brand chain with 10+ offline stores and hundreds of trainees through its academy.<br><br>\r\n\r\n\r\n\r\nWe provide comprehensive services that integrate social media and website strategies, designed to drive measurable online-to-offline (O2O) conversions and seamlessly connect every campaign to tangible business results.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        \r\n\r\n        <!-- Step 2 \u7684\u6587\u5b57\u91cd\u590d 4 \u6b21 -->\r\n        <div class=\"UNIQUE-text-step\" data-index=\"3\">\r\n            <p><b>@parrot.UNCLE \u2013<\/b><br>\r\n\r\nA Los Angeles\u2013based online retailer specializing in lighting and home d\u00e9cor. Since joining TikTok in March 2023, we have supported end-to-end collaboration from content strategy to production, with simultaneous cross-platform promotion on TikTok and Facebook.\u201d\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"4\">\r\n           <p><b>@parrot.UNCLE \u2013<\/b><br>\r\n\r\nA Los Angeles\u2013based online retailer specializing in lighting and home d\u00e9cor. Since joining TikTok in March 2023, we have supported end-to-end collaboration from content strategy to production, with simultaneous cross-platform promotion on TikTok and Facebook.\u201d\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"5\">\r\n            <p><b>@parrot.UNCLE \u2013<\/b><br>\r\n\r\nA Los Angeles\u2013based online retailer specializing in lighting and home d\u00e9cor. Since joining TikTok in March 2023, we have supported end-to-end collaboration from content strategy to production, with simultaneous cross-platform promotion on TikTok and Facebook.\u201d\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"6\">\r\n            <p><b>@parrot.UNCLE \u2013<\/b><br>\r\n\r\nA Los Angeles\u2013based online retailer specializing in lighting and home d\u00e9cor. Since joining TikTok in March 2023, we have supported end-to-end collaboration from content strategy to production, with simultaneous cross-platform promotion on TikTok and Facebook.\u201d\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- Step 3 \u7684\u6587\u5b57\u91cd\u590d 4 \u6b21 -->\r\n        <div class=\"UNIQUE-text-step\" data-index=\"7\">\r\n            <p><b>@vgo_beauty \u2013<\/b><br> An emerging skincare brand with multiple categories consistently exceeding $10K in monthly sales, and total TikTok Shop revenue reaching $378.1K+, demonstrating strong growth momentum.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"8\">\r\n            <p><b>@vgo_beauty \u2013<\/b><br> An emerging skincare brand with multiple categories consistently exceeding $10K in monthly sales, and total TikTok Shop revenue reaching $378.1K+, demonstrating strong growth momentum.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"9\">\r\n             <p><b>@vgo_beauty \u2013<\/b><br> An emerging skincare brand with multiple categories consistently exceeding $10K in monthly sales, and total TikTok Shop revenue reaching $378.1K+, demonstrating strong growth momentum.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"UNIQUE-text-step\" data-index=\"10\">\r\n             <p><b>@vgo_beauty \u2013<\/b><br> An emerging skincare brand with multiple categories consistently exceeding $10K in monthly sales, and total TikTok Shop revenue reaching $378.1K+, demonstrating strong growth momentum.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* ================= \u6837\u5f0f\u4fee\u6b63 ================= *\/\r\n    .UNIQUE-scrolly-container { display: flex; position: relative; max-width: 1200px; margin: 0 auto; }\r\n\r\n    .UNIQUE-left-sticky {\r\n        width: 50%; height: 100vh; position: sticky; top: 0; \r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n\r\n    .UNIQUE-phone-frame {\r\n        width: 320px; height: 650px; background-color: #111; border-radius: 45px;\r\n        box-shadow: 0 0 0 10px #27272A; overflow: hidden; position: relative;\r\n    }\r\n\r\n    .UNIQUE-phone-screen { width: 100%; height: 100%; overflow: hidden; background: #fff; }\r\n\r\n    \/* [\u6838\u5fc3] 12\u5c4f\u603b\u9ad8\u5ea6\u4e3a 1200% *\/\r\n    .UNIQUE-phone-inner-content {\r\n        width: 100%;\r\n        height: 1100%; \r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .yyfw{\r\n            background-color: #8C7DFF;\r\n    width: 140px;\r\n    text-align: center;\r\n    color: white;\r\n    border-radius: 360px;\r\n    line-height: 40px;\r\n    margin-top: 25px;\r\n    }\r\n.UNIQUE-text-step p{\r\n    font-weight: 300;\r\n}\r\n.UNIQUE-text-step p b{\r\n    font-weight: 600;\r\n}\r\n    \/* [\u6838\u5fc3] \u6bcf\u4e00\u5c4f\u5360 1\/12 *\/\r\n    .UNIQUE-mockup-ui {\r\n        width: 100%;\r\n        height: calc(100% \/ 11); \r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* \u4e0d\u540c\u7684\u7ec4\u80cc\u666f\u8272 *\/\r\n    .ui-1 { background: linear-gradient(135deg, #F8FAFC, #E2E8F0); }\r\n    .ui-2 { background: linear-gradient(135deg, #1E293B, #0F172A); }\r\n    .ui-3 { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }\r\n\r\n    .UNIQUE-ui-box { width: 100%; text-align: center;padding-top:60px; }\r\n    .UNIQUE-ui-box img { \r\n        width: 100%; \r\n        height: auto; \r\n        max-height: 577px; \r\n        object-fit: cover; \r\n        border-radius: 12px;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n        \r\n    }\r\n.UNIQUE-step-num {\r\n    font-size: 1.1rem;\r\n    color: #3B82F6;\r\n    font-weight: 700;\r\n    margin-bottom: 8px;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n}\r\n    .UNIQUE-right-scroll { width: 50%; }\r\n    .UNIQUE-text-step {\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.1;\r\n        transform: translateY(0); \/* \u79fb\u9664 transform\uff0c\u53ea\u9760 opacity \u53d8\u5316 *\/\r\n        transition: all 0.5s;\r\n        padding-left: 50px;\r\n    }\r\n    .UNIQUE-text-step.active { opacity: 1; transform: scale(1.05); }\r\n\r\n    \/* \u79fb\u52a8\u7aef\u9002\u914d *\/\r\n    @media (max-width: 768px) {\r\n        .UNIQUE-scrolly-container { flex-direction: column; }\r\n        .UNIQUE-left-sticky { width: 100%; height: 40vh; top: 0; z-index: 100; background: #fff; }\r\n        .UNIQUE-phone-frame { transform: scale(0.5); transform-origin: center; margin-top: -100px; }\r\n        .UNIQUE-right-scroll { width: 100%; padding: 0 20px; }\r\n        .UNIQUE-text-step { height: 80vh; text-align: center; padding-left: 0; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        const textNodes = document.querySelectorAll('.UNIQUE-text-step');\r\n        const slideTrack = document.getElementById('js-scroll-engine-track');\r\n\r\n        if (!textNodes.length || !slideTrack) return;\r\n\r\n        const observerConfig = {\r\n            rootMargin: \"-45% 0px -45% 0px\", \/\/ \u66f4\u52a0\u7cbe\u51c6\u7684\u4e2d\u5fc3\u89e6\u53d1\r\n            threshold: 0\r\n        };\r\n\r\n        const intersectionCallback = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    textNodes.forEach(node => node.classList.remove('active'));\r\n                    entry.target.classList.add('active');\r\n\r\n                    let targetIndex = parseInt(entry.target.getAttribute('data-index') || \"0\", 10);\r\n                    \r\n                    \/\/ \u3010\u5173\u952e\u8ba1\u7b97\u3011\u603b\u5171\u670911\u5f20\u56fe\uff0c\u6bcf\u5f20\u5360 100\/11 \u2248 9.09%\r\n                    let scrollPercentage = targetIndex * -(100 \/ 11);\r\n                    \r\n                    slideTrack.style.transform = `translateY(${scrollPercentage}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        const scrollRadar = new IntersectionObserver(intersectionCallback, observerConfig);\r\n        textNodes.forEach(node => { scrollRadar.observe(node); });\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-939d3bf elementor-widget elementor-widget-heading\" data-id=\"939d3bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Video Production Cases<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36e8ecf elementor-widget elementor-widget-html\" data-id=\"36e8ecf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* 1. \u6a21\u6001\u6846\u57fa\u7840\u6837\u5f0f *\/\r\n#custom-video-modal {\r\n    position: fixed;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(0.85);\r\n    width: 600px; \/* \u5f39\u7a97\u5bbd\u5ea6\uff0c\u53ef\u6839\u636e\u9700\u8981\u8c03\u6574 *\/\r\n    max-width: 90vw;\r\n    background: #000;\r\n    border-radius: 12px;\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.5);\r\n    z-index: 99999;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    overflow: hidden;\r\n    border: 1px solid #333;\r\n    pointer-events: auto; \/* \u4fdd\u8bc1\u6a21\u6001\u6846\u53ef\u4ee5\u54cd\u5e94\u9f20\u6807\u4e8b\u4ef6 *\/\r\n}\r\n\r\n\/* 2. \u6a21\u6001\u6846\u6fc0\u6d3b\u72b6\u6001 *\/\r\n#custom-video-modal.is-active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translate(-50%, -50%) scale(1);\r\n}\r\n\r\n\/* 3. \u89c6\u9891\u6837\u5f0f *\/\r\n#custom-video-modal video {\r\n    width: 100%;\r\n    display: block;\r\n    aspect-ratio: 16 \/ 9;\r\n    object-fit: cover;\r\n}\r\n\r\n\/* 4. \u6587\u5b57\u63cf\u8ff0\u533a *\/\r\n.modal-info-panel {\r\n    padding: 20px;\r\n    background: linear-gradient(to bottom, #1a1a1a, #000);\r\n    color: #fff;\r\n}\r\n\r\n.modal-brand-name {\r\n    font-size: 20px;\r\n    font-weight: bold;\r\n    margin-bottom: 8px;\r\n    color: #fff;\r\n}\r\n\r\n.modal-brand-desc {\r\n    font-size: 14px;\r\n    color: #bbb;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* 5. \u906e\u7f69\u5c42\uff08\u5df2\u4fee\u590d\u95ea\u70c1\u7684\u6838\u5fc3\u70b9\uff09 *\/\r\n#modal-overlay-bg {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0,0,0,0.6);\r\n    backdrop-filter: blur(5px);\r\n    z-index: 99998;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 0.3s;\r\n    pointer-events: none; \/* \u3010\u5173\u952e\u4fee\u6539\u3011\u8ba9\u906e\u7f69\u5c42\u4e0d\u906e\u6321\u5e95\u5c42\u9f20\u6807\uff0c\u4ece\u6839\u6e90\u89e3\u51b3\u5faa\u73af\u95ea\u70c1 *\/\r\n}\r\n#modal-overlay-bg.is-active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n\r\n\/* 6. \u6307\u793a\u5149\u6807\uff0c\u63d0\u793a\u53ef\u4ee5 hover *\/\r\n.swiper-slide {\r\n    cursor: zoom-in;\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ \u54c1\u724c\u914d\u7f6e\u4fe1\u606f\r\n    const brandConfig = {\r\n        \"\u89c6\u98911.mp4\": { title: \"\u54c1\u724c\uff1a\u96c5\u81f4\u751f\u6d3b (Brand A)\", desc: \"\u901a\u8fc7\u9886\u5148\u7684\u5de5\u827a\u6280\u672f\uff0c\u4e3a\u60a8\u6253\u9020\u6781\u81f4\u7684\u5c45\u5bb6\u5ba1\u7f8e\u4f53\u9a8c\u3002\" },\r\n        \"\u89c6\u98912.mp4\": { title: \"\u54c1\u724c\uff1a\u672a\u6765\u79d1\u6280 (Brand B)\", desc: \"\u63a2\u7d22\u4eba\u5de5\u667a\u80fd\u4e0e\u786c\u4ef6\u7684\u5b8c\u7f8e\u878d\u5408\uff0c\u5b9a\u4e49\u4e0b\u4e00\u4ee3\u667a\u6167\u65b9\u6848\u3002\" },\r\n        \"\u89c6\u98913.mp4\": { title: \"\u54c1\u724c\uff1a\u6781\u7b80\u7f8e\u5b66 (Brand C)\", desc: \"\u51cf\u6cd5\u8bbe\u8ba1\uff0c\u52a0\u6cd5\u751f\u6d3b\u3002\u6211\u4eec\u8ffd\u6c42\u6bcf\u4e00\u4e2a\u50cf\u7d20\u7684\u7cbe\u51c6\u4e0e\u4f18\u96c5\u3002\" },\r\n        \"\u9ed8\u8ba4\": { title: \"\u7cbe\u9009\u54c1\u724c\u63a8\u8350\", desc: \"\u70b9\u51fb\u6216\u60ac\u505c\u4e86\u89e3\u66f4\u591a\u5173\u4e8e\u8be5\u54c1\u724c\u7684\u80cc\u540e\u7684\u6545\u4e8b\u4e0e\u6838\u5fc3\u4ef7\u503c\u3002\" }\r\n    };\r\n\r\n    \/\/ 1. \u521b\u5efa\u6a21\u6001\u6846 DOM \u7ed3\u6784\uff08\u53bb\u6389\u4e86 muted \u6539\u4e3a controls\uff0c\u5141\u8bb8\u8c03\u6574\u58f0\u97f3\uff09\r\n    const modalHtml = `\r\n        <div id=\"modal-overlay-bg\"><\/div>\r\n        <div id=\"custom-video-modal\">\r\n            <video id=\"modal-video-player\" controls playsinline><\/video>\r\n            <div class=\"modal-info-panel\">\r\n                <div class=\"modal-brand-name\" id=\"modal-title\"><\/div>\r\n                <div class=\"modal-brand-desc\" id=\"modal-desc\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    `;\r\n    document.body.insertAdjacentHTML('beforeend', modalHtml);\r\n\r\n    const modal = document.getElementById('custom-video-modal');\r\n    const overlay = document.getElementById('modal-overlay-bg');\r\n    const player = document.getElementById('modal-video-player');\r\n    const title = document.getElementById('modal-title');\r\n    const desc = document.getElementById('modal-desc');\r\n\r\n    let hideTimeout;\r\n    let currentSrc = \"\";\r\n\r\n    \/\/ 2. \u6838\u5fc3\uff1a\u663e\u793a\u5f39\u7a97\u51fd\u6570\r\n    function showModal(src, info) {\r\n        clearTimeout(hideTimeout);\r\n        \r\n        \/\/ \u9632\u6b62\u540c\u4e00\u4e2a\u89c6\u9891\u91cd\u590d\u52a0\u8f7d\u95ea\u70c1\r\n        if (currentSrc !== src) {\r\n            player.src = src;\r\n            currentSrc = src;\r\n            title.innerText = info.title;\r\n            desc.innerText = info.desc;\r\n        }\r\n        \r\n        modal.classList.add('is-active');\r\n        overlay.classList.add('is-active');\r\n        \r\n        \/\/ \u3010\u5173\u952e\u4fee\u6539\uff1a\u58f0\u97f3\u4e0e\u81ea\u52a8\u64ad\u653e\u5904\u7406\u3011\r\n        player.muted = false; \/\/ \u5c1d\u8bd5\u5e26\u6709\u58f0\u97f3\u64ad\u653e\r\n        const playPromise = player.play();\r\n        \r\n        if (playPromise !== undefined) {\r\n            playPromise.catch(error => {\r\n                \/\/ \u5982\u679c\u6d4f\u89c8\u5668\u62e6\u622a\u4e86\u5e26\u6709\u58f0\u97f3\u7684\u81ea\u52a8\u64ad\u653e\uff0c\u5219\u964d\u7ea7\u4e3a\u9759\u97f3\u81ea\u52a8\u64ad\u653e\r\n                console.log(\"\u6d4f\u89c8\u5668\u9650\u5236\u4e86\u6709\u58f0\u81ea\u52a8\u64ad\u653e\uff0c\u5df2\u81ea\u52a8\u9759\u97f3\u3002\u7528\u6237\u9700\u624b\u52a8\u5f00\u542f\u58f0\u97f3\u3002\");\r\n                player.muted = true;\r\n                player.play();\r\n            });\r\n        }\r\n    }\r\n\r\n    \/\/ 3. \u6838\u5fc3\uff1a\u5173\u95ed\u5f39\u7a97\u51fd\u6570\r\n    function hideModal() {\r\n        \/\/ \u3010\u5173\u952e\u4fee\u6539\u3011\u5ef6\u8fdf\u65f6\u95f4\u6539\u4e3a300ms\u3002\u7ed9\u4e88\u9f20\u6807\u4ece\u5e7b\u706f\u7247\u79fb\u52a8\u5230\u5f39\u7a97\u4e0a\u7684\u8db3\u591f\u65f6\u95f4\uff0c\u907f\u514d\u4e2d\u95f4\u9636\u6bb5\u5173\u95ed\r\n        hideTimeout = setTimeout(() => {\r\n            modal.classList.remove('is-active');\r\n            overlay.classList.remove('is-active');\r\n            player.pause();\r\n            player.src = \"\";\r\n            currentSrc = \"\";\r\n        }, 300);\r\n    }\r\n\r\n    \/\/ 4. \u4e3a\u6bcf\u4e2a Swiper Slide \u7ed1\u5b9a\u60ac\u505c\u4e8b\u4ef6\r\n    const slides = document.querySelectorAll('.swiper-slide');\r\n    slides.forEach(slide => {\r\n        const video = slide.querySelector('video');\r\n        if (!video) return;\r\n\r\n        slide.addEventListener('mouseenter', function() {\r\n            const videoSrc = video.getAttribute('src');\r\n            const fileName = decodeURIComponent(videoSrc.split('\/').pop());\r\n            const info = brandConfig[fileName] || brandConfig[\"\u9ed8\u8ba4\"];\r\n            showModal(videoSrc, info);\r\n        });\r\n\r\n        slide.addEventListener('mouseleave', hideModal);\r\n    });\r\n\r\n    \/\/ 5. \u786e\u4fdd\u9f20\u6807\u5728\u6a21\u6001\u6846\u672c\u8eab\u65f6\uff0c\u6a21\u6001\u6846\u4e0d\u4f1a\u6d88\u5931\r\n    modal.addEventListener('mouseenter', () => clearTimeout(hideTimeout));\r\n    modal.addEventListener('mouseleave', hideModal); \/\/ \u79bb\u5f00\u653e\u5927\u7684\u89c6\u9891\uff0c\u6267\u884c\u5173\u95ed\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad73ff8 elementor-arrows-position-outside elementor-pagination-type-bullets elementor-pagination-position-outside elementor-widget elementor-widget-n-carousel\" data-id=\"ad73ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;carousel_items&quot;:[{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;9612403&quot;},{&quot;slide_title&quot;:&quot;Slide #2&quot;,&quot;_id&quot;:&quot;4723e69&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;cd769c3&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;2f19ed5&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;a400864&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;7254e05&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;190f224&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;bfdcb19&quot;}],&quot;slides_to_show&quot;:&quot;3&quot;,&quot;slides_to_show_tablet&quot;:&quot;2&quot;,&quot;slides_to_show_mobile&quot;:&quot;1&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;arrows&quot;:&quot;yes&quot;,&quot;pagination&quot;:&quot;bullets&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"1\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fdc9bc4 e-flex e-con-boxed e-con e-child\" data-id=\"fdc9bc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-377b06c elementor-widget elementor-widget-video\" data-id=\"377b06c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98911.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"2\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1456c28 e-flex e-con-boxed e-con e-child\" data-id=\"1456c28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12443b2 elementor-widget elementor-widget-video\" data-id=\"12443b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98913.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"3\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9f08f8e e-flex e-con-boxed e-con e-child\" data-id=\"9f08f8e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa6dc54 elementor-widget elementor-widget-video\" data-id=\"aa6dc54\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98914.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"4\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9ac64e e-flex e-con-boxed e-con e-child\" data-id=\"f9ac64e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-588e7de elementor-widget elementor-widget-video\" data-id=\"588e7de\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98915-2.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"5\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f35ed50 e-flex e-con-boxed e-con e-child\" data-id=\"f35ed50\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af03931 elementor-widget elementor-widget-video\" data-id=\"af03931\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98917.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"6\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9858e2e e-flex e-con-boxed e-con e-child\" data-id=\"9858e2e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb85af7 elementor-widget elementor-widget-video\" data-id=\"bb85af7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/03\/\u89c6\u98916.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"7\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"7 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-90ddf91 e-flex e-con-boxed e-con e-child\" data-id=\"90ddf91\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aebf7e1 elementor-widget elementor-widget-video\" data-id=\"aebf7e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/04\/\u89c6\u98911.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"8\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"8 of 8\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-907d3a7 e-flex e-con-boxed e-con e-child\" data-id=\"907d3a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b8b6db elementor-widget elementor-widget-video\" data-id=\"5b8b6db\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.lucas-admedia.com\/wp-content\/uploads\/2026\/04\/\u89c6\u98912.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\" aria-label=\"Previous\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t<\/div>\n\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\" aria-label=\"Next\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t<\/div>\n\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6136dc0 elementor-widget elementor-widget-heading\" data-id=\"6136dc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conversion-First Web<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1b56bf elementor-widget elementor-widget-html\" data-id=\"f1b56bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"web-scrolly-container\">\r\n    \r\n    <!-- \u53f3\u4fa7\uff1a\u9f20\u6807\u6eda\u52a8\u6587\u6848 -->\r\n    <div class=\"web-right-scroll\">\r\n\r\n        <!-- ===== \u7b2c\u4e00\u7ec4\u6587\u6848 (\u5bf9\u5e944\u5f20\u56fe) ===== -->\r\n        <div class=\"web-text-step\" data-index=\"0\">\r\n            <div class=\"web-step-num\">STEP 2<\/div>\r\n            <p><b>@LanySpace <\/b><br>California\u2019s Original Rug Brand, Featuring Artistic and Machine-Washable Designs.<br><br>\r\n\r\n\r\n\r\nOur TikTok content has reached 40K+ views, and Instagram has grown to 24K+ followers. By strategically leveraging multiple accounts across parenting, DIY, and home d\u00e9cor communities, we connected content directly to lead capture and bookings\u2014turning brand awareness into measurable conversions within a closed-loop marketing system.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"1\">\r\n            <p><b>@LanySpace <\/b><br>California\u2019s Original Rug Brand, Featuring Artistic and Machine-Washable Designs.<br><br>\r\n\r\n\r\n\r\nOur TikTok content has reached 40K+ views, and Instagram has grown to 24K+ followers. By strategically leveraging multiple accounts across parenting, DIY, and home d\u00e9cor communities, we connected content directly to lead capture and bookings\u2014turning brand awareness into measurable conversions within a closed-loop marketing system.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"2\">\r\n            <p><b>@LanySpace <\/b><br>California\u2019s Original Rug Brand, Featuring Artistic and Machine-Washable Designs.<br><br>\r\n\r\n\r\n\r\nOur TikTok content has reached 40K+ views, and Instagram has grown to 24K+ followers. By strategically leveraging multiple accounts across parenting, DIY, and home d\u00e9cor communities, we connected content directly to lead capture and bookings\u2014turning brand awareness into measurable conversions within a closed-loop marketing system.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"3\">\r\n            <p><b>@LanySpace <\/b><br>California\u2019s Original Rug Brand, Featuring Artistic and Machine-Washable Designs.<br><br>\r\n\r\n\r\n\r\nOur TikTok content has reached 40K+ views, and Instagram has grown to 24K+ followers. By strategically leveraging multiple accounts across parenting, DIY, and home d\u00e9cor communities, we connected content directly to lead capture and bookings\u2014turning brand awareness into measurable conversions within a closed-loop marketing system.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- ===== \u7b2c\u4e8c\u7ec4\u6587\u6848 (\u5bf9\u5e942\u5f20\u56fe) ===== -->\r\n        <div class=\"web-text-step\" data-index=\"4\">\r\n            \r\n            <p><b>@Lany Space TARGET<\/b><br>\r\n\r\nBeyond social media, we support brands in managing online stores for offline retail chains.\r\n\r\n            <\/p>                     \r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"5\">\r\n            <p><b>@Lany Space TARGET<\/b><br>\r\n\r\nBeyond social media, we support brands in managing online stores for offline retail chains.\r\n\r\n            <\/p>      <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>          \r\n        <\/div>\r\n\r\n        <!-- ===== \u7b2c\u4e09\u7ec4\u6587\u6848 (\u5bf9\u5e944\u5f20\u56fe) ===== -->\r\n        <div class=\"web-text-step\" data-index=\"6\">\r\n            \r\n            <p><b>@dommei Inc<\/b><br> Innovative backpack brand integrating toys, display, and storage in one.<br><br>\r\n\r\n\r\n\r\nTikTok account with 10K+ engaged followers and growing, paired with an Instagram audience of nearly 11K, consistently driving content seeding and parenting-focused campaign activation.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"7\">\r\n             <p><b>@dommei Inc<\/b><br> Innovative backpack brand integrating toys, display, and storage in one.<br><br>\r\n\r\n\r\n\r\nTikTok account with 10K+ engaged followers and growing, paired with an Instagram audience of nearly 11K, consistently driving content seeding and parenting-focused campaign activation.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"8\">\r\n             <p><b>@dommei Inc<\/b><br> Innovative backpack brand integrating toys, display, and storage in one.<br><br>\r\n\r\n\r\n\r\nTikTok account with 10K+ engaged followers and growing, paired with an Instagram audience of nearly 11K, consistently driving content seeding and parenting-focused campaign activation.\r\n\r\n            <\/p>\r\n        <\/div>\r\n        <div class=\"web-text-step\" data-index=\"9\">\r\n            <p><b>@dommei Inc<\/b><br> Innovative backpack brand integrating toys, display, and storage in one.<br><br>\r\n\r\n\r\n\r\nTikTok account with 10K+ engaged followers and growing, paired with an Instagram audience of nearly 11K, consistently driving content seeding and parenting-focused campaign activation.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n    \r\n    <!-- \u5de6\u4fa7\uff1a\u5438\u9876\u624b\u673a -->\r\n    <div class=\"web-left-sticky \">\r\n        <div class=\"web-phone-frame\">\r\n            <div class=\"web-notch\"><\/div>\r\n            <div class=\"web-phone-screen\">\r\n                <!-- \u8fd9\u4e2a\u957f\u56fe\u4f1a\u5728 JS \u7684\u63a7\u5236\u4e0b\u4e0a\u4e0b\u6ed1\u52a8 -->\r\n                <div class=\"web-phone-inner-content\" id=\"js-web-phone-scroller-track\">\r\n                    \r\n                    <!-- \u624b\u673a\u5185\u7684\u7b2c\u4e00\u7ec4 (4\u5f20\u56fe) -->\r\n                    <div class=\"web-mockup-ui web-ui-1\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724711-1.png\" alt=\"LanySpace Rug 1\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-1\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724712-1.png\" alt=\"LanySpace Rug 2\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-1\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724713-1.png\" alt=\"LanySpace Rug 3\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-1\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724714-1.png\" alt=\"LanySpace Rug 4\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- \u624b\u673a\u5185\u7684\u7b2c\u4e8c\u7ec4 (2\u5f20\u56fe) -->\r\n                    <div class=\"web-mockup-ui web-ui-2\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724715-1.png\" alt=\"LanySpace Website 1\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-2\">\r\n                        <div class=\"web-ui-box\">\r\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724716.png\" alt=\"LanySpace Website 2\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- \u624b\u673a\u5185\u7684\u7b2c\u4e09\u7ec4 (4\u5f20\u56fe) -->\r\n                    <div class=\"web-mockup-ui web-ui-3\">\r\n                       <div class=\"web-ui-box\">\r\n                             <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724718.png\" alt=\"dommei backpack 1\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-3\">\r\n                       <div class=\"web-ui-box\">\r\n                             <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724719.png\" alt=\"dommei backpack 2\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-3\">\r\n                       <div class=\"web-ui-box\">\r\n                             <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724720.png\" alt=\"dommei backpack 3\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"web-mockup-ui web-ui-3\">\r\n                       <div class=\"web-ui-box\">\r\n                             <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724721.png\" alt=\"dommei backpack 4\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ================= CSS \u6837\u5f0f\u90e8\u5206 ================= -->\r\n<style>\r\n    \/* [IMPORTANT]: Base scrolly container styles *\/\r\n    .web-scrolly-container {\r\n        display: flex;\r\n        position: relative;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    \/* ----- Left Sticky Phone Section ----- *\/\r\n    .web-left-sticky {\r\n        width: 50%;\r\n        height: 100vh; \/* Occupies full viewport height *\/\r\n        position: sticky; \/* Key: makes it sticky *\/\r\n        top: 0; \/* Sticks to the top of the viewport *\/\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 10; \/* Ensure it's above other content *\/\r\n    }\r\n\r\n    .web-phone-frame {\r\n        position: relative;\r\n        width: 320px;\r\n        height: 650px;\r\n        background-color: #111;\r\n        border-radius: 45px;\r\n        box-shadow: 0 0 0 10px #27272A, 0 0 0 12px #18181B, 0 30px 60px rgba(0,0,0,0.8);\r\n        overflow: hidden;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .web-notch {\r\n        position: absolute;\r\n        top: 12px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 120px;\r\n        height: 28px;\r\n        background-color: #000;\r\n        border-radius: 20px;\r\n        z-index: 20;\r\n    }\r\n\r\n    .web-phone-screen {\r\n        width: 100%;\r\n        height: 100%;\r\n        border-radius: 35px;\r\n        overflow: hidden; \r\n        position: relative;\r\n        background: #fff;\r\n    }\r\n\r\n    \/* [\u6838\u5fc3\u6539\u52a8]: \u56e0\u4e3a\u670910\u5c4f\uff0c\u6240\u4ee5\u603b\u9ad8\u5ea6\u4e3a 1000% *\/\r\n    .web-phone-inner-content {\r\n        width: 100%;\r\n        height: 1000%; \/* 10 images, each 100% of phone screen height *\/\r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .web-text-step p b{\r\n        font-weight: 600;\r\n    }\r\n    \/* [\u6838\u5fc3\u6539\u52a8]: \u6bcf\u5c4f\u5360\u6574\u4e2a\u5185\u90e8\u5bb9\u5668\u7684 1\/10 *\/\r\n    .web-mockup-ui {\r\n        width: 100%;\r\n        height: calc(100% \/ 10); \/* 10 screens, each takes 10% of total height *\/\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0; \/* Remove default padding to maximize image space *\/\r\n        box-sizing: border-box; \/* Include padding\/border in element's total width and height *\/\r\n    }\r\n\r\n    \/* Background gradients for different groups *\/\r\n    .web-mockup-ui.web-ui-1 { background: linear-gradient(135deg, #F8FAFC, #E2E8F0); }\r\n    .web-mockup-ui.web-ui-2 { background: linear-gradient(135deg, #1E293B, #0F172A); }\r\n    .web-mockup-ui.web-ui-3 { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }\r\n\r\n    \/* Image styling within the phone screen *\/\r\n    .web-ui-box {\r\n        width: 100%;\r\n        height: 100%; \/* Ensure box fills its parent *\/\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;    padding-top: 67px;\r\n    }\r\n    .web-ui-box img {\r\n        width: 100%; \/* Adjust image width to leave some padding *\/\r\n        height: 583px;\r\n        max-height: 583px; \/* Limit height to fit within screen with padding *\/\r\n        object-fit: cover; \/* Ensure full image is visible, scale down if larger *\/\r\n        border-radius: 8px; \/* Slightly rounded corners for images *\/\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.1); \/* Subtle shadow for images *\/\r\n    }\r\n\r\n    \/* ----- Right Scrolling Text Section ----- *\/\r\n    .web-right-scroll {\r\n        width: 50%;\r\n        padding: 0; \/* No horizontal padding for this container *\/\r\n    }\r\n\r\n    .web-text-step {\r\n        height: 100vh; \/* Each text step occupies full viewport height for scrolling trigger *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.2; \r\n        transform: translateY(0); \/* Reset initial transform *\/\r\n        transition: opacity 0.6s ease, transform 0.6s ease; \/* Smooth transition for active state *\/\r\n        max-width: 400px; \/* Limit text width *\/\r\n        padding-left: 50px; \/* Padding for text content *\/\r\n    }\r\n\r\n    \/* Active text step styles *\/\r\n    .web-text-step.active {\r\n        opacity: 1;\r\n        \/* transform: translateY(0); *\/ \/* Already 0, no change needed *\/\r\n    }\r\n\r\n    .web-step-num {\r\n        font-size: 1.1rem;\r\n        color: #3B82F6;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n        letter-spacing: 2px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .web-text-step h2 {\r\n        font-size: 2.2rem;\r\n        font-weight: 700;\r\n        margin-bottom: 15px;\r\n        line-height: 1.2;\r\n        color: #333;\r\n    }\r\n\r\n    .web-text-step p {\r\n        font-size: 1.05rem;\r\n        color: #555; \/* Slightly darker for better readability *\/\r\n        line-height: 1.6;   \r\n        font-weight: 300;\r\n    }\r\n\r\n    \/* ================= Responsive Adjustments (Mobile) ================= *\/\r\n    @media (max-width: 768px) {\r\n        .web-scrolly-container { \r\n            flex-direction: column; \r\n            padding: 0;\r\n        }\r\n\r\n        .web-left-sticky { \r\n            width: 100%; \r\n            height: 45vh; \/* Occupies upper half of screen *\/\r\n            top: 0; \r\n            align-items: center; \r\n            justify-content: center;\r\n            background: #fff; \/* Ensure background under sticky phone on scroll *\/\r\n        }\r\n\r\n        .web-phone-frame { \r\n            transform: scale(0.65); \/* Scale down phone for better fit *\/\r\n            transform-origin: center center; \/* Scale from center *\/\r\n            margin-top: -60px; \/* Adjust vertical position *\/\r\n            box-shadow: 0 0 0 8px #27272A, 0 0 0 10px #18181B, 0 20px 40px rgba(0,0,0,0.6); \/* Smaller shadow *\/\r\n        }\r\n\r\n        .web-right-scroll { \r\n            width: 100%; \r\n            padding: 0 20px; \r\n            z-index: 20; \r\n            margin-top: -10vh; \/* Pull text area up to reduce gap *\/\r\n        }\r\n\r\n        .web-text-step { \r\n            height: 80vh; \/* Adjust text step height for better mobile scrolling flow *\/\r\n            justify-content: flex-end; \/* Align text to bottom *\/\r\n            padding-bottom: 8vh; \/* Bottom padding to prevent text from touching screen edge *\/\r\n            align-items: center; \r\n            text-align: center; \r\n            max-width: 100%;\r\n            padding-left: 0;\r\n        }\r\n        .web-text-step h2 { font-size: 1.8rem; margin-bottom: 10px;}\r\n        .web-text-step p { font-size: 0.95rem; color: #666; } \r\n    }\r\n<\/style>\r\n\r\n<!-- ================= JavaScript for Scroll Interaction ================= -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        \/\/ Select all text steps using the new class name\r\n        const webTextSteps = document.querySelectorAll('.web-text-step');\r\n        \/\/ Select the phone content track using the new ID\r\n        const webPhoneTrack = document.getElementById('js-web-phone-scroller-track');\r\n\r\n        \/\/ Exit if elements are not found\r\n        if (!webTextSteps.length || !webPhoneTrack) return;\r\n\r\n        \/\/ Intersection Observer options for precise triggering\r\n        const webObserverOptions = {\r\n            rootMargin: \"-45% 0px -45% 0px\", \/\/ Trigger when 10% of element is in the middle of the viewport\r\n            threshold: 0 \/\/ Only needs to be visible to trigger\r\n        };\r\n\r\n        \/\/ Callback function for when elements intersect\r\n        const webIntersectionHandler = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    \/\/ Remove 'active' class from all text steps\r\n                    webTextSteps.forEach(step => step.classList.remove('active'));\r\n                    \/\/ Add 'active' class to the currently intersecting step\r\n                    entry.target.classList.add('active');\r\n\r\n                    \/\/ Get the data-index from the active text step\r\n                    const currentStepIndex = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                    \r\n                    \/\/ [\u6838\u5fc3\u6539\u52a8]: \u8ba1\u7b97\u6bcf\u5c4f\u7684\u767e\u5206\u6bd4\u504f\u79fb\u91cf\r\n                    \/\/ The total number of screens is based on the number of text steps,\r\n                    \/\/ which corresponds to the number of individual images (10 in this case).\r\n                    const totalScreens = webTextSteps.length; \/\/ This will dynamically be 10\r\n                    const slidePercentPerScreen = 100 \/ totalScreens;\r\n                    \r\n                    \/\/ Calculate the new transform Y percentage\r\n                    const scrollOffset = currentStepIndex * -slidePercentPerScreen;\r\n                    \r\n                    \/\/ Apply the smooth scroll transformation to the phone content\r\n                    webPhoneTrack.style.transform = `translateY(${scrollOffset}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        \/\/ Create a new Intersection Observer instance\r\n        const webVisualObserver = new IntersectionObserver(webIntersectionHandler, webObserverOptions);\r\n\r\n        \/\/ Observe each text step\r\n        webTextSteps.forEach(stepItem => {\r\n            webVisualObserver.observe(stepItem);\r\n        });\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1269ae4 elementor-widget elementor-widget-html\" data-id=\"1269ae4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"mac-scrolly-container\">\r\n  \r\n    \r\n    <!-- \u5de6\u4fa7\uff1a\u5438\u9876 Mac \u663e\u793a\u5668 -->\r\n    <div class=\"mac-left-sticky\">\r\n        <div class=\"mac-display-frame\">\r\n            <div class=\"mac-top-bar\"><\/div>\r\n            <div class=\"mac-screen\">\r\n                <!-- Mac \u5185\u90e8\u5185\u5bb9\u533a\u57df\uff0c\u56fe\u7247\u4f1a\u5728\u6b64\u6ed1\u52a8 -->\r\n                <div class=\"mac-screen-content\" id=\"js-mac-scroller-track\">\r\n                    \r\n                    <!-- \u4f60\u7684\u73b0\u6709\u56fe\u7247 (4+2+4=10\u5f20) -->\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/1.png\" alt=\"Mac Display 1\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/2.png\" alt=\"Mac Display 2\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/3.png\" alt=\"Mac Display 3\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/4.png\" alt=\"Mac Display 4\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/5.png\" alt=\"Mac Display 5\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/6.png\" alt=\"Mac Display 6\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/7.png\" alt=\"Mac Display 7\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/8.png\" alt=\"Mac Display 8\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/9.png\" alt=\"Mac Display 9\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/10.png\" alt=\"Mac Display 10\"><\/div><\/div>\r\n\r\n                    <!-- ===== \u8865\u5145\u7684\u56fe\u7247\u5360\u4f4d\u7b26\uff0c\u76f4\u523030\u5f20\u3002\u8bf7\u66ff\u6362\u4e3a\u5b9e\u9645\u7684\u56fe\u7247\u94fe\u63a5 ===== -->\r\n                    <!-- \u5faa\u73af\u4f7f\u7528\u524d3\u7ec4\u56fe\u7247\uff0c\u517130\u5f20 -->\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/11.png\" alt=\"Mac Display 11\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/12.png\" alt=\"Mac Display 12\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/13.png\" alt=\"Mac Display 13\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/14.png\" alt=\"Mac Display 14\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/15.png\" alt=\"Mac Display 15\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/16.png\" alt=\"Mac Display 16\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/17.png\" alt=\"Mac Display 17\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/18.png\" alt=\"Mac Display 18\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/19.png\" alt=\"Mac Display 19\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/20.png\" alt=\"Mac Display 20\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/21.png\" alt=\"Mac Display 21\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/22.png\" alt=\"Mac Display 22\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/23.png\" alt=\"Mac Display 23\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-1\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/24.png\" alt=\"Mac Display 24\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/25.png\" alt=\"Mac Display 25\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-2\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/26.png\" alt=\"Mac Display 26\"><\/div><\/div>\r\n\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/27.png\" alt=\"Mac Display 27\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/28.png\" alt=\"Mac Display 28\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724722-scaled.png\" alt=\"Mac Display 29\"><\/div><\/div>\r\n                    <div class=\"mac-mockup-ui mac-ui-3\"><div class=\"mac-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724723-scaled.png\" alt=\"Mac Display 30\"><\/div><\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"mac-base\">\r\n                 <div class=\"mac-base-stand\"><\/div>\r\n                 <div class=\"mac-base-foot\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n      \r\n    <!-- \u53f3\u4fa7\uff1a\u9f20\u6807\u6eda\u52a8\u6587\u6848 -->\r\n    <div class=\"mac-right-scroll\">\r\n        <!-- ===== \u7b2c1\u7ec4\u6587\u6848 (\u5bf9\u5e944\u5f20\u56fe) ===== -->\r\n        <div class=\"mac-text-step\" data-index=\"0\">\r\n            <div class=\"mac-step-num\">MAC STEP 3<\/div>\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"1\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"2\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"3\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- ===== \u7b2c2\u7ec4\u6587\u6848 (\u5bf9\u5e942\u5f20\u56fe) ===== -->\r\n        <div class=\"mac-text-step\" data-index=\"4\">\r\n         <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>     <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>              \r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"5\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>     <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a> \r\n        <\/div>\r\n\r\n        <!-- ===== \u7b2c3\u7ec4\u6587\u6848 (\u5bf9\u5e944\u5f20\u56fe) ===== -->\r\n        <div class=\"mac-text-step\" data-index=\"6\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"7\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"8\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"9\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        \r\n        <!-- ===== \u4e3a\u4e86\u8fbe\u523030\u5c4f\uff0c\u91cd\u590d\u4f7f\u7528\u73b0\u6709\u6587\u6848\uff0c\u4f60\u9700\u8981\u66ff\u6362\u4e3a\u5b9e\u9645\u5185\u5bb9 ===== -->\r\n        <!-- \u4f60\u53ef\u4ee5\u7ee7\u7eed\u6dfb\u52a011\u523030\u5c4f\u7684\u6587\u6848\uff0c\u6216\u8005\u4f7f\u7528\u73b0\u6709\u5185\u5bb9\u5faa\u73af -->\r\n        <!-- \u4f8b\u5982\uff1a\u7b2c4\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e00\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"10\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"11\">\r\n          <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"12\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"13\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- \u7b2c5\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e8c\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"14\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>          <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>         \r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"15\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>         <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>       \r\n        <\/div>\r\n\r\n        <!-- \u7b2c6\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e09\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"16\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"17\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"18\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"19\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- \u7b2c7\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e00\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"20\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"21\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"22\">\r\n          <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"23\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- \u7b2c8\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e8c\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"24\">\r\n           <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>     <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>               \r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"25\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p>      <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>        \r\n        <\/div>\r\n\r\n        <!-- \u7b2c9\u7ec4\u6587\u6848 (\u91cd\u590d\u7b2c\u4e09\u7ec4\u6587\u6848) -->\r\n        <div class=\"mac-text-step\" data-index=\"26\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"27\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"28\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"mac-text-step\" data-index=\"29\">\r\n            <p><b>@ dommei Inc website <\/b><br>\r\n\r\nWe deliver expert, end-to-end website operations while boosting social media conversion, turning traffic into revenue and driving lasting business growth.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ================= CSS \u6837\u5f0f\u90e8\u5206 ================= -->\r\n<style>\r\n    \/* [IMPORTANT]: Base scrolly container styles *\/\r\n    .mac-scrolly-container {\r\n        display: flex;\r\n        position: relative;\r\n        max-width: 1400px; \/* Mac \u6a21\u5f0f\u4e0b\u5bb9\u5668\u53ef\u4ee5\u66f4\u5bbd *\/\r\n        margin: 0 auto;\r\n        padding: 0 20px;    gap: 180px;\r\n    }\r\n\r\n    \/* ----- Left Sticky Mac Display Section ----- *\/\r\n    .mac-left-sticky {\r\n        width: 48%; \/* Mac \u663e\u793a\u5668\u5360\u636e\u66f4\u591a\u7a7a\u95f4 *\/\r\n        height: 100vh;\r\n        position: sticky;\r\n        top: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 10;\r\n        overflow: hidden; \/* \u4fdd\u8bc1Mac\u663e\u793a\u5668\u5185\u90e8\u5185\u5bb9\u4e0d\u6ea2\u51fa *\/\r\n    }\r\n\r\n    .mac-display-frame {\r\n        position: relative;\r\n        width: 800px; \/* Mac \u663e\u793a\u5668\u5bbd\u5ea6 *\/\r\n        height: 336px; \/* Mac \u663e\u793a\u5668\u9ad8\u5ea6 (\u5927\u7ea6 16:10 \u6216 16:9 \u6bd4\u4f8b) *\/\r\n        background-color: #333; \/* \u663e\u793a\u5668\u8fb9\u6846\u989c\u8272 *\/\r\n        border-radius: 15px;\r\n        box-shadow:13px -3px 21px -44px rgba(0,0,0,0.6);\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .mac-top-bar {\r\n       \/* height: 25px;  \u6a21\u62df Mac \u9876\u90e8\u83dc\u5355\u680f\r\n        background-color: #222;\r\n        border-bottom: 1px solid #444; *\/\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0 10px;\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        z-index: 20;\r\n    }\r\n    .mac-top-bar::before {\r\n        content: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"50\" height=\"12\" viewBox=\"0 0 50 12\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"#FF5E5B\"\/><circle cx=\"20\" cy=\"6\" r=\"5\" fill=\"#FFBB40\"\/><circle cx=\"34\" cy=\"6\" r=\"5\" fill=\"#34C84A\"\/><\/svg>'); \/* \u6a21\u62df\u5173\u95ed\u6700\u5c0f\u5316\u6700\u5927\u5316\u6309\u94ae *\/\r\n        position: absolute;\r\n        left: 10px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n    }\r\n\r\n    .mac-screen {\r\n        flex-grow: 1; \/* \u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\r\n        background: #fff;\r\n        overflow: hidden; \/* \u9690\u85cf\u6eda\u52a8\u6761 *\/\r\n        position: relative;\r\n        border-radius: 0 0 10px 10px; \/* \u5e95\u90e8\u5706\u89d2 *\/\r\n    }\r\n\r\n    .mac-base {\r\n        position: absolute;\r\n        bottom: -40px; \/* \u652f\u67b6\u5728\u5c4f\u5e55\u4e0b\u65b9 *\/\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 80%; \/* \u652f\u67b6\u5bbd\u5ea6 *\/\r\n        height: 50px;\r\n        z-index: -1; \/* \u653e\u5728\u5c4f\u5e55\u540e\u9762 *\/\r\n    }\r\n    .mac-base-stand {\r\n        width: 80px;\r\n        height: 40px;\r\n        background-color: #A1A1AA;\r\n        border-radius: 5px 5px 0 0;\r\n        margin: 0 auto;\r\n    }\r\n    .mac-base-foot {\r\n        width: 150px;\r\n        height: 10px;\r\n        background-color: #A1A1AA;\r\n        border-radius: 0 0 5px 5px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* [\u6838\u5fc3\u6539\u52a8]: \u56e0\u4e3a\u670930\u5c4f\uff0c\u6240\u4ee5\u603b\u9ad8\u5ea6\u4e3a 3000% *\/\r\n    .mac-screen-content {\r\n        width: 100%;\r\n        height: 3000%; \/* 30 images, each 100% of Mac screen height *\/\r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* [\u6838\u5fc3\u6539\u52a8]: \u6bcf\u5c4f\u5360\u6574\u4e2a\u5185\u90e8\u5bb9\u5668\u7684 1\/30 *\/\r\n    .mac-mockup-ui {\r\n        width: 100%;\r\n        height: calc(100% \/ 30); \/* 30 screens, each takes ~3.33% of total height *\/\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* Background gradients for different groups *\/\r\n    .mac-mockup-ui.mac-ui-1 { background: linear-gradient(135deg, #EBF5F8, #D6EEF5); } \/* \u6de1\u84dd\u8272\u7cfb *\/\r\n    .mac-mockup-ui.mac-ui-2 { background: linear-gradient(135deg, #F0F9E8, #DDEBCE); } \/* \u6de1\u7eff\u8272\u7cfb *\/\r\n    .mac-mockup-ui.mac-ui-3 { background: linear-gradient(135deg, #F9EEFB, #EDD7F1); } \/* \u6de1\u7d2b\u8272\u7cfb *\/\r\n\r\n    \/* Image styling within the Mac screen *\/\r\n    .mac-ui-box {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0; \/* \u5c4f\u5e55\u5185\u8fb9\u8ddd *\/\r\n        box-sizing: border-box;\r\n    }\r\n    .mac-ui-box img {\r\n        width: 100%;\r\n        height: 100%; \/* \u586b\u6ee1 ui-box *\/\r\n        object-fit: contain; \/* \u786e\u4fdd\u56fe\u7247\u5b8c\u6574\u663e\u793a\uff0c\u4e0d\u88c1\u526a *\/\r\n        border-radius: 5px; \/* Mac \u6a21\u5f0f\u4e0b\u56fe\u7247\u5706\u89d2\u66f4\u5c0f *\/\r\n            padding: 10px;\r\n    }\r\n\r\n    \/* ----- Right Scrolling Text Section ----- *\/\r\n    .mac-right-scroll {\r\n        width: 40%; \/* \u6587\u672c\u533a\u57df\u66f4\u7a84 *\/\r\n        padding: 0;\r\n    }\r\n\r\n    .mac-text-step {\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.2; \r\n        transform: translateY(0);\r\n        transition: opacity 0.6s ease;\r\n        max-width: 400px;\r\n        padding-left: 50px;\r\n    }\r\n\r\n    .mac-text-step.active {\r\n        opacity: 1;\r\n    }\r\n\r\n    .mac-step-num {\r\n        font-size: 1.1rem;\r\n        color: #3B82F6;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n        letter-spacing: 2px;\r\n        text-transform: uppercase;\r\n    }\r\n    .mac-text-step h2 {\r\n        font-size: 2.2rem;\r\n        font-weight: 700;\r\n        margin-bottom: 15px;\r\n        line-height: 1.2;\r\n        color: #333;\r\n    }\r\n    .mac-text-step p {\r\n        font-size: 1.05rem;\r\n        color: #555;\r\n        line-height: 1.6;   \r\n        font-weight: 300;\r\n    }\r\n    .mac-text-step p b{\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* ================= Responsive Adjustments (Mobile) ================= *\/\r\n    @media (max-width: 1024px) { \/* \u9488\u5bf9\u5e73\u677f\u548c\u5c0f\u578b\u7535\u8111 *\/\r\n        .mac-display-frame {\r\n            width: 600px;\r\n            height: 400px;\r\n        }\r\n        .mac-right-scroll {\r\n            width: 50%;\r\n        }\r\n        .mac-right-scroll .mac-text-step {\r\n            padding-left: 20px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) { \/* \u624b\u673a\u6a21\u5f0f *\/\r\n        .mac-scrolly-container { \r\n            flex-direction: column; \r\n            padding: 0;\r\n        }\r\n\r\n        .mac-left-sticky { \r\n            width: 100%; \r\n            height: 400px; \/* \u5728\u624b\u673a\u4e0a Mac \u663e\u793a\u5668\u4e0d\u518d\u5360\u6ee1\u4e00\u534a\u89c6\u53e3 *\/\r\n            top: 0; \r\n            align-items: flex-start; \/* \u9760\u4e0a\u663e\u793a *\/\r\n            justify-content: center;\r\n            padding-top: 20px;\r\n            box-sizing: border-box;\r\n            background: #fff;\r\n        }\r\n\r\n        .mac-display-frame { \r\n            transform: scale(0.7); \/* \u7f29\u5c0f Mac \u663e\u793a\u5668 *\/\r\n            transform-origin: top center; \r\n            width: 100%; \/* \u8ba9 Mac \u8fb9\u7f18\u9002\u5e94\u5c4f\u5e55\u5bbd\u5ea6 *\/\r\n            max-width: 400px; \/* \u4f46\u4e0d\u81f3\u4e8e\u8fc7\u5927 *\/\r\n            height: 250px; \/* \u76f8\u5e94\u8c03\u6574\u9ad8\u5ea6 *\/\r\n            border-radius: 10px;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.4);\r\n            margin: 0 auto; \/* \u5c45\u4e2d *\/\r\n        }\r\n        .mac-top-bar { height: 20px; }\r\n        .mac-top-bar::before { transform: scale(0.8) translateY(-50%); left: 5px; }\r\n        .mac-base { display: none; } \/* \u79fb\u52a8\u7aef\u9690\u85cf\u652f\u67b6 *\/\r\n\r\n        .mac-right-scroll { \r\n            width: 100%; \r\n            padding: 0 20px; \r\n            z-index: 20; \r\n            margin-top: -80px; \/* \u5411\u4e0a\u79fb\u52a8\uff0c\u51cf\u5c11Mac\u663e\u793a\u5668\u548c\u6587\u5b57\u7684\u95f4\u8ddd *\/\r\n        }\r\n\r\n        .mac-text-step { \r\n            height: 80vh; \r\n            justify-content: flex-end; \r\n            padding-bottom: 8vh; \r\n            align-items: center; \r\n            text-align: center; \r\n            max-width: 100%;\r\n            padding-left: 0;\r\n        }\r\n        .mac-text-step h2 { font-size: 1.6rem; margin-bottom: 8px;}\r\n        .mac-text-step p { font-size: 0.9rem; color: #666; } \r\n    }\r\n<\/style>\r\n\r\n<!-- ================= JavaScript for Scroll Interaction ================= -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        const macTextSteps = document.querySelectorAll('.mac-text-step');\r\n        const macScrollerTrack = document.getElementById('js-mac-scroller-track'); \/\/ \u66f4\u65b0ID\r\n\r\n        if (!macTextSteps.length || !macScrollerTrack) return;\r\n\r\n        const macObserverOptions = {\r\n            rootMargin: \"-45% 0px -45% 0px\", \/\/ \u66f4\u52a0\u7cbe\u51c6\u7684\u4e2d\u5fc3\u89e6\u53d1\r\n            threshold: 0\r\n        };\r\n\r\n        const macIntersectionHandler = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    macTextSteps.forEach(step => step.classList.remove('active'));\r\n                    entry.target.classList.add('active');\r\n\r\n                    const currentStepIndex = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                    \r\n                    \/\/ [\u5173\u952e\u8ba1\u7b97] \u603b\u5171\u670930\u5f20\u56fe\uff0c\u6bcf\u5f20\u5360 100\/30\r\n                    const totalScreens = macTextSteps.length; \/\/ \u52a8\u6001\u8ba1\u7b97\uff0c\u73b0\u5728\u662f30\r\n                    const slidePercentPerScreen = 100 \/ totalScreens;\r\n                    \r\n                    const scrollOffset = currentStepIndex * -slidePercentPerScreen;\r\n                    \r\n                    macScrollerTrack.style.transform = `translateY(${scrollOffset}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        const macVisualObserver = new IntersectionObserver(macIntersectionHandler, macObserverOptions);\r\n\r\n        macTextSteps.forEach(stepItem => {\r\n            macVisualObserver.observe(stepItem);\r\n        });\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d626f2 elementor-widget elementor-widget-heading\" data-id=\"0d626f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Social Growth Cases<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bb7718 elementor-widget elementor-widget-html\" data-id=\"8bb7718\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"Social-scrolly-container\">\r\n    \r\n   \r\n\r\n    <!-- \u53f3\u4fa7\uff1a\u6eda\u52a8\u7684\u6587\u672c\u533a (\u51718\u6bb5) -->\r\n    <div class=\"Social-right-scroll\">\r\n        <!-- \u7b2c\u4e00\u7ec4\u6587\u6848\u5ef6\u8fdf\u5c55\u793a (1-4\u5c4f) -->\r\n       \r\n        <div class=\"Social-text-step\" data-index=\"0\">\r\n            <div class=\"Social-step-num\">STEP 3<\/div>\r\n            <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>        <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>          \r\n        <\/div>\r\n        <div class=\"Social-text-step\" data-index=\"1\">\r\n            <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>          <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>       \r\n        <\/div>\r\n        <div class=\"Social-text-step\" data-index=\"2\">\r\n           <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>        <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>           \r\n        <\/div>\r\n\r\n        <!-- \u7b2c\u4e8c\u7ec4\u6587\u6848 (5-8\u5c4f) -->\r\n       \r\n        <div class=\"Social-text-step\" data-index=\"3\">\r\n             <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>       <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>             \r\n        <\/div>\r\n        <div class=\"Social-text-step\" data-index=\"4\">\r\n             <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>    <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>                                    \r\n        <\/div>\r\n        <div class=\"Social-text-step\" data-index=\"5\">\r\n              <p><b>@Bridgewater Law Group<\/b><br>\r\nTop-tier personal injury law firm, redefining legal marketing through professional visual authority.\r\n\r\n<br><br>\r\nHigh-velocity growth engine with 5.6K+ engaged followers and a high-frequency creative pipeline, consistently dominating local feeds through high-intent short-form video and data-driven content seeding.\r\n<\/p>        <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>                                 \r\n        <\/div>\r\n    <\/div>\r\n     <!-- \u5de6\u4fa7\uff1a\u5438\u9876\u624b\u673a -->\r\n    <div class=\"Social-left-sticky\">\r\n        <div class=\"Social-phone-frame\">\r\n            <div class=\"Social-notch\"><\/div>\r\n            <div class=\"Social-phone-screen\">\r\n                <!-- \uff01\uff01\uff018\u5c4f\u6eda\u52a8\u8f68\u9053 \uff01\uff01\uff01 -->\r\n                <div class=\"Social-phone-inner-content\" id=\"js-Social-scroller-track\">\r\n                    \r\n                    <!-- \u3010\u7b2c\u4e00\u7ec4\uff1a4\u5f20\u56fe\u3011 -->\r\n                   \r\n                    <div class=\"Social-mockup-ui ui-1\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724725.png\"><\/div><\/div>\r\n                    <div class=\"Social-mockup-ui ui-1\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724726.png\"><\/div><\/div>\r\n                    <div class=\"Social-mockup-ui ui-1\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724727.png\"><\/div><\/div>\r\n\r\n                    <!-- \u3010\u7b2c\u4e8c\u7ec4\uff1a4\u5f20\u56fe\u3011 -->\r\n                   \r\n                    <div class=\"Social-mockup-ui ui-2\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724729.png\"><\/div><\/div>\r\n                    <div class=\"Social-mockup-ui ui-2\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724730.png\"><\/div><\/div>\r\n                    <div class=\"Social-mockup-ui ui-2\"><div class=\"Social-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724731.png\"><\/div><\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .Social-scrolly-container { display: flex; position: relative; max-width: 1200px; margin: 0 auto; }\r\n\r\n    .Social-left-sticky {\r\n        width: 50%; height: 100vh; position: sticky; top: 0; \r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n\r\n    .Social-phone-frame {\r\n        width: 320px; height: 650px; background-color: #111; border-radius: 45px;\r\n        box-shadow: 0 0 0 10px #27272A, 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; position: relative;\r\n    }\r\n\r\n    .Social-phone-screen { width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: 35px; }\r\n\r\n    \/* [\u6838\u5fc3] 8\u5f20\u56fe\uff0c\u603b\u9ad8\u5ea6 800% *\/\r\n    .Social-phone-inner-content {\r\n        width: 100%;\r\n        height: 600%; \r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    \/* \u6bcf\u5f20\u56fe\u5360 1\/8 *\/\r\n    .Social-mockup-ui {\r\n        width: 100%;\r\n        height: calc(100% \/ 6); \r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .Social-mockup-ui.ui-1 { background: linear-gradient(135deg, #F8FAFC, #E2E8F0); }\r\n    .Social-mockup-ui.ui-2 { background: linear-gradient(135deg, #1E293B, #0F172A); }\r\n\r\n    .Social-ui-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 60px; }\r\n    .Social-ui-box img { \r\n        width: 100%; \r\n        height: 580px; \r\n        object-fit: cover; \r\n        border-radius: 12px;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .Social-right-scroll { width: 50%; }\r\n    .Social-text-step {\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.1;\r\n        transition: all 0.5s;\r\n        padding-left: 50px;\r\n    }\r\n    .Social-text-step p{\r\n        font-weight: 300;\r\n    }\r\n     .Social-text-step p b{\r\n        font-weight: 600;\r\n    }\r\n    .Social-text-step.active { opacity: 1; transform: scale(1.05); }\r\n    .Social-step-num { font-size: 1.2rem; color: #3B82F6; font-weight: 700; margin-bottom: 12px; }\r\n    .Social-text-step h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 20px; color: #333; }\r\n    .Social-text-step p { font-size: 1.1rem; color: #666; line-height: 1.6; }\r\n\r\n    @media (max-width: 768px) {\r\n        .Social-scrolly-container { flex-direction: column; }\r\n        .Social-left-sticky { width: 100%; height: 45vh; top: 0; background: #fff; z-index: 100; }\r\n        .Social-phone-frame { transform: scale(0.6); transform-origin: center; margin-top: -50px; }\r\n        .Social-right-scroll { width: 100%; padding: 0 20px; }\r\n        .Social-text-step { height: 70vh; text-align: center; padding-left: 0; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        const textSteps = document.querySelectorAll('.Social-text-step');\r\n        const phoneTrack = document.getElementById('js-Social-scroller-track');\r\n\r\n        if (!textSteps.length || !phoneTrack) return;\r\n\r\n        const observerOptions = {\r\n            rootMargin: \"-45% 0px -45% 0px\",\r\n            threshold: 0\r\n        };\r\n\r\n        const observerCallback = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    textSteps.forEach(set => set.classList.remove('active'));\r\n                    entry.target.classList.add('active');\r\n\r\n                    const idx = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                    \/\/ \u52a8\u6001\u8ba1\u7b97\u504f\u79fb\u91cf\uff1a100 \/ 8 = 12.5% \u6bcf\u4e00\u8df3\r\n                    const offset = idx * -(100 \/ textSteps.length);\r\n                    phoneTrack.style.transform = `translateY(${offset}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        const socialObs = new IntersectionObserver(observerCallback, observerOptions);\r\n        textSteps.forEach(step => socialObs.observe(step));\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ca6fb4 elementor-widget elementor-widget-heading\" data-id=\"1ca6fb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Full-Stack Execution<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06b2e15 elementor-widget elementor-widget-html\" data-id=\"06b2e15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"Stack-scrolly-container\">\r\n    \r\n    <!-- \u5de6\u4fa7\uff1a\u5438\u9876\u624b\u673a -->\r\n    <div class=\"Stack-left-sticky\">\r\n        <div class=\"Stack-phone-frame\">\r\n            <div class=\"Stack-notch\"><\/div>\r\n            <div class=\"Stack-phone-screen\">\r\n                <!-- 18\u5c4f\u6eda\u52a8\u8f68\u9053 -->\r\n                <div class=\"Stack-phone-inner-content\" id=\"js-Stack-scroller-track\">\r\n                    \r\n                    <!-- \u7b2c1-5\u5c4f\uff1aKizuki Ramen \u7cfb\u5217 -->\r\n                    <div class=\"Stack-mockup-ui ui-1\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724732.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-1\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724733.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-1\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724734.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-1\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724772.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-1\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724771.png\"><\/div><\/div>\r\n                    <!-- \u7b2c6-9\u5c4f\uff1aVirscend University \u7cfb\u5217 -->\r\n                    <div class=\"Stack-mockup-ui ui-2\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724735.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-2\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724736.png\"><\/div><\/div>\r\n                     <div class=\"Stack-mockup-ui ui-2\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724737.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-2\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724738.png\"><\/div><\/div>\r\n\r\n                    <!-- \u7b2c10-14\u5c4f\uff1aFaeriesty \u7cfb\u5217 -->\r\n                    <div class=\"Stack-mockup-ui ui-3\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724740.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-3\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724741.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-3\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724742.png\"><\/div><\/div>\r\n <div class=\"Stack-mockup-ui ui-3\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724743.png\"><\/div><\/div>\r\n                  \r\n                    \r\n                      <!-- \u7b2c15-18\u5c4f\uff1aSupreme Dumplings \u7cfb\u5217 -->\r\n                    <div class=\"Stack-mockup-ui ui-4\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724744.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-4\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724745.png\"><\/div><\/div>\r\n <div class=\"Stack-mockup-ui ui-4\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724746.png\"><\/div><\/div>\r\n  <div class=\"Stack-mockup-ui ui-4\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/d.png\"><\/div><\/div>\r\n                    <!-- \u7b2c13-15\u5c4f\uff1aJoy of Life \u7cfb\u5217 -->\r\n                    <div class=\"Stack-mockup-ui ui-5\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724770-scaled.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-5\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724747.png\"><\/div><\/div>\r\n                    <div class=\"Stack-mockup-ui ui-5\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724748.png\"><\/div><\/div>\r\n<div class=\"Stack-mockup-ui ui-6\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724749.png\"><\/div><\/div>\r\n                    <!-- \u7b2c16-18\u5c4f\uff1a\u8865\u5145\u5c55\u793a\u5c4f -->\r\n                    \r\n<div class=\"Stack-mockup-ui ui-6\"><div class=\"Stack-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724750.png\"><\/div><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u53f3\u4fa7\uff1a\u6eda\u52a8\u7684\u6587\u672c\u533a (18\u6bb5) -->\r\n    <div class=\"Stack-right-scroll\">\r\n        <!-- \u5faa\u73af\u751f\u6210 18 \u6bb5\u6587\u6848 -->\r\n        <div class=\"Stack-text-step\" data-index=\"0\">\r\n            <div class=\"Stack-step-num\">STEP 4<\/div>\r\n            <p><b>@KizukiRamen  <\/b><br>U.S.store content operations integrated with offline customer acquisition, while developing new online product lines.<br>\r\n\r\n<br>\r\nAs part of the ongoing marketing plan for the launch of new frozen products, we are supporting the U.S. market with full-stack, multi-platform execution, coordinating strategy, creative, and media to drive customer acquisition and achieve seamless outreach across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"1\">\r\n            <p><b>@KizukiRamen  <\/b><br>U.S.store content operations integrated with offline customer acquisition, while developing new online product lines.<br>\r\n\r\n<br>\r\nAs part of the ongoing marketing plan for the launch of new frozen products, we are supporting the U.S. market with full-stack, multi-platform execution, coordinating strategy, creative, and media to drive customer acquisition and achieve seamless outreach across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"2\">\r\n             <p><b>@KizukiRamen  <\/b><br>U.S.store content operations integrated with offline customer acquisition, while developing new online product lines.<br>\r\n\r\n<br>\r\nAs part of the ongoing marketing plan for the launch of new frozen products, we are supporting the U.S. market with full-stack, multi-platform execution, coordinating strategy, creative, and media to drive customer acquisition and achieve seamless outreach across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"3\">\r\n             <p><b>@KizukiRamen  <\/b><br>U.S.store content operations integrated with offline customer acquisition, while developing new online product lines.<br>\r\n\r\n<br>\r\nAs part of the ongoing marketing plan for the launch of new frozen products, we are supporting the U.S. market with full-stack, multi-platform execution, coordinating strategy, creative, and media to drive customer acquisition and achieve seamless outreach across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"4\">\r\n            <p><b>@KizukiRamen  <\/b><br>U.S.store content operations integrated with offline customer acquisition, while developing new online product lines.<br>\r\n\r\n<br>\r\nAs part of the ongoing marketing plan for the launch of new frozen products, we are supporting the U.S. market with full-stack, multi-platform execution, coordinating strategy, creative, and media to drive customer acquisition and achieve seamless outreach across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"5\">\r\n            <p><b>@Virscend University <\/b><br>is a business school located in Irvine, California.<br>\r\n\r\n<br>\r\nWe handle full-stack, multi-platform online enrollment marketing for Virscend University. While the follower base is modest, engagement and conversion rates are strong. Content is adapted across platforms to maximize reach, effectively connecting with the target audience in China.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"6\">\r\n             <p><b>@Virscend University <\/b><br>is a business school located in Irvine, California.<br>\r\n\r\n<br>\r\nWe handle full-stack, multi-platform online enrollment marketing for Virscend University. While the follower base is modest, engagement and conversion rates are strong. Content is adapted across platforms to maximize reach, effectively connecting with the target audience in China.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"7\">\r\n              <p><b>@Virscend University <\/b><br>is a business school located in Irvine, California.<br>\r\n\r\n<br>\r\nWe handle full-stack, multi-platform online enrollment marketing for Virscend University. While the follower base is modest, engagement and conversion rates are strong. Content is adapted across platforms to maximize reach, effectively connecting with the target audience in China.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"8\">\r\n              <p><b>@Virscend University <\/b><br>is a business school located in Irvine, California.<br>\r\n\r\n<br>\r\nWe handle full-stack, multi-platform online enrollment marketing for Virscend University. While the follower base is modest, engagement and conversion rates are strong. Content is adapted across platforms to maximize reach, effectively connecting with the target audience in China.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"9\">\r\n            <p><b>@faeriesty_shop<\/b><br>\r\n\r\nFull-stack execution driving both content and commerce: 100K+ TikTok Shop sales achieved through integrated strategy, creative, and live operations, with daily promotions up to 50% off.<br>\r\n260K+ Instagram followers; positioned as a leading occasion dress brand, ensuring consistent messaging and seamless coordination across platforms to support one unified growth objective.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"10\">\r\n           <p><b>@faeriesty_shop<\/b><br>\r\n\r\nFull-stack execution driving both content and commerce: 100K+ TikTok Shop sales achieved through integrated strategy, creative, and live operations, with daily promotions up to 50% off.<br>\r\n260K+ Instagram followers; positioned as a leading occasion dress brand, ensuring consistent messaging and seamless coordination across platforms to support one unified growth objective.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"11\">\r\n             <p><b>@faeriesty_shop<\/b><br>\r\n\r\nFull-stack execution driving both content and commerce: 100K+ TikTok Shop sales achieved through integrated strategy, creative, and live operations, with daily promotions up to 50% off.<br>\r\n260K+ Instagram followers; positioned as a leading occasion dress brand, ensuring consistent messaging and seamless coordination across platforms to support one unified growth objective.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"12\">\r\n             <p><b>@faeriesty_shop<\/b><br>\r\n\r\nFull-stack execution driving both content and commerce: 100K+ TikTok Shop sales achieved through integrated strategy, creative, and live operations, with daily promotions up to 50% off.<br>\r\n260K+ Instagram followers; positioned as a leading occasion dress brand, ensuring consistent messaging and seamless coordination across platforms to support one unified growth objective.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"13\">\r\n            <p><b>@supremedumplings<\/b><br>\r\n\r\nOne team managing TikTok, Instagram, Facebook, and Xiaohongshu accounts end-to-end.<br>\r\nUnified Objective: Coordinating creative, content, and media strategies to ensure every platform drives brand growth and audience engagement.<br>\r\nSeamless Integration: Streamlined cross-platform operations, eliminating inefficiencies from multiple vendors.<br>\r\nFull Accountability: Consistent brand voice, rapid trend responsiveness, and measurable performance across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"14\">\r\n            <p><b>@supremedumplings<\/b><br>\r\n\r\nOne team managing TikTok, Instagram, Facebook, and Xiaohongshu accounts end-to-end.<br>\r\nUnified Objective: Coordinating creative, content, and media strategies to ensure every platform drives brand growth and audience engagement.<br>\r\nSeamless Integration: Streamlined cross-platform operations, eliminating inefficiencies from multiple vendors.<br>\r\nFull Accountability: Consistent brand voice, rapid trend responsiveness, and measurable performance across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"15\">\r\n             <p><b>@supremedumplings<\/b><br>\r\n\r\nOne team managing TikTok, Instagram, Facebook, and Xiaohongshu accounts end-to-end.<br>\r\nUnified Objective: Coordinating creative, content, and media strategies to ensure every platform drives brand growth and audience engagement.<br>\r\nSeamless Integration: Streamlined cross-platform operations, eliminating inefficiencies from multiple vendors.<br>\r\nFull Accountability: Consistent brand voice, rapid trend responsiveness, and measurable performance across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"16\">\r\n            <p><b>@supremedumplings<\/b><br>\r\n\r\nOne team managing TikTok, Instagram, Facebook, and Xiaohongshu accounts end-to-end.<br>\r\nUnified Objective: Coordinating creative, content, and media strategies to ensure every platform drives brand growth and audience engagement.<br>\r\nSeamless Integration: Streamlined cross-platform operations, eliminating inefficiencies from multiple vendors.<br>\r\nFull Accountability: Consistent brand voice, rapid trend responsiveness, and measurable performance across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"17\">\r\n            <p><b>@supremedumplings<\/b><br>\r\n\r\nOne team managing TikTok, Instagram, Facebook, and Xiaohongshu accounts end-to-end.<br>\r\nUnified Objective: Coordinating creative, content, and media strategies to ensure every platform drives brand growth and audience engagement.<br>\r\nSeamless Integration: Streamlined cross-platform operations, eliminating inefficiencies from multiple vendors.<br>\r\nFull Accountability: Consistent brand voice, rapid trend responsiveness, and measurable performance across all channels.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Stack-text-step\" data-index=\"18\">\r\n            <p><b>@joyoflifesurrogacyPremium <\/b><br>postpartum care and wellness center, providing elite maternal and newborn services with a commitment to excellence.\r\n\r\n<br><br>\r\n\r\nA prime example of full-stack execution, integrating high-performance web architecture, SEO-driven search visibility, and cohesive social branding. By eliminating cross-vendor friction, we ensure a unified visual identity and consistent messaging across every digital touchpoint to maximize conversion.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        \r\n        \r\n         <div class=\"Stack-text-step\" data-index=\"19\">\r\n            <p><b>@joyoflifesurrogacyPremium <\/b><br>postpartum care and wellness center, providing elite maternal and newborn services with a commitment to excellence.\r\n\r\n<br><br>\r\n\r\nA prime example of full-stack execution, integrating high-performance web architecture, SEO-driven search visibility, and cohesive social branding. By eliminating cross-vendor friction, we ensure a unified visual identity and consistent messaging across every digital touchpoint to maximize conversion.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        \r\n         <div class=\"Stack-text-step\" data-index=\"20\">\r\n            <p><b>@joyoflifesurrogacyPremium <\/b><br>postpartum care and wellness center, providing elite maternal and newborn services with a commitment to excellence.\r\n\r\n<br><br>\r\n\r\nA prime example of full-stack execution, integrating high-performance web architecture, SEO-driven search visibility, and cohesive social branding. By eliminating cross-vendor friction, we ensure a unified visual identity and consistent messaging across every digital touchpoint to maximize conversion.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n         <div class=\"Stack-text-step\" data-index=\"21\">\r\n            <p><b>@joyoflifesurrogacyPremium <\/b><br>postpartum care and wellness center, providing elite maternal and newborn services with a commitment to excellence.\r\n\r\n<br><br>\r\n\r\nA prime example of full-stack execution, integrating high-performance web architecture, SEO-driven search visibility, and cohesive social branding. By eliminating cross-vendor friction, we ensure a unified visual identity and consistent messaging across every digital touchpoint to maximize conversion.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .Stack-scrolly-container { display: flex; position: relative; max-width: 1200px; margin: 0 auto; }\r\n\r\n    .Stack-left-sticky {\r\n        width: 50%; height: 100vh; position: sticky; top: 0; \r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n\r\n    .Stack-phone-frame {\r\n        width: 320px; height: 650px; background-color: #111; border-radius: 45px;\r\n        box-shadow: 0 0 0 10px #27272A, 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; position: relative;\r\n    }\r\n\r\n    .Stack-phone-screen { width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: 35px; }\r\n\r\n    \/* [\u6838\u5fc3] 18\u5f20\u56fe\uff0c\u603b\u9ad8\u5ea6 1800% *\/\r\n    .Stack-phone-inner-content {\r\n        width: 100%;\r\n        height: 2200%; \r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.1, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    \/* \u6bcf\u5f20\u56fe\u5360 1\/18 *\/\r\n    .Stack-mockup-ui {\r\n        width: 100%;\r\n        height: calc(100% \/ 22); \r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* \u4e0d\u540c\u98ce\u683c\u80cc\u666f\u8272\u5faa\u73af *\/\r\n    .Stack-mockup-ui.ui-1 { background: #f8fafc; }\r\n    .Stack-mockup-ui.ui-2 { background: #1e293b; }\r\n    .Stack-mockup-ui.ui-3 { background: #eff6ff; }\r\n    .Stack-mockup-ui.ui-4 { background: #fffbeb; }\r\n    .Stack-mockup-ui.ui-5 { background: #fef2f2; }\r\n    .Stack-mockup-ui.ui-6 { background: #f5f3ff; }\r\n\r\n    .Stack-ui-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding:0; box-sizing: border-box; }\r\n    .Stack-ui-box img { \r\n        width: 100%; \r\n        height: 100%; \r\n        object-fit: contain; \r\n        border-radius: 12px;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    .Stack-right-scroll { width: 50%; }\r\n    .Stack-text-step {\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.15;\r\n        transition: all 0.6s ease;\r\n        padding-left: 50px;\r\n    }\r\n     .Stack-text-step p{\r\n        font-weight: 300;\r\n    }\r\n     .Stack-text-step p b{\r\n        font-weight: 600;\r\n    }\r\n    .Stack-text-step.active { opacity: 1; transform: translateX(10px); }\r\n    .Stack-step-num { font-size: 1.2rem; color: #3b82f6; font-weight: 700; margin-bottom: 12px; }\r\n    .Stack-text-step h2 { font-size: 2.22rem; font-weight: 700; margin-bottom: 20px; color: #1f2937; line-height: 1.2; }\r\n    .Stack-text-step p { font-size: 1.1rem; color: #4b5563; line-height: 1.6; max-width: 400px; }\r\n\r\n    @media (max-width: 768px) {\r\n        .Stack-scrolly-container { flex-direction: column; }\r\n        .Stack-left-sticky { width: 100%; height: 45vh; z-index: 100; background: #fff; }\r\n        .Stack-phone-frame { transform: scale(0.6); transform-origin: top center; margin-top: 20px; }\r\n        .Stack-right-scroll { width: 100%; padding: 0 20px; }\r\n        .Stack-text-step { height: 70vh; text-align: center; padding-left: 0; align-items: center; }\r\n        .Stack-text-step.active { transform: none; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        const stackSteps = document.querySelectorAll('.Stack-text-step');\r\n        const stackTrack = document.getElementById('js-Stack-scroller-track');\r\n\r\n        if (!stackSteps.length || !stackTrack) return;\r\n\r\n        const stackOptions = {\r\n            rootMargin: \"-45% 0px -45% 0px\",\r\n            threshold: 0\r\n        };\r\n\r\n        const stackCallback = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    stackSteps.forEach(s => s.classList.remove('active'));\r\n                    entry.target.classList.add('active');\r\n\r\n                    const idx = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                    \/\/ \u6838\u5fc3\u903b\u8f91\uff1a100 \/ 18 \u2248 5.55% \u6bcf\u4e00\u5c4f\r\n                    const offset = idx * -(100 \/ stackSteps.length);\r\n                    stackTrack.style.transform = `translateY(${offset}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        const stackObs = new IntersectionObserver(stackCallback, stackOptions);\r\n        stackSteps.forEach(step => stackObs.observe(step));\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84a3850 elementor-widget elementor-widget-heading\" data-id=\"84a3850\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Modern Commerce +tiktok<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3231f4d elementor-widget elementor-widget-html\" data-id=\"3231f4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"Modern-scrolly-container\">\r\n  \r\n    \r\n    <!-- \u53f3\u4fa7\uff1a\u9f20\u6807\u6eda\u52a8\u6587\u6848 (10\u6bb5) -->\r\n    <div class=\"Modern-right-scroll\">\r\n        <!-- LERRO \u6587\u6848\u7ec4 -->\r\n      \r\n        <div class=\"Modern-text-step\" data-index=\"0\">\r\n            <div class=\"Modern-step-num\">STEP 5<\/div>\r\n           <p><b>@LERRO<\/b><br>\r\n\r\nSingle influencer video reached 1.1M views with 680K+ organic reach, driving category-leading sales that month.<br>\r\nDemonstrates scalable creator-led engagement, converting influence directly into measurable revenue.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Modern-text-step\" data-index=\"1\">\r\n            <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        <!-- AmpAura \u6587\u6848\u7ec4 -->\r\n        <div class=\"Modern-text-step\" data-index=\"2\">\r\n              <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Modern-text-step\" data-index=\"3\">\r\n              <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <div class=\"Modern-text-step\" data-index=\"4\">\r\n              <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n<\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n\r\n        \r\n    <\/div>\r\n      <!-- \u5de6\u4fa7\uff1a\u5438\u9876\u624b\u673a -->\r\n    <div class=\"Modern-left-sticky\">\r\n        <div class=\"Modern-phone-frame\">\r\n            <div class=\"Modern-notch\"><\/div>\r\n            <div class=\"Modern-phone-screen\">\r\n                <!-- 10\u5c4f\u6eda\u52a8\u8f68\u9053 -->\r\n                <div class=\"Modern-phone-inner\" id=\"Modern-phone-track\">\r\n                    \r\n                    <!-- \u3010LERRO \u7cfb\u5217 - 2\u5c4f\u3011 -->\r\n                 \r\n                    <div class=\"Modern-mockup-ui Modern-ui-1\"><div class=\"Modern-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724756.png\"><\/div><\/div>\r\n                 \r\n\r\n                    <!-- \u3010AmpAura \u7cfb\u5217 - 4\u5c4f\u3011 -->\r\n                    <div class=\"Modern-mockup-ui Modern-ui-2\"><div class=\"Modern-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724766.png\"><\/div><\/div>\r\n                    <div class=\"Modern-mockup-ui Modern-ui-2\"><div class=\"Modern-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724767.png\"><\/div><\/div>\r\n                    <div class=\"Modern-mockup-ui Modern-ui-2\"><div class=\"Modern-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724768.png\"><\/div><\/div>\r\n\r\n                    <!-- \u3010PITAKA \u7cfb\u5217 - 4\u5c4f\u3011 -->\r\n                    <div class=\"Modern-mockup-ui Modern-ui-3\"><div class=\"Modern-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724769.png\"><\/div><\/div>\r\n                    \r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* \u4e3b\u5bb9\u5668 *\/\r\n    .Modern-scrolly-container { display: flex; position: relative; max-width: 1200px; margin: 0 auto; }\r\n    \r\n    \/* \u5de6\u4fa7\u5438\u9876 *\/\r\n    .Modern-left-sticky {\r\n        position: sticky; top: 0; width: 50%; height: 100vh;\r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n    \r\n    .Modern-phone-frame {\r\n        width: 320px; height: 650px; background: #111; border-radius: 45px;\r\n        box-shadow: 0 0 0 10px #27272A, 0 30px 60px rgba(0,0,0,0.5); position: relative; overflow: hidden;\r\n    }\r\n    \r\n    .Modern-notch {\r\n        position: absolute; top: 0; left: 50%; transform: translateX(-50%);\r\n        width: 150px; height: 26px; background: #111; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; z-index: 10;\r\n    }\r\n    \r\n    .Modern-phone-screen {\r\n        position: absolute; top: 15px; left: 10px; right: 10px; bottom: 10px;\r\n        background: #fff; border-radius: 35px; overflow: hidden;\r\n    }\r\n    \r\n    \/* \u6838\u5fc3\u6eda\u52a8\uff1a6\u5c4f = 1000% *\/\r\n    .Modern-phone-inner {\r\n        width: 100%; height: 500%;\r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex; flex-direction: column;\r\n    }\r\n    \r\n    \/* \u6bcf\u5c4f\u5360 10% *\/\r\n    .Modern-mockup-ui {\r\n        width: 100%; height: calc(100% \/ 5);\r\n        display: flex; align-items: center; justify-content: center;\r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .Modern-ui-1 { background: #f8fafc; }\r\n    .Modern-ui-2 { background: #1e293b; }\r\n    .Modern-ui-3 { background: #eff6ff; }\r\n    \r\n    .Modern-ui-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 }\r\n    .Modern-ui-box img { \r\n        width: 100%; height: 580px; object-fit: contain; \r\n        border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n    }\r\n    \r\n    \/* \u53f3\u4fa7\u6587\u6848 *\/\r\n    .Modern-right-scroll { width: 50%; }\r\n    .Modern-text-step {\r\n        height: 100vh; display: flex; flex-direction: column; justify-content: center;\r\n        opacity: 0.15; transition: all 0.6s ease; padding-left: 50px;\r\n    }\r\n    .Modern-text-step p{\r\n    font-weight: 300;\r\n}\r\n\r\n.Modern-text-step p b{\r\n    font-weight: 600;\r\n}\r\n    .Modern-text-step.active { opacity: 1; transform: translateX(10px); }\r\n    .Modern-step-num { font-size: 1.1rem; color: #3b82f6; font-weight: 700; margin-bottom: 12px; letter-spacing: 2px; }\r\n    .Modern-text-step h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; color: #111; line-height: 1.2; }\r\n    .Modern-text-step p { font-size: 1.1rem; color: #555; line-height: 1.6; max-width: 400px; }\r\n    .Modern-text-step b { color: #000; font-weight: 600; }\r\n\r\n    \/* \u79fb\u52a8\u7aef\u9002\u914d *\/\r\n    @media (max-width: 768px) {\r\n        .Modern-scrolly-container { flex-direction: column; }\r\n        .Modern-left-sticky { width: 100%; height: 45vh; top: 0; background: #fff; z-index: 100; }\r\n        .Modern-phone-frame { transform: scale(0.6); transform-origin: top center; margin-top: 20px; }\r\n        .Modern-right-scroll { width: 100%; padding: 0 20px; }\r\n        .Modern-text-step { height: 75vh; text-align: center; padding-left: 0; align-items: center; }\r\n        .Modern-text-step.active { transform: none; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        (function() {\r\n            const textSteps = document.querySelectorAll('.Modern-text-step');\r\n            const phoneTrack = document.getElementById('Modern-phone-track');\r\n\r\n            if (!textSteps.length || !phoneTrack) return;\r\n\r\n            const observerOptions = {\r\n                rootMargin: \"-45% 0px -45% 0px\",\r\n                threshold: 0\r\n            };\r\n\r\n            const observerCallback = (entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        textSteps.forEach(s => s.classList.remove('active'));\r\n                        entry.target.classList.add('active');\r\n\r\n                        const idx = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                        \/\/ \u6bcf\u4e00\u8df3\u504f\u79fb 100\/10 = 10%\r\n                        const offset = idx * -(100 \/ textSteps.length);\r\n                        phoneTrack.style.transform = `translateY(${offset}%)`;\r\n                    }\r\n                });\r\n            };\r\n\r\n            const ModernObs = new IntersectionObserver(observerCallback, observerOptions);\r\n            textSteps.forEach(step => ModernObs.observe(step));\r\n        })();\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a32401b elementor-widget elementor-widget-html\" data-id=\"a32401b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"five-scrolly-container\">\r\n  \r\n    <!-- \u5de6\u4fa7\uff1a\u5438\u9876 Mac \u663e\u793a\u5668 -->\r\n    <div class=\"five-left-sticky\">\r\n        <div class=\"five-display-frame\">\r\n            <div class=\"five-top-bar\"><\/div>\r\n            <div class=\"five-screen\">\r\n                <!-- 5\u5c4f\u6ed1\u52a8\u8f68\u9053 -->\r\n                <div class=\"five-screen-content\" id=\"js-five-scroller-track\">\r\n                    \r\n                    <!-- \u7b2c 1-5 \u5c4f\u56fe\u7247 -->\r\n                    <div class=\"five-mockup-ui five-ui-1\"><div class=\"five-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724759.png\"><\/div><\/div>\r\n                    <div class=\"five-mockup-ui five-ui-1\"><div class=\"five-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724761.png\" alt=\"Mac Display 2\"><\/div><\/div>\r\n                    <div class=\"five-mockup-ui five-ui-2\"><div class=\"five-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/\u56fe\u724774.png\" alt=\"Mac Display 3\"><\/div><\/div>\r\n                    <div class=\"five-mockup-ui five-ui-2\"><div class=\"five-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-03_182314_908.pngg\" alt=\"Mac Display 4\"><\/div><\/div>\r\n                    <div class=\"five-mockup-ui five-ui-3\"><div class=\"five-ui-box\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ScreenShot_2026-04-03_182323_781.png\" alt=\"Mac Display 5\"><\/div><\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"five-base\">\r\n                 <div class=\"five-base-stand\"><\/div>\r\n                 <div class=\"five-base-foot\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n      \r\n    <!-- \u53f3\u4fa7\uff1a\u9f20\u6807\u6eda\u52a8\u6587\u6848 (5\u6bb5) -->\r\n    <div class=\"five-right-scroll\">\r\n        <!-- \u7b2c 1 \u6bb5 -->\r\n        <div class=\"five-text-step\" data-index=\"0\">\r\n            <p><b>@AmpAura<\/b><br> Portable Power Station partnered with 20+ creators across TikTok and Instagram, generating 3M+ cross-platform impressions. Leveraging trending events, the campaign sparked viral discussions around product \u201cendurance\u201d and \u201ccharging methods,\u201d with a single influencer video achieving 880K+ organic views. This creator-driven approach helped the product reach #1 in online pre-orders within its category, demonstrating a scalable model that converts engagement into immediate sales.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <!-- \u7b2c 2 \u6bb5 -->\r\n        <div class=\"five-text-step\" data-index=\"1\">\r\n            <p><b>@AmpAura<\/b><br> Portable Power Station partnered with 20+ creators across TikTok and Instagram, generating 3M+ cross-platform impressions. Leveraging trending events, the campaign sparked viral discussions around product \u201cendurance\u201d and \u201ccharging methods,\u201d with a single influencer video achieving 880K+ organic views. This creator-driven approach helped the product reach #1 in online pre-orders within its category, demonstrating a scalable model that converts engagement into immediate sales.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <!-- \u7b2c 3 \u6bb5 -->\r\n        <div class=\"five-text-step\" data-index=\"2\">\r\n            <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <!-- \u7b2c 4 \u6bb5 -->\r\n        <div class=\"five-text-step\" data-index=\"3\">\r\n             <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n\r\n            <\/p><a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>\r\n        <\/div>\r\n        <!-- \u7b2c 5 \u6bb5 -->\r\n        <div class=\"five-text-step\" data-index=\"4\">\r\n             <p><b>@PITAKA<\/b><br>\r\n High-performance mobile accessories brand, leveraging a creator matrix to build a full funnel from awareness to conversion. Collaborated with 4 top-tier photography KOLs and 14 mid-tier creators to establish layered content distribution and trust signals. Achieved a 3.75% engagement rate and 2.23M+ total impressions, consistently feeding high-intent traffic into live commerce and e-commerce channels to support downstream conversions.\r\n\r\n            <\/p>    <a href=\"\/index.php\/contact\/\" class=\"yyfw\">Contact Us<\/a>          \r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ================= CSS \u6837\u5f0f\u90e8\u5206 ================= -->\r\n<style>\r\n    .five-scrolly-container {\r\n        display: flex;\r\n        position: relative;\r\n        max-width: 1400px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n        gap: 180px;\r\n    }\r\n\r\n    .five-left-sticky {\r\n        width: 48%;\r\n        height: 100vh;\r\n        position: sticky;\r\n        top: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 10;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .five-display-frame {\r\n        position: relative;\r\n        width: 800px;\r\n        height: 336px;\r\n        background-color: #333;\r\n        border-radius: 15px;\r\n        box-shadow: 21px -3px 25px -16px rgba(0,0,0,0.6);\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .five-top-bar {\r\n        \/*height: 25px;\r\n        background-color: #222;\r\n        border-bottom: 1px solid #444;*\/\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0 10px;\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        z-index: 20;\r\n    }\r\n    .five-top-bar::before {\r\n        content: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"50\" height=\"12\" viewBox=\"0 0 50 12\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"#FF5E5B\"\/><circle cx=\"20\" cy=\"6\" r=\"5\" fill=\"#FFBB40\"\/><circle cx=\"34\" cy=\"6\" r=\"5\" fill=\"#34C84A\"\/><\/svg>');\r\n        position: absolute;\r\n        left: 10px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n    }\r\n\r\n    .five-screen {\r\n        flex-grow: 1;\r\n        background: #fff;\r\n        overflow: hidden;\r\n        position: relative;\r\n        border-radius: 0 0 10px 10px;\r\n    }\r\n\r\n    .five-base {\r\n        position: absolute;\r\n        bottom: -40px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 80%;\r\n        height: 50px;\r\n        z-index: -1;\r\n    }\r\n    .five-base-stand {\r\n        width: 80px;\r\n        height: 40px;\r\n        background-color: #A1A1AA;\r\n        border-radius: 5px 5px 0 0;\r\n        margin: 0 auto;\r\n    }\r\n    .five-base-foot {\r\n        width: 150px;\r\n        height: 10px;\r\n        background-color: #A1A1AA;\r\n        border-radius: 0 0 5px 5px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* 5\u5c4f\u603b\u9ad8\u5ea6 500% *\/\r\n    .five-screen-content {\r\n        width: 100%;\r\n        height: 500%; \r\n        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* \u6bcf\u5c4f\u536020% (100% \/ 5) *\/\r\n    .five-mockup-ui {\r\n        width: 100%;\r\n        height: 20%; \r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .five-mockup-ui.five-ui-1 { background: linear-gradient(135deg, #EBF5F8, #D6EEF5); }\r\n    .five-mockup-ui.five-ui-2 { background: linear-gradient(135deg, #F0F9E8, #DDEBCE); }\r\n    .five-mockup-ui.five-ui-3 { background: linear-gradient(135deg, #F9EEFB, #EDD7F1); }\r\n\r\n    .five-ui-box {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n    .five-ui-box img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        padding: 10px;\r\n        border-radius: 5px;\r\n    }\r\n\r\n    .five-right-scroll {\r\n        width: 40%;\r\n        padding: 0;\r\n    }\r\n\r\n    .five-text-step {\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        opacity: 0.2; \r\n        transform: translateY(0);\r\n        transition: opacity 0.6s ease;\r\n        max-width: 400px;\r\n        padding-left: 50px;\r\n    }\r\n.five-text-step p{\r\n    font-weight: 300;\r\n}\r\n\r\n.five-text-step p b{\r\n    font-weight: 600;\r\n}\r\n    .five-text-step.active {\r\n        opacity: 1;\r\n    }\r\n\r\n    .five-step-num {\r\n        font-size: 1.1rem;\r\n        color: #3B82F6;\r\n        font-weight: 700;\r\n        margin-bottom: 8px;\r\n        letter-spacing: 2px;\r\n        text-transform: uppercase;\r\n    }\r\n    .five-text-step h2 {\r\n        font-size: 2.2rem;\r\n        font-weight: 700;\r\n        margin-bottom: 15px;\r\n        line-height: 1.2;\r\n        color: #333;\r\n    }\r\n    .five-text-step p {\r\n        font-size: 1.05rem;\r\n        color: #555;\r\n        line-height: 1.6;   \r\n        font-weight: 300;\r\n    }\r\n    .five-text-step p b{\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* ================= \u79fb\u52a8\u8bbe\u5907\u9002\u914d ================= *\/\r\n    @media (max-width: 1024px) {\r\n        .five-display-frame { width: 600px; height: 400px; }\r\n        .five-right-scroll { width: 50%; }\r\n        .five-right-scroll .five-text-step { padding-left: 20px; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .five-scrolly-container { flex-direction: column; padding: 0; gap: 0;}\r\n        .five-left-sticky { \r\n            width: 100%; height: 400px; top: 0; \r\n            align-items: flex-start; justify-content: center;\r\n            padding-top: 20px; box-sizing: border-box; background: #fff;\r\n        }\r\n        .five-display-frame { \r\n            transform: scale(0.7); transform-origin: top center; \r\n            width: 100%; max-width: 400px; height: 250px; \r\n            border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.4); margin: 0 auto; \r\n        }\r\n        .five-top-bar { height: 20px; }\r\n        .five-top-bar::before { transform: scale(0.8) translateY(-50%); left: 5px; }\r\n        .five-base { display: none; }\r\n        .five-right-scroll { \r\n            width: 100%; padding: 0 20px; z-index: 20; margin-top: -80px; \r\n        }\r\n        .five-text-step { \r\n            height: 80vh; justify-content: flex-end; padding-bottom: 8vh; \r\n            align-items: center; text-align: center; max-width: 100%; padding-left: 0;\r\n        }\r\n        .five-text-step h2 { font-size: 1.6rem; margin-bottom: 8px;}\r\n        .five-text-step p { font-size: 0.9rem; color: #666; } \r\n    }\r\n<\/style>\r\n\r\n<!-- ================= JS \u90e8\u5206 ================= -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    (function() {\r\n        const fiveTextSteps = document.querySelectorAll('.five-text-step');\r\n        const fiveScrollerTrack = document.getElementById('js-five-scroller-track');\r\n\r\n        if (!fiveTextSteps.length || !fiveScrollerTrack) return;\r\n\r\n        const fiveObserverOptions = {\r\n            rootMargin: \"-45% 0px -45% 0px\", \r\n            threshold: 0\r\n        };\r\n\r\n        const fiveIntersectionHandler = (entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    fiveTextSteps.forEach(step => step.classList.remove('active'));\r\n                    entry.target.classList.add('active');\r\n\r\n                    const currentStepIndex = parseInt(entry.target.getAttribute('data-index'), 10);\r\n                    \r\n                    \/\/ \u83b7\u53d6\u5f53\u524d\u8282\u70b9\u603b\u6570\uff0c\u8ba1\u7b97\u6bcf\u4e00\u8df3\u7684\u504f\u79fb\u52a8\u753b\r\n                    const totalScreens = fiveTextSteps.length; \r\n                    const slidePercentPerScreen = 100 \/ totalScreens; \r\n                    \r\n                    const scrollOffset = currentStepIndex * -slidePercentPerScreen;\r\n                    fiveScrollerTrack.style.transform = `translateY(${scrollOffset}%)`;\r\n                }\r\n            });\r\n        };\r\n\r\n        const fiveVisualObserver = new IntersectionObserver(fiveIntersectionHandler, fiveObserverOptions);\r\n\r\n        fiveTextSteps.forEach(stepItem => {\r\n            fiveVisualObserver.observe(stepItem);\r\n        });\r\n    })();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-66eacb2 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"66eacb2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe4878 elementor-widget elementor-widget-heading\" data-id=\"2fe4878\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CASE DETAIL<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8f86d4 elementor-widget elementor-widget-html\" data-id=\"a8f86d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <style>\r\n  \r\n       \r\n.case-header {\r\n\r\n    background-color: #000;\r\n}\r\n        .case-container {\r\n            width: 100%;\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2rem;\r\n            font-weight: 800;\r\n            margin-bottom: 40px;\r\n            text-align: center;\r\n            letter-spacing: -0.5px;\r\n        }\r\n\r\n        \/* ================= \u53ef\u5c55\u5f00\u7684 Case \u5361\u7247 ================= *\/\r\n        .case-card2 {\r\n            background: var(--card-bg-default);\r\n            border: 1px solid var(--border-subtle);\r\n            border-radius: 20px;\r\n            overflow: hidden;\r\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n            margin-bottom: 24px;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .case-card2:hover {\r\n            border-color: rgba(255,255,255,0.2);\r\n            background: var(--card-bg-active);\r\n        }\r\n\r\n        .case-card2.active {\r\n            border-color: var(--border-active);\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 40px rgba(59, 130, 246, 0.1);\r\n            background: var(--card-bg-active);\r\n            cursor: default; \/* \u5c55\u5f00\u540e\u4e3b\u4f53\u533a\u57df\u6062\u590d\u9ed8\u8ba4\u6307\u9488 *\/\r\n        }\r\n\r\n        \/* --- \u6298\u53e0\u65f6\u7684 Header (\u8bf1\u9975\u533a) --- *\/\r\n        .case-header {\r\n            padding: 30px 40px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .ch-left { display: flex; flex-direction: column; gap: 8px; }\r\n        .ch-tag { \r\n            font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;\r\n            color: var(--brand-blue); font-weight: 700; background: rgba(59,130,246,0.1);\r\n            padding: 4px 12px; border-radius: 20px; width: fit-content;\r\n        }\r\n        .ch-title { font-size: 1.5rem; font-weight: 700; color: #fff; }\r\n        .ch-cn { font-size: 0.95rem; color: var(--text-body); }\r\n\r\n        \/* \u53f3\u4fa7\u6838\u5fc3\u6570\u636e\u9ad8\u4eae *\/\r\n        .ch-right { display: flex; align-items: center; gap: 40px; }\r\n        .ch-metric { text-align: right; }\r\n        .ch-num { font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 4px;}\r\n        .ch-label { font-size: 0.85rem; color: #eee; font-weight: 500;}\r\n\r\n        \/* \u65cb\u8f6c\u7bad\u5934 *\/\r\n        .toggle-icon {\r\n                width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    border: 1px solid #8C7DFF;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.2rem;\r\n    transition: transform 0.4s, background 0.3s;\r\n    color: #8C7DFF;\r\n    cursor: pointer;\r\n        }\r\n        .case-card2:hover .toggle-icon { background: rgba(255,255,255,0.05); color: #fff; }\r\n        .case-card2.active .toggle-icon { transform: rotate(180deg); background: var(--text-heading); color: var(--bg-base); border-color: var(--text-heading);}\r\n\r\n        \/* --- \u5c55\u5f00\u65f6\u7684 Body (\u89e3\u5bc6\u533a) --- *\/\r\n        .case-body {\r\n            max-height: 0;\r\n            opacity: 0; background-color: #000;\r\n            overflow: hidden;\r\n            transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;\r\n            position: relative;\r\n        }\r\n\r\n        .case-card2.active .case-body {\r\n            max-height: 1000px; \/* \u8db3\u591f\u5927\u7684\u503c\u4ee5\u5bb9\u7eb3\u5185\u5bb9 *\/\r\n            opacity: 1;\r\n        }\r\n\r\n        .body-content {\r\n            padding: 0 40px 40px;\r\n            border-top: 1px solid rgba(255,255,255,0.05);\r\n            margin-top: 10px;\r\n            padding-top: 40px;\r\n            display: grid;\r\n            grid-template-columns: 1.2fr 1fr;\r\n            gap: 40px;\r\n        }\r\n\r\n        \/* \u5185\u90e8\u533a\u5757\u901a\u7528\u6837\u5f0f *\/\r\n        .detail-block { margin-bottom: 30px; }\r\n        .detail-block:last-child { margin-bottom: 0; }\r\n        \r\n        .block-title {\r\n            font-size:22px; text-transform: uppercase; font-weight: 700; color: #fff;\r\n            letter-spacing: 1.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;\r\n        }\r\n        .block-title::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; }\r\n        \r\n        .title-challenge::before { background:#8C7DFF; box-shadow: 0 0 10px var(--warning-orange);}\r\n        .title-strategy::before { background:#8C7DFF; box-shadow: 0 0 10px var(--brand-blue);}\r\n        .title-execution::before { background:#8C7DFF; }\r\n        .title-results::before { background: #8C7DFF; box-shadow: 0 0 10px var(--success-green);}\r\n\r\n        .en-text { font-size: 1.15rem; font-weight: 500; color: #E5E7EB; margin-bottom: 8px; line-height: 1.5;}\r\n        .cn-text { font-size: 0.95rem; color: #fff; line-height: 1.6;}\r\n\r\n        \/* Execution \u5217\u8868\u6837\u5f0f *\/\r\n        .exec-list { list-style: none; margin-top: 16px; }\r\n        .exec-list li {\r\n            position: relative; padding-left: 24px; margin-bottom: 12px;\r\n            font-size: 1.05rem; color: #E5E7EB; display: flex; flex-direction: column; gap: 4px;\r\n        }\r\n        .exec-list li::before {\r\n            content: '\u2192'; position: absolute; left: 0; top: 0; color: var(--brand-blue); font-weight: 800;\r\n        }\r\n        .exec-list li .span-cn { font-size: 0.9rem; color: var(--text-body); }\r\n\r\n        \/* \u7ed3\u679c\u6570\u636e\u6392\u7248 *\/\r\n        .results-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px 16px; align-items: center; margin-top: 16px;}\r\n        .r-val { font-size: 1.5rem; font-weight: 800; color:#8C7DFF; }\r\n        .r-text-en { font-size: 1rem; color: #E5E7EB; font-weight: 600; display: block;}\r\n        .r-text-cn { font-size: 0.85rem; color: var(--text-body); }\r\n        .r-text-wrapper { display: flex; flex-direction: column; }\r\n\r\n        \/* \u54cd\u5e94\u5f0f *\/\r\n        @media (max-width: 768px) {\r\n            .case-header { padding: 24px; flex-direction: column; align-items: flex-start; gap: 24px;}\r\n            .ch-right { width: 100%; justify-content: space-between; }\r\n            .body-content { padding: 0 24px 30px; grid-template-columns: 1fr; gap: 30px; }\r\n        }\r\n    <\/style>\r\n\r\n\r\n<div class=\"case-container\">\r\n\r\n    <!-- \u53ef\u5c55\u5f00\u7684\u6848\u4f8b\u5361\u7247 -->\r\n    <div class=\"case-card2\" onclick=\"toggleCase(this)\">\r\n        \r\n        <!-- ================= \u8bf1\u9975\u533a ================= -->\r\n        <div class=\"case-header\">\r\n            <div class=\"ch-left\">\r\n                <div class=\"ch-title\">Case Detail Example<\/div>\r\n            <\/div>\r\n            <div class=\"ch-right\">\r\n                <div class=\"ch-metric\">\r\n                    <div class=\"ch-num\">+210%<\/div>\r\n                    <div class=\"ch-label\">Conversion Rate<\/div>\r\n                <\/div>\r\n                <div class=\"toggle-icon\">\u2193<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ================= \u89e3\u5bc6\u533a (\u9690\u85cf\u5185\u5bb9) ================= -->\r\n        <div class=\"case-body\" onclick=\"event.stopPropagation();\">\r\n            <div class=\"body-content\">\r\n                \r\n                <!-- \u5de6\u5217\uff1a\u6311\u6218\u4e0e\u6218\u7565 -->\r\n                <div class=\"left-col\">\r\n                    <div class=\"detail-block\">\r\n                        <div class=\"block-title title-challenge\">Challenge <\/div>\r\n                        <div class=\"en-text\">Low conversion despite strong traffic.<\/div>\r\n                        \r\n                    <\/div>\r\n\r\n                    <div class=\"detail-block\">\r\n                        <div class=\"block-title title-strategy\">Strategy <\/div>\r\n                        <div class=\"en-text\">Rebuilt funnel with private domain integration.<\/div>\r\n                       \r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- \u53f3\u5217\uff1a\u6267\u884c\u4e0e\u7ed3\u679c -->\r\n                <div class=\"right-col\">\r\n                    <div class=\"detail-block\">\r\n                        <div class=\"block-title title-execution\">Execution <\/div>\r\n                        <ul class=\"exec-list\">\r\n                            <li>\r\n                                TikTok content\r\n                               \r\n                            <\/li>\r\n                            <li>\r\n                               Community building\r\n                               \r\n                            <\/li>\r\n                            <li>\r\n                                Email follow-up\r\n                            <\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n\r\n                    <div class=\"detail-block\">\r\n                        <div class=\"block-title title-results\">Results <\/div>\r\n                        <div class=\"results-grid\">\r\n                            <div class=\"r-val\">210%<\/div>\r\n                            <div class=\"r-text-wrapper\">\r\n                                <span class=\"r-text-en\">Conversion Lift<\/span>\r\n                               \r\n                            <\/div>\r\n\r\n                            <div class=\"r-val\" style=\"font-size: 1.2rem; color: #fff;\">\u2193<\/div>\r\n                            <div class=\"r-text-wrapper\">\r\n                                <span class=\"r-text-en\">Lower CAC<\/span>\r\n                                \r\n                            <\/div>\r\n\r\n                            <div class=\"r-val\" style=\"font-size: 1.2rem; color: #fff;\">\u2191<\/div>\r\n                            <div class=\"r-text-wrapper\">\r\n                                <span class=\"r-text-en\">Higher Retention<\/span>\r\n                               \r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- \u63a7\u5236\u5c55\u5f00\/\u6298\u53e0\u7684\u6781\u7b80\u811a\u672c -->\r\n<script>\r\n    function toggleCase(element) {\r\n        \/\/ \u5207\u6362 active \u7c7b\uff0c\u901a\u8fc7 CSS \u63a7\u5236\u52a8\u753b\r\n        element.classList.toggle('active');\r\n    }\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db4bd48 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"db4bd48\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e306f41 elementor-widget elementor-widget-heading\" data-id=\"e306f41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BEFORE vs AFTER<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d84e70 elementor-widget elementor-widget-html\" data-id=\"7d84e70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <style>\r\n        body { font-family:\"Roboto\", Sans-serif; }\r\n        .glass-badge { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }\r\n        .to-indigo-900 {\r\n    --tw-gradient-to: #8c7dff;\r\n            \r\n        }\r\n .border-blue-800\\\/50 {\r\n    border-color: rgb(166 167 168 \/ 50%);\r\n}\r\n.from-blue-900 {\r\n   --tw-gradient-from: #8c7dff!important;\r\n}\r\n.border-blue-700 {\r\n    --tw-border-opacity: 1;\r\n    border-color: rgb(140 125 255)!important;\r\n}\r\n.text-blue-600 {\r\n    --tw-text-opacity: 1;\r\n    color: rgb(140 125 255)!important;\r\n}\r\n    <\/style>\r\n\r\n    <!-- \ud83d\udd25 BEFORE vs AFTER \u6a21\u5757\u6838\u5fc3\u4ee3\u7801\u5f00\u59cb \ud83d\udd25 -->\r\n    <div class=\"w-full max-w-5xl mx-auto relative cursor-default\">\r\n        \r\n        <!-- \u6a21\u5757\u6807\u9898 (\u53ef\u6839\u636e\u6574\u4f53\u9875\u9762\u7701\u7565) -->\r\n        <div class=\"text-center mb-12 hidden\">\r\n            <h2 class=\"text-3xl font-extrabold text-gray-900\">Transformation<\/h2>\r\n        <\/div>\r\n\r\n        <!-- \u5de6\u53f3\u5bf9\u6bd4\u5bb9\u5668 flex \u5e03\u5c40 -->\r\n        <div class=\"relative flex flex-col md:flex-row gap-6 md:gap-8 items-stretch\">\r\n\r\n            <!-- \ud83c\udfaf \u4e2d\u95f4\u8fde\u63a5\u5668 (\u684c\u9762\u7aef\u663e\u793a\u4e3a\u60ac\u6d6e\u7bad\u5934\uff0c\u79fb\u52a8\u7aef\u9690\u85cf) -->\r\n            <div class=\"hidden md:flex absolute left-1\/2 top-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-14 h-14 glass-badge rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-gray-100 items-center justify-center z-20 text-blue-600 transition-transform hover:scale-110\">\r\n                <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <!-- \u274c LEFT SIDE: BEFORE (\u75db\u70b9\/\u73b0\u72b6) -->\r\n            <div class=\"flex-1 bg-white rounded-3xl p-8 md:p-12 border border-gray-200 shadow-sm relative overflow-hidden group hover:shadow-md transition-shadow\">\r\n                <!-- \u9876\u90e8\u6a21\u7cca\u88c5\u9970 -->\r\n                <div class=\"absolute -top-10 -right-10 w-32 h-32 bg-red-50 rounded-full blur-3xl opacity-50\"><\/div>\r\n                \r\n                <div class=\"relative z-10\">\r\n                    <!-- \u6807\u5934 -->\r\n                    <div class=\"mb-10 text-gray-400 font-bold flex items-end gap-3 border-b border-gray-100 pb-4\">\r\n                        <span class=\"text-3xl text-gray-900 font-black tracking-tight\">Before<\/span>\r\n                      \r\n                    <\/div>\r\n\r\n                    <!-- \u75db\u70b9\u5217\u8868 -->\r\n                    <ul class=\"space-y-8\">\r\n                        <!-- Item 1 -->\r\n                        <li class=\"flex items-start gap-5\">\r\n                            <div class=\"mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-red-500\">\r\n                                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"text-xl font-bold text-gray-900 mb-1\">High traffic<\/h4>\r\n                               \r\n                            <\/div>\r\n                        <\/li>\r\n                        \r\n                        <!-- Item 2 -->\r\n                        <li class=\"flex items-start gap-5\">\r\n                            <div class=\"mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-red-500\">\r\n                                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"text-xl font-bold text-gray-900 mb-1\">Low conversion<\/h4>\r\n                                \r\n                            <\/div>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u2705 RIGHT SIDE: AFTER (\u89e3\u51b3\/\u7ed3\u679c - \u4f7f\u7528\u5f3a\u89c6\u89c9\u989c\u8272) -->\r\n            <div class=\"flex-1 bg-gradient-to-br from-blue-900 to-indigo-900 rounded-3xl p-8 md:p-12 border border-blue-700 shadow-[0_20px_40px_-15px_rgba(37,99,235,0.5)] relative overflow-hidden group hover:-translate-y-1 transition-transform duration-300\">\r\n                <!-- \u80cc\u666f\u5149\u6548\u88c5\u9970 -->\r\n                <div class=\"absolute top-0 right-0 -mt-10 -mr-10 w-48 h-48 bg-blue-500 rounded-full blur-[80px] opacity-40\"><\/div>\r\n                <div class=\"absolute bottom-0 left-0 -mb-10 -ml-10 w-48 h-48 bg-indigo-500 rounded-full blur-[80px] opacity-20\"><\/div>\r\n\r\n                <div class=\"relative z-10\">\r\n                    <!-- \u6807\u5934 -->\r\n                    <div class=\"mb-10 text-blue-300 font-bold flex items-end gap-3 border-b border-blue-800\/50 pb-4\">\r\n                        <span class=\"text-3xl text-white font-black tracking-tight\">After<\/span>\r\n                       \r\n                    <\/div>\r\n\r\n                    <!-- \u6210\u679c\u5217\u8868 -->\r\n                    <ul class=\"space-y-8\">\r\n                        <!-- Item 1 -->\r\n                        <li class=\"flex items-start gap-5\">\r\n                            <div class=\"mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center text-emerald-400 border border-emerald-500\/30\">\r\n                                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"text-xl font-bold text-white mb-1\">Structured funnel<\/h4>\r\n                                \r\n                            <\/div>\r\n                        <\/li>\r\n                        \r\n                        <!-- Item 2 -->\r\n                        <li class=\"flex items-start gap-5\">\r\n                            <div class=\"mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center text-emerald-400 border border-emerald-500\/30\">\r\n                                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"text-xl font-bold text-white mb-1\">Predictable revenue<\/h4>\r\n                              \r\n                            <\/div>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n    <!-- \ud83d\udd25 BEFORE vs AFTER \u6a21\u5757\u6838\u5fc3\u4ee3\u7801\u7ed3\u675f \ud83d\udd25 -->\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17df74c e-flex e-con-boxed e-con e-parent\" data-id=\"17df74c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31fb2f3 elementor-widget elementor-widget-heading\" data-id=\"31fb2f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SOCIAL PROOF<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3665102 elementor-widget elementor-widget-text-editor\" data-id=\"3665102\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u201cThey didn\u2019t just improve performance \u2014 they rebuilt how our business grows.\u201d<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c69e25c elementor-align-center elementor-widget elementor-widget-button\" data-id=\"c69e25c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Find your growth path \u2014 and let\u2019s build your system<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Execution That Produces Measurable Outcomes HOW TO READ THESE RESULTS Each case below shows: The starting problem The system we implemented The measurable outcome You can filter by service, result type, or industry to quickly find examples relevant to your business. FILTER SYSTEM Filter by Service Full-Funnel Growth Video Production Social Growth TikTok Commerce Sell-First [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1057","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/pages\/1057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/comments?post=1057"}],"version-history":[{"count":655,"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/pages\/1057\/revisions"}],"predecessor-version":[{"id":2846,"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/pages\/1057\/revisions\/2846"}],"wp:attachment":[{"href":"https:\/\/www.lucas-admedia.com\/index.php\/wp-json\/wp\/v2\/media?parent=1057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}