{"id":3927,"date":"2025-12-29T15:47:59","date_gmt":"2025-12-29T15:47:59","guid":{"rendered":"https:\/\/mesoforming.com\/?page_id=3927"},"modified":"2026-01-16T18:44:50","modified_gmt":"2026-01-16T18:44:50","slug":"unduhan-pusat-rekayasa-mesoforming","status":"publish","type":"page","link":"https:\/\/mesoforming.com\/id\/unduhan-pusat-rekayasa-mesoforming\/","title":{"rendered":"Unduhan Pusat Rekayasa Mesoforming"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3927\" class=\"elementor elementor-3927\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d004ded e-con-full e-flex e-con e-parent\" data-id=\"d004ded\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b694406 e-con-full e-flex e-con e-child\" data-id=\"b694406\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f985f65 elementor-widget elementor-widget-html\" data-id=\"f985f65\" 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<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<!-- MESOFORMING ENGINEERING HUB - OPTIMIZED V4 -->\r\n<div id=\"meso-hub-isolated\">\r\n\r\n    <!-- 1. CSS STYLES (ORIGINAL DESIGN + LAYOUT FIX) -->\r\n    <style>\r\n        \/* =========================================\r\n           ISOLATION WRAPPER & RESET\r\n           ID: #meso-hub-isolated\r\n           ========================================= *\/\r\n        #meso-hub-isolated {\r\n            \/* LAYOUT FIX: display: flow-root creates a Block Formatting Context *\/\r\n            display: flow-root !important; \r\n            width: 100% !important;\r\n            clear: both !important; \/* Pushes footer down *\/\r\n            position: relative !important;\r\n            z-index: 1; \/* Ensures correct stacking order *\/\r\n            \r\n            \/* Theme Variables (Original) *\/\r\n            --primary-start: #711be1;\r\n            --primary-end: #4a00b0;\r\n            --primary-gradient: linear-gradient(135deg, var(--primary-start), var(--primary-end));\r\n            --accent: #ff6b00;\r\n            --accent-hover: #e65100;\r\n            --bg-light: #f8f9fa;\r\n            --bg-med: #e9ecef;\r\n            --text-dark: #212529;\r\n            --text-gray: #495057;\r\n            --white: #ffffff;\r\n            --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.1);\r\n            --shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.15);\r\n            --radius: 8px;\r\n            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n\r\n            \/* System Fonts *\/\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\r\n            color: var(--text-dark);\r\n            background-color: var(--bg-light);\r\n            line-height: 1.6;\r\n            text-align: left;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* Strict Internal Reset *\/\r\n        #meso-hub-isolated *, \r\n        #meso-hub-isolated *::before, \r\n        #meso-hub-isolated *::after {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #meso-hub-isolated h2, \r\n        #meso-hub-isolated p, \r\n        #meso-hub-isolated ul, \r\n        #meso-hub-isolated li, \r\n        #meso-hub-isolated button,\r\n        #meso-hub-isolated input {\r\n            margin: 0;\r\n            padding: 0;\r\n            border: none;\r\n            outline: none;\r\n            background: none;\r\n            list-style: none;\r\n            font-family: inherit;\r\n            letter-spacing: normal;\r\n            text-transform: none;\r\n        }\r\n\r\n        #meso-hub-isolated a {\r\n            text-decoration: none;\r\n            color: inherit;\r\n            cursor: pointer;\r\n            box-shadow: none;\r\n            border: none;\r\n        }\r\n\r\n        \/* Speed Optimization: Content Visibility *\/\r\n        #meso-hub-isolated .m-lazy-render {\r\n            content-visibility: auto;\r\n            contain-intrinsic-size: 600px;\r\n        }\r\n\r\n        \/* Animation *\/\r\n        @keyframes mFadeInUp {\r\n            from { opacity: 0; transform: translateY(20px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        .m-fade-in { animation: mFadeInUp 0.6s forwards; }\r\n\r\n        \/* =========================================\r\n           COMPONENT STYLES\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-container { \r\n            max-width: 1100px; \r\n            margin: 0 auto; \r\n            padding: 0 20px; \r\n            position: relative; \r\n            z-index: 2; \r\n        }\r\n        \r\n        \/* Buttons *\/\r\n        #meso-hub-isolated .m-btn { \r\n            display: inline-flex; \r\n            align-items: center; \r\n            justify-content: center; \r\n            padding: 12px 30px !important; \r\n            border-radius: 50px !important; \r\n            font-weight: 700 !important; \r\n            text-transform: uppercase; \r\n            cursor: pointer; \r\n            transition: var(--transition); \r\n            font-size: 0.9rem !important; \r\n            position: relative; \r\n            overflow: hidden; \r\n            letter-spacing: 0.5px !important;\r\n            line-height: 1.2 !important;\r\n        }\r\n        #meso-hub-isolated .m-btn i { margin-right: 8px; }\r\n        \r\n        #meso-hub-isolated .m-btn-primary { \r\n            background: var(--accent) !important; \r\n            color: white !important; \r\n            box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3); \r\n        }\r\n        #meso-hub-isolated .m-btn-primary:hover { \r\n            background: var(--accent-hover) !important; \r\n            transform: translateY(-3px); \r\n            box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5); \r\n        }\r\n        \r\n        #meso-hub-isolated .m-btn-outline-white { \r\n            background: transparent !important; \r\n            border: 2px solid rgba(255,255,255,0.5) !important; \r\n            color: white !important; \r\n        }\r\n        #meso-hub-isolated .m-btn-outline-white:hover { \r\n            background: rgba(255,255,255,0.1) !important; \r\n            border-color: white !important; \r\n            transform: translateY(-3px); \r\n        }\r\n\r\n        \/* Shine Effect *\/\r\n        #meso-hub-isolated .m-btn-primary::after { \r\n            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; \r\n            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); \r\n            transform: skewX(-25deg); animation: mShine 3s infinite; pointer-events: none; \r\n        }\r\n        @keyframes mShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\r\n\r\n        \/* Section Header *\/\r\n        #meso-hub-isolated .m-section-header { text-align: center; margin-bottom: 50px; }\r\n        #meso-hub-isolated .m-section-header h2 { \r\n            font-size: 2.2rem !important; \r\n            margin-bottom: 10px !important; \r\n            color: var(--text-dark) !important; \r\n            letter-spacing: -0.5px; \r\n            font-weight: 700 !important;\r\n            line-height: 1.3 !important;\r\n        }\r\n        #meso-hub-isolated .m-section-header p { \r\n            color: var(--text-gray); \r\n            max-width: 600px; \r\n            margin: 0 auto; \r\n            font-size: 1rem !important;\r\n        }\r\n\r\n        \/* =========================================\r\n           HERO SECTION\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-hero { \r\n            background-color: #000000; \r\n            background-image: \r\n                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),\r\n                url('https:\/\/mesoforming.com\/wp-content\/uploads\/2026\/01\/Engineer-uses-Mesoforming-software-to-design-3D-plastic-part-models.webp'); \r\n            background-size: cover;\r\n            background-position: center;\r\n            background-repeat: no-repeat;\r\n            padding: 120px 0 180px; \r\n            position: relative; \r\n            overflow: hidden; \r\n        }\r\n        \r\n        #meso-hub-isolated .m-hero-cad-bg {\r\n            position: absolute; top: 50%; right: -15%; transform: translateY(-50%) rotate(-10deg);\r\n            width: 600px; height: 600px;\r\n            background: url('https:\/\/placehold.co\/600x600\/FFFFFF\/4a00b0?text=CAD+Structure') no-repeat center; \r\n            opacity: 0.15; z-index: 1; pointer-events: none;\r\n        }\r\n\r\n        \/* Main Title: MODIFIED TO NORMAL WEIGHT *\/\r\n        #meso-hub-isolated .m-hero h2.m-main-title { \r\n            font-size: 3.5rem !important; \r\n            font-weight: 400 !important; \/* FIXED: Removed Bold *\/\r\n            line-height: 1.1 !important; \r\n            margin-bottom: 15px !important; \r\n            color: #ffffff !important; \r\n        }\r\n        #meso-hub-isolated .m-hero h2.m-main-title span {\r\n            color: #ffffff !important;\r\n        }\r\n\r\n        #meso-hub-isolated .m-hero p { \r\n            font-size: 1.2rem !important; \r\n            margin-bottom: 30px !important; \r\n            opacity: 0.9; \r\n            max-width: 600px; \r\n            font-weight: 400 !important; \r\n            color: #ffffff !important; \r\n        }\r\n\r\n        \/* Breadcrumbs *\/\r\n        #meso-hub-isolated .m-breadcrumbs { \r\n            font-size: 0.85rem !important; \r\n            color: rgba(255,255,255,0.7) !important; \r\n            margin-bottom: 25px !important; \r\n            font-weight: 500 !important; \r\n        }\r\n        #meso-hub-isolated .m-breadcrumbs a { \r\n            color: rgba(255,255,255,0.9); \r\n            border-bottom: 1px dotted rgba(255,255,255,0.5) !important; \r\n            transition: 0.2s; \r\n        }\r\n        #meso-hub-isolated .m-breadcrumbs a:hover { \r\n            color: #fff; \r\n            border-bottom-style: solid !important; \r\n        }\r\n        #meso-hub-isolated .m-breadcrumbs span { margin: 0 8px; opacity: 0.5; }\r\n\r\n        \/* =========================================\r\n           LEAD MAGNETS\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-lead-magnets { margin-top: -100px; position: relative; z-index: 10; padding-bottom: 60px; }\r\n        #meso-hub-isolated .m-magnet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }\r\n        \r\n        #meso-hub-isolated .m-magnet-card {\r\n            background: var(--white); padding: 40px 30px; border-radius: var(--radius);\r\n            box-shadow: var(--shadow-card); \r\n            position: relative; overflow: hidden; transition: var(--transition);\r\n            border-top: 5px solid transparent;\r\n        }\r\n        #meso-hub-isolated .m-magnet-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary-gradient); }\r\n        #meso-hub-isolated .m-magnet-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }\r\n        \r\n        #meso-hub-isolated .m-badge { \r\n            position: absolute; top: 15px; right: 15px; \r\n            background: rgba(113, 27, 225, 0.08); color: var(--primary-start); \r\n            padding: 5px 12px; border-radius: 20px; \r\n            font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.5px; \r\n        }\r\n        #meso-hub-isolated .m-magnet-icon { \r\n            font-size: 2.5rem !important; margin-bottom: 20px; \r\n            background: -webkit-linear-gradient(var(--primary-start), var(--accent)); \r\n            -webkit-background-clip: text; -webkit-text-fill-color: transparent; \r\n        }\r\n        #meso-hub-isolated .m-magnet-card h3 {\r\n            font-size: 1.5rem !important;\r\n            font-weight: 700 !important;\r\n            margin-bottom: 15px !important;\r\n            color: var(--text-dark);\r\n        }\r\n        \r\n        \/* =========================================\r\n           DOCS & TABS\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-docs-section { padding: 60px 0; background: var(--white); }\r\n        \r\n        #meso-hub-isolated .m-tabs-nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }\r\n        #meso-hub-isolated .m-tab-btn { \r\n            padding: 10px 25px !important; \r\n            border: 1px solid var(--bg-med) !important; \r\n            background: white !important; \r\n            color: var(--text-gray) !important; \r\n            border-radius: 30px !important; \r\n            cursor: pointer; transition: var(--transition); \r\n            font-weight: 600 !important; font-size: 0.95rem !important; \r\n        }\r\n        #meso-hub-isolated .m-tab-btn.active, \r\n        #meso-hub-isolated .m-tab-btn:hover { \r\n            background: var(--primary-start) !important; \r\n            color: white !important; \r\n            border-color: var(--primary-start) !important; \r\n            box-shadow: 0 5px 15px rgba(113, 27, 225, 0.2); \r\n        }\r\n        \r\n        #meso-hub-isolated .m-doc-item { \r\n            display: flex; align-items: center; background: var(--bg-light); \r\n            padding: 20px; border-radius: var(--radius); \r\n            border: 1px solid var(--bg-med); margin-bottom: 15px; transition: var(--transition); \r\n        }\r\n        #meso-hub-isolated .m-doc-item:hover { \r\n            background: white; border-color: var(--primary-start); \r\n            box-shadow: var(--shadow-card); transform: translateX(5px); \r\n        }\r\n        \r\n        #meso-hub-isolated .m-doc-thumb { \r\n            width: 50px; height: 50px; background: white; \r\n            display: flex; align-items: center; justify-content: center; \r\n            border-radius: 6px; margin-right: 20px; \r\n            font-size: 1.5rem !important; color: var(--primary-start); \r\n            border: 1px solid var(--bg-med); \r\n        }\r\n        #meso-hub-isolated .m-doc-info h4 {\r\n            font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 5px !important;\r\n        }\r\n        #meso-hub-isolated .m-doc-actions { display: flex; gap: 10px; margin-left: auto; }\r\n        \r\n        #meso-hub-isolated .m-btn-icon { \r\n            width: 38px; height: 38px; border-radius: 50% !important; \r\n            border: none !important; display: flex; align-items: center; justify-content: center; \r\n            cursor: pointer; transition: var(--transition); padding: 0 !important;\r\n        }\r\n        #meso-hub-isolated .m-btn-preview { background: rgba(113, 27, 225, 0.1) !important; color: var(--primary-start) !important; }\r\n        #meso-hub-isolated .m-btn-download { background: var(--white) !important; color: var(--text-gray) !important; border: 1px solid var(--bg-med) !important; }\r\n        #meso-hub-isolated .m-btn-download.gated { background: rgba(255, 107, 0, 0.1) !important; color: var(--accent) !important; border: none !important; }\r\n        #meso-hub-isolated .m-btn-icon:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }\r\n\r\n        \/* =========================================\r\n           EDUCATION SECTION\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-edu-section { padding: 80px 0; background: var(--bg-light); }\r\n        #meso-hub-isolated .m-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n        #meso-hub-isolated .m-resource-card { \r\n            background: white; padding: 30px; border-radius: var(--radius); \r\n            border-left: 4px solid var(--primary-start); transition: var(--transition); \r\n            box-shadow: var(--shadow-card); \r\n        }\r\n        #meso-hub-isolated .m-resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }\r\n        #meso-hub-isolated .m-link-text { \r\n            color: var(--primary-start) !important; font-weight: 700 !important; \r\n            font-size: 0.9rem !important; display: inline-flex; align-items: center; \r\n        }\r\n        #meso-hub-isolated .m-link-text i { margin-left: 5px; transition: 0.3s; }\r\n        #meso-hub-isolated .m-link-text:hover i { transform: translateX(5px); }\r\n\r\n        \/* =========================================\r\n           FAQ SECTION\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-faq-section { padding: 80px 0; background: var(--white); }\r\n        \r\n        #meso-hub-isolated .m-faq-search-wrapper { position: relative; max-width: 600px; margin: 0 auto 35px; }\r\n        #meso-hub-isolated .m-faq-search-input { \r\n            width: 100%; padding: 15px 50px 15px 25px !important; \r\n            border-radius: 50px !important; border: 2px solid var(--bg-med) !important; \r\n            font-size: 1rem !important; transition: var(--transition); outline: none; \r\n            background: var(--bg-light); color: var(--text-dark);\r\n        }\r\n        #meso-hub-isolated .m-faq-search-input:focus { border-color: var(--primary-start) !important; box-shadow: 0 5px 20px rgba(113, 27, 225, 0.1); background: white; }\r\n        #meso-hub-isolated .m-search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--primary-start); }\r\n\r\n        #meso-hub-isolated .m-faq-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }\r\n        #meso-hub-isolated .m-faq-tab-btn { \r\n            background: transparent !important; border: 1px solid var(--bg-med) !important; \r\n            padding: 8px 25px !important; border-radius: 30px !important; \r\n            color: var(--text-gray) !important; cursor: pointer; \r\n            font-size: 0.9rem !important; transition: var(--transition); font-weight: 500 !important; \r\n        }\r\n        #meso-hub-isolated .m-faq-tab-btn.active { \r\n            background: rgba(113, 27, 225, 0.1) !important; color: var(--primary-start) !important; \r\n            border-color: transparent !important; font-weight: 700 !important; \r\n        }\r\n\r\n        #meso-hub-isolated .m-accordion-container { border-top: 1px solid var(--bg-med); max-width: 900px; margin: 0 auto; }\r\n        #meso-hub-isolated .m-accordion-item { border-bottom: 1px solid var(--bg-med); }\r\n        #meso-hub-isolated .m-accordion-header { \r\n            width: 100%; padding: 22px 20px !important; background: none !important; \r\n            border: none !important; text-align: left; \r\n            font-size: 1.05rem !important; font-weight: 600 !important; \r\n            color: var(--text-dark) !important; cursor: pointer; \r\n            display: flex; justify-content: space-between; align-items: center; \r\n            transition: 0.2s; \r\n        }\r\n        #meso-hub-isolated .m-accordion-header:hover { background: var(--bg-light) !important; color: var(--primary-start) !important; }\r\n        #meso-hub-isolated .m-accordion-header.active { color: var(--primary-start) !important; }\r\n        #meso-hub-isolated .m-accordion-header.active i { transform: rotate(180deg); }\r\n        #meso-hub-isolated .m-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 20px; }\r\n        #meso-hub-isolated .m-accordion-inner { padding-bottom: 25px; color: var(--text-gray); font-size: 0.95rem; line-height: 1.7; }\r\n        #meso-hub-isolated .m-inline-cta { \r\n            color: var(--accent); font-weight: 700; \r\n            border-bottom: 1px dotted var(--accent); cursor: pointer; \r\n            margin-left: 5px; font-size: 0.9rem; \r\n        }\r\n        #meso-hub-isolated .m-inline-cta:hover { color: var(--accent-hover); border-bottom-style: solid; }\r\n\r\n        \/* The Trap *\/\r\n        #meso-hub-isolated .m-engineer-trap { \r\n            background: var(--text-dark); color: white; padding: 35px; \r\n            border-radius: var(--radius); margin-top: 50px; \r\n            display: flex; align-items: center; justify-content: space-between; \r\n            gap: 30px; max-width: 900px; margin-left: auto; margin-right: auto; \r\n            position: relative; overflow: hidden; box-shadow: var(--shadow-card); \r\n        }\r\n        #meso-hub-isolated .m-engineer-trap::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: var(--accent); }\r\n        #meso-hub-isolated .m-trap-input { \r\n            flex: 1; padding: 12px !important; border-radius: 4px !important; \r\n            border: none !important; font-size: 0.95rem !important; background: white;\r\n        }\r\n        \r\n        \/* =========================================\r\n           FOOTER & MODALS\r\n           ========================================= *\/\r\n        #meso-hub-isolated .m-custom-cta { background: var(--bg-med); padding: 80px 0; text-align: center; }\r\n        #meso-hub-isolated .m-cta-content { \r\n            max-width: 700px; margin: 0 auto; background: white; padding: 50px; \r\n            border-radius: var(--radius); box-shadow: var(--shadow-card); position: relative; \r\n        }\r\n        #meso-hub-isolated .m-cta-avatar { \r\n            width: 110px; height: 110px; border-radius: 50%; object-fit: cover; \r\n            border: 4px solid var(--accent); margin-top: -90px; margin-bottom: 25px; \r\n            background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); \r\n        }\r\n\r\n        #meso-hub-isolated .m-modal-overlay { \r\n            position: fixed; top: 0; left: 0; width: 100%; height: 100%; \r\n            background: rgba(0,0,0,0.85); z-index: 99999; display: none; \r\n            justify-content: center; align-items: center; backdrop-filter: blur(5px); \r\n        }\r\n        #meso-hub-isolated .m-modal-box { \r\n            background: white; padding: 40px; border-radius: var(--radius); \r\n            width: 90%; max-width: 450px; position: relative; \r\n            animation: mFadeInUp 0.3s forwards; border-top: 4px solid var(--accent); \r\n            box-shadow: 0 25px 50px rgba(0,0,0,0.3); text-align: left;\r\n        }\r\n        #meso-hub-isolated .m-close-modal { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; color: #999; }\r\n        #meso-hub-isolated .m-form-input { \r\n            width: 100%; padding: 12px !important; border: 1px solid var(--bg-med) !important; \r\n            border-radius: 4px !important; margin-bottom: 15px !important; font-family: inherit; \r\n        }\r\n        \r\n        #meso-hub-isolated .m-sticky-bar { \r\n            position: fixed; bottom: -100px; left: 0; width: 100%; \r\n            background: white; padding: 15px 20px; \r\n            box-shadow: 0 -5px 25px rgba(0,0,0,0.1); \r\n            display: flex; justify-content: center; align-items: center; \r\n            gap: 15px; z-index: 8000; transition: bottom 0.5s ease; \r\n            border-top: 3px solid var(--primary-start); \r\n        }\r\n        #meso-hub-isolated .m-sticky-bar.visible { bottom: 0; }\r\n        \r\n        @media (max-width: 768px) {\r\n            #meso-hub-isolated .m-hero h2.m-main-title { font-size: 2.2rem !important; }\r\n            #meso-hub-isolated .m-engineer-trap { flex-direction: column; text-align: center; }\r\n            #meso-hub-isolated .m-sticky-bar { flex-direction: column; padding: 15px; gap: 10px; }\r\n            #meso-hub-isolated .m-sticky-bar span { display: none; }\r\n            #meso-hub-isolated .m-cta-content { padding: 30px 20px; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- 2. EXTERNAL ASSETS (Non-blocking) -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" media=\"print\" onload=\"this.media='all'\">\r\n\r\n    <!-- 3. HTML STRUCTURE -->\r\n    \r\n    <!-- HERO SECTION -->\r\n    <header class=\"m-hero\">\r\n        <div class=\"m-hero-cad-bg\"><\/div>\r\n        <div class=\"m-container m-fade-in\">\r\n            <div style=\"max-width: 700px;\">\r\n                <!-- H2 Structure (Weight Normalized) -->\r\n                <h2 class=\"m-main-title\">Data-Driven <br><span>Thermoforming Success<\/span><\/h2>\r\n                \r\n                <!-- Breadcrumbs -->\r\n                <nav aria-label=\"breadcrumb\" class=\"m-breadcrumbs\">\r\n                    <a href=\"https:\/\/mesoforming.com\">Home<\/a> <span>\/<\/span> \r\n                    <a href=\"https:\/\/mesoforming.com\/mesoforming-engineering-hub-downloads\">Mesoforming Engineering Hub Downloads<\/a>\r\n                <\/nav>\r\n\r\n                <p>Access the same engineering data, ROI tools, and mold guides used by 500+ top manufacturers. Don't guess your profits\u2014calculate them.<\/p>\r\n                \r\n                <div style=\"display: flex; gap: 15px; flex-wrap: wrap;\">\r\n                    <button class=\"m-btn m-btn-primary\" onclick=\"mScrollTo('m-lead-magnets')\">\r\n                        <i class=\"fa-solid fa-calculator\"><\/i> Go to ROI Tools\r\n                    <\/button>\r\n                    <!-- Link: Catalog -->\r\n                    <button class=\"m-btn m-btn-outline-white\" onclick=\"window.location.href='https:\/\/mesoforming.com\/mesoforming-product-catalog'\">\r\n                        <i class=\"fa-solid fa-download\"><\/i> Download 2025 Catalog\r\n                    <\/button>\r\n                <\/div>\r\n                \r\n                <div style=\"margin-top: 30px; display: flex; align-items: center; gap: 20px; font-size: 0.85rem; opacity: 0.8; color: white;\">\r\n                    <span><i class=\"fa-solid fa-circle-check\" style=\"color: #00e676;\"><\/i> Updated Dec 2025<\/span>\r\n                    <span><i class=\"fa-solid fa-users\"><\/i> 2,100+ Engineers<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- LEAD MAGNETS (ROI Tools) -->\r\n    <section id=\"m-lead-magnets\" class=\"m-lead-magnets\">\r\n        <div class=\"m-container\">\r\n            <div class=\"m-magnet-grid\">\r\n                <!-- Tool A -->\r\n                <article class=\"m-magnet-card\">\r\n                    <span class=\"m-badge\">Most Popular<\/span>\r\n                    <div class=\"m-magnet-icon\"><i class=\"fa-regular fa-file-excel\"><\/i><\/div>\r\n                    <h3>Servo vs. Hydraulic Cost Simulator<\/h3>\r\n                    <p style=\"color: var(--text-gray); margin-bottom: 25px;\">Input your local electricity rate ($\/kWh) and labor cost to see exactly how much a Mesoforming Servo machine saves per year.<\/p>\r\n                    <button class=\"m-btn m-btn-primary\" style=\"width: 100%;\" onclick=\"mOpenModal('ROI Calculator (Excel)')\">\r\n                        Unlock & Download (XLS)\r\n                    <\/button>\r\n                <\/article>\r\n                <!-- Tool B -->\r\n                <article class=\"m-magnet-card\">\r\n                    <span class=\"m-badge\">Essential<\/span>\r\n                    <div class=\"m-magnet-icon\"><i class=\"fa-solid fa-clock-rotate-left\"><\/i><\/div>\r\n                    <h3>Output Capacity Cheat Sheet<\/h3>\r\n                    <p style=\"color: var(--text-gray); margin-bottom: 25px;\">Planning production? See estimated cycles-per-minute for PP, PET, and PS materials at different thicknesses on MF-Series.<\/p>\r\n                    <button class=\"m-btn m-btn-primary\" style=\"background: var(--text-dark) !important; width: 100%;\" onclick=\"mOpenModal('Capacity Cheat Sheet (PDF)')\">\r\n                        Get Capacity Data (PDF)\r\n                    <\/button>\r\n                <\/article>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- TECHNICAL DOCUMENTATION (Tabs) -->\r\n    <section class=\"m-docs-section m-lazy-render\">\r\n        <div class=\"m-container\">\r\n            <div class=\"m-section-header\">\r\n                <h2>Technical Documentation<\/h2>\r\n                <p>Filter by machine type to find specific parameters and drawings.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Tabs Navigation -->\r\n            <nav class=\"m-tabs-nav\">\r\n                <button class=\"m-tab-btn active\" onclick=\"mRenderDocs('cups')\">Cup Formers<\/button>\r\n                <button class=\"m-tab-btn\" onclick=\"mRenderDocs('lids')\">Lid Machines<\/button>\r\n                <button class=\"m-tab-btn\" onclick=\"mRenderDocs('molds')\">Molds & Tooling<\/button>\r\n            <\/nav>\r\n\r\n            <!-- Doc List Container -->\r\n            <div id=\"mDocList\" style=\"max-width: 800px; margin: 0 auto;\"><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- EDUCATIONAL RESOURCES -->\r\n    <section class=\"m-edu-section m-lazy-render\">\r\n        <div class=\"m-container\">\r\n            <div class=\"m-section-header\">\r\n                <h2>Engineer's Guides<\/h2>\r\n            <\/div>\r\n            <div class=\"m-magnet-grid\">\r\n                <div class=\"m-resource-card\">\r\n                    <h3><i class=\"fa-solid fa-leaf\" style=\"color: #4caf50;\"><\/i> PP vs. PLA Guide<\/h3>\r\n                    <p style=\"color: var(--text-gray); margin-bottom: 15px;\">How to adjust heater temperatures for biodegradable materials to avoid webbing.<\/p>\r\n                    <a class=\"m-link-text\">Read Guide <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n                <div class=\"m-resource-card\">\r\n                    <h3><i class=\"fa-solid fa-triangle-exclamation\" style=\"color: #ff9800;\"><\/i> Troubleshooting<\/h3>\r\n                    <p style=\"color: var(--text-gray); margin-bottom: 15px;\">Wall thickness uneven? Download the \"Top 10 Defects & Solutions\" checklist.<\/p>\r\n                    <a class=\"m-link-text\">Download Checklist <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n                <div class=\"m-resource-card\">\r\n                    <h3><i class=\"fa-solid fa-wrench\" style=\"color: var(--primary-start);\"><\/i> Mold Maintenance<\/h3>\r\n                    <p style=\"color: var(--text-gray); margin-bottom: 15px;\">Cleaning and lubrication schedule to extend your Mesoforming CNC mold life.<\/p>\r\n                    <a class=\"m-link-text\">Get Schedule <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- OPTIMIZED FAQ SECTION -->\r\n    <section class=\"m-faq-section m-lazy-render\" id=\"m-faq\">\r\n        <div class=\"m-container\">\r\n            <div class=\"m-section-header\">\r\n                <h2>Tech Support & FAQ<\/h2>\r\n                <p>Real answers to tough questions. No marketing fluff.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Search -->\r\n            <div class=\"m-faq-search-wrapper\">\r\n                <input type=\"text\" id=\"mFaqSearch\" class=\"m-faq-search-input\" placeholder=\"Search (e.g., 'Power', 'Mold', 'Spare Parts')...\">\r\n                <i class=\"fa-solid fa-magnifying-glass m-search-icon\"><\/i>\r\n            <\/div>\r\n\r\n            <!-- Tabs (View All First) -->\r\n            <div class=\"m-faq-tabs\">\r\n                <button class=\"m-faq-tab-btn active\" onclick=\"mFilterFAQ('all')\">View All<\/button>\r\n                <button class=\"m-faq-tab-btn\" onclick=\"mFilterFAQ('technical')\">Technical & Molds<\/button>\r\n                <button class=\"m-faq-tab-btn\" onclick=\"mFilterFAQ('roi')\">ROI & Investment<\/button>\r\n                <button class=\"m-faq-tab-btn\" onclick=\"mFilterFAQ('service')\">Service & Logistics<\/button>\r\n            <\/div>\r\n\r\n            <!-- Accordion List -->\r\n            <div id=\"mFaqContainer\" class=\"m-accordion-container\">\r\n                <!-- Data injected via JS -->\r\n            <\/div>\r\n\r\n            <!-- The Trap -->\r\n            <div class=\"m-engineer-trap\">\r\n                <div style=\"flex: 1;\">\r\n                    <h3 style=\"font-size: 1.2rem; margin-bottom: 5px; color:white !important;\">Have a trickier question?<\/h3>\r\n                    <p style=\"opacity: 0.8; font-size: 0.9rem; color:white !important;\">Our Chief Engineer loves a challenge. (Typical reply: 4 hours)<\/p>\r\n                <\/div>\r\n                <div style=\"display: flex; gap: 10px; width: 100%; max-width: 350px;\">\r\n                    <input type=\"text\" class=\"m-trap-input\" placeholder=\"Type your technical question...\">\r\n                    <!-- Link: Contact -->\r\n                    <button class=\"m-btn m-btn-primary\" style=\"padding: 0 20px !important; font-size: 0.8rem !important;\" onclick=\"window.location.href='https:\/\/mesoforming.com\/contact'\">Ask<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- FOOTER \/ CUSTOM SOLUTION -->\r\n    <footer class=\"m-custom-cta\">\r\n        <div class=\"m-container\">\r\n            <div class=\"m-cta-content\">\r\n                <!-- Real Avatar Image -->\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=200&q=80\" alt=\"Mesoforming Chief Engineer\" class=\"m-cta-avatar\" loading=\"lazy\">\r\n                <h2>\"Every factory is unique.\"<\/h2>\r\n                <p style=\"margin: 15px 0 30px;\">Can't find the specific data you need? Our team can provide a Custom Production Line Proposal based on your product size and output target.<\/p>\r\n                <!-- Link: Contact -->\r\n                <button class=\"m-btn m-btn-primary\" onclick=\"window.location.href='https:\/\/mesoforming.com\/contact'\">Request Custom Proposal<\/button>\r\n                <div style=\"margin-top: 20px;\">\r\n                    <!-- Full Phone Number -->\r\n                    <a href=\"https:\/\/wa.me\/8618025612076\" style=\"color: var(--accent); font-weight: 500;\"><i class=\"fa-brands fa-whatsapp\"><\/i> Direct Line: +86 18025612076<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <!-- STICKY BOTTOM BAR -->\r\n    <div id=\"mStickyBar\" class=\"m-sticky-bar\">\r\n        <div style=\"font-weight: 600; color: var(--text-dark);\">\r\n            <i class=\"fa-solid fa-circle-question\" style=\"color: var(--primary-start);\"><\/i> Can't find the parameter you need?\r\n        <\/div>\r\n        <!-- Link: Contact -->\r\n        <button class=\"m-btn m-btn-primary\" style=\"padding: 8px 25px !important; font-size: 0.85rem !important;\" onclick=\"window.location.href='https:\/\/mesoforming.com\/contact'\">Ask an Engineer<\/button>\r\n        <button onclick=\"document.getElementById('mStickyBar').style.display='none'\" style=\"background:none; border:none; color:#999; cursor:pointer; font-size:1.5rem; padding: 5px;\">&times;<\/button>\r\n    <\/div>\r\n\r\n    <!-- MODAL: LEAD CAPTURE -->\r\n    <div id=\"mLeadModal\" class=\"m-modal-overlay\">\r\n        <div class=\"m-modal-box\">\r\n            <span class=\"m-close-modal\" onclick=\"mCloseModal()\">&times;<\/span>\r\n            <div style=\"text-align: center; margin-bottom: 20px;\">\r\n                <i class=\"fa-regular fa-paper-plane\" style=\"font-size: 2rem; color: var(--primary-start);\"><\/i>\r\n                <h3 style=\"margin-top: 10px;\">Where should we send it?<\/h3>\r\n                <p id=\"mModalDesc\" style=\"font-size: 0.9rem; color: var(--text-gray);\">Enter your email to unlock this tool.<\/p>\r\n            <\/div>\r\n            <form onsubmit=\"event.preventDefault(); alert('Thank you! The file has been sent to your email.'); mCloseModal();\">\r\n                <input type=\"email\" class=\"m-form-input\" placeholder=\"Work Email (e.g., name@factory.com)\" required>\r\n                <input type=\"text\" class=\"m-form-input\" placeholder=\"Your Name\" required>\r\n                <button type=\"submit\" class=\"m-btn m-btn-primary\" style=\"width: 100%;\">Send Now<\/button>\r\n                <p style=\"text-align: center; font-size: 0.75rem; margin-top: 15px; color: #aaa;\">\r\n                    <i class=\"fa-solid fa-lock\"><\/i> No spam. Engineers only.\r\n                <\/p>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- MODAL: PREVIEW -->\r\n    <div id=\"mPreviewModal\" class=\"m-modal-overlay\">\r\n        <div class=\"m-modal-box\" style=\"max-width: 700px; padding: 0; border: none; overflow: hidden;\">\r\n            <span class=\"m-close-modal\" onclick=\"document.getElementById('mPreviewModal').style.display='none'\" style=\"color: white; right: 15px; top: 15px; text-shadow: 0 0 5px black;\">&times;<\/span>\r\n            <div style=\"position: relative;\">\r\n                <img decoding=\"async\" src=\"https:\/\/placehold.co\/700x400\/ffffff\/cccccc?text=Blurry+Technical+Drawing+(Page+1)\" style=\"width: 100%; display: block;\" alt=\"Document Preview\">\r\n                <div style=\"position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: rgba(255,255,255,0.95); text-align: center;\">\r\n                    <h4>Previewing Page 1 of 12<\/h4>\r\n                    <p style=\"font-size: 0.9rem; margin-bottom: 10px;\">Download full PDF to see precise dimensions.<\/p>\r\n                    <button class=\"m-btn m-btn-primary\" onclick=\"document.getElementById('mPreviewModal').style.display='none'; mOpenModal('Full PDF Drawing')\">Download Full PDF<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 4. JAVASCRIPT LOGIC (Polling for Stability) -->\r\n    <script>\r\n        (function() {\r\n            \/\/ 1. DATA CONFIGURATION\r\n            const docData = {\r\n                cups: [\r\n                    { title: \"MF-500 General Brochure\", type: \"PDF\", size: \"2.5MB\", locked: false, desc: \"Features, photos, basic parameters.\" },\r\n                    { title: \"Installation & Utility Guide\", type: \"DWG\", size: \"12MB\", locked: true, desc: \"Floor plan requirements, power & air consumption.\" },\r\n                    { title: \"Meso-Servo Engine Specs\", type: \"PDF\", size: \"1.2MB\", locked: true, desc: \"Detailed servo motor torque curves.\" }\r\n                ],\r\n                lids: [\r\n                    { title: \"Lid-Master Series Brochure\", type: \"PDF\", size: \"3.0MB\", locked: false, desc: \"High speed lid forming overview.\" },\r\n                    { title: \"Stacker Configuration\", type: \"PDF\", size: \"4MB\", locked: true, desc: \"Automated stacking options.\" }\r\n                ],\r\n                molds: [\r\n                    { title: \"Mold Adapter Specifications\", type: \"PDF\", size: \"1.5MB\", locked: true, desc: \"Check compatibility with Kiefel\/Illig.\" },\r\n                    { title: \"Standard Cup Dimensions\", type: \"XLS\", size: \"500KB\", locked: false, desc: \"Common market sizes reference.\" }\r\n                ]\r\n            };\r\n\r\n            const faqData = [\r\n                { id: 1, category: 'technical', question: \"1. Can existing molds from other manufacturers (e.g., Kiefel\/Illig) run on Mesoforming machines?\", answer: \"In 90% of cases, Yes. Our platen design is compatible with most European standard molds using simple adapter plates. We can save you $50,000+ on new tooling.\", ctaText: \"Download Mold Adapter Spec (PDF)\", action: \"mOpenModal('Mold Adapter Spec')\" },\r\n                { id: 2, category: 'technical', question: \"2. How does the Servo System actually reduce energy consumption compared to Hydraulic?\", answer: \"Hydraulic systems waste energy running the pump continuously. Our <strong>Meso-Servo\u2122 technology<\/strong> only consumes power during movement, reducing energy bills by 30-40%.\", ctaText: \"Use ROI Calculator\", action: \"mOpenModal('ROI Calculator')\" },\r\n                { id: 3, category: 'technical', question: \"3. What makes your machine suitable for PP (Polypropylene) deep-draw forming?\", answer: \"PP shrinks and sticks. We solve this with Servo-driven Plug Assist (precision depth control) and a 5-Zone PID Temperature Control system to ensure uniform wall thickness.\", ctaText: \"See PP Deep Cup Sample Gallery\", action: \"alert('Redirecting to Gallery...')\" },\r\n                { id: 4, category: 'roi', question: \"4. Why is your machine price higher than normal pneumatic machines in China?\", answer: \"We are not selling 'cheap' iron. We sell 'efficiency'. While the upfront cost is 20% higher, the 2x output speed (45 cycles\/min) and 35% energy saving means you earn the difference back in just 8 months.\", ctaText: \"Download Payback Period Report\", action: \"mOpenModal('Payback Period Report')\" },\r\n                { id: 5, category: 'roi', question: \"5. What is the expected lifespan of the Mesoforming machine?\", answer: \"Designed for 15+ years of continuous operation. We use a Unibody Steel Frame (processed by our own CNC) that weighs 2 tons more than competitors, ensuring zero vibration at high speeds.\", ctaText: \"Watch Frame CNC Machining Video\", action: \"window.open('https:\/\/youtube.com', '_blank')\" },\r\n                { id: 6, category: 'service', question: \"6. I am in [Country Name], what if the machine breaks down?\", answer: \"Distance is not an issue. <br>1. <strong>Remote:<\/strong> IoT Module for remote diagnosis by our engineers. <br>2. <strong>Local:<\/strong> We have partners in Russia, India, and Vietnam. <br>3. <strong>Parts:<\/strong> We ship critical parts via DHL within 24 hours.\", ctaText: \"Check Global Support Map\", action: \"alert('Redirecting to Map...')\" },\r\n                { id: 7, category: 'service', question: \"7. How long does installation and training take?\", answer: \"Typically 5-7 days. We send a senior engineer to your factory for installation and to train your team until they can run the machine independently.\", ctaText: \"Download sample Training Syllabus\", action: \"mOpenModal('Training Syllabus')\" }\r\n            ];\r\n\r\n            \/\/ 2. EXPORT GLOBALS (Using window with namespacing)\r\n            window.mRenderDocs = function(category) {\r\n                const root = document.getElementById('meso-hub-isolated');\r\n                const container = document.getElementById('mDocList');\r\n                if (!root || !container) return; \/\/ Safety check\r\n\r\n                root.querySelectorAll('.m-tab-btn').forEach(b => b.classList.remove('active'));\r\n                \r\n                \/\/ Find clicked button based on onclick attribute text\r\n                const buttons = root.querySelectorAll('.m-tab-btn');\r\n                buttons.forEach(btn => {\r\n                    if(btn.getAttribute('onclick').includes(category)) btn.classList.add('active');\r\n                });\r\n\r\n                container.innerHTML = '';\r\n                \r\n                let htmlBuffer = '';\r\n                docData[category].forEach(doc => {\r\n                    const icon = doc.type === 'XLS' ? 'fa-file-excel' : (doc.type === 'DWG' ? 'fa-compass-drafting' : 'fa-file-pdf');\r\n                    const btnClass = doc.locked ? 'gated' : 'm-btn-download';\r\n                    const action = doc.locked ? `mOpenModal('${doc.title}')` : `alert('Downloading...')`;\r\n                    \r\n                    htmlBuffer += `\r\n                        <div class=\"m-doc-item m-fade-in\">\r\n                            <div class=\"m-doc-thumb\"><i class=\"fa-regular ${icon}\"><\/i><\/div>\r\n                            <div style=\"flex:1\" class=\"m-doc-info\"><h4>${doc.title}<\/h4><p style=\"font-size:0.85rem; color:#666;\">${doc.desc}<\/p><small style=\"color:var(--accent); font-weight:600;\">${doc.type} \u2022 ${doc.size}<\/small><\/div>\r\n                            <div class=\"m-doc-actions\">\r\n                                <button class=\"m-btn-icon m-btn-preview\" title=\"Preview\" onclick=\"mOpenPreview()\"><i class=\"fa-regular fa-eye\"><\/i><\/button>\r\n                                <button class=\"m-btn-icon ${btnClass}\" title=\"Download\" onclick=\"${action}\">\r\n                                    <i class=\"fa-solid ${doc.locked ? 'fa-lock' : 'fa-download'}\"><\/i>\r\n                                <\/button>\r\n                            <\/div>\r\n                        <\/div>`;\r\n                });\r\n                container.innerHTML = htmlBuffer;\r\n            }\r\n\r\n            let currentFaqCategory = 'all';\r\n            window.mFilterFAQ = function(category) {\r\n                currentFaqCategory = category;\r\n                const root = document.getElementById('meso-hub-isolated');\r\n                if (!root) return;\r\n\r\n                root.querySelectorAll('.m-faq-tab-btn').forEach(b => {\r\n                    b.classList.remove('active');\r\n                    if(b.innerText.toLowerCase().includes(category === 'all' ? 'view' : category)) b.classList.add('active');\r\n                });\r\n                const searchInput = document.getElementById('mFaqSearch');\r\n                if(searchInput) searchInput.value = ''; \r\n                \r\n                if(category === 'all') {\r\n                    renderFAQs(faqData);\r\n                } else {\r\n                    renderFAQs(faqData.filter(i => i.category === category));\r\n                }\r\n            }\r\n\r\n            function renderFAQs(data) {\r\n                const container = document.getElementById('mFaqContainer');\r\n                if (!container) return; \/\/ Safety\r\n\r\n                container.innerHTML = '';\r\n                if(data.length === 0) {\r\n                    container.innerHTML = '<div style=\"text-align:center; padding:30px; color:#999;\">No results found. Please ask our engineer below.<\/div>';\r\n                    return;\r\n                }\r\n                \r\n                let htmlBuffer = '';\r\n                data.forEach(item => {\r\n                    htmlBuffer += `\r\n                        <div class=\"m-accordion-item m-fade-in\">\r\n                            <button class=\"m-accordion-header\" onclick=\"mToggleAccordion(this)\">\r\n                                <span>${item.question}<\/span>\r\n                                <i class=\"fa-solid fa-chevron-down\"><\/i>\r\n                            <\/button>\r\n                            <div class=\"m-accordion-content\">\r\n                                <div class=\"m-accordion-inner\">\r\n                                    ${item.answer} <br><br>\r\n                                    <span class=\"m-inline-cta\" onclick=\"${item.action}\">\r\n                                        <i class=\"fa-solid fa-arrow-right\"><\/i> ${item.ctaText}\r\n                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>`;\r\n                });\r\n                container.innerHTML = htmlBuffer;\r\n            }\r\n\r\n            window.mToggleAccordion = function(btn) {\r\n                btn.classList.toggle(\"active\");\r\n                const panel = btn.nextElementSibling;\r\n                if (panel.style.maxHeight) {\r\n                    panel.style.maxHeight = null;\r\n                } else {\r\n                    panel.style.maxHeight = panel.scrollHeight + \"px\";\r\n                }\r\n            }\r\n\r\n            window.mOpenModal = function(resource) {\r\n                const desc = document.getElementById('mModalDesc');\r\n                const modal = document.getElementById('mLeadModal');\r\n                if(desc) desc.innerText = `Enter your email to unlock: ${resource}`;\r\n                if(modal) modal.style.display = 'flex';\r\n            }\r\n            window.mCloseModal = function() { \r\n                const modal = document.getElementById('mLeadModal');\r\n                if(modal) modal.style.display = 'none'; \r\n            }\r\n            window.mOpenPreview = function() { \r\n                const modal = document.getElementById('mPreviewModal');\r\n                if(modal) modal.style.display = 'flex'; \r\n            }\r\n            window.mScrollTo = function(id) { \r\n                const el = document.getElementById(id);\r\n                if(el) el.scrollIntoView({ behavior: 'smooth' }); \r\n            }\r\n\r\n            \/\/ Events\r\n            const faqSearch = document.getElementById('mFaqSearch');\r\n            if(faqSearch) {\r\n                faqSearch.addEventListener('input', (e) => {\r\n                    const term = e.target.value.toLowerCase();\r\n                    const root = document.getElementById('meso-hub-isolated');\r\n                    if(term.length > 0) {\r\n                        if(root) root.querySelectorAll('.m-faq-tab-btn').forEach(b => b.classList.remove('active'));\r\n                        renderFAQs(faqData.filter(i => i.question.toLowerCase().includes(term) || i.answer.toLowerCase().includes(term)));\r\n                    } else {\r\n                        mFilterFAQ(currentFaqCategory);\r\n                    }\r\n                });\r\n            }\r\n\r\n            window.addEventListener('scroll', () => {\r\n                const bar = document.getElementById('mStickyBar');\r\n                if(bar) {\r\n                    if(window.scrollY > 600) bar.classList.add('visible');\r\n                    else bar.classList.remove('visible');\r\n                }\r\n            });\r\n\r\n            \/\/ ==========================================\r\n            \/\/ ROBUST INITIALIZATION (Polling)\r\n            \/\/ ==========================================\r\n            function initMesoHub() {\r\n                const docContainer = document.getElementById('mDocList');\r\n                const faqContainer = document.getElementById('mFaqContainer');\r\n                \r\n                \/\/ Only run if containers exist\r\n                if (docContainer && faqContainer) {\r\n                    mRenderDocs('cups');\r\n                    mFilterFAQ('all');\r\n                    injectSchema();\r\n                    return true; \/\/ Success\r\n                }\r\n                return false; \/\/ Not ready yet\r\n            }\r\n\r\n            \/\/ Polling Mechanism: Check every 100ms until elements are found (Max 50 times = 5 seconds)\r\n            let attempts = 0;\r\n            const initInterval = setInterval(() => {\r\n                attempts++;\r\n                const isLoaded = initMesoHub();\r\n                if (isLoaded || attempts > 50) {\r\n                    clearInterval(initInterval);\r\n                }\r\n            }, 100);\r\n\r\n            function injectSchema() {\r\n                const breadcrumbSchema = {\r\n                    \"@context\": \"https:\/\/schema.org\",\r\n                    \"@type\": \"BreadcrumbList\",\r\n                    \"itemListElement\": [{\r\n                        \"@type\": \"ListItem\",\r\n                        \"position\": 1,\r\n                        \"name\": \"Home\",\r\n                        \"item\": \"https:\/\/mesoforming.com\"\r\n                    },{\r\n                        \"@type\": \"ListItem\",\r\n                        \"position\": 2,\r\n                        \"name\": \"Mesoforming Engineering Hub Downloads\",\r\n                        \"item\": \"https:\/\/mesoforming.com\/mesoforming-engineering-hub-downloads\"\r\n                    }]\r\n                };\r\n\r\n                const faqSchema = {\r\n                    \"@context\": \"https:\/\/schema.org\",\r\n                    \"@type\": \"FAQPage\",\r\n                    \"mainEntity\": faqData.map(i => ({\r\n                        \"@type\": \"Question\",\r\n                        \"name\": i.question,\r\n                        \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": i.answer.replace(\/<[^>]*>?\/gm, '') }\r\n                    }))\r\n                };\r\n\r\n                const scriptBread = document.createElement('script');\r\n                scriptBread.type = 'application\/ld+json';\r\n                scriptBread.text = JSON.stringify(breadcrumbSchema);\r\n                document.head.appendChild(scriptBread);\r\n\r\n                const scriptFaq = document.createElement('script');\r\n                scriptFaq.type = 'application\/ld+json';\r\n                scriptFaq.text = JSON.stringify(faqSchema);\r\n                document.head.appendChild(scriptFaq);\r\n            }\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n<\/html>\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","protected":false},"excerpt":{"rendered":"<p>Data-Driven Thermoforming Success Home \/ Mesoforming Engineering Hub Downloads Access the same engineering data, ROI tools, and mold guides used by 500+ top manufacturers. Don&#8217;t guess your profits\u2014calculate them. Go to ROI Tools Download 2025 Catalog Updated Dec 2025 2,100+ Engineers Most Popular Servo vs. Hydraulic Cost Simulator Input your local electricity rate ($\/kWh) and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3927","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/pages\/3927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/comments?post=3927"}],"version-history":[{"count":0,"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/pages\/3927\/revisions"}],"wp:attachment":[{"href":"https:\/\/mesoforming.com\/id\/wp-json\/wp\/v2\/media?parent=3927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}