<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="4-DXQwmh6Tn_4TiIaslQa4L-xJTXT0XBVn2dCB_A7F8" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
     <link href="https://fonts.loli.net/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
    <link href="https://fonts.loli.net" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.loli.net/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Liu Jian Mao Cao:wght@400;700&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
    <!-- AOS Animation Library -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
    <!-- Tailwind & Config -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#13eca4",
                        "background-light": "#f8fcfa",
                        "background-dark": "#10221c",
                        "pearlescent": "#f0f7f5",
                        "silver-accent": "#e2e8f0",
                        "about-us": "#ff6b00",
                        "primary-dark": "#0da670", // Added for contrast on light mode
                        "accent": "#ff6b00"
                    },
                    fontFamily: {
                        "display": ["Montserrat", "sans-serif"],
                        "sans": ["Montserrat", "sans-serif"],
                        "mono": ["JetBrains Mono", "monospace"],
                        "inter": ["Inter", "monospace"],
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "1rem",
                        "xl": "1.5rem",
                        "2xl": "2rem",
                        "3xl": "3rem",
                        "full": "9999px"
                    },
                    backgroundImage: {
                        'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
                        'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
                         'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
                        'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',

                    },
                     boxShadow: {
                        // 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
                        'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
                        'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
                        'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
                        'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
                        'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(10px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        scan: {
                            '0%': { top: '-10%', opacity: '0' },
                            '10%': { opacity: '1' },
                            '90%': { opacity: '1' },
                            '100%': { top: '110%', opacity: '0' },
                        },
                        rotateGlobe: {
                            '0%': { transform: 'rotate(0deg)' },
                            '100%': { transform: 'rotate(360deg)' },
                        },
                        dash: {
                            '0%': { strokeDashoffset: '1000' },
                            '100%': { strokeDashoffset: '0' },
                        },
                        globePulse: {
                            '0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
                            '50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
                            '100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
                        },
                         // 高级交互动画
                        pulseGlow: {
                            '0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
                            '100%': { textShadow: '0 0 30px #ff6b00' }
                        },
                        sweep: { '100%': { left: '200%' } },
                        cardFlip: {
                            '0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
                            '100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
                        },
                        floatY: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-15px)' }
                        },
                         textShimmer: {
                            '0%': { backgroundPosition: '0% 50%' },
                            '100%': { backgroundPosition: '100% 50%' },
                        },
                        blobSpin: {
                            '0%': { transform: 'rotate(0deg) scale(1)' },
                            '50%': { transform: 'rotate(180deg) scale(1.1)' },
                            '100%': { transform: 'rotate(360deg) scale(1)' },
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out forwards',
                        'scan-slow': 'scan 6s linear infinite',
                        'spin-slow': 'rotateGlobe 60s linear infinite',
                        'dash-flow': 'dash 3s linear infinite',
                        'globe-select': 'globePulse 0.8s ease-out',
                        'pulse-glow': 'pulseGlow 2s infinite alternate',
                        'sweep': 'sweep 3s infinite',
                        'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
                        'float-1': 'floatY 3s ease-in-out infinite',
                        'float-2': 'floatY 3s ease-in-out infinite 1s',
                        'float-3': 'floatY 3s ease-in-out infinite 2s',
                        'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
                        'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
                    }
                },
            },
        }
    </script>
    <!-- Tailwind 基础样式注入 -->
    <style type="text/tailwindcss">

        @layer utilities {
            /* contact us */
             #contact-us .focus-group:hover > div:not(:hover) {
                opacity: 0.6;
                transform: scale(0.98);
                filter: blur(2px);
            }
            #contact-us .focus-group > div {
                transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
            }

            /* about-us */
           /* 新增：专门为副标题定制的 3D 荧光挤压动画 */
            .text-3d-subtitle {
                color: #ff6b00; /* 保持主题色 */
                animation: pulse3d 2s infinite alternate;
            }

            @keyframes pulse3d {
                0% {
                    text-shadow:
                        /* 左上高光 */
                        -1px -1px 0px rgba(255, 255, 255, 0.5),
                        /* 右下厚度 (深翠绿色系) */
                        1px 1px 0px #ce6c33,
                        2px 2px 0px #b44914,
                        3px 3px 0px #75600a,
                        /* 基础投影 */
                        4px 4px 10px rgba(0, 0, 0, 0.6),
                        /* 较弱的呼吸背光 */
                        0px 0px 10px rgba(224, 114, 12, 0.3);
                }
                100% {
                    text-shadow:
                        -1px -1px 0px rgba(255, 255, 255, 0.7),
                        1px 1px 0px #cc7e19,
                        2px 2px 0px #e2d921,
                        3px 3px 0px #692a05,
                        5px 5px 15px rgba(0, 0, 0, 0.8),
                        /* 较强的呼吸背光，模拟能量溢出 */
                        0px 0px 30px #f2e930,
                        0px 0px 50px rgba(195, 159, 16, 0.6);
                }
            }

            .text-3d {
                text-shadow:
                    0 1px 0 #e2e8f0,   /* 亮银色顶边 */
                    0 2px 0 #cbd5e1,
                    0 3px 0 #94a3b8,
                    0 4px 0 #64748b,   /* 逐渐变暗模拟背光面 */
                    0 5px 0 #475569,
                    0 6px 0 #334155,
                    0 8px 10px rgba(0, 0, 0, 0.4),   /* 近处接触阴影 */
                    0 15px 20px rgba(0, 0, 0, 0.3),  /* 中距离扩散阴影 */
                    0 25px 40px rgba(0, 0, 0, 0.8);  /* 远距离环境阴影 */
            }
             .-ultra {
                color: #ffffff;
                /* 1. 顶部左侧的亮色高光切割边 */
                text-shadow:
                    -1px -1px 1px rgba(255, 255, 255, 0.3),
                    /* 2. 右下角 45度 斜向挤压厚度 (融入您的深墨绿环境色) */
                    1px 1px 0px #0d1e18,
                    2px 2px 0px #0a1813,
                    3px 3px 0px #08130e,
                    4px 4px 0px #060e0a,
                    5px 5px 0px #040906,
                    6px 6px 0px #020403,
                    7px 7px 0px #000000,
                    /* 3. 接触面的死黑投影 */
                    8px 8px 15px rgba(0, 0, 0, 0.8),
                    /* 4. 远距离大范围柔和投影 */
                    15px 15px 30px rgba(0, 0, 0, 0.6),
                    /* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
                    -5px -5px 30px rgba(19, 236, 164, 0.1),
                    10px 10px 40px rgba(19, 236, 164, 0.25);
            }
            /* Tab 状态管控：选中时变为 primary 背景与深色字体 */

            #tech-landing-wrapper .tab-content { @apply hidden; }
            #tech-landing-wrapper .tab-content.active { @apply grid; }
        }
    </style>
