{"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\/fr\/","title":{"rendered":"ACCUEIL"},"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                                    C\u0152UR: <span class=\"text-primary font-bold\">\u00c9CURIE<\/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\">SYST\u00c8ME D&#039;INITIALISATION<\/span>\n                                <\/div>\n                                <h2 class=\"text-4xl md:text-[2.66rem] leading-[0.9] tracking-tighter mb-6 uppercase text-background-dark\">\n                                    \u00c9nergie<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500 drop-shadow-sm\">\u00c9MANCIPATION.<\/span>\n                                <\/h2>\n                                <p class=\"text-[1rem] text-background-dark\/70 max-w-md italic font-medium\">Des solutions \u00e9nerg\u00e9tiques intelligentes pour un avenir durable et sobre en carbone.<\/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                                Vision globale <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">Performance localis\u00e9e.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                             L&#039;excellence en ing\u00e9nierie alli\u00e9e \u00e0 la pr\u00e9cision sur site, pour des solutions EPC int\u00e9gr\u00e9es et une expertise mondiale.\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                               Alimenter l&#039;IA <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">R\u00e9volution \u00e9nerg\u00e9tique.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                            Solutions de stockage d&#039;\u00e9nergie de nouvelle g\u00e9n\u00e9ration | EPC et EMC\/PPA pour un avenir durable.\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\">Rouleau<\/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\">Glisser<\/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\">Alimenter la plan\u00e8te<\/h3>\n                    <p class=\"text-[#0d1b17]\/60 text-[1rem]\">Conduire la transition avec un impact mesurable.<\/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\">Pionnier de la technologie<\/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\">Brevets accord\u00e9s<\/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\">Compensation carbone<\/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\">\u00c9nergie propre fournie<\/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\">Portefeuille EPC<\/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\">Projets termin\u00e9s<\/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=\"\/fr\/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                    Syst\u00e8mes de stockage d&#039;\u00e9nergie intelligents\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                    Le chargeur NH-TS-EDB180-261 ESS combine un stockage d&#039;\u00e9nergie haute capacit\u00e9 et une recharge ultra-rapide pour v\u00e9hicules \u00e9lectriques dans un syst\u00e8me compact. Il offre une puissance maximale de 180 kW et est compatible avec divers environnements \u00e9lectriques.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/fr\/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                    Syst\u00e8mes de stockage d&#039;\u00e9nergie intelligents\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white drop-shadow-lg tracking-tight leading-none\">\n                    Conteneur ESS refroidi par liquide 5MWh\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Le contr\u00f4le thermique par refroidissement liquide assure une uniformit\u00e9 de cellule de \u00b14\u00b0C, prolongeant la dur\u00e9e de vie de 30% et atteignant une efficacit\u00e9 &gt;95% pour les applications de r\u00e9seau, solaires et industrielles.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/fr\/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                    Services \u00e9nerg\u00e9tiques cl\u00e9s en main\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem] mb-6 text-white tracking-tight leading-tight\">\n                    Services \u00e9nerg\u00e9tiques cl\u00e9s en main<br>(EPC et EMC\/PPA)\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed max-w-xl\">\n                    Des solutions \u00e9nerg\u00e9tiques compl\u00e8tes, de la conception \u00e0 l&#039;exploitation, garantissant une croissance durable et des investissements \u00e9nerg\u00e9tiques optimis\u00e9s.\n                <\/p>\n            <\/div>\n        <\/a>\n        \n        <a href=\"\/fr\/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                    Micror\u00e9seaux\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white tracking-tight leading-tight\">\n                    Solutions de micro-r\u00e9seaux fiables, pour un r\u00e9seau plus vert\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Des zones industrielles aux \u00eeles les plus recul\u00e9es, Nenghui fournit des services EPC de micro-r\u00e9seaux de bout en bout. Nos syst\u00e8mes optimisent la synergie entre le photovolta\u00efque et le stockage d&#039;\u00e9nergie, assurant une commutation de puissance sans interruption.\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                    Mondial <span class=\"text-primary\">R\u00e9seau<\/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                    Surveillance de l&#039;\u00e9nergie durable\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\">Stations actives<\/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\">R\u00e9gions en direct<\/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\">Glissez pour explorer<\/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                        Pourquoi devenir partenaire de NENGHUI ?\n                    <\/h2>\n                    <p class=\"text-[1rem] text-[#0d1b17]\/70 leading-relaxed font-light\">\n                        La confiance en ing\u00e9nierie gr\u00e2ce \u00e0 des d\u00e9cennies d&#039;expertise, d&#039;innovation en mati\u00e8re de conception et de conformit\u00e9 mondiale.\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\">Excellence \u00e9prouv\u00e9e en mati\u00e8re de livraison<\/h3>\n                        <p class=\"text-white\/70 text-sm leading-relaxed mb-4 flex-grow\">\n                            Forts d&#039;une longue exp\u00e9rience dans l&#039;ex\u00e9cution de contrats et de projets, nous garantissons la fiabilit\u00e9 de chacun de nos engagements. Notre solide capacit\u00e9 op\u00e9rationnelle assure la r\u00e9ussite de votre transition \u00e9nerg\u00e9tique.\n                        <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-white\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Ex\u00e9cution fiable<\/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> Des ann\u00e9es d&#039;exp\u00e9rience en leadership technique\n                        <\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                            Fond\u00e9e par une \u00e9quipe d&#039;experts techniques, notre entreprise est rest\u00e9e fid\u00e8le au secteur de l&#039;\u00e9nergie pendant <span id=\"dynamic-years-text\" class=\"text-[#0d1b17]\">16<\/span> Depuis des ann\u00e9es, notre ADN d&#039;ing\u00e9nierie profond\u00e9ment ancr\u00e9 favorise l&#039;innovation continue et la rigueur professionnelle dans tout ce que nous construisons.\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\">Depuis <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\">\u00c9volution ax\u00e9e sur la conception<\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                        Issue du secteur de l&#039;\u00e9nergie, NENGHUI s&#039;est sp\u00e9cialis\u00e9e dans la conception et l&#039;ing\u00e9nierie des \u00e9nergies propres. Nous proposons des services \u00e0 forte valeur ajout\u00e9e et collaborons \u00e9troitement avec des partenaires internationaux pour un impact durable.\n                     <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-primary\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Services \u00e0 haute valeur ajout\u00e9e<\/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\">Qualit\u00e9 mondiale certifi\u00e9e<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                Nos produits et proc\u00e9d\u00e9s r\u00e9pondent aux normes nationales et internationales les plus strictes. Gr\u00e2ce \u00e0 nos certifications mondiales compl\u00e8tes, nous garantissons une implantation facilit\u00e9e sur les march\u00e9s et une s\u00e9curit\u00e9 op\u00e9rationnelle \u00e0 long terme partout dans le monde.\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\">S\u00e9curit\u00e9<\/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\">Norme europ\u00e9enne<\/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\">Norme am\u00e9ricaine<\/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\">Solutions multi-sc\u00e9narios sur mesure<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                 Nous proposons une gamme compl\u00e8te d&#039;actifs \u00e9nerg\u00e9tiques, incluant l&#039;\u00e9nergie solaire, les syst\u00e8mes de stockage d&#039;\u00e9nergie et les infrastructures de recharge pour v\u00e9hicules \u00e9lectriques. Des micro-r\u00e9seaux aux projets \u00e0 grande \u00e9chelle, nos solutions int\u00e9gr\u00e9es \u201c\u00a0Solaire + Stockage + Recharge\u00a0\u201d r\u00e9pondent \u00e0 une demande mondiale diversifi\u00e9e.\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                                Solaire + Stockage + Recharge\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]\">Cas<\/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\">IRAK BESS \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Moderniser le r\u00e9seau \u00e9lectrique irakien gr\u00e2ce \u00e0 la technologie BESS intelligente <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Projet EPC cl\u00e9 en main de 330 kW\/763 kWh pour une gestion durable de l&#039;\u00e9nergie industrielle.<\/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\">Excellence en mati\u00e8re d&#039;int\u00e9gration solaire en milieu montagneux \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Excellence en mati\u00e8re d&#039;int\u00e9gration solaire en montagne  <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Ce projet phare de Shanghai Nenghui Technology illustre notre expertise compl\u00e8te en mati\u00e8re de solaire en milieu montagneux. De la connexion sophistiqu\u00e9e au r\u00e9seau \u00e0 la conception structurelle robuste, nous garantissons une fiabilit\u00e9 \u00e0 long terme lors de chaque pic de consommation que nous alimentons.<\/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\">Nous alimentons les r\u00e9gions arides \u2013 2023<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Des solutions solaires innovantes adapt\u00e9es aux climats les plus exigeants.<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Ce projet phare illustre notre capacit\u00e9 \u00e0 concevoir et \u00e0 entretenir des centrales photovolta\u00efques \u00e0 haut rendement dans des d\u00e9serts sablonneux et rocheux, \u00e9tablissant ainsi une nouvelle r\u00e9f\u00e9rence pour l&#039;\u00e9nergie solaire \u00e0 grande \u00e9chelle.<\/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\">Projet commercial de stockage d&#039;\u00e9nergie \u2013 2019<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">\u00c9nergie intelligente, investissement nul <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Syst\u00e8me de stockage d&#039;\u00e9nergie financ\u00e9 par NENGHUI, dot\u00e9 d&#039;une int\u00e9gration intelligente pour les secteurs commercial et industriel et d&#039;une garantie de performance \u00e0 vie.<\/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\">Groupe motopropulseur \u00e9lectrique de nouvelle g\u00e9n\u00e9ration pour camions lourds \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Perc\u00e9es technologiques fondamentales pionni\u00e8res<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Fournir des syst\u00e8mes de transmission haute performance gr\u00e2ce \u00e0 une fabrication intelligente et une ing\u00e9nierie de pointe.<\/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\">Projet hybride p\u00eache-solaire de Qinzhou de 20 MWc \u2013 2023<\/span>\n                                <h3 class=\"text-3xl text-white mb-4 line-clamp-2\">Synergie durable entre \u00e9nergie et aquaculture<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Une solution EPC cl\u00e9 en main de premier plan int\u00e9grant des panneaux photovolta\u00efques \u00e0 haut rendement et des \u00e9cosyst\u00e8mes de p\u00eache modernes.<\/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\">Projet hybride agro-solaire innovant \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Harmonie de l&#039;\u00e9nergie et de l&#039;agriculture<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Une solution EPC \u00e0 haut rendement maximisant la valeur fonci\u00e8re gr\u00e2ce \u00e0 l&#039;\u00e9nergie solaire int\u00e9gr\u00e9e et \u00e0 la gestion durable des for\u00eats.<\/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\">Projet agrivolta\u00efque int\u00e9gr\u00e9 de 120 MWc \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Excellence dans la r\u00e9alisation des projets EPC<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Un projet de d\u00e9veloppement photovolta\u00efque subventionn\u00e9 de premier plan, dot\u00e9 d&#039;\u00e9quipements de haute qualit\u00e9 et d&#039;une ex\u00e9cution rigoureuse, au sein du principal p\u00f4le solaire d&#039;un million de kilowatts du Guizhou.<\/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                    Fiabilit\u00e9 certifi\u00e9e, conformit\u00e9 mondiale\n                <\/h2>\n                <p class=\"text-[#0d1b17]\/60 text-[1rem] font-light\">\n                    Respecter les normes les plus strictes au monde en mati\u00e8re de s\u00e9curit\u00e9, de qualit\u00e9 et de protection de l&#039;environnement.\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                            Test\u00e9 en mati\u00e8re de s\u00e9curit\u00e9\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                            Norme europ\u00e9enne.\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                            S\u00e9curit\u00e9 aux \u00c9tats-Unis\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                            \u00e9lectrotechnique\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\/fr\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":88,"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/nenghui.com\/fr\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}