{"id":2,"date":"2025-06-21T21:25:40","date_gmt":"2025-06-21T13:25:40","guid":{"rendered":"http:\/\/nh.matepress.cn\/?page_id=2"},"modified":"2026-05-11T17:41:36","modified_gmt":"2026-05-11T09:41:36","slug":"home","status":"publish","type":"page","link":"https:\/\/nenghui.com\/ar\/","title":{"rendered":"\u0627\u0644\u0645\u0646\u0632\u0644"},"content":{"rendered":"<style>\n    html {\n        scroll-behavior: auto !important;\n    }\na:hover {\n        color: transparent;\n        font-weight: normal;\n    }\n        ::-webkit-scrollbar { width: 6px; height: 6px; }\n        ::-webkit-scrollbar-track { background: transparent; }\n        ::-webkit-scrollbar-thumb { background: rgba(19, 236, 164, 0.2); border-radius: 10px; }\n        ::-webkit-scrollbar-thumb:hover { background: rgba(19, 236, 164, 0.4); }\n        \n        \/* [\u4f18\u5316] \u63d0\u5347\u91cd\u7ed8\u6027\u80fd\u7684\u5f3a\u5236\u590d\u5408\u5c42 *\/\n        .liquid-blob { position: absolute; filter: blur(80px); z-index: 0; opacity: 0.6; will-change: transform; transform: translateZ(0); }\n   \n        .globe-grid { background-image: radial-gradient(circle, rgba(19,236,164,0.1) 1px, transparent 1px); background-size: 20px 20px; }\n        .animate-select { animation: globePulse 0.6s ease-out; }\n        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n        .hide-scrollbar::-webkit-scrollbar { display: none; }\n        \n        .project-card.active { border-color: #13eca4; background: rgba(19, 236, 164, 0.1); }\n\t\n    .globe-dot.active .active-radar {\n        opacity: 1;\n        transform: scale(1);\n        animation: radarPulse 2s infinite ease-out;\n    }\n    .globe-dot.active .active-radar-2 {\n        opacity: 1;\n        transform: scale(1);\n        animation: radarPulse 2s infinite ease-out 0.4s;\n    }\n    .globe-dot.active .dot-core {\n        background-color: #13eca4;\n        box-shadow: 0 0 20px rgba(19, 236, 164, 0.9);\n        border: 2px solid white;\n    }\n    \n    #dot-p2.active .dot-core { background-color: #60a5fa; box-shadow: 0 0 20px rgba(96, 165, 250, 0.9); }\n    #dot-p2.active .active-radar { border-color: rgba(96, 165, 250, 0.4); }\n    \n    #dot-p4.active .dot-core { background-color: #fb923c; box-shadow: 0 0 20px rgba(251, 146, 60, 0.9); }\n    #dot-p4.active .active-radar { border-color: rgba(251, 146, 60, 0.4); }\n\n    @keyframes float-y {\n        0%, 100% { transform: translateY(0px); }\n        50% { transform: translateY(-20px); }\n    }\n    \n    .animate-float-slow { animation: float-y 6s ease-in-out infinite; }\n    .animate-float-medium { animation: float-y 5s ease-in-out infinite 0.5s; }\n    .animate-float-fast { animation: float-y 7s ease-in-out infinite 1s; }\n    \n    .group:hover .animate-float-slow,\n    .group:hover .animate-float-medium,\n    .group:hover .animate-float-fast {\n        animation-play-state: paused;\n    }\n\n    @keyframes radarPulse {\n        0% { transform: scale(0.5); opacity: 0; }\n        50% { opacity: 1; }\n        100% { transform: scale(1.8); opacity: 0; }\n    }\n    @keyframes scrollDown {\n        0% { transform: translateY(0); opacity: 1; }\n        100% { transform: translateY(12px); opacity: 0; }\n    }\n\n    #particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }\n    .cursor::after { content: '_'; animation: blink 1s infinite; color: #13eca4; }\n    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n    .hud-border { border: 1px solid rgba(19, 236, 164, 0.3); background: rgba(19, 236, 164, 0.05); }\n\n    .stack-card {\n        transform-origin: top;\n        will-change: transform;\n    }\n    .bg-parallax { translate: 0 -10%; will-change: transform; }\n    .card-overlay { will-change: opacity; }\n    <\/style>\n\n    <style>\n       \n        .globe-module-wrapper {\n            position: relative; width: 100%; height: 85vh; min-height: 550px; \n            overflow: hidden; touch-action: pan-y; \n        }\n\n        #globe-container { \n            width: 100%; height: 100%; cursor: grab;\n            animation: canvasFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n        #globe-container:active { cursor: grabbing; }\n        \n        \/* [\u4f18\u5316] \u79fb\u9664\u4e86\u81f4\u4f7f\u6eda\u52a8\u5361\u987f\u7684 filter: blur(10px) \u5c5e\u6027 *\/\n        @keyframes canvasFadeIn {\n            0% { opacity: 0; transform: scale(0.95) translateY(20px); }\n            100% { opacity: 1; transform: scale(1) translateY(0); }\n        }\n\n        .anchor-point { width: 0; height: 0; position: relative; }\n\n        .visibility-wrapper {\n            transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            transform-origin: left center;\n        }\n        .visibility-wrapper.hud-hidden {\n            opacity: 0 !important; transform: scale(0.8) !important; pointer-events: none !important;\n        }\n\n        .hud-container {\n            position: absolute; left: 8px; top: 0; transform: translateY(-50%);\n            display: flex; align-items: center; z-index: 10; pointer-events: auto;\n            opacity: 0; animation: slideInFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n        .hud-container:hover { z-index: 9999; }\n\n        @keyframes slideInFade {\n            0% { opacity: 0; margin-left: -8px; }\n            100% { opacity: 1; margin-left: 0; }\n        }\n\n        .hud-line { width: 16px; height: 1.5px; opacity: 0.7; }\n\n        .hud-card {\n            background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\n            padding: 4px 10px 4px 8px; border-radius: 6px; \n            border: 1px solid rgba(255, 255, 255, 0.8);\n            font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;\n            display: flex; align-items: center; gap: 8px; \n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255,255,255,0.4);\n            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; white-space: nowrap;\n        }\n        .hud-container:hover .hud-card {\n            transform: translateX(4px); box-shadow: 0 12px 32px rgba(19, 236, 164, 0.15), inset 0 0 0 1px rgba(255,255,255,0.8); \n            background: rgba(255, 255, 255, 0.9);\n        }\n\n        .hint-fade-out {\n            opacity: 0 !important; transform: translateY(10px) scale(0.95) !important; pointer-events: none;\n        }\n\n        @media (max-width: 768px) {\n            .globe-module-wrapper { height: 70vh; } \n            .hud-container { left: 4px; }\n            .hud-line { width: 8px; }\n            .hud-card { padding: 3px 8px 3px 6px; font-size: 9px; gap: 6px; }\n            .hud-card .tag { font-size: 7px !important; padding: 1px 4px !important; }\n        }\n    <\/style>\n\n\n\n<div class=\"fixed inset-0 pointer-events-none overflow-hidden z-0\">\n        <div class=\"liquid-blob bg-primary\/20 w-[600px] h-[600px] rounded-full -top-40 -left-40\"><\/div>\n        <div class=\"liquid-blob bg-blue-200\/30 w-[500px] h-[500px] rounded-full top-1\/3 -right-20\"><\/div>\n        <div class=\"liquid-blob bg-teal-100\/40 w-[800px] h-[800px] rounded-full -bottom-40 left-1\/4\"><\/div>\n    <\/div>\n\n    <div class=\"relative z-[1] flex flex-col min-h-screen\">\n\n        <!-- Hero Section -->\n        <section class=\"relative w-full h-[calc(100vh-60px)] md:h-[calc(100vh-80px)] min-h-[600px] overflow-hidden bg-[#f8fcfa] group\/hero\" id=\"hero-section\">\n            <!-- --- \u65b0\u589e\uff1aPC\u7aef\u5f00\u573a\u5168\u5c4f\u89c6\u9891\u5c42 --- -->\n            <div id=\"hero-video-wrapper\" class=\"absolute inset-0 z-[60] flex bg-background-dark items-center justify-center\">\n                <video id=\"hero-video\" class=\"w-full h-full object-cover opacity-90\" muted playsinline preload=\"auto\">\n                    <source src=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/04\/home-story.mp4\" type=\"video\/mp4\">\n                <\/video>\n\n                <div id=\"video-loading\" class=\"absolute inset-0 z-20 flex flex-col items-center justify-center bg-background-dark\/90 backdrop-blur-md\">\n                    <!-- \u591a\u91cd\u53d1\u5149\u65cb\u8f6c\u73af -->\n                    <div class=\"relative w-14 h-14 flex items-center justify-center\">\n                        <!-- \u5916\u5c42\u4e3b\u8272\u8c03\u5149\u73af (\u987a\u65f6\u9488\uff0c\u5e26\u8f89\u5149) -->\n                        <div class=\"absolute inset-0 rounded-full border-t-2 border-primary\/80 animate-spin shadow-[0_0_15px_rgba(19,236,164,0.4)]\"><\/div>\n                        <!-- \u5185\u5c42\u767d\u8272\u8f85\u73af (\u9006\u65f6\u9488\uff0c\u7a0d\u6162) -->\n                        <div class=\"absolute inset-2 rounded-full border-r-2 border-white\/40 animate-[spin_1.5s_linear_infinite_reverse]\"><\/div>\n                        <!-- \u4e2d\u5fc3\u6781\u7b80\u547c\u5438\u70b9 -->\n                        <div class=\"w-1.5 h-1.5 bg-primary\/80 rounded-full shadow-[0_0_8px_rgba(19,236,164,0.8)] animate-pulse\"><\/div>\n                    <\/div>\n                    <!-- \u6781\u7b80\u7b49\u5bbd\u63d0\u793a\u6587\u672c -->\n                    <span class=\"mt-6 text-[10px] font-mono text-white\/50 tracking-[0.4em] uppercase animate-pulse\">\u062a\u0647\u064a\u0626\u0629<\/span>\n                <\/div>\n                <!-- \u6781\u7b80\u5927\u5382\u5ba1\u7f8e\u7684\u8df3\u8fc7\u6309\u94ae -->\n                <button id=\"skip-video\" class=\"absolute bottom-10 right-[8%] text-white\/60 hover:text-white z-10 border border-white\/20 px-5 py-2 rounded-full text-xs font-mono uppercase tracking-widest backdrop-blur-md transition-all hover:bg-white\/10 hover:border-primary\/50 hover:shadow-[0_0_15px_rgba(19,236,164,0.3)] cursor-pointer group flex items-center gap-2\">\n                    <span>\u062a\u062e\u0637\u064a \u0627\u0644\u0645\u0642\u062f\u0645\u0629<\/span>\n                    <span class=\"material-symbols-outlined text-[14px] group-hover:translate-x-1 transition-transform\">\ue5c8<\/span>\n                <\/button>\n            <\/div>\n            <script>\n                \/\/ \u6d4f\u89c8\u5668\u89e3\u6790\u5230\u8fd9\u91cc\u65f6\uff0c\u753b\u9762\u8fd8\u6ca1\u6e32\u67d3\u51fa\u6765\uff0c\u77ac\u95f4\u5224\u65ad\u5e76\u6267\u884c\n                if (window.innerWidth < 768 || sessionStorage.getItem('heroVideoPlayed')) {\n                    document.getElementById('hero-video-wrapper').style.display = 'none';\n                }\n            <\/script>\n            <div class=\"swiper heroSwiper w-full h-full relative z-10\">\n                <div class=\"swiper-wrapper\">\n                   <div class=\"swiper-slide bg-liquid-gradient relative overflow-hidden\" >\n                        <div class=\"absolute inset-0 bg-mesh opacity-60 z-0\"><\/div>\n                        <div id=\"particle-canvas\" class=\"relative z-10\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent z-20 pointer-events-none\"><\/div>\n\n                        <div class=\"absolute inset-0 z-30 flex flex-col justify-between p-10 md:p-20 pointer-events-none\">\n                            <header class=\"flex justify-between items-start\">\n                                <h1 class=\"text-4xl md:text-[2.66rem] tracking-tighter text-background-dark font-display\">\u0646\u064a\u0646\u062c\u0648\u064a<\/h1>\n                                <div class=\"hud-border border-primary\/30 bg-primary\/10 px-4 py-2 rounded font-mono text-xs text-background-dark hidden md:block backdrop-blur-sm\">\n                                    \u062c\u0648\u0647\u0631: <span class=\"text-primary font-bold\">\u0645\u0633\u062a\u0642\u0631<\/span>\n                                <\/div>\n                            <\/header>\n\n                            <div class=\"max-w-2xl\">\n                                <div class=\"bg-white\/60 border border-primary\/20 backdrop-blur-md px-6 py-2 rounded-full mb-6 inline-block shadow-[0_5px_15px_rgba(19,236,164,0.15)]\">\n                                    <span class=\"font-mono text-sm tracking-widest text-background-dark uppercase cursor\" id=\"hud-text\">\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0646\u0638\u0627\u0645<\/span>\n                                <\/div>\n                                <h2 class=\"text-4xl md:text-[2.66rem] leading-[0.9] tracking-tighter mb-6 uppercase text-background-dark\">\n                                    \u0637\u0627\u0642\u0629<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500 drop-shadow-sm\">\u062a\u0645\u0643\u064a\u0646.<\/span>\n                                <\/h2>\n                                <p class=\"text-[1rem] text-background-dark\/70 max-w-md italic font-medium\">\u062d\u0644\u0648\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0643\u064a\u0629 \u0645\u0646 \u0623\u062c\u0644 \u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0633\u062a\u062f\u0627\u0645 \u0648\u0645\u0646\u062e\u0641\u0636 \u0627\u0644\u0643\u0631\u0628\u0648\u0646.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n\n                     <div class=\"swiper-slide relative w-full h-full flex items-center justify-center overflow-hidden\">\n                         <div class=\"absolute inset-0 z-0 skeleton-wrapper skeleton-pulse\">\n                            <div class=\"lazy-target w-full h-full bg-cover bg-center opacity-90 transition-transform duration-[10s] ease-linear scale-100 hover:scale-105\"\n                            data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/01\/test-banner5.jpg\" >\n                            <\/div>\n                            <div class=\"absolute inset-0 bg-gradient-to-b from-white\/60 via-transparent to-background-light\"><\/div>\n                        <\/div>\n\n                        <div class=\"relative z-10 max-w-[1000px] px-6 text-center flex flex-col items-center gap-3 md:gap-8\" data-swiper-parallax=\"-300\">\n                            <h1 class=\"text-[#0d1b17] text-4xl md:text-[2.66rem] tracking-tighter\">\n                                \u0627\u0644\u0631\u0624\u064a\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">\u0623\u062f\u0627\u0621 \u0645\u062d\u0644\u064a.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                             \u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0647\u0646\u062f\u0633\u064a \u064a\u0644\u062a\u0642\u064a \u0628\u0627\u0644\u062f\u0642\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639\u060c \u0648\u062a\u0642\u062f\u064a\u0645 \u062d\u0644\u0648\u0644 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0644\u0647\u0646\u062f\u0633\u0629 \u0648\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\u0627\u062a \u0628\u062e\u0628\u0631\u0629 \u0639\u0627\u0644\u0645\u064a\u0629.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n\n                     <div class=\"swiper-slide relative w-full h-full flex items-center justify-center overflow-hidden\">\n                         <div class=\"absolute inset-0 z-0 skeleton-wrapper skeleton-pulse\">\n                            <div class=\"lazy-target w-full h-full bg-cover bg-center opacity-90 transition-transform duration-[10s] ease-linear scale-100 hover:scale-105\"\n                               data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/01\/test-banner3.jpg\">\n                            <\/div>\n                            <div class=\"absolute inset-0 bg-gradient-to-b from-white\/60 via-transparent to-background-light\"><\/div>\n                        <\/div>\n\n                        <div class=\"relative z-10 max-w-[1000px] px-6 text-center flex flex-col items-center gap-3 md:gap-8\" data-swiper-parallax=\"-300\">\n                            <h1 class=\"text-[#0d1b17] text-4xl md:text-[2.66rem] tracking-tighter\">\n                               \u062a\u0645\u0643\u064a\u0646 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u062f\u0639\u0648\u0645\u0629 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">\u062b\u0648\u0631\u0629 \u0627\u0644\u0637\u0627\u0642\u0629.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                            \u062d\u0644\u0648\u0644 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u062c\u064a\u0644 \u0627\u0644\u062a\u0627\u0644\u064a | \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0648\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\u0627\u062a \u0648\u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0648\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\/\u0627\u062a\u0641\u0627\u0642\u064a\u0627\u062a \u0634\u0631\u0627\u0621 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646 \u0623\u062c\u0644 \u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0633\u062a\u062f\u0627\u0645.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"swiper-button-next !text-[#0d1b17]\/10 hover:!text-primary !hidden md:!flex transition-opacity duration-300\" id=\"hero-next\"><\/div>\n                <div class=\"swiper-button-prev !text-[#0d1b17]\/10 hover:!text-primary !hidden md:!flex transition-opacity duration-300\" id=\"hero-prev\"><\/div>\n            <\/div>\n\n            <div class=\"absolute  md:bottom-[5px] bottom-[14%] left-0 w-full flex justify-center z-30 pointer-events-none\">\n                <div class=\"cursor-pointer pointer-events-auto animate-fade-in\" onclick=\"document.getElementById('trust').scrollIntoView({behavior: 'smooth'})\">\n                    <div class=\"hidden md:flex flex-col items-center gap-3 group\">\n                        <span class=\"text-[10px] uppercase tracking-[0.2em] text-[#0d1b17]\/60 group-hover:text-primary transition-colors duration-300\">\u0645\u0631\u0631<\/span>\n                        <div class=\"w-[26px] h-[42px] rounded-full border-2 border-[#0d1b17]\/20 bg-white\/10 backdrop-blur-sm flex justify-center p-1 shadow-sm group-hover:border-primary\/50 transition-colors duration-300\">\n                            <div class=\"w-1 h-1.5 bg-primary rounded-full animate-[scrollDown_1.5s_infinite]\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex md:hidden flex-col items-center gap-1 opacity-70\">\n                        <span class=\"text-[9px] uppercase tracking-[0.15em] text-[#0d1b17]\/60 mb-1\">\u0627\u0633\u062d\u0628<\/span>\n                        <div class=\"animate-bounce p-2 rounded-full bg-white\/20 backdrop-blur-sm border border-white\/10 shadow-sm\">\n                            <span class=\"material-symbols-outlined text-2xl text-[#0d1b17]\">\ue325<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Trust Stats Section -->\n        <section class=\"py-24 pb-40 relative\" id=\"trust\">\n            <div class=\"absolute top-1\/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary\/20 to-transparent -translate-y-1\/2 z-0 pointer-events-none\"><\/div>\n\n            <div class=\"layout-container max-w-[1280px] mx-auto px-6 relative z-10\">\n                <div class=\"mb-16 text-center\" data-aos=\"fade-up\">\n                    <h3 class=\"text-4xl md:text-[2.66rem] text-[#0d1b17] mb-2\">\u062a\u0632\u0648\u064a\u062f \u0627\u0644\u0643\u0648\u0643\u0628 \u0628\u0627\u0644\u0637\u0627\u0642\u0629<\/h3>\n                    <p class=\"text-[#0d1b17]\/60 text-[1rem]\">\u0642\u064a\u0627\u062f\u0629 \u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0628\u0623\u062b\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0642\u064a\u0627\u0633.<\/p>\n                <\/div>\n\n                <div class=\"flex flex-wrap justify-center items-center gap-8 md:gap-16\">\n                    <div class=\"animate-float-slow group relative w-48 h-48 md:w-64 md:h-64 cursor-default\" data-aos=\"fade-right\" data-aos-delay=\"0\">\n                        <div class=\"absolute inset-0 bg-primary\/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n                        <div class=\"relative w-full h-full rounded-full bg-white\/60 backdrop-blur-xl border border-white\/80 shadow-[0_8px_32px_rgba(0,0,0,0.05)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:border-primary\/30 group-hover:shadow-[0_15px_40px_rgba(19,236,164,0.15)]\">\n                            <div class=\"absolute inset-2 rounded-full border border-dashed border-[#0d1b17]\/10 w-[calc(100%-16px)] h-[calc(100%-16px)] animate-[spin_20s_linear_infinite] opacity-30 group-hover:opacity-60 transition-opacity\"><\/div>\n                            <p class=\"text-[#0d1b17]\/60 text-[10px] md:text-xs uppercase tracking-widest mb-2 z-10\">\u0631\u0627\u0626\u062f \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627<\/p>\n                            <h4 class=\"text-[#0d1b17] text-4xl md:text-5xl tracking-tight z-10 flex items-baseline\">\n                                <span class=\"counter\" data-target=\"200\">0<\/span>\n                                <span class=\"text-2xl text-primary ml-1\">+<\/span>\n                            <\/h4>\n                            <p class=\"text-[#0d1b17]\/40 text-[10px] mt-1\">\u0628\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0639 \u0627\u0644\u0645\u0645\u0646\u0648\u062d\u0629<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"animate-float-medium group relative w-56 h-56 md:w-80 md:h-80 -my-4 md:-my-8 z-20 cursor-default\" data-aos=\"zoom-in\" data-aos-delay=\"100\">\n                        <div class=\"absolute inset-[-20px] rounded-full border border-primary\/20 opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100 transition-all duration-700 ease-out\"><\/div>\n                        <div class=\"absolute inset-[-20px] rounded-full border-t border-primary\/60 opacity-0 rotate-45 group-hover:opacity-100 group-hover:rotate-180 transition-all duration-1000 ease-out\"><\/div>\n                        <div class=\"relative w-full h-full rounded-full bg-gradient-to-b from-white to-[#f0f7f5] backdrop-blur-xl border-2 border-primary\/10 shadow-[0_20px_50px_rgba(19,236,164,0.15)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:shadow-[0_30px_60px_rgba(19,236,164,0.25)]\">\n                            <div class=\"absolute w-32 h-32 bg-primary\/10 rounded-full blur-2xl filter group-hover:bg-primary\/20 transition-colors\"><\/div>\n                            <div class=\"relative z-10 text-center\">\n                                <span class=\"inline-block p-2 rounded-full bg-primary\/10 text-primary mb-3\">\n                                    <span class=\"material-symbols-outlined text-xl\">\uea35<\/span>\n                                <\/span>\n                                <p class=\"text-[#0d1b17]\/60 text-xs uppercase tracking-widest mb-1\">\u062a\u0639\u0648\u064a\u0636 \u0627\u0644\u0643\u0631\u0628\u0648\u0646<\/p>\n                                <h4 class=\"text-[#0d1b17] text-5xl md:text-7xl tracking-tight leading-none mb-1\">\n                                    <span class=\"counter\" data-target=\"10\">0<\/span>\n                                    <span class=\"text-3xl md:text-4xl text-primary\">\u062c\u064a \u062f\u0628\u0644\u064a\u0648<\/span>\n                                <\/h4>\n                                <p class=\"text-[#0d1b17]\/50 text-xs\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0646\u0638\u064a\u0641\u0629 \u0645\u062a\u0648\u0641\u0631\u0629<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"animate-float-fast group relative w-48 h-48 md:w-64 md:h-64 cursor-default\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n                        <div class=\"absolute inset-0 bg-blue-400\/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n                        <div class=\"relative w-full h-full rounded-full bg-white\/60 backdrop-blur-xl border border-white\/80 shadow-[0_8px_32px_rgba(0,0,0,0.05)] flex flex-col items-center justify-center transition-all duration-500 group-hover:scale-105 group-hover:border-blue-400\/30 group-hover:shadow-[0_15px_40px_rgba(96,165,250,0.15)]\">\n                             <div class=\"absolute inset-2 rounded-full border border-dashed border-[#0d1b17]\/10 w-[calc(100%-16px)] h-[calc(100%-16px)] animate-[spin_25s_linear_infinite_reverse] opacity-30 group-hover:opacity-60 transition-opacity\"><\/div>\n                            <p class=\"text-[#0d1b17]\/60 text-[10px] md:text-xs uppercase tracking-widest mb-2 z-10\">\u0645\u062d\u0641\u0638\u0629 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0648\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\u0627\u062a<\/p>\n                            <h4 class=\"text-[#0d1b17] text-4xl md:text-5xl tracking-tight z-10 flex items-baseline\">\n                                <span class=\"counter\" data-target=\"1000\">0<\/span>\n                                <span class=\"text-2xl text-blue-500 ml-1\">+<\/span>\n                            <\/h4>\n                            <p class=\"text-[#0d1b17]\/40 text-[10px] mt-1\">\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0646\u062c\u0632\u0629<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n<!-- \u5806\u53e0\u6eda\u52a8\u6a21\u5757\u5916\u5c42\u5bb9\u5668 -->\n<section id=\"stacking-features\" class=\"relative w-full  text-white pb-[20vh]\">\n    <div class=\"relative w-full mx-auto cursor-pointer\">\n\n        <a href=\"\/ar\/products\/nh-ts-edb180-261\/\" class=\"stack-card sticky top-[0] flex items-center h-[100vh] w-full overflow-hidden border-t border-white\/10 origin-top\">\n            <div class=\"absolute inset-0 overflow-hidden z-0\">\n                <div class=\"bg-parallax absolute w-full h-[120%] -top-[10%] bg-cover bg-center\"\n                     style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/04\/NH-ICS180-261-4-scaled.jpg');\">\n                <\/div>\n<div class=\"bg-parallax absolute w-full h-[100%] -top-[10%] bg-cover bg-center block md:hidden\" style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/04\/NH-TS-EDB180-261-mobile.jpg');\">\n                <\/div>\n                <div class=\"absolute inset-0 bg-black\/20\"><\/div>\n                <div class=\"absolute inset-0 bg-gradient-to-br from-purple-500\/10 to-blue-500\/10 opacity-50\"><\/div>\n                <div class=\"card-overlay absolute inset-0 bg-black\/80 opacity-0 pointer-events-none\"><\/div>\n            <\/div>\n\n            <div class=\"relative z-10 p-10 md:p-20 w-full md:w-2\/3\" data-tilt data-tilt-max=\"5\" data-tilt-speed=\"400\">\n                <div class=\"inline-block px-5 py-2 rounded-full bg-white\/10 text-white font-mono text-sm mb-6 border border-white\/20 backdrop-blur-md\">\n                    \u0623\u0646\u0638\u0645\u0629 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0643\u064a\u0629\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem] mb-6 text-white drop-shadow-lg tracking-tight leading-none\">\n                    NH-TS-EDB180-261\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed max-w-xl\">\n                    \u064a\u062c\u0645\u0639 \u0634\u0627\u062d\u0646 NH-TS-EDB180-261 ESS \u0628\u064a\u0646 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0639\u0627\u0644\u064a \u0627\u0644\u0633\u0639\u0629 \u0648\u0634\u062d\u0646 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0641\u0627\u0626\u0642 \u0627\u0644\u0633\u0631\u0639\u0629 \u0641\u064a \u0646\u0638\u0627\u0645 \u0648\u0627\u062d\u062f \u0635\u063a\u064a\u0631 \u0627\u0644\u062d\u062c\u0645. \u064a\u062a\u0645\u064a\u0632 \u0628\u0642\u062f\u0631\u0629 \u062e\u0631\u062c \u0642\u0635\u0648\u0649 \u062a\u0628\u0644\u063a 180 \u0643\u064a\u0644\u0648\u0648\u0627\u0637\u060c \u0648\u062a\u0648\u0627\u0641\u0642\u0647 \u0645\u0639 \u0628\u064a\u0626\u0627\u062a \u0637\u0627\u0642\u0629 \u0645\u062a\u0646\u0648\u0639\u0629.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/ar\/products\/n20hc5000\/\" class=\"stack-card sticky top-[0] flex items-center h-[100vh] w-full overflow-hidden border-t border-white\/10 origin-top\">\n            <div class=\"absolute inset-0 overflow-hidden z-0\">\n                <div class=\"bg-parallax absolute w-full h-[120%] -top-[10%] bg-cover bg-center\"\n                     style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/04\/N20HC5000-scaled.jpg');\">\n                <\/div>\n<div class=\"bg-parallax absolute w-full h-[100%] -top-[10%] bg-cover bg-center block md:hidden\" style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/04\/N20HC5000-mobile.jpg');\">\n                <\/div>\n                <div class=\"absolute inset-0 bg-black\/20\"><\/div>\n                <div class=\"card-overlay absolute inset-0 bg-black\/80 opacity-0 pointer-events-none\"><\/div>\n            <\/div>\n\n            <div class=\"relative z-10 p-10 md:p-20 w-full md:w-2\/3 ml-auto text-right\" data-tilt data-tilt-max=\"5\" data-tilt-speed=\"400\">\n                <div class=\"inline-block px-5 py-2 rounded-full bg-blue-500\/20 text-blue-300 font-mono text-sm mb-6 border border-blue-500\/30 backdrop-blur-md\">\n                    \u0623\u0646\u0638\u0645\u0629 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0643\u064a\u0629\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white drop-shadow-lg tracking-tight leading-none\">\n                    \u062d\u0627\u0648\u064a\u0629 ESS \u0627\u0644\u0645\u0628\u0631\u062f\u0629 \u0628\u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u0628\u0631\u062f \u0628\u0627\u0644\u0633\u0627\u0626\u0644 5 \u0645\u064a\u062c\u0627\u0648\u0627\u062a \u0633\u0627\u0639\u0629\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    \u064a\u0636\u0645\u0646 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u062d\u0631\u0627\u0631\u064a \u0627\u0644\u0645\u0628\u0631\u062f \u0628\u0627\u0644\u0633\u0648\u0627\u0626\u0644 \u062a\u0648\u062d\u064a\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u062e\u0644\u064a\u0629 \u0628\u0645\u0642\u062f\u0627\u0631 \u00b14 \u062f\u0631\u062c\u0629 \u0645\u0626\u0648\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u0637\u064a\u0644 \u0639\u0645\u0631\u0647\u0627 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0628\u0645\u0642\u062f\u0627\u0631 30% \u0648\u064a\u062d\u0642\u0642 \u0643\u0641\u0627\u0621\u0629 \u062a\u0632\u064a\u062f \u0639\u0646 95% \u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0634\u0628\u0643\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0648\u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/ar\/epc-emc\/\" class=\"stack-card sticky top-[0] flex items-center h-[100vh] w-full overflow-hidden border-t border-white\/10 origin-top\">\n            <div class=\"absolute inset-0 overflow-hidden z-0\">\n                <div class=\"bg-parallax absolute w-full h-[120%] -top-[10%] bg-cover bg-center\"\n                     style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-page-1');\">\n                <\/div>\n                <div class=\"absolute inset-0 bg-black\/20\"><\/div>\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 to-transparent\"><\/div>\n                <div class=\"card-overlay absolute inset-0 bg-black\/80 opacity-0 pointer-events-none\"><\/div>\n            <\/div>\n\n            <div class=\"relative z-10 p-10 md:p-20 w-full md:w-2\/3\" data-tilt data-tilt-max=\"5\" data-tilt-speed=\"400\">\n               <div class=\"inline-block px-5 py-2 rounded-full bg-white\/10 text-white font-mono text-sm mb-6 border border-white\/20 backdrop-blur-md\">\n                    \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem] mb-6 text-white tracking-tight leading-tight\">\n                    \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629<br>(EPC &amp; EMC\/PPA)\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed max-w-xl\">\n                    \u062d\u0644\u0648\u0644 \u0637\u0627\u0642\u0629 \u0634\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0625\u0644\u0649 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\u060c \u0645\u0645\u0627 \u064a\u0636\u0645\u0646 \u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645 \u0648\u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631 \u0627\u0644\u0623\u0645\u062b\u0644 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/ar\/microgrid\/\" class=\"stack-card sticky top-[0] flex items-center h-[100vh] w-full overflow-hidden border-t border-white\/10 origin-top\">\n            <div class=\"absolute inset-0 overflow-hidden z-0\">\n                <div class=\"bg-parallax absolute w-full h-[120%] -top-[10%] bg-cover bg-center\"\n                     style=\"background-image: url('https:\/\/nenghui.com\/wp-content\/uploads\/2026\/03\/home-microgrid.jpg');\">\n                <\/div>\n                <div class=\"absolute inset-0 bg-black\/20\"><\/div>\n            <\/div>\n\n            <div class=\"relative z-10 p-10 md:p-20 w-full md:w-2\/3 ml-auto text-right\" data-tilt data-tilt-max=\"5\" data-tilt-speed=\"400\">\n                <div class=\"inline-block px-5 py-2 rounded-full bg-teal-500\/20 text-teal-300 font-mono text-sm mb-6 border border-teal-500\/30 backdrop-blur-md\">\n                    \u0627\u0644\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white tracking-tight leading-tight\">\n                    \u062d\u0644\u0648\u0644 \u0645\u0648\u062b\u0648\u0642\u0629 \u0644\u0644\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629\u060c \u0647\u0646\u062f\u0633\u0629 \u0634\u0628\u0643\u0629 \u0623\u0643\u062b\u0631 \u0627\u0633\u062a\u062f\u0627\u0645\u0629\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    \u0645\u0646 \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u062c\u0632\u0631 \u0627\u0644\u0646\u0627\u0626\u064a\u0629\u060c \u062a\u0642\u062f\u0645 \u0646\u064a\u0646\u063a\u0648\u064a \u062e\u062f\u0645\u0627\u062a \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 (EPC). \u062a\u0639\u0645\u0644 \u0623\u0646\u0638\u0645\u062a\u0646\u0627 \u0639\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062a\u0646\u0627\u063a\u0645 \u0628\u064a\u0646 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0643\u0647\u0631\u0648\u0636\u0648\u0626\u064a\u0629 \u0648\u0623\u0646\u0638\u0645\u0629 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629\u060c \u0645\u0645\u0627 \u064a\u0648\u0641\u0631 \u062a\u062d\u0648\u064a\u0644\u064b\u0627 \u0633\u0644\u0633\u064b\u0627 \u0644\u0644\u0637\u0627\u0642\u0629.\n                <\/p>\n            <\/div>\n        <\/a>\n\n    <\/div>\n<\/section>\n\n<!-- \u5168\u7403\u7ad9\u70b9 -->\n   <section class=\"globe-module-wrapper relative\">\n        <div class=\"pointer-events-none absolute inset-0 z-20\">\n            <div class=\"absolute top-5 left-5 md:top-10 md:left-10 bg-white\/40 backdrop-blur-2xl p-4 md:p-6 rounded-2xl border border-white\/60 shadow-[0_8px_32px_rgba(0,0,0,0.04)] border-l-4 border-l-primary pointer-events-auto\" style=\"animation: canvasFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\">\n                <h1 class=\"text-2xl md:text-[2.66rem]  text-background-dark tracking-tighter uppercase font-display\">\n                    \u0639\u0627\u0644\u0645\u064a <span class=\"text-primary\">\u0634\u0628\u0643\u0629<\/span>\n                <\/h1>\n                <p class=\"text-[8px] md:text-[10px] text-background-dark\/50 font-bold tracking-[0.2em] md:tracking-[0.35em] mt-1.5 uppercase font-sans\">\n                    \u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629\n                <\/p>\n            <\/div>\n\n            <div class=\"absolute bottom-16 right-5 md:top-10 md:right-10 md:bottom-auto bg-white\/50 backdrop-blur-2xl px-5 py-3 md:px-8 md:py-5 rounded-xl md:rounded-2xl border border-white\/80 shadow-[0_8px_32px_rgba(0,0,0,0.04)] hover:shadow-[0_12px_40px_rgba(19,236,164,0.15)] transition-all duration-500 pointer-events-auto cursor-default\" style=\"animation: canvasFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\">\n                <div class=\"flex items-center justify-between mb-1\">\n                    <p class=\"text-[8px] md:text-[10px] text-background-dark\/50 font-bold uppercase tracking-widest font-sans\">\u0627\u0644\u0645\u062d\u0637\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629<\/p>\n                    <span class=\"relative flex h-2 w-2 ml-3\">\n                        <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75\"><\/span>\n                        <span class=\"relative inline-flex rounded-full h-2 w-2 bg-primary\"><\/span>\n                    <\/span>\n                <\/div>\n                <div class=\"flex items-baseline gap-2\">\n                    <span id=\"active-regions-count\" class=\"text-3xl md:text-5xl font-black text-background-dark font-display tracking-tighter\">8<\/span>\n                    <span class=\"text-[9px] md:text-xs font-bold text-primary uppercase tracking-wider font-sans\">\u0631\u064a\u062c\u0648\u0646\u0632 \u0644\u0627\u064a\u0641<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"absolute bottom-3 inset-x-0 flex justify-center pointer-events-none\" style=\"animation: canvasFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\">\n                <div id=\"drag-hint\" class=\"bg-background-dark\/80 backdrop-blur-md text-white px-5 py-2.5 rounded-full flex items-center justify-center gap-2 shadow-xl border border-white\/10 transition-all duration-700 ease-out\">\n                    <span class=\"material-symbols-outlined text-[16px] animate-spin-slow\" style=\"animation: spin 6s linear infinite;\">360<\/span>\n                    <span class=\"text-[10px] md:text-[11px] font-bold tracking-widest uppercase font-sans\">\u0627\u0633\u062d\u0628 \u0644\u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"globe-container\"><\/div>\n    <\/section>\n\n        <!-- Why Us Section -->\n        <section class=\"py-24 relative overflow-hidden bg-gradient-to-b from-transparent to-[#f0f7f5]\/50\" id=\"tech\">\n            <div class=\"absolute left-0 top-1\/4 w-[500px] h-[500px] bg-primary\/5 rounded-full blur-3xl -z-10\"><\/div>\n            <div class=\"absolute right-0 bottom-0 w-[600px] h-[600px] bg-blue-100\/20 rounded-full blur-3xl -z-10\"><\/div>\n\n            <div class=\"layout-container max-w-[1280px] mx-auto px-6\">\n                <div class=\"text-center max-w-4xl mx-auto mb-16\" data-aos=\"fade-up\">\n                    <h2 class=\"text-4xl md:text-[2.66rem]  text-[#0d1b17] leading-tight mb-6\">\n                        \u0644\u0645\u0627\u0630\u0627 \u0627\u0644\u0634\u0631\u0627\u0643\u0629 \u0645\u0639 \u0646\u064a\u0646\u063a \u0647\u0648\u064a\u061f\n                    <\/h2>\n                    <p class=\"text-[1rem] text-[#0d1b17]\/70 leading-relaxed font-light\">\n                        \u0628\u0646\u0627\u0621 \u0627\u0644\u062b\u0642\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0639\u0642\u0648\u062f \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644 \u0627\u0644\u0639\u0627\u0644\u0645\u064a.\n                    <\/p>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6\">\n                    <div class=\"lg:col-span-2 group relative rounded-[2.5rem] bg-[#0d1b17] text-white overflow-hidden p-8 flex flex-col hover:shadow-2xl transition-all duration-500\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n                        <div class=\"absolute top-0 right-0 w-32 h-32 bg-white\/5 rounded-full blur-2xl -mr-10 -mt-10\"><\/div>\n                        <div class=\"size-12 rounded-xl bg-white\/10 flex items-center justify-center border border-white\/10 mb-6 group-hover:scale-110 group-hover:bg-primary group-hover:text-[#0d1b17] transition-all duration-300\">\n                            <span class=\"material-symbols-outlined text-2xl\">\ue8e8<\/span>\n                        <\/div>\n                        <h3 class=\"text-xl  mb-3\">\u062c\u0648\u062f\u0629 \u062a\u0648\u0635\u064a\u0644 \u0645\u062b\u0628\u062a\u0629<\/h3>\n                        <p class=\"text-white\/70 text-sm leading-relaxed mb-4 flex-grow\">\n                            \u0628\u0641\u0636\u0644 \u0633\u0646\u0648\u0627\u062a \u0645\u0646 \u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0627\u0644\u0645\u062a\u0648\u0627\u0635\u0644 \u0628\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0639\u0642\u0648\u062f \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\u060c \u0646\u0636\u0645\u0646 \u0644\u0643\u0645 \u0627\u0644\u0645\u0648\u062b\u0648\u0642\u064a\u0629 \u0641\u064a \u0643\u0644 \u0627\u0644\u062a\u0632\u0627\u0645. \u0643\u0645\u0627 \u062a\u0636\u0645\u0646 \u0642\u062f\u0631\u0627\u062a\u0646\u0627 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\u064a\u0629 \u0627\u0644\u0642\u0648\u064a\u0629 \u0623\u0646 \u0639\u0645\u0644\u064a\u0629 \u0627\u0646\u062a\u0642\u0627\u0644\u0643\u0645 \u0625\u0644\u0649 \u0642\u0637\u0627\u0639 \u0627\u0644\u0637\u0627\u0642\u0629 \u0633\u062a\u0643\u0648\u0646 \u0641\u064a \u0623\u064a\u062f\u064d \u0623\u0645\u064a\u0646\u0629.\n                        <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-white\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">\u062a\u0646\u0641\u064a\u0630 \u0645\u0648\u062b\u0648\u0642<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"lg:col-span-2 group relative rounded-[2.5rem] bg-white border border-white\/60 shadow-sm overflow-hidden p-8 flex flex-col hover:-translate-y-2 hover:shadow-xl transition-all duration-500\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                        <div class=\"absolute -right-10 -top-10 w-32 h-32 bg-blue-50 rounded-full blur-2xl group-hover:scale-150 transition-transform\"><\/div>\n                        <div class=\"size-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mb-6 group-hover:scale-150 transition-transform duration-300\">\n                            <span class=\"material-symbols-outlined text-2xl\">\ue86a<\/span>\n                        <\/div>\n                        <h3 class=\"text-xl  text-[#0d1b17] mb-3\">\n                            <span id=\"dynamic-years-title\">16<\/span> \u0633\u0646\u0648\u0627\u062a \u0645\u0646 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0642\u0646\u064a\u0629\n                        <\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                            \u0644\u0642\u062f \u062a\u0623\u0633\u0633\u0646\u0627 \u0639\u0644\u0649 \u064a\u062f \u0641\u0631\u064a\u0642 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0627\u0644\u062a\u0642\u0646\u064a\u064a\u0646\u060c \u0648\u0645\u0627 \u0632\u0644\u0646\u0627 \u0645\u0644\u062a\u0632\u0645\u064a\u0646 \u0628\u0642\u0637\u0627\u0639 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646\u0630 \u0630\u0644\u0643 \u0627\u0644\u062d\u064a\u0646. <span id=\"dynamic-years-text\" class=\"text-[#0d1b17]\">16<\/span> \u0633\u0646\u0648\u0627\u062a. \u0625\u0646 \u062c\u0630\u0648\u0631\u0646\u0627 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 \u0627\u0644\u0639\u0645\u064a\u0642\u0629 \u062a\u062f\u0641\u0639 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0648\u0627\u0644\u062f\u0642\u0629 \u0627\u0644\u0645\u0647\u0646\u064a\u0629 \u0641\u064a \u0643\u0644 \u0645\u0627 \u0646\u0628\u0646\u064a\u0647.\n                        <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-gray-100\">\n                            <span class=\"text-[10px]  tracking-widest text-blue-600 uppercase\">\u0645\u0646\u0630 <span id=\"dynamic-years-value\">2009<\/span><\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"lg:col-span-2 group relative rounded-[2.5rem] bg-gradient-to-br from-primary\/10 to-white border border-primary\/20 shadow-sm overflow-hidden p-8 flex flex-col hover:-translate-y-2 hover:shadow-xl transition-all duration-500\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                         <div class=\"size-12 rounded-xl bg-white text-primary shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\n                            <span class=\"material-symbols-outlined text-2xl\">\uea3b<\/span>\n                        <\/div>\n                        <h3 class=\"text-xl  text-[#0d1b17] mb-3\">\u0627\u0644\u062a\u0637\u0648\u0631 \u0627\u0644\u0642\u0627\u0626\u0645 \u0639\u0644\u0649 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                        \u0627\u0646\u0637\u0644\u0642\u062a \u0634\u0631\u0643\u0629 \u0646\u064a\u0646\u063a \u0647\u0648\u064a \u0645\u0646 \u0642\u0637\u0627\u0639 \u0627\u0644\u0637\u0627\u0642\u0629\u060c \u0648\u062a\u0637\u0648\u0631\u062a \u0644\u062a\u0635\u0628\u062d \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0646\u0638\u064a\u0641\u0629. \u0646\u0642\u062f\u0645 \u062e\u062f\u0645\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0642\u064a\u0645\u0629\u060c \u0648\u0646\u0639\u0645\u0644 \u0628\u062a\u0639\u0627\u0648\u0646 \u0648\u062b\u064a\u0642 \u0645\u0639 \u0634\u0631\u0643\u0627\u0621 \u0639\u0627\u0644\u0645\u064a\u064a\u0646 \u0644\u0625\u062d\u062f\u0627\u062b \u062a\u0623\u062b\u064a\u0631 \u0645\u0633\u062a\u062f\u0627\u0645.\n                     <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-primary\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">\u062e\u062f\u0645\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0642\u064a\u0645\u0629<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"lg:col-span-3 group relative rounded-[2.5rem] bg-white border border-gray-100 shadow-sm overflow-hidden p-8 flex flex-col md:flex-row items-center gap-8 hover:shadow-xl transition-all duration-500\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n                        <div class=\"absolute -left-10 -bottom-10 w-40 h-40 bg-gray-50 rounded-full blur-2xl -z-10\"><\/div>\n                        <div class=\"flex-1 relative z-10\">\n                             <div class=\"size-12 rounded-xl bg-gray-100 text-gray-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300\">\n                                <span class=\"material-symbols-outlined text-2xl\">\uf018<\/span>\n                            <\/div>\n                            <h3 class=\"text-xl  text-[#0d1b17] mb-3\">\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u0645\u064a\u0629 \u0645\u0639\u062a\u0645\u062f\u0629<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                \u062a\u062a\u0648\u0627\u0641\u0642 \u0645\u0646\u062a\u062c\u0627\u062a\u0646\u0627 \u0648\u0639\u0645\u0644\u064a\u0627\u062a\u0646\u0627 \u0645\u0639 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0648\u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u0627\u0644\u0635\u0627\u0631\u0645\u0629. \u0648\u0628\u0641\u0636\u0644 \u0634\u0647\u0627\u062f\u0627\u062a\u0646\u0627 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629\u060c \u0646\u0636\u0645\u0646 \u062f\u062e\u0648\u0644\u0627\u064b \u0633\u0644\u0633\u0627\u064b \u0625\u0644\u0649 \u0627\u0644\u0623\u0633\u0648\u0627\u0642 \u0648\u0633\u0644\u0627\u0645\u0629 \u062a\u0634\u063a\u064a\u0644\u064a\u0629 \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u0645\u062f \u0641\u064a \u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0627\u0644\u0639\u0627\u0644\u0645.\n                            <\/p>\n                        <\/div>\n                        <div class=\"flex gap-3 flex-wrap justify-center md:justify-end w-full md:w-auto md:flex-col\">\n                            <div class=\"flex flex-col items-center gap-1 group\/badge\">\n                                <div class=\"h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px]  text-[#004084] group-hover\/badge:-translate-y-1 transition-transform\">T\u00dcV<\/div>\n                                <span class=\"text-[8px] text-gray-400 uppercase tracking-wider\">\u0623\u0645\u0627\u0646<\/span>\n                            <\/div>\n                            <div class=\"flex flex-col items-center gap-1 group\/badge\">\n                                <div class=\"h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px]  text-black group-hover\/badge:-translate-y-1 transition-transform delay-75\">\u0639\u0644\u0627\u0645\u0629 CE<\/div>\n                                <span class=\"text-[8px] text-gray-400 uppercase tracking-wider\">\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u0627\u062a\u062d\u0627\u062f \u0627\u0644\u0623\u0648\u0631\u0648\u0628\u064a<\/span>\n                            <\/div>\n                            <div class=\"flex flex-col items-center gap-1 group\/badge\">\n                                <div class=\"h-12 w-12 rounded-full border border-gray-100 bg-white shadow-sm flex items-center justify-center text-[10px]  text-[#D32026] group-hover\/badge:-translate-y-1 transition-transform delay-150\">UL<\/div>\n                                <span class=\"text-[8px] text-gray-400 uppercase tracking-wider\">\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u062f\u0629<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"lg:col-span-3 group relative rounded-[2.5rem] bg-[#f0f7f5] border border-white\/60 shadow-sm overflow-hidden p-8 flex flex-col md:flex-row items-center gap-8 hover:shadow-xl transition-all duration-500\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n                        <div class=\"flex-1 relative z-10 order-2 md:order-1\">\n                             <div class=\"size-12 rounded-xl bg-teal-100\/50 text-teal-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300\">\n                                <span class=\"material-symbols-outlined text-2xl\">\ue9f4<\/span>\n                            <\/div>\n                            <h3 class=\"text-xl  text-[#0d1b17] mb-3\">\u062d\u0644\u0648\u0644 \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0633\u064a\u0646\u0627\u0631\u064a\u0648\u0647\u0627\u062a \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u064b\u0627<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                 \u0646\u0642\u062f\u0645 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0623\u0635\u0648\u0644 \u0627\u0644\u0637\u0627\u0642\u0629\u060c \u062a\u0634\u0645\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629\u060c \u0648\u0623\u0646\u0638\u0645\u0629 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629\u060c \u0648\u0628\u0646\u064a\u0629 \u0634\u062d\u0646 \u0627\u0644\u0645\u0631\u0643\u0628\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629. \u0628\u062f\u0621\u064b\u0627 \u0645\u0646 \u0627\u0644\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0648\u0635\u0648\u0644\u064b\u0627 \u0625\u0644\u0649 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0634\u0628\u0643\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629\u060c \u062a\u0644\u0628\u064a \u062d\u0644\u0648\u0644\u0646\u0627 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629 &quot;\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 + \u0627\u0644\u062a\u062e\u0632\u064a\u0646 + \u0627\u0644\u0634\u062d\u0646&quot; \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\n                            <\/p>\n                        <\/div>\n                        <div class=\"skeleton-wrapper skeleton-pulse w-full md:w-5\/12 h-40 md:h-full min-h-[160px] relative rounded-2xl overflow-hidden shadow-sm group-hover:shadow-md transition-all duration-500 order-1 md:order-2\">\n                            <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110 lazy-target\"\n                            data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-page-sun.avif\"><\/div>\n                            <div class=\"absolute inset-0 bg-teal-900\/10 mix-blend-overlay\"><\/div>\n                            <div class=\"absolute bottom-2 left-2 bg-black\/40 backdrop-blur-md px-2 py-1 rounded text-[9px] text-white  uppercase\">\n                                \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 + \u0627\u0644\u062a\u062e\u0632\u064a\u0646 + \u0627\u0644\u0634\u062d\u0646\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <!-- CASES -->\n   <section class=\"py-24 bg-[#f0f7f5]\" id=\"impact-stories\">\n        <div class=\"layout-container max-w-[96vw] mx-auto px-6\">\n\n            <div class=\"flex justify-between items-center mb-12\" data-aos=\"fade-right\">\n                <h2 class=\"text-4xl md:text-[2.66rem]  text-[#0d1b17]\">\u0627\u0644\u062d\u0627\u0644\u0627\u062a<\/h2>\n\n                <div class=\"flex gap-2\">\n\n                    <button class=\"swiper-custom-prev size-10 rounded-full border border-[#0d1b17]\/10 flex items-center justify-center hover:bg-white transition-colors cursor-pointer group z-10\">\n                        <span class=\"material-symbols-outlined group-hover:-translate-x-0.5 transition-transform\">\ue5c4<\/span>\n                    <\/button>\n\n                    <button class=\"swiper-custom-next size-10 rounded-full bg-[#0d1b17] text-white flex items-center justify-center hover:bg-primary hover:text-[#0d1b17] transition-colors cursor-pointer group z-10\">\n                        <span class=\"material-symbols-outlined group-hover:translate-x-0.5 transition-transform\">\ue5c8<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"swiper impactSwiper w-full !pb-10\" data-aos=\"zoom-in\">\n                <div class=\"swiper-wrapper\">\n                     <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n   style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-iraq.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-iraq.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0627\u0644\u0639\u0631\u0627\u0642 \u0628\u064a\u0633 - 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4\">\u062a\u0645\u0643\u064a\u0646 \u0634\u0628\u0643\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0627\u0644\u0639\u0631\u0627\u0642\u064a\u0629 \u0628\u062a\u0642\u0646\u064a\u0629 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0643\u064a\u0629 <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u0645\u0634\u0631\u0648\u0639 \u062a\u0633\u0644\u064a\u0645 \u0627\u0644\u0645\u0641\u062a\u0627\u062d EPC \u0628\u0642\u062f\u0631\u0629 330 \u0643\u064a\u0644\u0648\u0648\u0627\u0637\/763 \u0643\u064a\u0644\u0648\u0648\u0627\u0637 \u0633\u0627\u0639\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n   style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-soar.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-soar.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u062f\u0645\u062c \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062c\u0628\u0644\u064a\u0629 - 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4\">\u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u062f\u0645\u062c \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062c\u0628\u0644\u064a\u0629  <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u064a\u064f\u0628\u0631\u0632 \u0647\u0630\u0627 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0645\u062a\u0645\u064a\u0632 \u0644\u0634\u0631\u0643\u0629 \u0634\u0646\u063a\u0647\u0627\u064a \u0646\u064a\u0646\u063a\u0648\u064a \u0644\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0642\u062f\u0631\u0627\u062a\u0646\u0627 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u062c\u0628\u0644\u064a\u0629. \u0628\u062f\u0621\u064b\u0627 \u0645\u0646 \u0627\u0644\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u0637\u0648\u0631 \u0628\u0627\u0644\u0634\u0628\u0643\u0629 \u0648\u0635\u0648\u0644\u064b\u0627 \u0625\u0644\u0649 \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0625\u0646\u0634\u0627\u0626\u064a\u0629 \u0627\u0644\u0645\u062a\u064a\u0646\u0629\u060c \u0646\u0636\u0645\u0646 \u0645\u0648\u062b\u0648\u0642\u064a\u0629 \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u0645\u062f \u0641\u064a \u0643\u0644 \u0642\u0645\u0629 \u0646\u0632\u0648\u062f\u0647\u0627 \u0628\u0627\u0644\u0637\u0627\u0642\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n   style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-arid.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-arid.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0646\u062d\u0646 \u0646\u0648\u0641\u0631 \u0627\u0644\u0637\u0627\u0642\u0629 \u0644\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0642\u0627\u062d\u0644\u0629 - 2023<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4\">\u062d\u0644\u0648\u0644 \u0634\u0645\u0633\u064a\u0629 \u0645\u0628\u062a\u0643\u0631\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u0623\u0643\u062b\u0631 \u0627\u0644\u0645\u0646\u0627\u062e\u0627\u062a \u062a\u0637\u0644\u0628\u0627\u064b.<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u064a\u064f\u0628\u0631\u0632 \u0647\u0630\u0627 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0631\u0627\u0626\u062f \u0642\u062f\u0631\u062a\u0646\u0627 \u0639\u0644\u0649 \u062a\u0635\u0645\u064a\u0645 \u0648\u0635\u064a\u0627\u0646\u0629 \u0645\u062d\u0637\u0627\u062a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0643\u0647\u0631\u0648\u0636\u0648\u0626\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0641\u064a \u0627\u0644\u0635\u062d\u0627\u0631\u064a \u0627\u0644\u0631\u0645\u0644\u064a\u0629 \u0648\u0627\u0644\u0635\u062e\u0631\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u0636\u0639 \u0645\u0639\u064a\u0627\u0631\u064b\u0627 \u062c\u062f\u064a\u062f\u064b\u0627 \u0644\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0639\u0644\u0649 \u0646\u0637\u0627\u0642 \u0627\u0644\u0645\u0631\u0627\u0641\u0642 \u0627\u0644\u0639\u0627\u0645\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n                         style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-zhuhai.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-zhuhai.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0645\u0634\u0631\u0648\u0639 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a - 2019<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0643\u064a\u0629\u060c \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u062b\u0645\u0627\u0631 <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u0646\u0638\u0627\u0645 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0645\u0648\u0644 \u0645\u0646 \u0634\u0631\u0643\u0629 NENGHUI \u0648\u0627\u0644\u0630\u064a \u064a\u062a\u0645\u064a\u0632 \u0628\u062a\u0643\u0627\u0645\u0644 \u0630\u0643\u064a \u0645\u0639 \u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0648\u0636\u0645\u0627\u0646 \u0623\u062f\u0627\u0621 \u0645\u062f\u0649 \u0627\u0644\u062d\u064a\u0627\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n                         style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-zongcheng.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-zongcheng.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0627\u0644\u062c\u064a\u0644 \u0627\u0644\u0642\u0627\u062f\u0645 \u0645\u0646 \u0623\u0646\u0638\u0645\u0629 \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0644\u0644\u0634\u0627\u062d\u0646\u0627\u062a \u0627\u0644\u062b\u0642\u064a\u0644\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 - 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4\">\u0627\u0628\u062a\u0643\u0627\u0631\u0627\u062a \u0631\u0627\u0626\u062f\u0629 \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u062a\u0642\u062f\u064a\u0645 \u0623\u0646\u0638\u0645\u0629 \u0646\u0642\u0644 \u0627\u0644\u062d\u0631\u0643\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0623\u062f\u0627\u0621 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0639 \u0627\u0644\u0630\u0643\u064a \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n                         style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-qinzhou.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-qinzhou.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0645\u0634\u0631\u0648\u0639 \u062a\u0634\u064a\u0646\u062a\u0634\u0648 \u0627\u0644\u0647\u062c\u064a\u0646 \u0644\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0648\u0635\u064a\u062f \u0627\u0644\u0623\u0633\u0645\u0627\u0643 \u0628\u0642\u062f\u0631\u0629 20 \u0645\u064a\u062c\u0627\u0648\u0627\u062a - 2023<\/span>\n                                <h3 class=\"text-3xl text-white mb-4\">\u0627\u0644\u062a\u0622\u0632\u0631 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645 \u0628\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0648\u062a\u0631\u0628\u064a\u0629 \u0627\u0644\u0623\u062d\u064a\u0627\u0621 \u0627\u0644\u0645\u0627\u0626\u064a\u0629<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u062d\u0644 \u0645\u062a\u0643\u0627\u0645\u0644 \u0631\u0627\u0626\u062f \u0641\u064a \u0645\u062c\u0627\u0644 \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0648\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\u0627\u062a \u064a\u062f\u0645\u062c \u0645\u0635\u0641\u0648\u0641\u0627\u062a \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u0643\u0647\u0631\u0648\u0636\u0648\u0626\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0645\u0639 \u0627\u0644\u0646\u0638\u0645 \u0627\u0644\u0628\u064a\u0626\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0644\u0645\u0635\u0627\u064a\u062f \u0627\u0644\u0623\u0633\u0645\u0627\u0643.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n                         style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-hybird.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-hybird.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0645\u0634\u0631\u0648\u0639 \u0647\u062c\u064a\u0646 \u0645\u0628\u062a\u0643\u0631 \u0644\u0644\u0632\u0631\u0627\u0639\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 - 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4\">\u0627\u0646\u0633\u062c\u0627\u0645 \u0627\u0644\u0637\u0627\u0642\u0629 \u0648\u0627\u0644\u0632\u0631\u0627\u0639\u0629<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u062d\u0644 \u0647\u0646\u062f\u0633\u064a \u0639\u0627\u0644\u064a \u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u064a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0632\u064a\u0627\u062f\u0629 \u0642\u064a\u0645\u0629 \u0627\u0644\u0623\u0631\u0636 \u0625\u0644\u0649 \u0623\u0642\u0635\u0649 \u062d\u062f \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0648\u0627\u0644\u062d\u0631\u0627\u062c\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n                        style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-120mw.png&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-120mw.png\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">\u0645\u0634\u0631\u0648\u0639 \u0645\u062a\u0643\u0627\u0645\u0644 \u0644\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629 \u0628\u0642\u062f\u0631\u0629 120 \u0645\u064a\u062c\u0627\u0648\u0627\u062a - 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4\">\u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u062a\u0646\u0641\u064a\u0630 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0648\u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a \u0648\u0627\u0644\u0625\u0646\u0634\u0627\u0621\u0627\u062a<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2\">\u0645\u0634\u0631\u0648\u0639 \u062a\u0637\u0648\u064a\u0631 \u0631\u0627\u0626\u062f \u0645\u062f\u0639\u0648\u0645 \u0644\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0643\u0647\u0631\u0648\u0636\u0648\u0626\u064a\u0629 \u064a\u062a\u0645\u064a\u0632 \u0628\u0645\u0639\u062f\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0648\u062a\u0646\u0641\u064a\u0630 \u062f\u0642\u064a\u0642 \u0636\u0645\u0646 \u0645\u062c\u0645\u0639 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0627\u0644\u0631\u0627\u0626\u062f \u0641\u064a \u0645\u0642\u0627\u0637\u0639\u0629 \u0642\u0648\u064a\u062a\u0634\u0648 \u0648\u0627\u0644\u0630\u064a \u062a\u0628\u0644\u063a \u0637\u0627\u0642\u062a\u0647 \u0645\u0644\u064a\u0648\u0646 \u0643\u064a\u0644\u0648\u0648\u0627\u0637.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n           <\/div>\n        <\/div>\n    <\/section>\n    <section class=\"py-24 bg-gradient-to-b from-white to-[#f0f7f5] border-t border-gray-100\" id=\"compliance\">\n        <div class=\"layout-container max-w-[1280px] mx-auto px-6 text-center\">\n            <div class=\"max-w-3xl mx-auto mb-20\" data-aos=\"fade-up\">\n                <h2 class=\"text-4xl md:text-[2.66rem]  text-[#0d1b17] mb-4 tracking-tight\">\n                    \u0645\u0648\u062b\u0648\u0642\u064a\u0629 \u0645\u0639\u062a\u0645\u062f\u0629\u060c \u0627\u0645\u062a\u062b\u0627\u0644 \u0639\u0627\u0644\u0645\u064a\n                <\/h2>\n                <p class=\"text-[#0d1b17]\/60 text-[1rem] font-light\">\n                    \u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0628\u0623\u0643\u062b\u0631 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0635\u0631\u0627\u0645\u0629 \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0641\u064a\u0645\u0627 \u064a\u062a\u0639\u0644\u0642 \u0628\u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0648\u0627\u0644\u062c\u0648\u062f\u0629 \u0648\u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0628\u064a\u0626\u064a\u0629.\n                <\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-2 md:grid-cols-5 gap-12 md:gap-8 items-end justify-items-center\">\n\n                <div class=\"group flex flex-col items-center justify-end h-32 w-full cursor-default\" data-aos=\"fade-up\" data-aos-delay=\"0\">\n                    <div class=\"transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,64,132,0.25)]\">\n                        <span class=\"font-display  text-5xl text-[#004084] tracking-tighter\">T\u00dcV<\/span>\n                    <\/div>\n                    <div class=\"h-6 mt-4 overflow-hidden\">\n                        <span class=\"block text-[10px]  uppercase tracking-widest text-[#004084]\/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0\">\n                            \u062a\u0645 \u0627\u062e\u062a\u0628\u0627\u0631\u0647 \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0633\u0644\u0627\u0645\u0629\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"group flex flex-col items-center justify-end h-32 w-full cursor-default\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n                    <div class=\"w-full flex justify-center transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,0,0,0.15)]\">\n                        <svg height=\"50\" viewbox=\"0 0 52 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M 16 8 A 12 12 0 1 0 16 32\" stroke=\"#0d1b17\" stroke-width=\"5\" stroke-linecap=\"butt\" \/>\n                            <path d=\"M 42 8 A 12 12 0 1 0 42 32\" stroke=\"#0d1b17\" stroke-width=\"5\" stroke-linecap=\"butt\" \/>\n                            <path d=\"M 30 20 L 41 20\" stroke=\"#0d1b17\" stroke-width=\"5\" stroke-linecap=\"butt\" \/>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"h-6 mt-4 w-full overflow-hidden text-center\">\n                        <span class=\"inline-block text-[10px]  uppercase tracking-widest text-black\/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0\">\n                            \u0627\u0644\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u0623\u0648\u0631\u0648\u0628\u064a.\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"group flex flex-col items-center justify-end h-32 w-full cursor-default\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n                    <div class=\"transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(211,32,38,0.25)]\">\n                        <div class=\"size-14 rounded-full border-[4px] border-[#D32026] flex items-center justify-center relative bg-white\">\n                            <span class=\"font-display  text-3xl text-[#D32026] relative top-[2px] right-[1px] leading-none\">UL<\/span>\n                            <span class=\"absolute -bottom-1 -right-2 text-[8px]  text-[#D32026]\">\u00ae<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"h-6 mt-4 overflow-hidden\">\n                        <span class=\"block text-[10px]  uppercase tracking-widest text-[#D32026]\/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0\">\n                            \u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a\u0629\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"group flex flex-col items-center justify-end h-32 w-full cursor-default\" data-aos=\"fade-up\" data-aos-delay=\"300\">\n                    <div class=\"transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(0,85,140,0.25)]\">\n                        <span class=\"font-display  text-5xl text-[#00558C] tracking-wide\">\u0627\u0644\u0644\u062c\u0646\u0629 \u0627\u0644\u0643\u0647\u0631\u0648\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629<\/span>\n                    <\/div>\n                    <div class=\"h-6 mt-4 overflow-hidden\">\n                        <span class=\"block text-[10px]  uppercase tracking-widest text-[#00558C]\/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0\">\n                            \u0627\u0644\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"group flex flex-col items-center justify-end h-32 w-full cursor-default\" data-aos=\"fade-up\" data-aos-delay=\"400\">\n                    <div class=\"transition-all duration-300 ease-out group-hover:scale-110 group-hover:-translate-y-2 group-hover:drop-shadow-[0_10px_20px_rgba(30,30,30,0.2)]\">\n                        <span class=\"font-display  text-5xl text-[#333] tracking-tight\">ISO<\/span>\n                    <\/div>\n                    <div class=\"h-6 mt-4 overflow-hidden\">\n                        <span class=\"block text-[10px]  uppercase tracking-widest text-[#333]\/80 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0\">\n                            9001 \/ 14001 \/ 45001\n                        <\/span>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <\/div>\n\n\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aos\/2.3.4\/aos.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/11.0.5\/swiper-bundle.min.js\"><\/script>\n\n<script>\n\n    function calcYear () {\n        const valEl = document.getElementById('dynamic-years-value');\n        if(!valEl) return;\n        const startYear = Number(valEl.innerText);\n        const currentYear = new Date().getFullYear();\n        const yearsOperation = currentYear - startYear;\n\n        const titleEl = document.getElementById('dynamic-years-title');\n        if (titleEl) titleEl.innerText = yearsOperation;\n\n        const textEl = document.getElementById('dynamic-years-text');\n        if (textEl) textEl.innerText = yearsOperation;\n    }\n\n    const counters = document.querySelectorAll('.counter');\n\n    \/\/ [\u4f18\u5316] \u5c06\u4f4e\u6548\u7684 setTimeout \u66ff\u6362\u6210\u4e86\u4f7f\u7528 requestAnimationFrame \u5b9e\u73b0\u7684\u5e73\u6ed1\u8fc7\u6e21\u52a8\u753b\n    const animateCounters = () => {\n        counters.forEach(counter => {\n            const target = +counter.getAttribute('data-target');\n            const duration = 2000;\n            const start = performance.now();\n\n            const updateCount = (currentTime) => {\n                const elapsed = currentTime - start;\n                const progress = Math.min(1, elapsed \/ duration);\n                const easeProgress = 1 - Math.pow(1 - progress, 4);\n\n                counter.innerText = Math.ceil(easeProgress * target);\n\n                if (progress < 1) {\n                    requestAnimationFrame(updateCount);\n                } else {\n                    counter.innerText = target;\n                }\n            };\n            requestAnimationFrame(updateCount);\n        });\n    };\n\n    let hasAnimated = false;\n    const section = document.querySelector('#trust');\n    const observer = new IntersectionObserver((entries) => {\n        if(entries[0].isIntersecting && !hasAnimated) {\n            animateCounters();\n            hasAnimated = true;\n        }\n    }, { threshold: 0.5 });\n\n    if(section) observer.observe(section);\n           \/\/ ==========================================\n    \/\/ \u56fe\u50cf\u8f6c 3D \u7c92\u5b50\u6838\u5fc3\u903b\u8f91\n    \/\/ ==========================================\n\n    class AdvancedImageLoader1 {\n        constructor(options = {}) {\n            this.options = Object.assign({\n                rootMargin: '200px 0px',\n                threshold: 0.01,\n                selector: '.lazy-target',\n                skeletonClass: 'skeleton-pulse',\n                loadedClass: 'loaded',\n            }, options);\n\n            this.observer = null;\n            this.init();\n        }\n\n        init() {\n            if ('IntersectionObserver' in window) {\n                this.observer = new IntersectionObserver((entries, observer) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting) {\n                            this.loadImage(entry.target);\n                            observer.unobserve(entry.target);\n                        }\n                    });\n                }, { rootMargin: this.options.rootMargin, threshold: this.options.threshold });\n            }\n            this.scan();\n        }\n\n        scan() {\n            const elements = document.querySelectorAll(`${this.options.selector}:not(.${this.options.loadedClass})`);\n            elements.forEach(el => {\n                if (!this.observer) this.loadImage(el);\n                else this.observer.observe(el);\n            });\n        }\n\n        loadImage(el) {\n            const bgSrc = el.getAttribute('data-bg');\n            const imgSrc = el.getAttribute('data-src');\n            const skeleton = el.closest('.skeleton-wrapper');\n\n            if (!bgSrc && !imgSrc) return;\n\n            const loader = new Image();\n            loader.onload = () => {\n                if (bgSrc) el.style.backgroundImage = `url(\"${bgSrc}\")`;\n                if (imgSrc) el.setAttribute('src', imgSrc);\n                requestAnimationFrame(() => el.classList.add(this.options.loadedClass));\n                if (skeleton) skeleton.classList.remove(this.options.skeletonClass);\n            };\n            loader.onerror = () => {\n                if (skeleton) skeleton.classList.remove(this.options.skeletonClass);\n            };\n            loader.src = bgSrc || imgSrc;\n        }\n    }\n\n    window.addEventListener('load', () => {\n\n        calcYear();\n        window.ImageLoader = new AdvancedImageLoader1();\n\n        var swiper = new Swiper(\".impactSwiper\", {\n            loop: true,\n            slidesPerView: 1,\n            spaceBetween: 10,\n            speed: 800,\n            effect: 'slide',\n            autoplay: {\n                delay: 5000,\n                disableOnInteraction: false,\n                pauseOnMouseEnter: true,\n            },\n            navigation: {\n                nextEl: \".swiper-custom-next\",\n                prevEl: \".swiper-custom-prev\",\n            },\n            breakpoints: {\n               768: {\n                    slidesPerView: 2,\n                    spaceBetween: 24,\n                },\n                1024: {\n                    slidesPerView: 3,\n                    spaceBetween: 30,\n                }\n            },\n            keyboard: { enabled: true },\n            observer: true,\n            observeParents: true,\n            on: {\n                init: function () {\n                    this.update();\n                    this.autoplay.start();\n                },\n            }\n        });\n\n        AOS.init({ duration: 900, easing: 'ease-out-cubic', once: true, offset: 50 });\n    });\n<\/script>\n\n\n\n<script src=\"https:\/\/nenghui.com\/wp-content\/themes\/nenghui-energy-theme-4\/assets\/js\/globe.2.32.2.min.js\"><\/script>\n<script src=\"https:\/\/nenghui.com\/wp-content\/themes\/nenghui-energy-theme-4\/assets\/js\/lenis.1.0.39.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/0.160.0\/three.min.js\">\n\n<\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n<script id=\"vertexShader\" type=\"x-shader\/x-vertex\">\n    attribute vec3 targetPosition;\n    attribute vec3 targetColor;\n    varying vec3 vColor;\n    uniform float uProgress;\n    uniform float uTime;\n\n    vec3 rotatePoint(vec3 p, float angle, float cy) {\n        float s = sin(angle);\n        float c = cos(angle);\n        float tx = p.x;\n        float ty = p.y - cy;\n        return vec3(tx * c - ty * s, tx * s + ty * c + cy, (fract(p.x * 123.456) - 0.5) * 5.0);\n    }\n\n    void main() {\n        vColor = mix(vec3(0.07, 0.92, 0.64), targetColor, uProgress);\n\n        float rotorY = 120.0;\n        float angle = uTime * 4.0;\n\n        vec3 pOrigin = position;\n        if (abs(position.z - 999.9) < 0.1) {\n            pOrigin = rotatePoint(position, angle, rotorY);\n        }\n\n        vec3 pTarget = targetPosition;\n        if (abs(targetPosition.z - 999.9) < 0.1) {\n            pTarget = rotatePoint(targetPosition, angle, rotorY);\n        }\n\n        vec3 pos = mix(pOrigin, pTarget, uProgress);\n        pos.y += sin(uTime * 1.5 + position.x * 0.02) * 2.0;\n\n        vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);\n        gl_PointSize = 4.5 * (400.0 \/ -mvPosition.z);\n        gl_Position = projectionMatrix * mvPosition;\n    }\n<\/script>\n\n<script id=\"fragmentShader\" type=\"x-shader\/x-fragment\">\n    varying vec3 vColor;\n    void main() {\n        float d = distance(gl_PointCoord, vec2(0.5));\n        if (d > 0.5) discard;\n        float alpha = smoothstep(0.5, 0.1, d) * 0.85;\n        gl_FragColor = vec4(vColor, alpha);\n    }\n<\/script>\n\n\n\n<script>\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(60, window.innerWidth\/window.innerHeight, 1, 2000);\n    camera.position.set(0, -20, 450);\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setSize(window.innerWidth, window.innerHeight);\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    document.getElementById('particle-canvas').appendChild(renderer.domElement);\n\n    const particleCount = 20000;\n    const colorMain = new THREE.Color(0x13eca4);\n    const colorText = new THREE.Color('#10d292');\n\n    const ShapeLib = {\n        fill: (pts) => {\n            const posArr = new Float32Array(particleCount * 3);\n            const colArr = new Float32Array(particleCount * 3);\n            for(let i=0; i<particleCount; i++) {\n                const p = pts[i % pts.length];\n                posArr[i*3] = p.x; posArr[i*3+1] = p.y; posArr[i*3+2] = p.z;\n                const c = p.c || colorMain;\n                colArr[i*3] = c.r; colArr[i*3+1] = c.g; colArr[i*3+2] = c.b;\n            }\n            return { pos: posArr, col: colArr };\n        },\n        generateLogoPts: (offsetX, offsetY, scale) => {\n            \/\/ \u65b0\u589e\uff1a\u5224\u65ad\u79fb\u52a8\u7aef\u5e76\u66ff\u6362\u54c1\u724c\u8bcd\n            const isMobile = window.innerWidth < 768;\n            const brandText = 'NENGHUI';\n\n            const pts = [];\n            const canvas = document.createElement('canvas');\n            const ctx = canvas.getContext('2d');\n            canvas.width = 200; canvas.height = 40;\n            ctx.font = 'bold 30px Arial';\n            ctx.fillStyle = 'white';\n            ctx.fillText(brandText, 10, 30);\n            const data = ctx.getImageData(0,0,200,40).data;\n            for(let y=0; y<40; y+=2) {\n                for(let x=0; x<200; x+=2) {\n                    if(data[(y*200+x)*4] > 128) {\n                        pts.push({ x: (x - 100) * scale + offsetX, y: -(y - 20) * scale + offsetY, z: 41, c: colorText });\n                    }\n                }\n            }\n            return pts;\n        },\n        text: () => {\n            \/\/ \u65b0\u589e\uff1a\u5224\u65ad\u79fb\u52a8\u7aef\u5e76\u66ff\u6362\u54c1\u724c\u8bcd\n            const isMobile = window.innerWidth < 768;\n            const brandText =  'NENGHUI';\n\n            const canvas = document.createElement('canvas'); canvas.width = 1000; canvas.height = 200;\n            const ctx = canvas.getContext('2d');\n            \/\/ \u65b0\u589e\uff1a\u5982\u679c\u662f\u79fb\u52a8\u7aef\uff0c\"NH\"\u8f83\u77ed\uff0c\u5b57\u4f53\u653e\u5927\u81f3200px\u4fdd\u8bc1\u89c6\u89c9\u5f20\u529b\u548c\u6784\u56fe\u9971\u6ee1\n            ctx.font = isMobile ? 'bold 200px \"Space Grotesk\"' : 'bold 160px \"Space Grotesk\"';\n            ctx.fillStyle = 'white'; ctx.textAlign = 'center';\n            ctx.fillText(brandText, 500, 140);\n\n            const data = ctx.getImageData(0,0,1000,200).data;\n            const pts = [];\n            for(let y=0; y<200; y+=3) for(let x=0; x<1000; x+=3) {\n                if(data[(y*1000+x)*4] > 128) pts.push({ x: (x-500)*0.8, y: -(y-100)*0.8, z: (Math.random()-0.5)*15, c: colorMain });\n            }\n            return ShapeLib.fill(pts);\n        },\n        bess: () => {\n            const pts = [];\n            for(let i=0; i<4000; i++) {\n                pts.push({ x: (Math.random()-0.5)*180 - 100, y: (Math.random()-0.5)*80 + 20, z: (Math.random()-0.5)*80, c: colorMain });\n            }\n            pts.push(...ShapeLib.generateLogoPts(-100, 20, 0.6));\n            for(let i=0; i<4000; i++) {\n                pts.push({ x: (Math.random()-0.5)*70 + 120, y: (Math.random()-0.5)*160 + 20, z: (Math.random()-0.5)*70, c: colorMain });\n            }\n            pts.push(...ShapeLib.generateLogoPts(120, 40, 0.3));\n            return ShapeLib.fill(pts);\n        },\n        wind: () => {\n            const pts = [];\n            const rotorY = 120;\n            for(let i=0; i<5000; i++) {\n                pts.push({ x: (Math.random()-0.5)*10, y: Math.random()*240-120, z: (Math.random()-0.5)*10 });\n            }\n            for(let b=0; b<3; b++) {\n                let angle = b * (Math.PI * 2 \/ 3);\n                for(let i=0; i<3000; i++) {\n                    let len = Math.random() * 140;\n                    pts.push({ x: Math.cos(angle) * len, y: Math.sin(angle) * len + rotorY, z: 999.9 });\n                }\n            }\n            return ShapeLib.fill(pts);\n        },\n        solar: () => {\n            const pts = [];\n            const panelWidth = 400, panelDepth = 250, stepX = 80, stepZ = 60, groundY = -80;\n\n            for(let i = 0; i < 6000; i++) {\n                let r = Math.random();\n                if (r < 0.7) {\n                    let x = (Math.random() - 0.5) * panelWidth;\n                    let z = (Math.random() - 0.5) * panelDepth;\n                    let y = -z * 0.5 - 20;\n                    pts.push({ x, y, z, c: colorMain });\n                } else if (r < 0.9) {\n                    let gridX = (Math.floor(Math.random() * (panelWidth \/ stepX)) - (panelWidth \/ stepX \/ 2)) * stepX;\n                    let gridZ = (Math.floor(Math.random() * (panelDepth \/ stepZ)) - (panelDepth \/ stepZ \/ 2)) * stepZ;\n                    let topY = -gridZ * 0.5 - 20;\n                    let y = groundY + Math.random() * (topY - groundY);\n                    pts.push({ x: gridX, y, z: gridZ, c: new THREE.Color('#14b8a6') });\n                } else {\n                    let z = (Math.floor(Math.random() * (panelDepth \/ stepZ)) - (panelDepth \/ stepZ \/ 2)) * stepZ;\n                    let x = (Math.random() - 0.5) * panelWidth;\n                    let y = -z * 0.5 - 22;\n                    pts.push({ x, y, z, c: colorMain });\n                }\n            }\n            return ShapeLib.fill(pts);\n        },\n        truck: () => {\n            const pts = [];\n            const tractorW = 60, tractorH = 55, tractorD = 50;\n            const trailerW = 150, trailerH = 60, trailerD = 50;\n\n            for(let i=0; i<particleCount; i++) {\n                let r = Math.random();\n                if(r < 0.15) {\n                    let x = Math.random() * tractorW + 75;\n                    let y = Math.random() * tractorH - 30;\n                    let z = (Math.random() - 0.5) * tractorD;\n                    if (x > 110 && y > 0) x -= (y \/ tractorH) * 20;\n                    pts.push({ x, y, z });\n                } else if(r < 0.45) {\n                    let x = Math.random() * trailerW - 80;\n                    let y = Math.random() * trailerH - 30;\n                    let z = (Math.random() - 0.5) * trailerD;\n                    pts.push({ x, y, z });\n                } else if(r < 0.55) {\n                    let wheelPositions = [-60, -20, 20, 90, 115];\n                    let wIdx = Math.floor(Math.random() * wheelPositions.length);\n                    let angle = Math.random() * Math.PI * 2;\n                    let rad = 12;\n                    let side = Math.random() > 0.5 ? 26 : -26;\n                    pts.push({ x: wheelPositions[wIdx] + Math.cos(angle) * rad, y: -35 + Math.sin(angle) * rad, z: side });\n                } else if(r < 0.85) {\n                    let x = (Math.random() - 0.5) * 120 + 20;\n                    let y = Math.random() * 140 - 50;\n                    let z = (Math.random() - 0.5) * 110;\n                    if (Math.abs(z) < 40 ) {\n                        if (y < 50) {\n                            z = Math.sign(z) * 45 + (Math.random()-0.5)*5;\n                        }\n                    }\n                    pts.push({ x, y, z });\n                } else {\n                    let x = 60 + (Math.random() - 0.5) * 25;\n                    let y = 60 + (Math.random() - 0.5) * 20;\n                    let z = (Math.random() - 0.5) * 40;\n                    pts.push({ x, y, z });\n                }\n            }\n            return ShapeLib.fill(pts);\n        }\n    };\n\n    const isMobileGlobal = window.innerWidth < 768;\n    const maxParticles = 20000;\n\n    \/\/ 1. \u63d0\u524d\u58f0\u660e\u5168\u5c40\u53d8\u91cf\n    let geo, mat, points;\n\n    \/\/ \u3010\u5bfc\u6f14\u63a7\u5236\u53f0\u3011\uff1a\u72ec\u7acb\u63a7\u5236\u6bcf\u4e2a\u573a\u666f\u5bb9\u5668\u7684\u5c5e\u6027\n    \/\/ \u6570\u7ec4\u7d22\u5f15\uff1a0=Logo\u56fe\u7247, 1=\u50a8\u80fd\u67dc, 2=\u98ce\u673a, 3=\u5149\u4f0f, 4=\u6362\u7535\u5361\u8f66\n    const sceneConfig = {\n        \/\/ \u63a7\u5236\u79fb\u52a8\u7aef\u6bcf\u4e2a\u6a21\u578b\u7684\u7f29\u653e\u5360\u6bd4\uff080.6 \u5373 60%\uff0cPC\u7aef\u81ea\u52a8\u4e3a 1.0 \u4e0d\u53d7\u6b64\u5f71\u54cd\uff09\n        mobileScales: [1.0, 0.6, 0.6, 0.6, 0.6],\n        \/\/ \u63a7\u5236\u6bcf\u4e2a\u6a21\u578b\u7684\u57fa\u7840 Y \u8f74\u65cb\u8f6c\uff08\u5982\u679c\u50a8\u80fd\u67dc\u8fd8\u662f\u80cc\u5bf9\u4f60\uff0c\u628a\u7b2c\u4e8c\u4e2a 0 \u6539\u4e3a Math.PI \u5373\u53ef\u77ac\u95f4\u8f6c\u8fc7\u6765\uff09\n        rotations: [0, 0, 0, 0, 0],\n\n        \/\/ \u5185\u90e8\u52a8\u6001\u53d8\u91cf\uff0c\u8bf7\u52ff\u4fee\u6539\n        currentRotY: 0\n    };\n\n    \/\/ 2. \u5360\u4f4d allData\uff08\u7edd\u5bf9\u4fdd\u6301\u539f\u59cb\u6570\u636e\uff0c\u7edd\u4e0d\u4fee\u6539\u9876\u70b9\uff0c\u4fdd\u62a4 Shader \u903b\u8f91\uff01\uff09\n    const allData = [\n        {\n            data: { pos: new Float32Array(maxParticles * 3), col: new Float32Array(maxParticles * 3) },\n            text: \"SYSTEM \/\/ NENGHUI ENERGY\"\n        },\n        { data: ShapeLib.bess(), text: \"HARDWARE \/\/ STORAGE_UNITS\" },\n        { data: ShapeLib.wind(), text: \"GEN \/\/ WIND_TURBINE\" },\n        { data: ShapeLib.solar(), text: \"GEN \/\/ SOLAR_ARRAY\" },\n        { data: ShapeLib.truck(), text: \"LOGISTICS \/\/ TRUCK_SWAP\" }\n    ];\n\n    \/\/ ==========================================\n    \/\/ \u56fe\u50cf\u8f6c 3D \u7c92\u5b50\u6838\u5fc3\u903b\u8f91\uff08\u4fdd\u6301\u539f\u59cb\u5b8c\u7f8e\u6bd4\u4f8b\uff09\n    \/\/ ==========================================\n    function createLogoParticles(imgSrc, callback) {\n        const img = new Image();\n        img.crossOrigin = \"Anonymous\";\n        img.src = imgSrc;\n\n        img.onload = () => {\n            const canvas = document.createElement('canvas');\n            const ctx = canvas.getContext('2d');\n\n            const sampleWidth = 400;\n            const sampleHeight = Math.floor(sampleWidth * (img.height \/ img.width));\n            canvas.width = sampleWidth;\n            canvas.height = sampleHeight;\n\n            ctx.drawImage(img, 0, 0, sampleWidth, sampleHeight);\n            const imgData = ctx.getImageData(0, 0, sampleWidth, sampleHeight).data;\n\n            \/\/ \u5b8c\u5168\u8fd8\u539f\uff1aLogo \u7684\u5e95\u5c42\u751f\u6210\u6bd4\u4f8b\u903b\u8f91\n            let scale = window.innerWidth < 768 ? 0.6 : (window.innerWidth < 1200 ? 1.4 : 2.1);\n            const zDepth = scale * 7.0;\n\n            const tempPos = [];\n            const tempCol = [];\n\n            for (let y = 0; y < sampleHeight; y++) {\n                for (let x = 0; x < sampleWidth; x++) {\n                    const index = (y * sampleWidth + x) * 4;\n                    const alpha = imgData[index + 3];\n\n                    if (alpha > 128) {\n                        const r = Math.min(1.0, (imgData[index] \/ 255) * 1.2);\n                        const g = Math.min(1.0, (imgData[index + 1] \/ 255) * 1.2);\n                        const b = Math.min(1.0, (imgData[index + 2] \/ 255) * 1.2);\n\n                        const px = (x - sampleWidth \/ 2) * scale;\n                        const py = -(y - sampleHeight \/ 2) * scale;\n                        const pz = (Math.random() - 0.5) * zDepth;\n\n                        tempPos.push(px, py, pz);\n                        tempCol.push(r, g, b);\n                    }\n                }\n            }\n\n            const finalPos = new Float32Array(maxParticles * 3);\n            const finalCol = new Float32Array(maxParticles * 3);\n            const sourceCount = tempPos.length \/ 3;\n\n            for (let i = 0; i < maxParticles; i++) {\n                const srcIdx = (i % sourceCount) * 3;\n                finalPos[i * 3] = tempPos[srcIdx];\n                finalPos[i * 3 + 1] = tempPos[srcIdx + 1];\n                finalPos[i * 3 + 2] = tempPos[srcIdx + 2];\n\n                finalCol[i * 3] = tempCol[srcIdx];\n                finalCol[i * 3 + 1] = tempCol[srcIdx + 1];\n                finalCol[i * 3 + 2] = tempCol[srcIdx + 2];\n            }\n\n            allData[0] = {\n                text: \"SYSTEM \/\/ NENGHUI ENERGY\",\n                data: { pos: finalPos, col: finalCol }\n            };\n\n            geo = new THREE.BufferGeometry();\n            geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(allData[0].data.pos), 3));\n            geo.setAttribute('targetPosition', new THREE.BufferAttribute(new Float32Array(allData[1].data.pos), 3));\n            geo.setAttribute('targetColor', new THREE.BufferAttribute(new Float32Array(allData[1].data.col), 3));\n\n            mat = new THREE.ShaderMaterial({\n                uniforms: { uProgress: { value: 0 }, uTime: { value: 0 } },\n                vertexShader: document.getElementById('vertexShader').textContent,\n                fragmentShader: document.getElementById('fragmentShader').textContent,\n                transparent: true,\n                blending: THREE.NormalBlending,\n                depthWrite: false\n            });\n\n            points = new THREE.Points(geo, mat);\n\n            \/\/ \u521d\u59cb\u5316\u5bb9\u5668\u6bd4\u4f8b\u548c\u65cb\u8f6c\n            const initScale = isMobileGlobal ? sceneConfig.mobileScales[0] : 1.0;\n            points.scale.set(initScale, initScale, initScale);\n            sceneConfig.currentRotY = sceneConfig.rotations[0];\n\n            scene.add(points);\n\n            if(callback) callback();\n        };\n\n        img.onerror = () => {\n            console.warn(\"Logo load failed.\");\n            allData[0] = { data: ShapeLib.text(), text: \"SYSTEM \/\/ NENGHUI\" };\n            \/\/ ...\u964d\u7ea7\u903b\u8f91\u7565\u8fc7...\n            if(callback) callback();\n        }\n    }\n    \/\/ ==========================================\n    \/\/ \u7ec8\u6781\u7248\uff1a\u5e26\u6709\u4e25\u683c\u65f6\u5e8f\u56de\u8c03\u7684 Hero \u89c6\u9891\u63a7\u5236\u5668\n    \/\/ ==========================================\n    function initHeroVideo(onComplete) {\n        const videoWrapper = document.getElementById('hero-video-wrapper');\n        const video = document.getElementById('hero-video');\n        const loadingIndicator = document.getElementById('video-loading');\n\n        \/\/ \u3010\u6781\u7b80\u5224\u65ad\u3011\uff1a\u5982\u679c\u521a\u624d\u88ab\u4e0a\u9762\u7684\u5185\u8054\u811a\u672c\u9690\u85cf\u4e86\uff0c\u8bf4\u660e\u4e0d\u7528\u64ad\n        if (!videoWrapper || videoWrapper.style.display === 'none') {\n            if (videoWrapper) videoWrapper.remove(); \/\/ \u6e05\u7406 DOM \u8282\u70b9\u91ca\u653e\u5185\u5b58\n            if (onComplete) onComplete();            \/\/ \u76f4\u63a5\u53bb\u64ad 3D\n            return false;\n        }\n\n        \/\/ --- \u4e0b\u9762\u5168\u662f\u5355\u7eaf\u7684\u201c\u9700\u8981\u64ad\u653e\u201d\u7684\u6b63\u5e38\u903b\u8f91\uff0c\u4e0d\u7528\u6539 ---\n        let isEnded = false;\n\n        const hideLoading = () => {\n            if (loadingIndicator && !loadingIndicator.dataset.hidden) {\n                loadingIndicator.dataset.hidden = \"true\";\n                gsap.to(loadingIndicator, { opacity: 0, duration: 0.8, onComplete: () => loadingIndicator.remove() });\n            }\n        };\n\n        const endVideo = () => {\n            if (isEnded) return;\n            isEnded = true;\n            sessionStorage.setItem('heroVideoPlayed', 'true');\n\n            gsap.to(videoWrapper, {\n                opacity: 0,\n                duration: 1.2,\n                ease: \"power2.inOut\",\n                onComplete: () => {\n                    videoWrapper.style.display = 'none';\n                    video.pause();\n                    if (onComplete) onComplete();\n                }\n            });\n        };\n\n        video.addEventListener('canplaythrough', hideLoading, { once: true });\n        video.addEventListener('playing', hideLoading, { once: true });\n\n        const playPromise = video.play();\n        if (playPromise !== undefined) {\n            playPromise.catch(() => { hideLoading(); endVideo(); });\n        }\n\n        video.onended = endVideo;\n        const skipBtn = document.getElementById('skip-video');\n        if(skipBtn) skipBtn.onclick = endVideo;\n\n        return true;\n    }\n\n    \/\/ ==========================================\n    \/\/ \u65f6\u95f4\u7ebf\u603b\u6307\u6325\uff1aSwiper \u521d\u59cb\u5316\u4e0e\u751f\u547d\u5468\u671f\u7ba1\u7406\n    \/\/ ==========================================\n    \/\/ ==========================================\n    \/\/ \u4e25\u683c\u65f6\u95f4\u7ebf\u603b\u6307\u6325\uff1a\u89c6\u9891 -> 3D -> \u8f6e\u64ad\n    \/\/ ==========================================\n    \/\/ ==========================================\n    \/\/ \u5b8c\u7f8e\u5951\u5408\u539f\u6709 3D \u903b\u8f91\u7684\u65f6\u95f4\u7ebf\u63a7\u5236\n    \/\/ ==========================================\n    createLogoParticles('https:\/\/nenghui.com\/wp-content\/uploads\/2025\/11\/logo-2.png', () => {\n        window.heroSwiper = new Swiper(\".heroSwiper\", {\n            loop: true,\n            speed: 1000,\n            parallax: true,\n            effect: 'fade',\n            fadeEffect: { crossFade: true },\n\n            \/\/ \u4f9d\u7136\u4fdd\u6301\u521d\u59cb\u5316\u4e0d\u81ea\u52a8\u8f6e\u64ad\n            autoplay: false,\n\n            pagination: { el: \".swiper-pagination\", clickable: true, renderBullet: function (index, className) { return '<span class=\"' + className + ' !bg-primary\"><\/span>'; } },\n            navigation: { nextEl: \".swiper-button-next\", prevEl: \".swiper-button-prev\" },\n\n            on: {\n                init: function () {\n                    const swiper = this;\n\n                    \/\/ 1. \u9501\u5b9a\u9996\u5c4f\uff0c\u7981\u6b62\u7528\u6237\u624b\u6ed1\n                    swiper.allowTouchMove = false;\n\n                    \/\/ 2. \u89c6\u9891\u9636\u6bb5\uff1a\u7b49\u5f85\u89c6\u9891\u64ad\u653e\u5b8c\n                    initHeroVideo(() => {\n                        \/\/ 3. \u89c6\u9891\u5f7b\u5e95\u7ed3\u675f\uff0c\u628a\u821e\u53f0\u4ea4\u7ed9 3D \u5e8f\u5217\uff01\n                        \/\/ \uff08\u6ce8\u610f\uff1a\u4e0d\u518d\u4f7f\u7528 setTimeout\uff0c\u5b8c\u5168\u4fe1\u4efb\u5e76\u7b49\u5f85\u4f60\u7684 3D \u903b\u8f91\u53bb\u89e6\u53d1 slideNext\uff09\n                        if(window.start3DSequence) window.start3DSequence();\n                    });\n                },\n\n                \/\/ \u76d1\u542c\u6240\u6709\u7684\u5207\u6362\u52a8\u4f5c\n                slideChange: function () {\n                    \/\/ \u5f53\u79bb\u5f00\u7b2c\u4e00\u5c4f\u65f6\uff08\u8fd9\u662f\u7531\u4f60\u7684 3D \u903b\u8f91\u91cc\u7684 slideNext \u89e6\u53d1\u7684\uff09\n                    if (this.realIndex !== 0) {\n                        \/\/ \u505c\u6b62 3D \u6e32\u67d3\n                        if(window.stop3DSequence) window.stop3DSequence();\n\n                        \/\/ \u89e3\u9501\u7528\u6237\u6ed1\u52a8\u6743\u9650\n                        this.allowTouchMove = true;\n\n                        \/\/ \u6b63\u5f0f\u63a5\u7ba1\u5e76\u542f\u52a8\u5e38\u89c4\u7684 6\u79d2 \u81ea\u52a8\u8f6e\u64ad\n                        this.params.autoplay.delay = 6000;\n                        this.params.autoplay.disableOnInteraction = false;\n                        this.autoplay.start();\n                    }\n                    \/\/ \u5f53\u5e38\u89c4\u8f6e\u64ad\u8f6c\u4e86\u4e00\u5708\uff0c\u53c8\u56de\u5230\u7b2c\u4e00\u5c4f\u65f6\n                    else if (this.realIndex === 0) {\n                        this.autoplay.stop();        \/\/ \u505c\u4e0b\u8f6e\u64ad\u5f15\u64ce\n                        this.allowTouchMove = false; \/\/ \u518d\u6b21\u9501\u5b9a\u6ed1\u52a8\n\n                        \/\/ \u518d\u6b21\u89e6\u53d1 3D\uff0c\u7136\u540e\u7ee7\u7eed\u7b49\u5f85\u4f60\u7684 3D \u903b\u8f91\u53bb\u5b8c\u6210\u5207\u6362\n                        if(window.start3DSequence) window.start3DSequence();\n                    }\n                }\n            }\n        });\n    });\n\n    let typeInterval;\n    function typeText(str) {\n        const el = document.getElementById('hud-text');\n        if(!el) return;\n        clearInterval(typeInterval);\n        el.innerText = '';\n        let i = 0;\n        typeInterval = setInterval(() => { el.innerText += str[i++]; if(i === str.length) clearInterval(typeInterval); }, 40);\n    }\n\n    let curr = 0;\n    let sequenceTimeout;\n    let currentMorphTween = null;\n\n    window.start3DSequence = function() {\n        window.stop3DSequence();\n        curr = 0;\n\n        if(!geo) return;\n\n        geo.attributes.position.array.set(allData[0].data.pos);\n        geo.attributes.targetPosition.array.set(allData[0].data.pos);\n        geo.attributes.targetColor.array.set(allData[0].data.col);\n\n        geo.attributes.position.needsUpdate = true;\n        geo.attributes.targetPosition.needsUpdate = true;\n        geo.attributes.targetColor.needsUpdate = true;\n\n        mat.uniforms.uProgress.value = 0;\n        typeText(allData[0].text);\n\n        \/\/ \u91cd\u7f6e\u4e3a\u7b2c\u4e00\u5e55\u7684\u53c2\u6570\n        const targetScale = isMobileGlobal ? sceneConfig.mobileScales[0] : 1.0;\n        gsap.to(points.scale, { x: targetScale, y: targetScale, z: targetScale, duration: 1.0 });\n        gsap.to(sceneConfig, { currentRotY: sceneConfig.rotations[0], duration: 1.0 });\n\n        sequenceTimeout = setTimeout(() => { morphTo(1); }, 2500);\n    };\n\n    window.stop3DSequence = function() {\n        clearTimeout(sequenceTimeout);\n        if(currentMorphTween) currentMorphTween.kill();\n    };\n\n    function morphTo(nextIndex) {\n        if(!geo) return;\n        geo.attributes.position.array.set(allData[curr].data.pos);\n        geo.attributes.targetPosition.array.set(allData[nextIndex].data.pos);\n        geo.attributes.targetColor.array.set(allData[nextIndex].data.col);\n\n        geo.attributes.position.needsUpdate = true;\n        geo.attributes.targetPosition.needsUpdate = true;\n        geo.attributes.targetColor.needsUpdate = true;\n\n        mat.uniforms.uProgress.value = 0;\n        typeText(allData[nextIndex].text);\n\n        \/\/ \u3010\u6838\u5fc3\u7edd\u6740\u3011\uff1a\u5728\u7c92\u5b50\u98de\u884c\u7684\u540c\u65f6\uff0c\u5e73\u6ed1\u653e\u5927\/\u7f29\u5c0f\u5916\u5c42\u5bb9\u5668\uff0c\u5e73\u6ed1\u65cb\u8f6c\u65b9\u5411\uff01\n        const targetScale = isMobileGlobal ? sceneConfig.mobileScales[nextIndex] : 1.0;\n\n        gsap.to(points.scale, {\n            x: targetScale, y: targetScale, z: targetScale,\n            duration: 1.5, ease: \"power2.inOut\"\n        });\n\n        gsap.to(sceneConfig, {\n            currentRotY: sceneConfig.rotations[nextIndex],\n            duration: 1.5, ease: \"power2.inOut\"\n        });\n\n        currentMorphTween = gsap.to(mat.uniforms.uProgress, {\n            value: 1,\n            duration: 1.5,\n            ease: \"power2.inOut\",\n            onComplete: () => {\n                curr = nextIndex;\n                if (nextIndex < allData.length - 1) {\n                    sequenceTimeout = setTimeout(() => morphTo(nextIndex + 1), 2500);\n                } else {\n                    sequenceTimeout = setTimeout(() => {\n                        if(window.heroSwiper) { window.heroSwiper.slideNext(); }\n                    }, 3000);\n                }\n            }\n        });\n    }\n\n    let isParticleVisible = true;\n    const heroSectionEl = document.getElementById('hero-section');\n    if(heroSectionEl) {\n        const particleObserver = new IntersectionObserver((entries) => {\n            isParticleVisible = entries[0].isIntersecting;\n        }, { threshold: 0 }); \/\/ \u53ea\u8981\u79bb\u5f00\u89c6\u53e3\u5c31\u89e6\u53d1\n        particleObserver.observe(heroSectionEl);\n    }\n    function animate() {\n        requestAnimationFrame(animate);\n\n        \/\/ \u3010\u5173\u952e\u4fee\u590d\u3011\uff1a\u5982\u679c\u7b2c\u4e00\u5c4f\u4e0d\u5728\u89c6\u53e3\u5185\uff0c\u76f4\u63a5 return\uff0c\u505c\u6b62\u6240\u6709\u8ba1\u7b97\u4e0e GPU \u6e32\u67d3\uff01\n        if (!isParticleVisible) return;\n\n        const time = performance.now() * 0.001;\n\n        if (points) {\n            \/\/ \u5b8c\u7f8e\u7684\u65cb\u8f6c\u878d\u5408\uff1a\u57fa\u7840\u65cb\u8f6c\u5ea6\u6570 + \u547c\u5438\u6f02\u6d6e\u5e26\u6765\u7684\u5fae\u5f31\u6446\u52a8\n            points.rotation.y = sceneConfig.currentRotY + Math.sin(time * 0.5) * 0.3;\n            points.position.y = Math.sin(time * 0.8) * 3;\n\n            if (mat && mat.uniforms) {\n                mat.uniforms.uTime.value = time;\n            }\n        }\n\n        renderer.render(scene, camera);\n    }\n\n    animate();\n\n    window.addEventListener('resize', () => {\n        camera.aspect = window.innerWidth\/window.innerHeight;\n        camera.updateProjectionMatrix();\n        renderer.setSize(window.innerWidth, window.innerHeight);\n    });\n\n<\/script>\n\n<script>\n    const lenis = new Lenis({\n        duration: 1.2,\n        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n        smoothWheel: true, \/\/ \u786e\u4fdd\u63a5\u7ba1\u9f20\u6807\u6eda\u8f6e\n        touchMultiplier: 2 \/\/ \u79fb\u52a8\u7aef\u6ed1\u52a8\u66f4\u8ddf\u624b\n    });\n\n    lenis.on('scroll', ScrollTrigger.update);\n    gsap.ticker.add((time) => {\n        \/\/ GSAP 3.12+ time \u662f\u79d2\uff0cLenis \u9700\u6beb\u79d2\uff0c\u6240\u4ee5 * 1000 \u662f\u6b63\u786e\u7684\n        lenis.raf(time * 1000);\n    });\n    \/\/ \u9632\u6b62\u9875\u9762\u5207\u6362\u540e\u53f0\u518d\u56de\u6765\u65f6\u65f6\u95f4\u8df3\u8dc3\u5bfc\u81f4\u52a8\u753b\u9519\u4e71\n    gsap.ticker.lagSmoothing(0);\n\n    gsap.registerPlugin(ScrollTrigger);\n    const cards = gsap.utils.toArray('.stack-card');\n\n    cards.forEach((card, i) => {\n        if (i !== cards.length - 1) {\n            const nextCard = cards[i + 1];\n            const overlay = card.querySelector('.card-overlay');\n\n            gsap.to(card, {\n                scale: 0.94,\n                ease: 'none',\n                scrollTrigger: {\n                    trigger: nextCard,\n                    start: \"top bottom\",\n                    end: \"top top\",\n                    scrub: true\n                }\n            });\n\n            if (overlay) {\n                gsap.to(overlay, {\n                    opacity: 1,\n                    ease: 'none',\n                    scrollTrigger: {\n                        trigger: nextCard,\n                        start: \"top bottom\",\n                        end: \"top top\",\n                        scrub: true\n                    }\n                });\n            }\n        }\n\n        const bg = card.querySelector('.bg-parallax');\n        if (bg) {\n            gsap.fromTo(bg,\n                { yPercent: -10 },\n                {\n                    yPercent: 10,\n                    ease: \"none\",\n                    scrollTrigger: {\n                        trigger: card,\n                        start: \"top bottom\",\n                        end: \"bottom top\",\n                        scrub: true\n                    }\n                }\n            );\n        }\n    });\n<\/script>\n\n<script>\n        const globeWrapper = document.querySelector('.globe-module-wrapper');\n        const dragHint = document.getElementById('drag-hint');\n        const hideHint = () => {\n            if(dragHint && !dragHint.classList.contains('hint-fade-out')) {\n                dragHint.classList.add('hint-fade-out');\n            }\n        };\n        globeWrapper.addEventListener('mousedown', hideHint);\n        globeWrapper.addEventListener('touchstart', hideHint, {passive: true});\n\n         const energyNodes = [\n            { lat: 31.23, lng: 121.47, name: 'SHANGHAI HQ', type: 'CORE' },\n            { lat: 13.75, lng: 100.99, name: 'THAILAND', type: 'Solar & BESS EPC' },\n            { lat: 21.02, lng: 105.85, name: 'VIETNAM', type: 'Solar & BESS EPC' },\n            { lat: 11.55, lng: 104.92, name: 'CAMBODIA', type: 'Solar & BESS EPC' },\n            { lat: 50.11, lng: 8.68,   name: 'EUROPE', type: 'ESS' },\n            \/\/ { lat: 33.31, lng: 44.36,  name: 'IRAQ', type: 'EPC Solutions' },\n        ];\n        const countElement = document.getElementById('active-regions-count');\n        if (countElement) {\n            countElement.innerText = energyNodes.length;\n        }\n\n        const arcsData = energyNodes.slice(1).map(d => ({\n            startLat: 31.23, startLng: 121.47, endLat: d.lat, endLng: d.lng,\n            color: ['#13eca4', 'rgba(19, 236, 164, 0.05)']\n        }));\n\n        const centerOrigin = new THREE.Vector3(0, 0, 0);\n        const container = document.getElementById('globe-container');\n\n        const starGeo = new THREE.CircleGeometry(0.35, 10);\n        const matStarBlue = new THREE.MeshBasicMaterial({ color: 0x0055ff, transparent: true, opacity: 0.9, depthWrite: false, side: THREE.DoubleSide });\n        const matStarCyan = new THREE.MeshBasicMaterial({ color: 0x00ccff, transparent: true, opacity: 0.9, depthWrite: false, side: THREE.DoubleSide });\n\n        const world = Globe()\n            (container)\n            .backgroundColor('rgba(248, 252, 250, 0)')\n            .showAtmosphere(true)\n            .atmosphereColor('#13eca4')\n            .atmosphereAltitude(0.15)\n\n            .polygonAltitude(0.01)\n            .polygonCapColor(() => '#f0f7f5')\n            .polygonSideColor(() => '#e2e8f0')\n            .polygonStrokeColor(() => 'rgba(19, 236, 164, 0.25)')\n\n            .arcsData(arcsData)\n            .arcColor('color')\n            .arcDashLength(0.4).arcDashGap(0.2).arcDashAnimateTime(2500)\n            .arcStroke(window.innerWidth < 768 ? 0.8 : 0.5)\n            .arcAltitude(0.25)\n\n            .ringsData(energyNodes)\n            .ringColor(d => d.type === 'CORE' ? 'rgba(255, 107, 0, 0.9)' : 'rgba(19, 236, 164, 0.9)')\n            .ringMaxRadius(d => d.type === 'CORE' ? 5.5 : 3.0)\n            .ringPropagationSpeed(1.5)\n            .ringRepeatPeriod(d => d.type === 'CORE' ? 1000 : 1500)\n            .ringAltitude(0.012)\n\n            .customLayerData(energyNodes)\n            .customThreeObject(d => {\n                const isCore = d.type === 'CORE';\n                const dotColorHex = isCore ? 0xff6b00 : 0x13eca4;\n                const size = isCore ? 1.5 : 0.8;\n\n                const group = new THREE.Group();\n\n                const dotGeo = new THREE.CircleGeometry(size * 0.4, 32);\n                const dotMat = new THREE.MeshBasicMaterial({ color: dotColorHex, side: THREE.DoubleSide, transparent: true, opacity: 1.0 });\n                const dotMesh = new THREE.Mesh(dotGeo, dotMat);\n                group.add(dotMesh);\n                group.userData.dot = dotMesh;\n\n                if (!isCore) {\n                    const nebulaGroup = new THREE.Group();\n\n                    const starCount = 25;\n                    const maxSpread = size * 4.5;\n                    const minSpread = size * 1.8;\n                    const stars = [];\n\n                    for (let i = 0; i < starCount; i++) {\n                        const angle = Math.random() * Math.PI * 2;\n                        const r = minSpread + Math.random() * (maxSpread - minSpread);\n\n                        const mesh = new THREE.Mesh(starGeo, Math.random() > 0.5 ? matStarCyan : matStarBlue);\n                        mesh.position.set(Math.cos(angle) * r, Math.sin(angle) * r, 0);\n\n                        const baseScale = Math.random() * 0.6 + 0.4;\n                        mesh.scale.set(baseScale, baseScale, 1);\n\n                        nebulaGroup.add(mesh);\n                        stars.push({\n                            mesh: mesh,\n                            speed: Math.random() * 2.5 + 1.5,\n                            offset: Math.random() * Math.PI * 2,\n                            baseScale: baseScale\n                        });\n                    }\n\n                    group.add(nebulaGroup);\n                    group.userData.stars = stars;\n                }\n\n                return group;\n            })\n            .customThreeObjectUpdate((obj, d) => {\n                \/\/ [\u4f18\u5316] \u8ba1\u7b97\u56fa\u5b9a\u5728\u8868\u9762\u7684\u5750\u6807\u7f13\u5b58\uff1a\u907f\u514d\u6bcf\u4e00\u5e27\u91cd\u590d\u8f6c\u6362\u5de8\u5927\u7684\u6570\u5b66\u8fd0\u7b97\n                if (!obj.userData.coordsInitialized) {\n                    const coords = world.getCoords(d.lat, d.lng, 0.02);\n                    obj.position.copy(coords);\n                    obj.lookAt(centerOrigin);\n                    obj.userData.coordsInitialized = true;\n                }\n\n                const now = Date.now() \/ 1000;\n                const isCore = d.type === 'CORE';\n\n                const corePulse = Math.sin(now * 3.0 + d.lat);\n                const coreScale = 1 + corePulse * 0.15;\n                if(obj.userData.dot) obj.userData.dot.scale.set(coreScale, coreScale, 1);\n\n                if (!isCore && obj.userData.stars) {\n                    obj.userData.stars.forEach(star => {\n                        const pulse = (Math.sin(now * star.speed + star.offset) + 1) \/ 2;\n                        const s = star.baseScale * (0.5 + pulse * 3.0);\n                        star.mesh.scale.set(s, s, 1);\n                    });\n                }\n            })\n\n            .htmlElementsData(energyNodes)\n            .htmlElement(d => {\n                const el = document.createElement('div');\n                const isCore = d.type === 'CORE';\n                const colorHex = isCore ? '#ff6b00' : '#13eca4';\n                const delay = Math.random() * 0.5 + 0.8;\n\n                el.className = 'globe-label';\n                el.setAttribute('data-lat', d.lat);\n                el.setAttribute('data-lng', d.lng);\n\n                el.innerHTML = `\n                    <div class=\"visibility-wrapper\">\n                        <div class=\"anchor-point\">\n                            <div class=\"hud-container\" style=\"animation-delay: ${delay}s;\">\n                                <div class=\"hud-line\" style=\"background: linear-gradient(to right, ${colorHex}90, ${colorHex}10);\"><\/div>\n                                <div class=\"hud-card\" style=\"border-left: 3px solid ${colorHex};\">\n                                    <span class=\"tracking-widest text-[#10221c]\">${d.name}<\/span>\n                                    <span class=\"tag font-black\" style=\"color: ${colorHex}; background: ${colorHex}15; padding: 2px 5px; border-radius: 4px; font-size: 9px;\">${d.type}<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                return el;\n            })\n            .htmlLat(d => d.lat).htmlLng(d => d.lng).htmlAltitude(0.02);\n\n        setTimeout(() => {\n            const globeMaterial = world.globeMaterial();\n            const scene = world.scene();\n            const renderer = world.renderer();\n\n            if (renderer) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));\n\n            globeMaterial.color = new THREE.Color('#ffffff');\n            globeMaterial.emissive = new THREE.Color('#f8fcfa');\n            globeMaterial.emissiveIntensity = 0.1;\n            globeMaterial.roughness = 0.8;\n            globeMaterial.metalness = 0.1;\n\n            let hasAmbient = false; let hasDirectional = false;\n            scene.children.forEach(obj => {\n                if (obj.type === 'DirectionalLight') { obj.intensity = 2.5; obj.position.set(1, 1, 1); hasDirectional = true; }\n                if (obj.type === 'AmbientLight') { obj.intensity = 1.2; hasAmbient = true; }\n            });\n            if (!hasAmbient) scene.add(new THREE.AmbientLight(0xffffff, 1.2));\n            if (!hasDirectional) {\n                const fallbackDirLight = new THREE.DirectionalLight(0xffffff, 2.5);\n                fallbackDirLight.position.set(1, 1, 1); scene.add(fallbackDirLight);\n            }\n        }, 100);\n\n        fetch('https:\/\/nenghui.com\/wp-content\/themes\/nenghui-energy-theme-4\/assets\/json\/countries.json')\n            .then(res => res.json())\n            .then(data => world.polygonsData(data.features));\n\n        const initialIsMobile = container.clientWidth < 768;\n        world.pointOfView({ lat: 25, lng: 105, altitude: initialIsMobile ? 3.6 : 2.1 });\n\n        world.controls().autoRotate = true;\n        world.controls().autoRotateSpeed = 0.4;\n        world.controls().enableDamping = true;\n        world.controls().enableZoom = false;\n\n        \/\/ ==========================================\n        \/\/ \u3010\u5927\u5e08\u7ea7\u67b6\u6784\uff1a\u5168\u5957\u751f\u547d\u5468\u671f\u4e0e\u6027\u80fd\u63a7\u5236\u5668\u3011\n        \/\/ ==========================================\n\n        let visibilityAnimId;\n        let isGlobeInViewport = true;\n        let cachedLabels = null; \/\/ [\u4f18\u5316] HUD \u6807\u7b7e\u7684\u5750\u6807\u8fd0\u7b97\u7f13\u5b58\u5c42\n\n        function updateLabelVisibility() {\n            if (!isGlobeInViewport) return;\n\n            const camera = world.camera();\n            if (camera) {\n                const camPos = camera.position;\n                const camVec = new THREE.Vector3(camPos.x, camPos.y, camPos.z).normalize();\n\n                \/\/ [\u4f18\u5316] \u53ea\u67e5\u8be2\u4e00\u6b21 DOM \u548c\u8ba1\u7b97\u5750\u6807\u4f4d\u7f6e\n                if (!cachedLabels) {\n                    const labels = document.querySelectorAll('.globe-label');\n                    if (labels.length === energyNodes.length) {\n                        cachedLabels = Array.from(labels).map(el => {\n                            const lat = parseFloat(el.getAttribute('data-lat'));\n                            const lng = parseFloat(el.getAttribute('data-lng'));\n                            const pos = world.getCoords(lat, lng, 0);\n                            return {\n                                wrapper: el.querySelector('.visibility-wrapper'),\n                                posVec: new THREE.Vector3(pos.x, pos.y, pos.z).normalize(),\n                                hidden: false\n                            };\n                        });\n                    }\n                }\n\n                if (cachedLabels) {\n                    cachedLabels.forEach(label => {\n                        const dot = label.posVec.dot(camVec);\n                        if (label.wrapper) {\n                            if (dot < 0.25) {\n                                if (!label.hidden) {\n                                    label.wrapper.classList.add('hud-hidden');\n                                    label.hidden = true;\n                                }\n                            } else {\n                                if (label.hidden) {\n                                    label.wrapper.classList.remove('hud-hidden');\n                                    label.hidden = false;\n                                }\n                            }\n                        }\n                    });\n                }\n            }\n            visibilityAnimId = requestAnimationFrame(updateLabelVisibility);\n        }\n\n        \/\/ [\u4f18\u5316] \u4e3a 3D \u521d\u59cb\u5316\u7559\u51fa\u5145\u8db3\u7684\u9884\u6e32\u67d3\u7f13\u51b2\u671f\uff0c\u9632\u6b62\u7a81\u53d1\u7684 Shader \u7f16\u8bd1\u5f15\u53d1\u7b2c\u4e00\u6b21\u5361\u987f\n        let hasRenderedInitialFrames = false;\n        setTimeout(() => {\n            hasRenderedInitialFrames = true;\n            \/\/ \u7f13\u51b2\u7ed3\u675f\u540e\u5982\u679c\u5904\u4e8e\u4e0d\u53ef\u89c1\u72b6\u6001\uff0c\u5219\u5b89\u7a33\u4f11\u7720\n            if (!isGlobeInViewport) {\n                world.pauseAnimation();\n                if (visibilityAnimId) cancelAnimationFrame(visibilityAnimId);\n            }\n        }, 1500);\n\n        const observer1 = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    if (!isGlobeInViewport) {\n                        isGlobeInViewport = true;\n                        world.resumeAnimation();\n                        updateLabelVisibility();\n                    }\n                } else {\n                    isGlobeInViewport = false;\n                    \/\/ \u53ea\u5728\u5b8c\u6210\u4e86\u521d\u59cb\u5316\u9884\u7f16\u8bd1\u7f13\u51b2\u540e\u624d\u6682\u505c\u52a8\u753b\n                    if (hasRenderedInitialFrames) {\n                        world.pauseAnimation();\n                        if (visibilityAnimId) cancelAnimationFrame(visibilityAnimId);\n                    }\n                }\n            });\n        }, { threshold: 0.01 });\n\n        observer1.observe(document.querySelector('.globe-module-wrapper'));\n\n        const resizeObserver = new ResizeObserver(entries => {\n            for (let entry of entries) {\n                if(!isGlobeInViewport) return;\n\n                const { width, height } = entry.contentRect;\n                if(width > 0 && height > 0) {\n                    world.width(width).height(height);\n                    const isMobileSize = width < 768;\n                    world.pointOfView({ altitude: isMobileSize ? 3.6 : 2.1 });\n                }\n            }\n        });\n        resizeObserver.observe(document.querySelector('.globe-module-wrapper'));\n\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>\u062a\u0647\u064a\u0626\u0629 \u062a\u062e\u0637\u064a \u0627\u0644\u0645\u0642\u062f\u0645\u0629 \ue5c8 NENGHUI CORE: STABLE INIT_SYSTEM EnergyEMPOWERING. \u062d\u0644\u0648\u0644 \u0637\u0627\u0642\u0629 \u0630\u0643\u064a\u0629 \u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0633\u062a\u062f\u0627\u0645 \u0648\u0645\u0646\u062e\u0641\u0636 \u0627\u0644\u0643\u0631\u0628\u0648\u0646. \u0631\u0624\u064a\u0629 \u0639\u0627\u0644\u0645\u064a\u0629\u060c \u0623\u062f\u0627\u0621 \u0645\u062d\u0644\u064a. \u0627\u0644\u062a\u0645\u064a\u0632 \u0627\u0644\u0647\u0646\u062f\u0633\u064a \u064a\u0644\u062a\u0642\u064a \u0628\u0627\u0644\u062f\u0642\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0642\u0639\u060c \u062a\u0642\u062f\u064a\u0645 \u062d\u0644\u0648\u0644 EPC \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0628\u062e\u0628\u0631\u0629 \u0639\u0627\u0644\u0645\u064a\u0629. \u062f\u0639\u0645 \u062b\u0648\u0631\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0629 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a. \u062d\u0644\u0648\u0644 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646 \u0627\u0644\u062c\u064a\u0644 \u0627\u0644\u062a\u0627\u0644\u064a | EPC \u0648EMC\/PPA \u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0645\u0633\u062a\u062f\u0627\u0645. \u062a\u0645\u0631\u064a\u0631 \u0633\u0631\u064a\u0639 \ue325 \u062a\u0634\u063a\u064a\u0644 [\u2026]<\/p>","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-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":96,"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":2239,"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/pages\/2\/revisions\/2239"}],"wp:attachment":[{"href":"https:\/\/nenghui.com\/ar\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}