</head>
<body <?php body_class(); ?>>
    <nav class="main-nav">
        <div class="nav-container">
            <div class="nav-logo flex">
                <a class="flex flex-col" href="<?php echo home_url(); ?>">
                    <?php
                    $logo = get_theme_mod('site_logo');
                    if ($logo): ?>
                        <img src="<?php echo esc_url($logo); ?>" alt="<?php bloginfo('name'); ?>">
                    <?php else: ?>
                        <img src="https://nenghui.com/wp-content/uploads/2025/11/logo-2.png" alt="logo">
                    <?php endif; ?>
                    <p class="text-[12px] text-[#517bb9] hover:font-normal text-justify pl-1 ">Cleaner Energy. Greater Value.</p>
                </a>
                  <a href="https://cn.nenghui.com/" class="ml-[2rem]  text-[#295ca8] cursor-pointer relative group hover:text-[#295ca8]" data-no-translation>
                    中国版
                    <div class="absolute bottom-0 left-0 w-0 h-[2px] bg-[#295ca8] transition-all duration-300 group-hover:w-full"></"></div>
                    </a>
            </div>

            <button class="menu-toggle" aria-label="菜单">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <div class="nav-menu">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary-menu',
                    'container' => false,
                    'menu_class' => 'menu-items',
                    'walker' => new Nenghui_Walker_Nav_Menu(),
                    'fallback_cb' => function() {
                        echo '<ul class="menu-items"><li><a href="' . admin_url('nav-menus.php') . '">添加菜单</a></li></ul>';
                    }
                ));
                ?>
            </div>
        </div>
    </nav>
