{"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\/ms\/","title":{"rendered":"RUMAH"},"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                                    TERAS: <span class=\"text-primary font-bold\">STABIL<\/span> \n                                <\/div>\n                            <\/header>\n                            \n                            <div class=\"max-w-2xl\">\n                                <div class=\"bg-white\/60 border border-primary\/20 backdrop-blur-md px-6 py-2 rounded-full mb-6 inline-block shadow-[0_5px_15px_rgba(19,236,164,0.15)]\">\n                                    <span class=\"font-mono text-sm tracking-widest text-background-dark uppercase cursor\" id=\"hud-text\">SISTEM_INIT<\/span>\n                                <\/div>\n                                <h2 class=\"text-4xl md:text-[2.66rem] leading-[0.9] tracking-tighter mb-6 uppercase text-background-dark\">\n                                    Tenaga<br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-teal-500 drop-shadow-sm\">MEMPERKASAKAN.<\/span>\n                                <\/h2>\n                                <p class=\"text-[1rem] text-background-dark\/70 max-w-md italic font-medium\">Penyelesaian tenaga pintar untuk masa depan yang mampan dan rendah karbon.<\/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                                Visi Global <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">Prestasi Setempat.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                             Kecemerlangan kejuruteraan bertemu dengan ketepatan di tapak, Menyampaikan penyelesaian EPC bersepadu dengan kepakaran global.\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                               Memperkasakan Dipacu AI <br\/>\n                                <span class=\"italic font-light text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#0d6efd]\">Revolusi Tenaga.<\/span>\n                            <\/h1>\n                            <p class=\"text-[#0d1b17]\/80 text-[1rem] max-w-2xl backdrop-blur-sm\">\n                            Penyelesaian Storan Tenaga Generasi Akan Datang | EPC &amp; EMC\/PPA untuk Masa Depan yang Mampan.\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\">Tatal<\/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\">Leret<\/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\">Menggerakkan Planet<\/h3>\n                    <p class=\"text-[#0d1b17]\/60 text-[1rem]\">Memacu peralihan dengan impak yang boleh diukur.<\/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\">Perintis Teknologi<\/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\">Paten Diberikan<\/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\">Ofset Karbon<\/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\">Tenaga Bersih Dihantar<\/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\">Portfolio 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\">Projek Selesai<\/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=\"\/ms\/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                    Sistem Penyimpanan Tenaga Pintar\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                    Pengecas ESS NH-TS-EDB180-261 mengintegrasikan storan tenaga berkapasiti tinggi dengan pengecasan EV ultra pantas dalam satu sistem padat. Menampilkan output maksimum 180kW, keserasian dengan persekitaran kuasa yang pelbagai.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/ms\/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                    Sistem Penyimpanan Tenaga Pintar\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white drop-shadow-lg tracking-tight leading-none\">\n                    Bekas ESS sejukan cecair 5MWj\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Kawalan terma yang disejukkan cecair memastikan keseragaman sel \u00b14\u00b0C, memanjangkan jangka hayat sebanyak 30% dan mencapai kecekapan &gt;95% untuk aplikasi grid, solar dan perindustrian.\n                <\/p>\n            <\/div>\n        <\/a>\n\n        <a href=\"\/ms\/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                    Perkhidmatan Tenaga Siap Guna\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem] mb-6 text-white tracking-tight leading-tight\">\n                    Perkhidmatan Tenaga Siap Guna<br>(EPC &amp; EMC\/PPA)\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed max-w-xl\">\n                    Penyelesaian tenaga yang komprehensif daripada reka bentuk hingga operasi, memastikan pertumbuhan mampan dan pelaburan tenaga yang dioptimumkan.\n                <\/p>\n            <\/div>\n        <\/a>\n        \n        <a href=\"\/ms\/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                    Mikrogrid\n                <\/div>\n                <h3 class=\"text-4xl md:text-[2.66rem]  mb-6 text-white tracking-tight leading-tight\">\n                    Penyelesaian Mikrogrid yang Boleh Dipercayai, Merekayasa Grid yang Lebih Hijau\n                <\/h3>\n                <p class=\"text-lg md:text-[1rem] text-gray-300 font-light leading-relaxed ml-auto max-w-xl\">\n                    Daripada taman perindustrian hingga ke pulau-pulau terpencil, Nenghui menyediakan perkhidmatan EPC Mikrogrid hujung ke hujung. Sistem kami mengoptimumkan sinergi antara PV dan ESS, menyediakan pensuisan kuasa yang lancar.\n                <\/p>\n            <\/div>\n        <\/a>\n\n    <\/div>\n<\/section>\n\n<!-- \u5168\u7403\u7ad9\u70b9 -->\n   <section class=\"globe-module-wrapper relative\">\n        <div class=\"pointer-events-none absolute inset-0 z-20\">\n            <div class=\"absolute top-5 left-5 md:top-10 md:left-10 bg-white\/40 backdrop-blur-2xl p-4 md:p-6 rounded-2xl border border-white\/60 shadow-[0_8px_32px_rgba(0,0,0,0.04)] border-l-4 border-l-primary pointer-events-auto\" style=\"animation: canvasFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\">\n                <h1 class=\"text-2xl md:text-[2.66rem]  text-background-dark tracking-tighter uppercase font-display\">\n                    Global <span class=\"text-primary\">Rangkaian<\/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                    Pemantauan Tenaga Lestari\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\">Stesen Aktif<\/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\">Wilayah Langsung<\/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\">Seret untuk Terokai<\/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                        Mengapa Perlu Bekerjasama dengan NENGHUI?\n                    <\/h2>\n                    <p class=\"text-[1rem] text-[#0d1b17]\/70 leading-relaxed font-light\">\n                        Kepercayaan kejuruteraan melalui kepakaran selama beberapa dekad, inovasi reka bentuk dan pematuhan global.\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\">Kecemerlangan Penghantaran Terbukti<\/h3>\n                        <p class=\"text-white\/70 text-sm leading-relaxed mb-4 flex-grow\">\n                            Dengan pemenuhan kontrak dan pelaksanaan projek yang konsisten selama bertahun-tahun, kami memastikan kebolehpercayaan dalam setiap komitmen. Kapasiti operasi kami yang mantap menjamin peralihan tenaga anda berada di tangan yang selamat.\n                        <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-white\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Pelaksanaan yang Boleh Dipercayai<\/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> Kepimpinan Teknikal Bertahun-tahun\n                        <\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                            Diasaskan oleh pasukan pakar teknikal, kami kekal berdedikasi terhadap sektor tenaga selama <span id=\"dynamic-years-text\" class=\"text-[#0d1b17]\">16<\/span> tahun. DNA kejuruteraan kami yang berakar umbi memacu inovasi berterusan dan ketelitian profesional dalam semua yang kami bina.\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\">Sejak <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\">Evolusi Berasaskan Reka Bentuk<\/h3>\n                        <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed mb-4 flex-grow\">\n                        Berasal daripada industri kuasa, NENGHUI telah berkembang menjadi pakar dalam reka bentuk dan kejuruteraan tenaga bersih. Kami menyediakan perkhidmatan bernilai tinggi, bekerjasama dari hati ke hati dengan rakan kongsi global untuk mewujudkan impak yang mampan.\n                     <\/p>\n                        <div class=\"mt-auto pt-4 border-t border-primary\/10\">\n                            <span class=\"text-[10px]  tracking-widest text-primary uppercase\">Perkhidmatan Bernilai Tinggi<\/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\">Kualiti Global yang Diperakui<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                Produk dan proses kami memenuhi piawaian domestik dan antarabangsa yang ketat. Dengan pensijilan global yang komprehensif, kami memastikan kemasukan pasaran yang lancar dan keselamatan operasi jangka panjang di seluruh dunia.\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\">Keselamatan<\/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\">Standard EU<\/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\">Std AS<\/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\">Penyelesaian Pelbagai Senario yang Disesuaikan<\/h3>\n                            <p class=\"text-[#0d1b17]\/60 text-sm leading-relaxed\">\n                                 Kami menawarkan spektrum penuh aset tenaga, termasuk infrastruktur Solar, ESS dan Pengecasan EV. Daripada mikrogrid hingga projek berskala grid, penyelesaian bersepadu &quot;Solar + Storan + Pengecasan&quot; kami memenuhi pelbagai permintaan global.\n                            <\/p>\n                        <\/div>\n                        <div class=\"skeleton-wrapper skeleton-pulse w-full md:w-5\/12 h-40 md:h-full min-h-[160px] relative rounded-2xl overflow-hidden shadow-sm group-hover:shadow-md transition-all duration-500 order-1 md:order-2\">\n                            <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110 lazy-target\" \n                            data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-page-sun.avif\"><\/div>\n                            <div class=\"absolute inset-0 bg-teal-900\/10 mix-blend-overlay\"><\/div>\n                            <div class=\"absolute bottom-2 left-2 bg-black\/40 backdrop-blur-md px-2 py-1 rounded text-[9px] text-white  uppercase\">\n                                Solar + Storan + Pengecasan\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]\">Kes<\/h2>\n                \n                <div class=\"flex gap-2\">\n                \n                    <button class=\"swiper-custom-prev size-10 rounded-full border border-[#0d1b17]\/10 flex items-center justify-center hover:bg-white transition-colors cursor-pointer group z-10\">\n                        <span class=\"material-symbols-outlined group-hover:-translate-x-0.5 transition-transform\">\ue5c4<\/span>\n                    <\/button>\n                \n                    <button class=\"swiper-custom-next size-10 rounded-full bg-[#0d1b17] text-white flex items-center justify-center hover:bg-primary hover:text-[#0d1b17] transition-colors cursor-pointer group z-10\">\n                        <span class=\"material-symbols-outlined group-hover:translate-x-0.5 transition-transform\">\ue5c8<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <div class=\"swiper impactSwiper w-full !pb-10\" data-aos=\"zoom-in\">\n                <div class=\"swiper-wrapper\">\n                     <div class=\"swiper-slide relative w-full h-[550px] rounded-3xl overflow-hidden shadow-xl group cursor-grab active:cursor-grabbing\">\n                        <div class=\"absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105\"\n   style=\"background-image: url(&quot;https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-iraq.jpg&quot;)\"\n                        data-bg=\"https:\/\/nenghui.com\/wp-content\/uploads\/2026\/02\/home-case-iraq.jpg\"><\/div>\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\"><\/div>\n                        <div class=\"absolute bottom-0 left-0 w-full p-8 md:p-10\">\n                            <div class=\"max-w-2xl\">\n                                <span class=\"text-primary text-sm  uppercase tracking-widest mb-2 block\">IRAQ BESS \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Memperkasakan Grid Iraq dengan Teknologi BESS Pintar <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Projek EPC Siap Guna 330kW\/763kWh untuk Pengurusan Kuasa Perindustrian Lestari.<\/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\">Kecemerlangan dalam Integrasi Solar Pergunungan \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Kecemerlangan dalam Integrasi Solar Pergunungan  <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Projek istimewa oleh Shanghai Nenghui Technology ini mempamerkan keupayaan hujung ke hujung kami dalam tenaga solar pergunungan. Daripada sambungan grid yang canggih hinggalah kejuruteraan struktur yang berdaya tahan, kami memastikan kebolehpercayaan jangka panjang dalam setiap puncak yang kami kuasakan.<\/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\">Kami Memperkasakan Sempadan Gersang \u2013 2023<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Penyelesaian solar inovatif yang disesuaikan untuk iklim yang paling mencabar.<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Projek penting ini mempamerkan keupayaan kami untuk mereka bentuk dan menyelenggara loji PV berkecekapan tinggi di gurun berpasir dan berbatu, sekali gus menetapkan penanda aras baharu untuk solar berskala utiliti.<\/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\">Projek ESS Komersial \u2013 2019<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Tenaga Pintar, Pelaburan Sifar <\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Storan tenaga yang dibiayai oleh NENGHUI menampilkan integrasi C&amp;I pintar dan jaminan prestasi seumur hidup.<\/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\">Powertrain Trak Berat EV Generasi Akan Datang \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Merintis Kejayaan Teknologi Teras<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Menyampaikan sistem rangkaian kuasa berprestasi tinggi melalui pembuatan pintar dan kejuruteraan termaju.<\/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\">Projek Hibrid Memancing-Solar 20MWp Qinzhou \u2013 2023<\/span>\n                                <h3 class=\"text-3xl text-white mb-4 line-clamp-2\">Sinergi Tenaga &amp; Akuakultur yang Lestari<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Penyelesaian siap guna EPC utama yang mengintegrasikan susunan PV berkecekapan tinggi dengan ekosistem perikanan moden.<\/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\">Projek Hibrid Agri-Solar Inovatif \u2013 2024<\/span>\n                                <h3 class=\"text-3xl  text-white mb-4 line-clamp-2\">Keharmonian Tenaga &amp; Pertanian<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Penyelesaian EPC berkecekapan tinggi yang memaksimumkan nilai tanah melalui kuasa solar bersepadu dan perhutanan lestari.<\/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\">Projek Agrivoltaik Bersepadu 120MWp \u2013 2025<\/span>\n                                <h3 class=\"text-3xl   text-white mb-4 line-clamp-2\">Kecemerlangan dalam Penyampaian EPC<\/h3>\n                                <p class=\"text-gray-200 text-base mb-2 line-clamp-2\">Pembangunan PV bersubsidi utama yang menampilkan peralatan standard tinggi dan pelaksanaan yang teliti dalam kluster solar juta kilowatt utama 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                    Kebolehpercayaan Bertauliah, Pematuhan Global\n                <\/h2>\n                <p class=\"text-[#0d1b17]\/60 text-[1rem] font-light\">\n                    Menegakkan piawaian paling ketat di dunia untuk keselamatan, kualiti dan pengawasan alam sekitar.\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                            Keselamatan Diuji\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                            Eropah Std.\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                            Keselamatan AS\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                            Elektroteknik\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>TERAS NENGHUI: INIT_SYSTEM STABIL MEMPERKASA Tenaga. Penyelesaian tenaga pintar untuk masa depan yang mampan dan rendah karbon. Visi Global Prestasi Setempat. Kecemerlangan kejuruteraan bertemu ketepatan di tapak\uff0c Menyampaikan penyelesaian EPC bersepadu dengan kepakaran global. Memperkasa Revolusi Tenaga Dipacu AI. Penyelesaian Storan Tenaga Generasi Akan Datang | EPC &amp; EMC\/PPA untuk Masa Depan yang Mampan. Tatal Leret \ue325 Memperkasa Planet Memacu [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":88,"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/pages\/2\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/nenghui.com\/ms\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}