<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="深圳德技创新实业有限公司 - DJM旗下智能美容终端品牌，专注于智能美容硬件研发与物联网解决方案">
    <meta name="keywords" content="智能美容,皮肤检测,IoT物联网,美业解决方案">
    <title>深圳德技创新实业有限公司 - 智能美容终端品牌</title>
    
    <!-- Fonts - 使用 media 懒加载避免阻塞渲染 -->
    <link rel="preconnect" href="http://fonts.googleapis.com">
    <link rel="preconnect" href="http://fonts.gstatic.com" crossorigin>
    <link href="http://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript><link href="http://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"></noscript>
    
    <!-- Icons - 异步加载避免阻塞 -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
    
    <!-- Three.js - 异步加载，不阻塞 window.load -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" async></script>
    
    <!-- Styles -->
    <link rel="stylesheet" href="static/main.css">
    
    <style>
        /* 首页特定样式 */
        .logo-img {
            height: 40px;
            width: auto;
        }
        
        /* 品牌介绍满屏横排 */
        .brand-intro {
            max-width: 100%;
            margin: 0 auto 3rem;
            text-align: center;
        }

        .brand-intro .section-label {
            display: block;
            margin-bottom: 0.75rem;
        }

        .brand-intro h2 {
            font-size: 2rem;
            color: var(--gray-900);
            margin-bottom: 1.5rem;
        }

        .brand-intro-text {
            color: var(--gray-600);
            line-height: 1.9;
            font-size: 1rem;
            max-width: 100%;
            margin: 0 auto;
            text-align: left;
        }
        
        /* 使命 & 愿景双图卡片 */
        .vision-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
        
        .vision-card {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            height: 280px;
        }
        
        .vision-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .vision-card:hover img {
            transform: scale(1.05);
        }
        
        .vision-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
            color: white;
        }
        
        .vision-tag {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.7);
            margin-bottom: 0.5rem;
        }
        
        .vision-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin: 0;
        }
        
        /* 使命 & 愿景响应式 */
        @media (max-width: 768px) {
            .vision-cards {
                grid-template-columns: 1fr;
            }

            .vision-card {
                height: 220px;
            }
        }

        /* 我们的实力 - 左右分栏 */
        .strength-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-top: 3rem;
            align-items: start;
        }

        .strength-left {
            padding-right: 1rem;
        }

        .strength-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 1rem;
            text-align: left;
        }

        .strength-divider {
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
            margin-bottom: 1.5rem;
            margin-left: 0;
        }

        .strength-text p {
            color: var(--gray-600);
            line-height: 1.8;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            text-align: left;
        }

        .strength-text p:last-child {
            margin-bottom: 0;
        }

        .strength-right {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            min-height: 500px;
        }

        .strength-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .strength-bg img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: right center;
        }

        .strength-cards {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            bottom: 0;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 1rem 0;
        }

        .strength-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: var(--radius);
            padding: 0.75rem 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            text-align: left;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all var(--transition);
            margin-left: 0;
            margin-right: auto;
            min-width: 140px;
        }

        .strength-card:hover {
            transform: translateX(5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        .card-alot {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            align-items: center;
            text-align: center;
            min-width: 180px;
        }

        .card-alot .card-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: white;
        }

        .card-alot .card-desc {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.9);
            text-align: center;
        }

        .card-num {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
            margin-bottom: 0.25rem;
        }

        .card-desc {
            font-size: 0.75rem;
            color: var(--gray-600);
            line-height: 1.3;
        }

        @media (max-width: 1024px) {
            .strength-section {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .strength-left {
                padding-right: 0;
            }

            .strength-right {
                min-height: 400px;
            }

            .strength-card {
                padding: 0.6rem 0.875rem;
                min-width: 120px;
            }

            .card-num {
                font-size: 1.5rem;
            }

            .card-alot .card-title {
                font-size: 1.25rem;
            }
        }

        @media (max-width: 640px) {
            .strength-right {
                min-height: 350px;
            }

            .strength-cards {
                width: 55%;
                padding: 0.75rem 0;
            }

            .strength-card {
                padding: 0.5rem 0.75rem;
                min-width: 100px;
            }

            .card-num {
                font-size: 1.25rem;
            }

            .card-desc {
                font-size: 0.7rem;
            }

            .card-alot .card-title {
                font-size: 1rem;
            }

            .card-alot .card-desc {
                font-size: 0.75rem;
            }
        }
        
        /* 研发团队卡片样式 - 3栏卡片 */
        .team-grid-full {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        
        .team-card-full {
            background: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all var(--transition);
            display: flex;
            flex-direction: column;
        }
        
        .team-card-full:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        .team-card-full .team-image {
            width: 100%;
            height: 220px;
            overflow: hidden;
        }
        
        .team-card-full .team-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .team-card-full:hover .team-image img {
            transform: scale(1.05);
        }
        
        .team-card-full .team-info {
            padding: 1.25rem 1rem;
            text-align: center;
        }
        
        .team-card-full .team-name {
            font-size: 1rem;
            color: var(--gray-700);
            font-weight: 600;
        }
        
        @media (max-width: 1024px) {
            .team-grid-full {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .team-grid-full {
                grid-template-columns: 1fr;
            }
        }
        
        /* 专利单张图片 */
        .patent-single {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .patent-single-img {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        
        /* 合作伙伴网格 - 3行6列 */
        .partners-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }

        .partner-item {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition);
            aspect-ratio: 3 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.25rem;
        }

        .partner-item:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow);
            z-index: 1;
        }

        .partner-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        @media (max-width: 1024px) {
            .partners-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .partners-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 480px) {
            .partners-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* 设备分布地图 */
        .distribution-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        .distribution-left,
        .distribution-right {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .map-img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .distribution-left:hover .map-img,
        .distribution-right:hover .map-img {
            transform: scale(1.05);
        }
        
        .map-label {
            position: absolute;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.95);
            padding: 1rem 2rem;
            border-radius: var(--radius-full);
            text-align: center;
            box-shadow: var(--shadow-lg);
        }
        
        .map-num {
            display: block;
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1.2;
        }
        
        .map-text {
            display: block;
            font-size: 0.875rem;
            color: var(--gray-500);
        }
        
        @media (max-width: 768px) {
            .distribution-split {
                grid-template-columns: 1fr;
            }
            
            .map-img {
                height: 280px;
            }
        }
        
        .navbar .logo-icon {
            font-size: 1.25rem;
        }
        
        .hero-image {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 45%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero-visual {
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .hero-visual::before {
            content: '';
            position: absolute;
            width: 120%;
            height: 120%;
            border: 2px dashed rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .hero-visual-icon {
            font-size: 8rem;
            color: var(--primary);
            opacity: 0.8;
        }
        
        .mission-card {
            display: flex;
            gap: 2rem;
        }
        
        .mission-item {
            flex: 1;
            background: var(--white);
            padding: 2rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            transition: all var(--transition);
        }
        
        .mission-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        .mission-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: var(--white);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .partners-scroll {
            overflow: hidden;
            position: relative;
        }
        
        .partners-track {
            display: flex;
            gap: 2rem;
            animation: scroll 30s linear infinite;
        }
        
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .partner-logo {
            flex-shrink: 0;
            width: 150px;
            height: 60px;
            background: var(--white);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            font-weight: 600;
            color: var(--gray-500);
        }
        
        @media (max-width: 1024px) {
            .hero-image {
                display: none;
            }
            
            .mission-card {
                flex-direction: column;
            }
        }
        
        /* 工厂展示 - 上面2张大图 + 下面6张小图 */
        .factory-showcase {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .factory-row-top {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .factory-row-top .factory-card {
            height: 300px;
        }

        .factory-row-bottom {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
        }

        .factory-row-bottom .factory-card {
            height: 150px;
        }

        .factory-card {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all var(--transition);
        }

        .factory-card:hover {
            box-shadow: var(--shadow-xl);
        }

        .factory-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .factory-card:hover img {
            transform: scale(1.05);
        }

        .factory-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            padding: 1.5rem;
            color: white;
        }

        .factory-name {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .factory-desc {
            font-size: 0.875rem;
            opacity: 0.9;
            line-height: 1.5;
        }

        @media (max-width: 1024px) {
            .factory-row-bottom {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .factory-row-top {
                grid-template-columns: 1fr;
            }

            .factory-row-top .factory-card {
                height: 250px;
            }

            .factory-row-bottom {
                grid-template-columns: repeat(2, 1fr);
            }

            .factory-row-bottom .factory-card {
                height: 180px;
            }
        }
        
        /* 技术支持页样式 */
        .support-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
        
        .support-card {
            background: white;
            padding: 2.5rem 2rem;
            border-radius: var(--radius-lg);
            text-align: center;
            box-shadow: var(--shadow);
            transition: all var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .support-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary);
            transform: scaleX(0);
            transition: transform var(--transition);
        }
        
        .support-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }
        
        .support-card:hover::before {
            transform: scaleX(1);
        }
        
        .support-card-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.5rem;
            transition: transform var(--transition);
        }
        
        .support-card:hover .support-card-icon {
            transform: scale(1.1);
        }
        
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }
        
        .tech-card {
            background: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all var(--transition);
        }
        
        .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }
        
        .tech-card-image {
            height: 200px;
            background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: var(--gray-300);
        }
        
        .tech-card-content {
            padding: 1.5rem;
        }
        
        .cert-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: var(--primary);
            color: white;
            font-size: 0.75rem;
            border-radius: var(--radius-full);
        }
        
        .faq-section {
            background: var(--gray-50);
        }
        
        .faq-list {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: white;
            border-radius: var(--radius);
            margin-bottom: 1rem;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        
        .faq-question {
            width: 100%;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-700);
            text-align: left;
            cursor: pointer;
            transition: all var(--transition);
            border: none;
            background: white;
        }
        
        .faq-question:hover {
            color: var(--primary);
        }
        
        .faq-question i {
            transition: transform var(--transition);
        }
        
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height var(--transition);
        }
        
        .faq-item.active .faq-answer {
            max-height: 500px;
        }
        
        .faq-answer-content {
            padding: 0 1.5rem 1.5rem;
            color: var(--gray-600);
            line-height: 1.8;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        .form-left {
            padding-right: 2rem;
        }
        
        .form-right {
            background: var(--gray-50);
            padding: 2rem;
            border-radius: var(--radius-lg);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        .service-type {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }
        
        .service-type-btn {
            padding: 0.5rem 1rem;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius);
            background: white;
            cursor: pointer;
            transition: all var(--transition);
            font-size: 0.875rem;
        }
        
        .service-type-btn:hover,
        .service-type-btn.active {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }
        
        .submit-success {
            display: none;
            text-align: center;
            padding: 3rem;
        }
        
        .submit-success.show {
            display: block;
        }
        
        .submit-success i {
            font-size: 4rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }
        
        @media (max-width: 1024px) {
            .support-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .tech-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .form-left {
                padding-right: 0;
            }
        }
        
        @media (max-width: 768px) {
            .support-cards {
                grid-template-columns: 1fr;
            }
            
            .tech-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <img src="images/djmlogo.png" alt="DJM" class="logo-img">
                    <span>德技创新</span>
                </a>
                
                <ul class="nav-links">
                    <li><a href="#about" class="nav-link active">关于我们</a></li>
                    <li><a href="#team" class="nav-link">研发团队</a></li>
                    <li><a href="#patents" class="nav-link">技术专利</a></li>
                    <li><a href="#factory" class="nav-link">工厂展示</a></li>
                    <li><a href="#support" class="nav-link">技术支持</a></li>
                </ul>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="菜单">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
        </div>
    </header>

    <!-- Banner Image -->
    <div class="top-banner">
        <img src="images/headImg.png" alt="德技创新 Banner" class="banner-img">
        <div class="banner-overlay"></div>
    </div>

    <!-- About Section -->
    <section class="section" id="about">
        <div class="container">
            <!-- 品牌介绍 -->
            <div class="brand-intro reveal">
                <h2>品牌介绍</h2>
                <p class="brand-intro-text">深圳德技创新实业有限公司成立于2016年，隶属于德国DJM集团。依托德国工业4.0技术，为美业客户提供从皮肤检测到美容护理的完整物联网解决方案。公司是DJM旗下的智能美容终端品牌，始终坚持以技术为核心，以IOT物联网为实现手段，以智能硬件为落地方案，为美业客户提供从皮肤检测到皮肤美容护理的完整解决方案。</p>
            </div>

            <!-- 使命 & 愿景 -->
            <div class="vision-cards">
                <div class="vision-card reveal" style="animation-delay: 0.1s">
                    <img src="images/img38.jpg" alt="使命">
                    <div class="vision-overlay">
                        <div class="vision-tag">我们的使命</div>
                        <h3 class="vision-title">更美更健康</h3>
                    </div>
                </div>
                <div class="vision-card reveal" style="animation-delay: 0.2s">
                    <img src="images/img39.jpg" alt="愿景">
                    <div class="vision-overlay">
                        <div class="vision-tag">我们的愿景</div>
                        <h3 class="vision-title">打造一亿家庭的健康美容角</h3>
                    </div>
                </div>
            </div>

            <!-- 我们的实力 -->
            <div class="strength-section reveal" style="animation-delay: 0.3s">
                <div class="strength-left">
                    <h2 class="strength-title">我们的实力</h2>
                    <div class="strength-divider"></div>
                    <div class="strength-text">
                        <p>基于德国工业4.0自主研发的AIoT物联网系统，智能管控所有设备与耗材使用情况。</p>
                        <p>14年美业和医疗康复行业经验，专业核心技术人员超120人。</p>
                        <p>专注于皮肤病症AI智能识别算法的研发，联合美国斯坦福大学、中国科学院、德国海德堡大学等教研机构，研发形成一套自主研发的AI逻辑算法并应用于猫咪智能皮肤检测类设备。</p>
                        <p>280+专利技术与软件著作权。</p>
                        <p>1200万+临床面部皮肤案例数据。</p>
                    </div>
                </div>
                <div class="strength-right">
                    <div class="strength-bg">
                        <img src="images/img40.png" alt="AIoT物联网">
                    </div>
                    <div class="strength-cards">
                        <div class="strength-card card-alot">
                            <div class="card-title">AIoT</div>
                            <div class="card-desc">基于德国工业4.0物联网管控</div>
                        </div>
                        <div class="strength-card card-14">
                            <div class="card-num">14</div>
                            <div class="card-desc">14年行业经验</div>
                        </div>
                        <div class="strength-card card-120">
                            <div class="card-num">120</div>
                            <div class="card-desc">核心技术人员超120人</div>
                        </div>
                        <div class="strength-card card-280">
                            <div class="card-num">280</div>
                            <div class="card-desc">280+专利技术与软件著作权</div>
                        </div>
                        <div class="strength-card card-1000w">
                            <div class="card-num">1200W</div>
                            <div class="card-desc">1200万+临床面部皮肤案例数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Team Section -->
    <section class="section" id="team">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">研发团队</h2>
                <p class="section-description">
                    深圳德技创新实业有限公司在全球共开设了3大研发中心，汇聚全球优秀科研人才
                </p>
            </div>
            
            <div class="team-grid team-grid-full">
                <div class="team-card team-card-full reveal" style="animation-delay: 0.1s">
                    <div class="team-image">
                        <img src="images/img42.jpg" alt="德国杜塞尔多夫研发中心">
                    </div>
                    <div class="team-info">
                        <h3 class="team-name">德国杜塞尔多夫</h3>
                    </div>
                </div>
                <div class="team-card team-card-full reveal" style="animation-delay: 0.2s">
                    <div class="team-image">
                        <img src="images/img43.jpg" alt="深圳龙岗研发中心">
                    </div>
                    <div class="team-info">
                        <h3 class="team-name">深圳龙岗</h3>
                    </div>
                </div>
                <div class="team-card team-card-full reveal" style="animation-delay: 0.3s">
                    <div class="team-image">
                        <img src="images/img44.jpg" alt="南山研发运营总部">
                    </div>
                    <div class="team-info">
                        <h3 class="team-name">深圳南山</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Patents Section -->
    <section class="section section-gray" id="patents">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">技术专利</h2>
                <p class="section-description">
                    创立至今，公司已累计获得500+专利证书与软件著作权
                </p>
            </div>
            
            <div class="patent-single">
                <img src="images/img45.png" alt="专利证书" class="patent-single-img reveal">
            </div>
        </div>
    </section>

    <!-- Factory Section -->
    <section class="section" id="factory">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">工厂展示</h2>
                <p class="section-description">
                    早期在德国成立硬件研发中心，并先后在德国科技重镇杜塞尔多夫与东莞清溪开办了生产工厂
                </p>
            </div>
            
            <div class="factory-showcase">
                <!-- 上面2张大图 -->
                <div class="factory-row-top">
                    <div class="factory-card factory-large reveal" style="animation-delay: 0.1s">
                        <img src="images/img11.png" alt="德国杜塞尔多夫工厂">
                        <div class="factory-overlay">
                            <h3 class="factory-name">德国杜塞尔多夫工厂</h3>
                            <p class="factory-desc">借助德国工业4.0精神和技术优势，研发生产的皮肤管理类相关产品在业内获得极佳口碑</p>
                        </div>
                    </div>
                    <div class="factory-card factory-large reveal" style="animation-delay: 0.15s">
                        <img src="images/img12.jpg" alt="东莞清溪工厂">
                        <div class="factory-overlay">
                            <h3 class="factory-name">东莞清溪工厂</h3>
                            <p class="factory-desc">现代化生产线</p>
                        </div>
                    </div>
                </div>
                <!-- 下面6张小图 -->
                <div class="factory-row-bottom">
                    <div class="factory-card reveal" style="animation-delay: 0.2s">
                        <img src="images/img13.png" alt="生产设备1">
                    </div>
                    <div class="factory-card reveal" style="animation-delay: 0.25s">
                        <img src="images/img14.png" alt="生产设备2">
                    </div>
                    <div class="factory-card reveal" style="animation-delay: 0.3s">
                        <img src="images/img15.jpg" alt="生产设备3">
                    </div>
                    <div class="factory-card reveal" style="animation-delay: 0.35s">
                        <img src="images/img16.png" alt="生产设备4">
                    </div>
                    <div class="factory-card reveal" style="animation-delay: 0.4s">
                        <img src="images/img17.png" alt="生产设备5">
                    </div>
                    <div class="factory-card reveal" style="animation-delay: 0.45s">
                        <img src="images/img18.png" alt="生产设备6">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section class="section section-gray">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">他们都在用我们的产品</h2>
                <p class="section-description">
                    深圳德技创新实业有限公司与全球超过4万家美业客户达成合作
                </p>
            </div>
            
            <div class="partners-grid reveal">
                <div class="partner-item">
                    <img src="images/img55.png" alt="合作伙伴1">
                </div>
                <div class="partner-item">
                    <img src="images/img56.png" alt="合作伙伴2">
                </div>
                <div class="partner-item">
                    <img src="images/img57.png" alt="合作伙伴3">
                </div>
                <div class="partner-item">
                    <img src="images/img58.png" alt="合作伙伴4">
                </div>
                <div class="partner-item">
                    <img src="images/img59.png" alt="合作伙伴5">
                </div>
                <div class="partner-item">
                    <img src="images/img60.png" alt="合作伙伴6">
                </div>
                <div class="partner-item">
                    <img src="images/img61.png" alt="合作伙伴7">
                </div>
                <div class="partner-item">
                    <img src="images/img62.png" alt="合作伙伴8">
                </div>
                <div class="partner-item">
                    <img src="images/img63.png" alt="合作伙伴9">
                </div>
                <div class="partner-item">
                    <img src="images/img64.png" alt="合作伙伴10">
                </div>
                <div class="partner-item">
                    <img src="images/img65.png" alt="合作伙伴11">
                </div>
                <div class="partner-item">
                    <img src="images/img66.png" alt="合作伙伴12">
                </div>
                <div class="partner-item">
                    <img src="images/img67.png" alt="合作伙伴13">
                </div>
                <div class="partner-item">
                    <img src="images/img68.png" alt="合作伙伴14">
                </div>
                <div class="partner-item">
                    <img src="images/img69.png" alt="合作伙伴15">
                </div>
                <div class="partner-item">
                    <img src="images/img70.png" alt="合作伙伴16">
                </div>
                <div class="partner-item">
                    <img src="images/img71.png" alt="合作伙伴17">
                </div>
                <div class="partner-item">
                    <img src="images/img72.png" alt="合作伙伴18">
                </div>
            </div>
        </div>
    </section>

    <!-- Distribution Section -->
    <section class="section">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">设备分布</h2>
                <p class="section-description">
                    公司自主独立研发的猫咪智能皮肤检测仪拥有1800多万终端用户，覆盖150多个国家和地区
                </p>
            </div>
            
            <div class="distribution-split">
                <div class="distribution-left reveal-left">
                    <img src="images/img73.jpg" alt="全球设备分布" class="map-img">
                    <div class="map-label">
                        <span class="map-num">150+</span>
                        <span class="map-text">覆盖国家地区</span>
                    </div>
                </div>
                <div class="distribution-right reveal-right">
                    <img src="images/img74.jpg" alt="全国设备分布" class="map-img">
                    <div class="map-label">
                        <span class="map-num">1800<span style="font-size: 1.5rem;">万+</span></span>
                        <span class="map-text">服务终端用户</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Support Section -->
    <section class="section" id="support">
        <div class="container">
            <div class="section-header reveal">
                <h2 class="section-title">我们的技术实力</h2>
                <p class="section-description">
                    自主研发的核心技术平台，为智能美容行业提供强大技术支撑
                </p>
            </div>
            
            <div class="tech-grid">
                <div class="tech-card reveal" style="animation-delay: 0.1s">
                    <div class="tech-card-image">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>智能AI算法平台</h3>
                        <p>自主研发的AI算法平台，支持多种机器学习框架，已服务超过1000家企业客户。</p>
                        <span class="cert-badge">核心自研</span>
                    </div>
                </div>
                <div class="tech-card reveal" style="animation-delay: 0.2s">
                    <div class="tech-card-image">
                        <i class="fas fa-database"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>大数据分析系统</h3>
                        <p>日处理数据量超过10TB，提供实时分析和可视化展示功能。</p>
                        <span class="cert-badge">专业实力</span>
                    </div>
                </div>
                <div class="tech-card reveal" style="animation-delay: 0.3s">
                    <div class="tech-card-image">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>云计算解决方案</h3>
                        <p>获得多项安全认证的云服务平台，99.99%的可用性保障。</p>
                        <span class="cert-badge">安全可靠</span>
                    </div>
                </div>
                <div class="tech-card reveal" style="animation-delay: 0.4s">
                    <div class="tech-card-image">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>移动应用生态</h3>
                        <p>支持iOS、Android、小程序多端同步，随时随地管理门店。</p>
                        <span class="cert-badge">全端覆盖</span>
                    </div>
                </div>
                <div class="tech-card reveal" style="animation-delay: 0.5s">
                    <div class="tech-card-image">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>IoT设备连接</h3>
                        <p>支持多种设备协议接入，实现设备远程监控与管理。</p>
                        <span class="cert-badge">万物互联</span>
                    </div>
                </div>
                <div class="tech-card reveal" style="animation-delay: 0.6s">
                    <div class="tech-card-image">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="tech-card-content">
                        <h3>安全合规体系</h3>
                        <p>符合等保三级要求，数据加密传输，保护用户隐私安全。</p>
                        <span class="cert-badge">合规认证</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <div class="footer-logo">
                        <img src="images/djmlogo.png" alt="DJM" class="footer-logo-img">
                        <span style="color: var(--white);">德技创新</span>
                    </div>
                    <p class="footer-description">
                        深圳德技创新实业有限公司是DJM旗下的智能美容终端品牌，
                        致力于为全球美业客户提供高品质的智能硬件产品和物联网解决方案。
                    </p>
                </div>
                <div class="footer-contact">
                    <div class="footer-qr">
                        <img src="images/wxqr2.jpg" alt="微信二维码">
                    </div>
                    <div class="footer-phone">
                        <div class="phone-item">
                            <i class="fas fa-phone"></i>
                            <div>
                                <span class="phone-label">服务热线</span>
                                <span class="phone-num">0755-84557931</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-nav">
                    <div>
                        <h4 class="footer-title">关于我们</h4>
                        <ul class="footer-links">
                            <li><a href="#about">品牌介绍</a></li>
                            <li><a href="#team">研发团队</a></li>
                            <li><a href="#patents">技术专利</a></li>
                            <li><a href="#factory">工厂展示</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="footer-title">技术支持</h4>
                        <ul class="footer-links">
                            <li><a href="#support">技术实力</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p class="footer-copyright">
                    Copyright &copy; 深圳德技创新实业有限公司 All Rights Reserved
                </p>
                <p>
                    <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备19132691号-1</a>
                    <span style="margin: 0 0.5rem;">|</span>
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030002007447" target="_blank">粤公网安备44030002007447号</a>
                </p>
            </div>
        </div>
    </footer>

    <!-- Floating Contact -->
    <div class="floating-contact">
        <div class="floating-buttons">
            <a href="tel:19925140507" class="floating-btn phone" title="电话咨询">
                <i class="fas fa-phone"></i>
            </a>
            <a href="#contact" class="floating-btn message" title="在线咨询">
                <i class="fas fa-comment-dots"></i>
            </a>
        </div>
    </div>

    <!-- Back to Top -->
    <button class="back-to-top" id="backToTop" aria-label="返回顶部">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script src="static/jquery-1.12.4.js"></script>
    <script>
        // Header scroll effect
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('.header').addClass('scrolled');
            } else {
                $('.header').removeClass('scrolled');
            }
        });

        // Back to top button
        $(window).scroll(function() {
            if ($(this).scrollTop() > 500) {
                $('#backToTop').addClass('visible');
            } else {
                $('#backToTop').removeClass('visible');
            }
        });

        $('#backToTop').click(function() {
            $('html, body').animate({ scrollTop: 0 }, 300);
        });

        // Smooth scroll for navigation links
        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            var target = $(this.getAttribute('href'));
            if (target.length) {
                var offsetTop = target.offset().top - 80;
                $('html, body').animate({
                    scrollTop: offsetTop
                }, 300);
            }
        });

        // Active navigation link
        $(window).on('scroll', function() {
            var scrollPos = $(window).scrollTop();
            $('.section[id]').each(function() {
                var topSpace = 100;
                var sectionTop = $(this).offset().top - topSpace;
                var sectionBottom = sectionTop + $(this).outerHeight();
                var id = $(this).attr('id');
                
                if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
                    $('.nav-link').removeClass('active');
                    $('.nav-link[href="#' + id + '"]').addClass('active');
                }
            });
        });

        // Reveal animations on scroll
        function revealOnScroll() {
            $('.reveal, .reveal-left, .reveal-right').each(function() {
                var elementTop = $(this).offset().top;
                var elementVisible = 80;
                var windowHeight = $(window).height();
                
                if (elementTop < windowHeight - elementVisible) {
                    $(this).addClass('visible');
                }
            });
        }

        $(window).scroll(revealOnScroll);
        // 等页面和图片全部加载完后再做初始检测，避免 offset().top 计算错误
        $(window).on('load', function() {
            revealOnScroll();
            // 再次延迟检测，防止字体/图片异步加载导致布局偏移
            setTimeout(revealOnScroll, 300);
        });
        // DOM ready 时也执行一次（覆盖缓存场景）
        revealOnScroll();

        // Number counter animation
        function animateNumbers() {
            $('.stat-number').each(function() {
                var $this = $(this);
                var target = parseInt($this.text());
                var suffix = $this.text().replace(/[0-9]/g, '');
                
                if (!isNaN(target) && !$this.hasClass('animated')) {
                    $this.addClass('animated');
                    $({ val: 0 }).animate({ val: target }, {
                        duration: 2000,
                        step: function() {
                            $this.text(Math.floor(this.val) + suffix);
                        },
                        complete: function() {
                            $this.text(target + suffix);
                        }
                    });
                }
            });
        }

        // Trigger number animation when stats section is visible
        var statsAnimated = false;
        $(window).scroll(function() {
            if (!statsAnimated && $('#strengths').length) {
                var sectionTop = $('#strengths').offset().top;
                var windowHeight = $(window).height();
                
                if (sectionTop < windowHeight - 100) {
                    animateNumbers();
                    statsAnimated = true;
                }
            }
        });

        // Mobile menu toggle
        $('#mobileMenuBtn').click(function() {
            $(this).toggleClass('active');
            $('.nav-links').slideToggle();
        });
        
        // ========== Three.js 3D地球动画 ==========
        class ThreeGlobe {
            constructor(containerId) {
                this.container = document.getElementById(containerId);
                if (!this.container) return;
                
                this.scene = null;
                this.camera = null;
                this.renderer = null;
                this.earth = null;
                this.clouds = null;
                this.particles = [];
                this.orbitLines = [];
                this.animationId = null;
                
                this.init();
            }
            
            init() {
                // Scene
                this.scene = new THREE.Scene();
                
                // Camera
                const width = this.container.clientWidth;
                const height = this.container.clientHeight;
                this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
                this.camera.position.z = 5;
                
                // Renderer
                this.renderer = new THREE.WebGLRenderer({ 
                    antialias: true, 
                    alpha: true 
                });
                this.renderer.setSize(width, height);
                this.renderer.setPixelRatio(window.devicePixelRatio);
                this.container.appendChild(this.renderer.domElement);
                
                // Lighting
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
                this.scene.add(ambientLight);
                
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                directionalLight.position.set(5, 3, 5);
                this.scene.add(directionalLight);
                
                // Create Earth
                this.createEarth();
                
                // Create particles
                this.createParticles();
                
                // Create orbit rings
                this.createOrbitRings();
                
                // Handle resize
                window.addEventListener('resize', () => this.onResize());
                
                // Start animation
                this.animate();
            }
            
            createEarth() {
                // Earth sphere with gradient texture
                const earthGeometry = new THREE.SphereGeometry(1.2, 64, 64);
                
                // Create canvas texture for Earth
                const earthCanvas = document.createElement('canvas');
                earthCanvas.width = 512;
                earthCanvas.height = 256;
                const ctx = earthCanvas.getContext('2d');
                
                // Create gradient background (ocean blue)
                const gradient = ctx.createLinearGradient(0, 0, 0, 256);
                gradient.addColorStop(0, '#1e4a6d');
                gradient.addColorStop(0.5, '#2563eb');
                gradient.addColorStop(1, '#1e40af');
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, 512, 256);
                
                // Draw simplified continents (green patches)
                ctx.fillStyle = '#22c55e';
                // Americas
                ctx.beginPath();
                ctx.ellipse(120, 100, 40, 60, 0, 0, Math.PI * 2);
                ctx.fill();
                ctx.beginPath();
                ctx.ellipse(100, 180, 30, 40, 0.3, 0, Math.PI * 2);
                ctx.fill();
                // Europe/Africa
                ctx.beginPath();
                ctx.ellipse(280, 90, 35, 45, 0, 0, Math.PI * 2);
                ctx.fill();
                ctx.beginPath();
                ctx.ellipse(300, 160, 30, 50, 0, 0, Math.PI * 2);
                ctx.fill();
                // Asia
                ctx.beginPath();
                ctx.ellipse(380, 80, 60, 50, 0, 0, Math.PI * 2);
                ctx.fill();
                // Australia
                ctx.beginPath();
                ctx.ellipse(420, 180, 25, 20, 0, 0, Math.PI * 2);
                ctx.fill();
                
                const earthTexture = new THREE.CanvasTexture(earthCanvas);
                
                const earthMaterial = new THREE.MeshPhongMaterial({
                    map: earthTexture,
                    bumpScale: 0.05,
                    specular: new THREE.Color(0x333333),
                    shininess: 5
                });
                
                this.earth = new THREE.Mesh(earthGeometry, earthMaterial);
                this.scene.add(this.earth);
                
                // Atmosphere glow
                const atmosphereGeometry = new THREE.SphereGeometry(1.35, 64, 64);
                const atmosphereMaterial = new THREE.ShaderMaterial({
                    vertexShader: `
                        varying vec3 vNormal;
                        void main() {
                            vNormal = normalize(normalMatrix * normal);
                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                        }
                    `,
                    fragmentShader: `
                        varying vec3 vNormal;
                        void main() {
                            float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);
                            gl_FragColor = vec4(249/255, 115/255, 22/255, 1.0) * intensity;
                        }
                    `,
                    blending: THREE.AdditiveBlending,
                    side: THREE.BackSide,
                    transparent: true
                });
                
                const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
                this.scene.add(atmosphere);
                
                // Cloud layer
                const cloudGeometry = new THREE.SphereGeometry(1.25, 64, 64);
                const cloudCanvas = document.createElement('canvas');
                cloudCanvas.width = 512;
                cloudCanvas.height = 256;
                const cloudCtx = cloudCanvas.getContext('2d');
                cloudCtx.fillStyle = 'transparent';
                cloudCtx.fillRect(0, 0, 512, 256);
                cloudCtx.fillStyle = 'rgba(255, 255, 255, 0.4)';
                
                // Add cloud patches
                for (let i = 0; i < 30; i++) {
                    const x = Math.random() * 512;
                    const y = Math.random() * 256;
                    const w = Math.random() * 80 + 20;
                    const h = Math.random() * 30 + 10;
                    cloudCtx.beginPath();
                    cloudCtx.ellipse(x, y, w, h, 0, 0, Math.PI * 2);
                    cloudCtx.fill();
                }
                
                const cloudTexture = new THREE.CanvasTexture(cloudCanvas);
                const cloudMaterial = new THREE.MeshPhongMaterial({
                    map: cloudTexture,
                    transparent: true,
                    opacity: 0.3
                });
                
                this.clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
                this.scene.add(this.clouds);
            }
            
            createParticles() {
                const particleCount = 100;
                const geometry = new THREE.BufferGeometry();
                const positions = new Float32Array(particleCount * 3);
                const colors = new Float32Array(particleCount * 3);
                
                for (let i = 0; i < particleCount; i++) {
                    const theta = Math.random() * Math.PI * 2;
                    const radius = 2 + Math.random() * 2;
                    const phi = Math.random() * Math.PI;
                    
                    positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
                    positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
                    positions[i * 3 + 2] = radius * Math.cos(phi);
                    
                    // Orange color
                    colors[i * 3] = 249 / 255;
                    colors[i * 3 + 1] = 115 / 255;
                    colors[i * 3 + 2] = 22 / 255;
                    
                    this.particles.push({
                        theta,
                        radius,
                        phi,
                        speed: 0.002 + Math.random() * 0.003
                    });
                }
                
                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
                geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
                
                const material = new THREE.PointsMaterial({
                    size: 0.05,
                    vertexColors: true,
                    transparent: true,
                    opacity: 0.8
                });
                
                this.particleSystem = new THREE.Points(geometry, material);
                this.scene.add(this.particleSystem);
            }
            
            createOrbitRings() {
                // Create a few orbital rings
                const ringGeometry = new THREE.RingGeometry(2, 2.05, 128);
                const ringMaterial = new THREE.MeshBasicMaterial({
                    color: 0xf97316,
                    side: THREE.DoubleSide,
                    transparent: true,
                    opacity: 0.3
                });
                
                const ring1 = new THREE.Mesh(ringGeometry, ringMaterial);
                ring1.rotation.x = Math.PI / 2;
                this.scene.add(ring1);
                
                const ring2 = new THREE.Mesh(ringGeometry, ringMaterial.clone());
                ring2.rotation.x = Math.PI / 3;
                ring2.rotation.z = Math.PI / 6;
                this.scene.add(ring2);
                
                this.orbitLines.push(ring1, ring2);
            }
            
            animate() {
                this.animationId = requestAnimationFrame(() => this.animate());
                
                // Rotate Earth
                if (this.earth) {
                    this.earth.rotation.y += 0.002;
                }
                
                // Rotate clouds slightly faster
                if (this.clouds) {
                    this.clouds.rotation.y += 0.003;
                }
                
                // Rotate particles
                if (this.particleSystem) {
                    this.particleSystem.rotation.y += 0.001;
                    this.particleSystem.rotation.x += 0.0005;
                }
                
                // Rotate orbit rings
                this.orbitLines.forEach((ring, i) => {
                    ring.rotation.z += 0.001 * (i % 2 === 0 ? 1 : -1);
                });
                
                // Camera subtle movement
                const time = Date.now() * 0.0005;
                this.camera.position.x = Math.sin(time) * 0.3;
                this.camera.position.y = Math.cos(time * 0.7) * 0.2;
                this.camera.lookAt(0, 0, 0);
                
                this.renderer.render(this.scene, this.camera);
            }
            
            onResize() {
                const width = this.container.clientWidth;
                const height = this.container.clientHeight;
                
                this.camera.aspect = width / height;
                this.camera.updateProjectionMatrix();
                this.renderer.setSize(width, height);
            }
            
            dispose() {
                if (this.animationId) {
                    cancelAnimationFrame(this.animationId);
                }
                if (this.renderer) {
                    this.renderer.dispose();
                    this.container.removeChild(this.renderer.domElement);
                }
            }
        }
        
        // ========== 数字滚动动画 ==========
        function animateCountingNumbers() {
            const numbers = document.querySelectorAll('.counting-number[data-target]');
            
            numbers.forEach(num => {
                if (num.classList.contains('animated')) return;
                
                const target = parseInt(num.dataset.target);
                const duration = 2000;
                const startTime = performance.now();
                
                num.classList.add('animated');
                
                function updateNumber(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);
                    
                    // 缓动函数
                    const easeOut = 1 - Math.pow(1 - progress, 3);
                    const current = Math.floor(easeOut * target);
                    
                    num.textContent = current;
                    
                    if (progress < 1) {
                        requestAnimationFrame(updateNumber);
                    } else {
                        num.textContent = target;
                    }
                }
                
                requestAnimationFrame(updateNumber);
            });
        }
        
        // 初始化 Three.js 3D地球
        let threeGlobe = null;
        
        // 当3D可视化区域进入视口时初始化
        function initGlobeWhenVisible() {
            const container = document.getElementById('globeContainer');
            if (!container) return;
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && !threeGlobe) {
                        threeGlobe = new ThreeGlobe('globe3d');
                        animateCountingNumbers();
                    }
                });
            }, { threshold: 0.2 });
            
            observer.observe(container);
        }
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            initGlobeWhenVisible();
            
            // FAQ Accordion
            $('.faq-question').click(function() {
                var $faqItem = $(this).parent();
                var $otherItems = $('.faq-item').not($faqItem);
                
                $otherItems.removeClass('active');
                $otherItems.find('.faq-answer').css('max-height', '0');
                
                $faqItem.toggleClass('active');
                if ($faqItem.hasClass('active')) {
                    $faqItem.find('.faq-answer').css('max-height', '500px');
                } else {
                    $faqItem.find('.faq-answer').css('max-height', '0');
                }
            });
            
            // Service type buttons
            $('.service-type-btn').click(function() {
                $('.service-type-btn').removeClass('active');
                $(this).addClass('active');
            });
            
            // Form submission
            $('#contactForm').submit(function(e) {
                e.preventDefault();
                $(this).hide();
                $('#submitSuccess').addClass('show');
            });
            
            function resetForm() {
                $('#contactForm').show();
                $('#contactForm')[0].reset();
                $('#submitSuccess').removeClass('show');
                $('.service-type-btn').removeClass('active');
                $('.service-type-btn').first().addClass('active');
            }
        });

        // 降级保障：2秒后强制显示所有 reveal 元素，防止图片因 offset 计算错误永久隐藏
        setTimeout(function() {
            $('.reveal, .reveal-left, .reveal-right').addClass('visible');
        }, 2000);
    </script>
</body>
</html>
