{"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-04-07T10:19:56","modified_gmt":"2026-04-07T02:19:56","slug":"home","status":"publish","type":"page","link":"https:\/\/nenghui.com\/de\/","title":{"rendered":"HOME"},"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            \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\">NENGHUI<\/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                                    KERN: <span class=\"text-primary font-bold\">STABIL<\/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\">INIT_SYSTEM<\/span>\n                                <\/div>\n                                <h2 class=\"text-4xl md:text-[2.66rem] leading-[0.9] tracking-tighter mb-6 uppercase text-background-dark\">\n                                    Energie<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500 drop-shadow-sm\">ST\u00c4RKEND.<\/span>\n                                <\/h2>\n                                <p class=\"text-[1rem] text-background-dark\/70 max-w-md italic font-medium\">Intelligente Energiel\u00f6sungen f\u00fcr eine nachhaltige und kohlenstoffarme Zukunft.<\/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                                Globale Vision <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">Lokalisierte Leistung.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                             Ingenieurtechnische Exzellenz trifft auf Pr\u00e4zision vor Ort \u2013 wir liefern integrierte EPC-L\u00f6sungen mit globaler Expertise.\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                               Antrieb der KI-gesteuerten <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">Energierevolution.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                            Energiespeicherl\u00f6sungen der n\u00e4chsten Generation | EPC &amp; EMC\/PPA f\u00fcr eine nachhaltige Zukunft.\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\">Scrollen<\/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\">Wischen<\/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\">Energieversorgung des Planeten<\/h3>\n                    <p class=\"text-[#0d1b17]\/60 text-[1rem]\">Den Wandel mit messbarer Wirkung vorantreiben.<\/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\">Technologiepionier<\/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\">Erteilte Patente<\/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\">CO2-Kompensation<\/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\">GW<\/span>\n                                <\/h4>\n                                <p class=\"text-[#0d1b17]\/50 text-xs\">Saubere Energie geliefert<\/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\">EPC-Portfolio<\/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\">Abgeschlossene Projekte<\/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=\"\/de\/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                    Intelligente Energiespeichersysteme\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                    Das ESS-Ladeger\u00e4t NH-TS-EDB180-261 vereint Hochleistungs-Energiespeicher und ultraschnelles Laden von Elektrofahrzeugen in einem kompakten System. Es bietet eine maximale Ausgangsleistung von 180 kW und ist mit verschiedenen Stromnetzen kompatibel.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/de\/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                    Intelligente Energiespeichersysteme\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white drop-shadow-lg tracking-tight leading-none\">\n                    Fl\u00fcssigkeitsgek\u00fchlter ESS-Container 5MWh\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Die fl\u00fcssigkeitsgek\u00fchlte Temperaturregelung gew\u00e4hrleistet eine Zelltemperaturhomogenit\u00e4t von \u00b14\u00b0C, verl\u00e4ngert die Lebensdauer um 30% und erreicht einen Wirkungsgrad von &gt;95% f\u00fcr Netz-, Solar- und Industrieanwendungen.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/de\/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                    Schl\u00fcsselfertige Energiedienstleistungen\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem] mb-6 text-white tracking-tight leading-tight\">\n                    Schl\u00fcsselfertige Energiedienstleistungen<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                    Umfassende Energiel\u00f6sungen von der Planung bis zum Betrieb, die nachhaltiges Wachstum und optimierte Energieinvestitionen gew\u00e4hrleisten.\n                <\/p>\n            <\/div>\n        <\/a>\n        \n        <a href=\"\/de\/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                    Mikronetze\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white tracking-tight leading-tight\">\n                    Zuverl\u00e4ssige Microgrid-L\u00f6sungen, Entwicklung eines gr\u00fcneren Stromnetzes\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Von Industrieparks bis hin zu abgelegenen Inseln bietet Nenghui umfassende EPC-Dienstleistungen f\u00fcr Microgrids. Unsere Systeme optimieren die Synergie zwischen Photovoltaik und Energiespeichersystemen und erm\u00f6glichen ein nahtloses Umschalten der Leistung.\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                    Global <span class=\"text-primary\">Netzwerk<\/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                    Nachhaltige Energie\u00fcberwachung\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\">Aktive Stationen<\/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\">Regionen Live<\/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\">Zum Erkunden ziehen<\/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                        Warum eine Partnerschaft mit NENGHUI eingehen?\n                    <\/h2>\n                    <p class=\"text-[1rem] text-[#0d1b17]\/70 leading-relaxed font-light\">\n                        Vertrauen in die Ingenieurskunst dank jahrzehntelanger Erfahrung, innovativer Konstruktion und globaler Konformit\u00e4t.\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\">Bew\u00e4hrte Lieferqualit\u00e4t<\/h3>\n                        <p class=\"text-white\/70 text-sm leading-relaxed mb-4 flex-grow\">\n                            Dank jahrelanger, zuverl\u00e4ssiger Vertragserf\u00fcllung und Projektabwicklung garantieren wir die Einhaltung aller Verpflichtungen. Unsere hohe operative Leistungsf\u00e4higkeit sichert Ihnen eine optimale Energiewende.\n                        <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-white\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Zuverl\u00e4ssige Ausf\u00fchrung<\/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> Jahrelange technische F\u00fchrung\n                        <\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                            Gegr\u00fcndet von einem Team technischer Experten, engagieren wir uns seit vielen Jahren im Energiesektor. <span id=\"dynamic-years-text\" class=\"text-[#0d1b17]\">16<\/span> Jahre. Unsere tief verwurzelte Ingenieurs-DNA treibt kontinuierliche Innovation und professionelle Strenge bei allem an, was wir entwickeln.\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\">Seit <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\">Designgetriebene Evolution<\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                        Urspr\u00fcnglich aus der Energiewirtschaft stammend, hat sich NENGHUI zu einem Spezialisten f\u00fcr die Planung und den Bau sauberer Energieanlagen entwickelt. Wir bieten hochwertige Dienstleistungen und arbeiten eng mit globalen Partnern zusammen, um nachhaltige Wirkung zu erzielen.\n                     <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-primary\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Hochwertige Dienstleistungen<\/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\">Zertifizierte globale Qualit\u00e4t<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                Unsere Produkte und Prozesse erf\u00fcllen strenge nationale und internationale Standards. Dank umfassender globaler Zertifizierungen gew\u00e4hrleisten wir einen reibungslosen Markteintritt und langfristige Betriebssicherheit weltweit.\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\">Sicherheit<\/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\">CE<\/div>\n                                <span class=\"text-[8px] text-gray-400 uppercase tracking-wider\">EU-Standard<\/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\">US-Standard<\/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\">Ma\u00dfgeschneiderte Multi-Szenario-L\u00f6sungen<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                 Wir bieten ein umfassendes Spektrum an Energieanlagen, darunter Solarenergie, Energiespeichersysteme und Ladeinfrastruktur f\u00fcr Elektrofahrzeuge. Von Mikronetzen bis hin zu Gro\u00dfprojekten \u2013 unsere integrierten L\u00f6sungen \u201cSolar + Speicher + Laden\u201d erf\u00fcllen vielf\u00e4ltige globale Anforderungen.\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                                Solar + Speicher + Laden\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]\">F\u00e4lle<\/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\">IRAQ BESS \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">St\u00e4rkung des irakischen Stromnetzes durch intelligente Batteriespeichertechnologie <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Schl\u00fcsselfertiges EPC-Projekt (330 kW\/763 kWh) f\u00fcr nachhaltiges industrielles Energiemanagement.<\/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\">Exzellenz in der Solarenergieintegration in Gebirgsregionen \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Exzellenz in der Solarintegration in Gebirgsregionen  <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Dieses Vorzeigeprojekt von Shanghai Nenghui Technology demonstriert unsere umfassende Kompetenz im Bereich der Solarenergie in Bergregionen. Von der anspruchsvollen Netzanbindung bis hin zur robusten Tragwerksplanung gew\u00e4hrleisten wir langfristige Zuverl\u00e4ssigkeit in jeder Lastspitze, die wir mit Strom versorgen.<\/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\">Wir versorgen die Trockengebiete mit Energie \u2013 2023<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Innovative Solarl\u00f6sungen, ma\u00dfgeschneidert f\u00fcr die anspruchsvollsten Klimazonen.<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Dieses wegweisende Projekt demonstriert unsere F\u00e4higkeit, hocheffiziente Photovoltaikanlagen in sandigen und felsigen W\u00fcsten zu entwerfen und zu warten und setzt damit einen neuen Ma\u00dfstab f\u00fcr Solarenergie im Versorgungsma\u00dfstab.<\/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\">Kommerzielles ESS-Projekt \u2013 2019<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Intelligente Energie, keine Investitionen <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">NENGHUI-finanzierte Energiespeicherung mit intelligenter C&amp;I-Integration und lebenslanger Leistungsgarantie.<\/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\">Antriebsstrang der n\u00e4chsten Generation f\u00fcr elektrische Nutzfahrzeuge \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Bahnbrechende Innovationen in der Kerntechnologie<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Bereitstellung von Hochleistungsantriebssystemen durch intelligente Fertigung und fortschrittliche Technik.<\/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\">Qinzhou 20MWp Fischerei-Solar-Hybridprojekt \u2013 2023<\/span>\n                                <h3 class=\"text-3xl text-white mb-4 line-clamp-2\">Nachhaltige Synergie von Energie und Aquakultur<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Eine erstklassige EPC-Schl\u00fcsselfertigl\u00f6sung, die hocheffiziente PV-Anlagen in moderne Fischerei\u00f6kosysteme integriert.<\/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\">Innovatives Agrar-Solar-Hybridprojekt \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Harmonie von Energie und Landwirtschaft<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Eine hocheffiziente EPC-L\u00f6sung, die den Bodenwert durch integrierte Solarenergie und nachhaltige Forstwirtschaft maximiert.<\/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\">Integriertes Agri-Photovoltaik-Projekt mit 120 MWp \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Exzellenz in der EPC-Projektabwicklung<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Ein erstklassiges, subventioniertes PV-Projekt mit hochwertiger Ausr\u00fcstung und sorgf\u00e4ltiger Ausf\u00fchrung innerhalb des f\u00fchrenden Solarclusters von Guizhou mit einer Leistung von einer Million Kilowatt.<\/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                    Zertifizierte Zuverl\u00e4ssigkeit, globale Konformit\u00e4t\n                <\/h2>\n                <p class=\"text-[#0d1b17]\/60 text-[1rem] font-light\">\n                    Einhaltung der weltweit strengsten Standards f\u00fcr Sicherheit, Qualit\u00e4t und Umweltschutz.\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                            Sicherheitsgepr\u00fcft\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                            Europ\u00e4ischer Standard.\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                            US-Sicherheit\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\">IEC<\/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                            Elektrotechnik\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    var heroSwiper = new Swiper(\".heroSwiper\", {\n        loop: true,\n        speed: 1000,\n        parallax: true,\n        effect: 'fade',\n        fadeEffect: { crossFade: true },\n        autoplay: {\n            delay: 6000,\n            disableOnInteraction: false,\n        },\n        pagination: {\n            el: \".swiper-pagination\",\n            clickable: true,\n            renderBullet: function (index, className) {\n                return '<span class=\"' + className + ' !bg-primary\"><\/span>';\n            },\n        },\n        navigation: {\n            nextEl: \".swiper-button-next\",\n            prevEl: \".swiper-button-prev\",\n        },\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            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('NENGHUI', 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            const canvas = document.createElement('canvas'); canvas.width = 1000; canvas.height = 200;\n            const ctx = canvas.getContext('2d');\n            ctx.font = 'bold 160px \"Space Grotesk\"'; ctx.fillStyle = 'white'; ctx.textAlign = 'center';\n            ctx.fillText('NENGHUI', 500, 140);\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 allData = [\n        { data: ShapeLib.text(), text: \"SYSTEM \/\/ NENGHUI\" },\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    const geo = new THREE.BufferGeometry();\n    const initialPos = new Float32Array(allData[0].data.pos);\n    const initialTargetPos = new Float32Array(allData[1].data.pos);\n    const initialTargetCol = new Float32Array(allData[1].data.col);\n\n    geo.setAttribute('position', new THREE.BufferAttribute(initialPos, 3));\n    geo.setAttribute('targetPosition', new THREE.BufferAttribute(initialTargetPos, 3));\n    geo.setAttribute('targetColor', new THREE.BufferAttribute(initialTargetCol, 3));\n\n    const 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    const points = new THREE.Points(geo, mat);\n    scene.add(points);\n\n    function typeText(str) {\n        const el = document.getElementById('hud-text'); \n        if(!el) return;\n        el.innerText = ''; let i = 0;\n        const t = setInterval(() => { \n            el.innerText += str[i++]; \n            if(i === str.length) clearInterval(t); \n        }, 40);\n    }\n\n    let curr = 0;\n    function morph() {\n        let next = (curr + 1) % allData.length;\n        \n        geo.attributes.position.array.set(allData[curr].data.pos);\n        geo.attributes.targetPosition.array.set(allData[next].data.pos);\n        geo.attributes.targetColor.array.set(allData[next].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[next].text);\n\n        gsap.to(mat.uniforms.uProgress, {\n            value: 1, duration: 2.0, ease: \"power2.inOut\",\n            onComplete: () => { curr = next; }\n        });\n    }\n\n    setInterval(morph, 5000);\n    typeText(allData[0].text);\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 });\n        particleObserver.observe(heroSectionEl);\n    }\n\n    function animate(t) {\n        requestAnimationFrame(animate);\n        if (!isParticleVisible) return; \n        \n        mat.uniforms.uTime.value = t * 0.001;\n        points.rotation.y += 0.0015;\n        renderer.render(scene, camera);\n    }\n    animate(0);\n\n    window.addEventListener('resize', () => {\n        camera.aspect = window.innerWidth\/window.innerHeight; camera.updateProjectionMatrix();\n        renderer.setSize(window.innerWidth, window.innerHeight);\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    });\n    lenis.on('scroll', ScrollTrigger.update);\n    gsap.ticker.add((time) => { lenis.raf(time * 1000); });\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:\/\/raw.githubusercontent.com\/nvkelso\/natural-earth-vector\/master\/geojson\/ne_110m_admin_0_countries.geojson')\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>NENGHUI CORE: STABLE INIT_SYSTEM EnergyEMPOWERING. Smart energy solutions for a sustainable and low-carbon future. Global Vision Localized Performance. Engineering excellence meets on-site precision\uff0c Delivering integrated EPC solutions with global expertise. Powering the AI-Driven Energy Revolution. Next-Gen Energy Storage Solutions | EPC &#038; EMC\/PPA for a Sustainable Future. Scroll Swipe &#xe325; Powering the Planet Driving the [&hellip;]<\/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\/de\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":88,"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/pages\/2\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/nenghui.com\/de\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}