<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZClaw 智能体办公平台 | 深圳智星人智能科技有限公司</title>
    <meta name="description" content="ZClaw 专业级AI智能体办公平台，汇聚商稿优化、视频生成、海报设计、数据分析等多款垂直领域智能体，开箱即用，精准赋能。">
    <meta property="og:title" content="ZClaw 智能体办公平台">
    <meta property="og:description" content="ZClaw 专业级AI智能体办公平台，汇聚商稿优化、视频生成、海报设计、数据分析等多款垂直领域智能体，开箱即用，精准赋能。">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <link rel="icon" href="http://fdcwz.com.cn/upload/logo/zxr.png" type="image/png">
    <link rel="preconnect" href="http://fonts.googleapis.com">
    <link rel="preconnect" href="http://fonts.gstatic.com" crossorigin>
    <link href="style.css" rel="stylesheet">
    <link href="http://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="http://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
    <script src="http://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
    
    <style>
            /* ── Hero 视觉动画 ── */
            @keyframes logo-float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
            @keyframes logo-glow {
                0%, 100% { filter: drop-shadow(0 0 25px rgba(92,106,255,0.25)); }
                50% { filter: drop-shadow(0 0 45px rgba(92,106,255,0.45)); }
            }
            @keyframes ring-spin-cw {
                to { transform: rotate(360deg); }
            }
            @keyframes ring-spin-ccw {
                to { transform: rotate(-360deg); }
            }
            @keyframes node-float-1 {
                0% { transform: translate(-50%, 0) rotate(0deg) scale(1); }
                33% { transform: translate(-50%, -10px) rotate(8deg) scale(1.12); }
                66% { transform: translate(-50%, 4px) rotate(-4deg) scale(0.95); }
                100% { transform: translate(-50%, 0) rotate(0deg) scale(1); }
            }
            @keyframes node-float-2 {
                0% { transform: translate(-50%, 0) rotate(0deg) scale(1); }
                33% { transform: translate(-50%, 10px) rotate(-8deg) scale(1.08); }
                66% { transform: translate(-50%, -6px) rotate(5deg) scale(0.95); }
                100% { transform: translate(-50%, 0) rotate(0deg) scale(1); }
            }
            @keyframes node-float-3 {
                0% { transform: translate(0, -50%) rotate(0deg) scale(1); }
                33% { transform: translate(10px, -50%) rotate(10deg) scale(1.15); }
                66% { transform: translate(-5px, -50%) rotate(-6deg) scale(0.92); }
                100% { transform: translate(0, -50%) rotate(0deg) scale(1); }
            }
            @keyframes node-float-4 {
                0% { transform: translate(0, -50%) rotate(0deg) scale(1); }
                33% { transform: translate(-10px, -50%) rotate(-10deg) scale(1.1); }
                66% { transform: translate(6px, -50%) rotate(6deg) scale(0.93); }
                100% { transform: translate(0, -50%) rotate(0deg) scale(1); }
            }
            .hero-logo { animation: logo-float 4s ease-in-out infinite, logo-glow 3s ease-in-out infinite; }
            .hero-ring-outer { animation: ring-spin-cw 20s linear infinite; }
            .hero-ring-inner { animation: ring-spin-ccw 15s linear infinite; }
            .hero-node-top { animation: node-float-1 3s ease-in-out infinite; }
            .hero-node-bottom { animation: node-float-2 3.5s ease-in-out infinite; }
            .hero-node-left { animation: node-float-3 4s ease-in-out infinite; }
            .hero-node-right { animation: node-float-4 3.2s ease-in-out infinite; }
    </style>
</head>
<body class="font-inter bg-slate-50 text-primary-950 antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
            <!-- Logo -->
            <a href="#" class="flex items-center gap-3">
                <img src="http://fdcwz.com.cn/upload/logo/zxr.png" alt="ZClaw" class="w-10 h-10 rounded-full object-cover drop-shadow-[0_0_12px_rgba(255,255,255,0.25)]">
                <div class="flex flex-col">
                    <span class="text-xl font-bold text-white leading-tight">ZClaw</span>
                    <span class="text-[10px] text-white/60 tracking-wider">智能体办公平台</span>
                </div>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center gap-6">
                <a href="#agents" class="text-white/80 hover:text-white transition-colors">智能体广场</a>
                <a href="#advantages" class="text-white/80 hover:text-white transition-colors">平台优势</a>
                <a href="#download" class="text-white/80 hover:text-white transition-colors">客户端下载</a>
                <a href="#about" class="text-white/80 hover:text-white transition-colors">关于我们</a>
                <a href="http://cdn.aioa.cn/update/1.0.10/ZClawGEO-1.0.10-win-x64.exe" class="js-download-btn bg-white text-primary-800 px-5 py-2 rounded-full font-medium hover:bg-primary-50 transition-all hover:shadow-lg">
                    <i class="fa fa-download mr-1"></i> Windows 下载
                </a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobileMenuBtn" class="md:hidden text-white text-xl p-2" aria-label="菜单">
                <i id="menuIcon" class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航面板 -->
        <div id="mobileNav" class="md:hidden hidden absolute top-full left-0 right-0 bg-primary-950/98 backdrop-blur-md border-t border-primary-800 shadow-xl">
            <div class="container mx-auto px-6 py-4 flex flex-col gap-3">
                <a href="#agents" class="text-white/80 hover:text-white py-3 transition-colors">智能体广场</a>
                <a href="#advantages" class="text-white/80 hover:text-white py-3 transition-colors">平台优势</a>
                <a href="#download" class="text-white/80 hover:text-white py-3 transition-colors">客户端下载</a>
                <a href="#about" class="text-white/80 hover:text-white py-3 transition-colors">关于我们</a>
                <a href="http://cdn.aioa.cn/update/1.0.10/ZClawGEO-1.0.10-win-x64.exe" class="js-download-btn bg-white text-primary-800 px-5 py-3 rounded-full font-medium text-center mt-2">
                    <i class="fa fa-download mr-1"></i> Windows 下载
                </a>
            </div>
        </div>
    </header>

    <!-- Hero 主视觉 -->
    <section class="relative bg-primary-950 bg-grid-dot overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-primary-950/90 to-primary-900/95"></div>
        
        <!-- 背景装饰节点 -->
        <div class="absolute top-20 left-[10%] w-16 h-16 octagon-icon bg-primary-700/30 animate-pulse"></div>
        <div class="absolute top-40 right-[15%] w-10 h-10 octagon-icon bg-primary-600/40"></div>
        <div class="absolute bottom-32 left-[20%] w-8 h-8 octagon-icon bg-primary-500/50 animate-pulse"></div>
        <div class="absolute bottom-20 right-[8%] w-12 h-12 octagon-icon bg-primary-700/30"></div>
        
        <div class="container mx-auto px-6 pt-32 pb-24 md:pt-40 md:pb-32 relative z-10">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <div class="inline-flex items-center gap-2 bg-primary-800/50 border border-primary-700/50 rounded-full px-4 py-1.5 text-sm text-primary-100">
                        <i class="fa fa-cube text-primary-300"></i>
                        <span>深圳智星人出品 · 专业级AI智能体矩阵</span>
                    </div>
                    
                    <h1 class="hero-title text-[clamp(2.5rem,5vw,4rem)] font-extrabold leading-tight text-white">
                        让每个会用 AI 的人<br>
                        都成为 <span class="text-gradient bg-gradient-to-r from-primary-300 to-primary-100">智星人</span>
                    </h1>
                    
                    <p class="hero-subtitle text-subhead-3 text-slate-300 max-w-lg leading-relaxed">
                        ZClaw 智能体办公平台 —— 不用复杂指令，像聊天一样完成商稿优化、视频生成、海报设计。<br>
                        <span class="text-primary-400 font-medium">开箱即用 · 精准赋能 · 人人都有专属 AI 搭档</span>
                    </p>
                    
                    <div class="hero-actions flex flex-wrap gap-4 pt-2">
                        <a href="http://cdn.aioa.cn/update/1.0.10/ZClawGEO-1.0.10-win-x64.exe" class="js-download-btn bg-primary-400 hover:bg-primary-300 text-primary-950 px-8 py-3.5 rounded-full font-semibold transition-all hover:shadow-xl hover:shadow-primary-400/20 hover:-translate-y-0.5 inline-flex items-center">
                            <i class="fa fa-windows mr-2"></i>
                            下载 Windows 客户端
                        </a>
                        <a href="#agents" class="border border-white/20 text-white px-8 py-3.5 rounded-full font-medium hover:bg-white/10 transition-all inline-flex items-center">
                            查看全部智能体
                        </a>
                    </div>
                    
                    <div class="text-sm text-slate-400">
                        <i class="fa fa-check-circle text-primary-400 mr-1"></i>
                        最新版本 v1.0.10 · 安装包约 300MB · 支持 Win10/Win11
                    </div>
                    
                    <!-- 数据亮点 -->
                    <div class="flex gap-8 pt-4 border-t border-white/10 mt-4 counter-section">
                        <div>
                            <div class="text-2xl font-bold text-white"><span class="counter-num" data-target="20">0</span>+</div>
                            <div class="text-sm text-slate-400">专业智能体</div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧品牌图形 -->
                <div class="hero-visual relative hidden md:flex justify-center items-center">
                    <div class="relative w-96 h-96">
                        <div class="hero-ring-outer absolute inset-0 rounded-full border border-primary-700/30"></div>
                        <div class="hero-ring-inner absolute inset-12 rounded-full border border-primary-600/20"></div>
                        
                        <!-- 中心Logo -->
                        <div class="hero-logo absolute inset-0 flex items-center justify-center">
                            <svg viewBox="0 0 960 960" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-52 h-52 drop-shadow-[0_0_30px_rgba(92,106,255,0.3)]">
                                <path d="M259.6 260.8L216 237.2L172.4 260.8L148.8 304.4L172.4 348L216 371.6V588.4L172.4 612L148.8 655.6L172.4 699.2L216 722.8L259.6 699.2L283.2 655.6L259.6 612L216 588.4V371.6L259.6 348L283.2 304.4L259.6 260.8Z" fill="#1E2270" stroke="#5C6AFF" stroke-width="2"/>
                                <rect x="186" y="290" width="60" height="60" fill="white"/>
                                <path d="M700.4 260.8L744 237.2L787.6 260.8L811.2 304.4L787.6 348L744 371.6V588.4L787.6 612L811.2 655.6L787.6 699.2L744 722.8L700.4 699.2L676.8 655.6L700.4 612L744 588.4V371.6L700.4 348L676.8 304.4L700.4 260.8Z" fill="#1E2270" stroke="#5C6AFF" stroke-width="2"/>
                                <rect x="714" y="290" width="60" height="60" fill="white"/>
                                <path d="M500 92.8L543.6 116.4L567.2 160L543.6 203.6L500 227.2L456.4 203.6L432.8 160L456.4 116.4L500 92.8Z" fill="#1E2270" stroke="#5C6AFF" stroke-width="2"/>
                                <rect x="470" y="140" width="60" height="60" fill="white"/>
                                <path d="M500 732.8L543.6 756.4L567.2 800L543.6 843.6L500 867.2L456.4 843.6L432.8 800L456.4 756.4L500 732.8Z" fill="#1E2270" stroke="#5C6AFF" stroke-width="2"/>
                                <path d="M636.8 340.8L567.2 260.8L500 237.2L432.8 260.8L363.2 340.8L340 420.8L363.2 500.8L432.8 580.8L500 604.4L567.2 580.8L636.8 500.8L660 420.8L636.8 340.8Z" fill="#1E2270" stroke="#5C6AFF" stroke-width="2"/>
                                <path d="M432 364H568V406L464 556H392V514L496 406H432V364Z" fill="white"/>
                            </svg>
                        </div>
                        
                        <!-- 环绕功能节点 -->
                        <div class="hero-node-top absolute top-6 left-1/2 w-10 h-10 octagon-icon bg-primary-400 flex items-center justify-center text-white">
                            <i class="fa fa-file-text-o"></i>
                        </div>
                        <div class="hero-node-bottom absolute bottom-6 left-1/2 w-10 h-10 octagon-icon bg-primary-400 flex items-center justify-center text-white">
                            <i class="fa fa-picture-o"></i>
                        </div>
                        <div class="hero-node-left absolute left-0 top-1/2 w-10 h-10 octagon-icon bg-primary-400 flex items-center justify-center text-white">
                            <i class="fa fa-film"></i>
                        </div>
                        <div class="hero-node-right absolute right-0 top-1/2 w-10 h-10 octagon-icon bg-primary-400 flex items-center justify-center text-white">
                            <i class="fa fa-bar-chart"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-slate-50 to-transparent"></div>
    </section>

    <!-- 核心智能体 -->
    <section id="agents" class="py-20 md:py-28">
        <div class="container mx-auto px-6">
            <div class="text-center max-w-2xl mx-auto mb-16">
                <h2 class="text-heading-3 md:text-heading-2 font-bold mb-4">全场景专业智能体</h2>
                <p class="text-body text-slate-600">覆盖文案、设计、视频、数据等主流办公场景，按需调用，高效产出</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <!-- 卡片1 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-file-text"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">商稿优化师</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        输入产品卖点，3 分钟生成 5 版不同风格的详情页文案，自动匹配发布平台语气。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
                
                <!-- 卡片2 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-film"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">视频生成师</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        粘贴一篇博客，自动拆解分镜、生成配音并剪辑成 60 秒短视频，一键导出。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
                
                <!-- 卡片3 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-paint-brush"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">海报设计师</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        说出活动主题和尺寸，AI 自动生成 10 款版式，配色字体一步到位。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
                
                <!-- 卡片4 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-bar-chart"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据分析师</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        上传 Excel 表格，自动生成可视化看板 + 结论性分析报告，小白也能做汇报。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
                
                <!-- 卡片5 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-file-powerpoint-o"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">PPT美化师</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        一键优化PPT排版与视觉风格，提供多套专业模板，自动匹配逻辑结构，快速产出高质量演示文稿。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
                
                <!-- 卡片6 -->
                <div class="agent-card bg-white rounded-xl p-8 shadow-sm border border-slate-100 card-hover group">
                    <div class="w-14 h-14 octagon-icon bg-primary-100 flex items-center justify-center mb-6 text-primary-700 text-2xl group-hover:bg-primary-600 group-hover:text-white transition-all">
                        <i class="fa fa-address-card-o"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">客户管理助手</h3>
                    <p class="text-body-sm text-slate-600 leading-relaxed mb-4">
                        智能管理客户信息、跟进记录与画像分析，辅助销售人员高效维护客户关系，提升转化与复购率。
                    </p>
                    <a href="#download" class="inline-flex items-center gap-1 text-primary-400 font-medium text-sm hover:text-primary-300 transition-colors">
                        <i class="fa fa-play-circle-o mr-1"></i>
                        免费试用 <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 平台优势 -->
    <section id="advantages" class="py-20 md:py-28 bg-white">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <h2 class="text-heading-3 md:text-heading-2 font-bold">为什么选择 ZClaw</h2>
                    <p class="text-body text-slate-600 leading-relaxed">
                        基于智星人自研AI技术底座，针对办公场景深度优化，打造更懂职场人的智能体平台，兼顾易用性、专业性与安全性。
                    </p>
                    
                    <div class="space-y-6">
                        <div class="advantage-item flex gap-4">
                            <div class="w-12 h-12 octagon-icon bg-primary-50 flex items-center justify-center text-primary-600 text-xl flex-shrink-0">
                                <i class="fa fa-bolt"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-subhead-3 mb-1">开箱即用，零学习成本</h4>
                                <p class="text-slate-600 text-sm">无需复杂配置，打开即可使用，自然语言交互，人人都能快速上手。</p>
                            </div>
                        </div>
                        
                        <div class="advantage-item flex gap-4">
                            <div class="w-12 h-12 octagon-icon bg-primary-50 flex items-center justify-center text-primary-600 text-xl flex-shrink-0">
                                <i class="fa fa-shield"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-subhead-3 mb-1">数据安全，私有化部署</h4>
                                <p class="text-slate-600 text-sm">支持企业私有化部署，数据本地存储，全方位保障企业信息安全。</p>
                            </div>
                        </div>
                        
                        <div class="advantage-item flex gap-4">
                            <div class="w-12 h-12 octagon-icon bg-primary-50 flex items-center justify-center text-primary-600 text-xl flex-shrink-0">
                                <i class="fa fa-puzzle-piece"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-subhead-3 mb-1">灵活定制，场景适配</h4>
                                <p class="text-slate-600 text-sm">支持企业专属智能体定制，深度适配业务流程，贴合行业场景需求。</p>
                            </div>
                        </div>
                        
                        <div class="advantage-item flex gap-4">
                            <div class="w-12 h-12 octagon-icon bg-primary-50 flex items-center justify-center text-primary-600 text-xl flex-shrink-0">
                                <i class="fa fa-refresh"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-subhead-3 mb-1">持续迭代，能力升级</h4>
                                <p class="text-slate-600 text-sm">智能体能力持续更新迭代，不断接入最新模型技术，保持行业领先水平。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧演示 -->
                <div class="advantage-demo relative">
                    <div class="bg-gradient-to-br from-primary-50 to-primary-100 rounded-xl p-8 border border-primary-100">
                        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                            <div class="bg-slate-50 px-4 py-2 border-b border-slate-100 flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full bg-red-400"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
                                <div class="w-3 h-3 rounded-full bg-green-400"></div>
                                <span class="text-xs text-slate-500 ml-2">ZClaw · 商稿优化师</span>
                            </div>
                            <div class="p-5 space-y-4">
                                <div class="flex gap-3">
                                    <div class="w-8 h-8 octagon-icon bg-primary-100 flex items-center justify-center text-primary-600 text-xs flex-shrink-0">
                                        我
                                    </div>
                                    <div class="bg-slate-100 rounded-lg rounded-tl-none p-3 text-sm max-w-[80%]">
                                        帮我优化一下这份季度汇报的开场白，要更正式专业一点
                                    </div>
                                </div>
                                <div class="flex gap-3">
                                    <div class="w-8 h-8 octagon-icon bg-primary-600 flex items-center justify-center text-white text-xs flex-shrink-0">
                                        AI
                                    </div>
                                    <div class="bg-primary-50 text-primary-900 rounded-lg rounded-tl-none p-3 text-sm max-w-[85%]">
                                        已为您优化为商务汇报风格：<br><br>
                                        "各位领导、同事，大家好。现将本季度部门运营成果与下阶段工作规划向各位做专项汇报..."<br><br>
                                        同时调整了逻辑结构，突出核心数据，整体更符合正式汇报语境。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户端下载专区 -->
    <section id="download" class="py-20 md:py-28 bg-gradient-to-b from-slate-50 to-primary-50">
        <div class="container mx-auto px-6">
            <div class="text-center max-w-2xl mx-auto mb-12">
                <h2 class="text-heading-3 md:text-heading-2 font-bold mb-4">下载 ZClaw 客户端</h2>
                <p class="text-body text-slate-600">桌面端体验更流畅，支持全局快捷键、离线缓存、开机自启，办公效率再升级</p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="download-card bg-white rounded-xl shadow-xl border border-slate-100 overflow-hidden">
                    <div class="grid md:grid-cols-2">
                        <!-- 左侧下载主按钮 -->
                        <div class="p-8 md:p-10 bg-primary-900 text-white flex flex-col justify-center">
                            <div class="w-16 h-16 octagon-icon bg-white/10 flex items-center justify-center mb-6 text-3xl">
                                <i class="fa fa-windows"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-2">Windows 客户端</h3>
                            <p class="text-primary-200 mb-6 text-sm">
                                版本 v<span id="app-version-text">1.0.10</span> · 安装包约 300MB<br>
                                支持 Windows 10 / Windows 11 64位
                            </p>
                            <p class="text-primary-300 text-xs mb-4">
                                <i class="fa fa-apple mr-1"></i>
                                Mac 版本即将推出，敬请期待
                            </p>
                            <a href="http://cdn.aioa.cn/update/1.0.10/ZClawGEO-1.0.10-win-x64.exe" class="js-download-btn bg-white text-primary-900 px-8 py-3.5 rounded-full font-semibold hover:bg-primary-50 transition-all inline-flex items-center justify-center w-full md:w-auto">
                                <i class="fa fa-download mr-2"></i>
                                立即下载
                            </a>
                            <p class="text-xs text-primary-300 mt-4">
                                <i class="fa fa-shield mr-1"></i>
                                官方安全签名 · 无捆绑软件
                            </p>
                        </div>
                        
                        <!-- 右侧系统要求 -->
                        <div class="p-8 md:p-10">
                            <h4 class="font-bold text-lg mb-4">系统要求</h4>
                            <ul class="space-y-3 text-sm text-slate-600 mb-6">
                                <li class="flex items-start gap-2">
                                    <i class="fa fa-check text-primary-500 mt-0.5"></i>
                                    <span>操作系统：Windows 10 版本 1903 及以上 / Windows 11</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <i class="fa fa-check text-primary-500 mt-0.5"></i>
                                    <span>处理器：1.6 GHz 及以上双核处理器</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <i class="fa fa-check text-primary-500 mt-0.5"></i>
                                    <span>内存：4GB RAM 及以上</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <i class="fa fa-check text-primary-500 mt-0.5"></i>
                                    <span>磁盘空间：预留 2GB 可用空间（安装后约 1.5GB）</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <i class="fa fa-check text-primary-500 mt-0.5"></i>
                                    <span>网络：需稳定的互联网连接</span>
                                </li>
                            </ul>
                            
                            <div class="pt-4 border-t border-slate-100">
                                <a href="#" class="text-primary-600 text-sm hover:text-primary-700 inline-flex items-center">
                                    <i class="fa fa-history mr-1"></i>
                                    查看历史版本更新日志
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section id="cta-section" class="py-20 bg-primary-950 relative overflow-hidden">
        <div class="absolute inset-0 bg-grid-dot opacity-20"></div>
        <div class="cta-content container mx-auto px-6 relative z-10">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-heading-3 md:text-heading-2 font-bold text-white mb-4">开启你的AI办公新模式</h2>
                <p class="text-slate-300 mb-8">立即下载 ZClaw 客户端，免费体验全部智能体</p>
                <a href="http://cdn.aioa.cn/update/1.0.10/ZClawGEO-1.0.10-win-x64.exe" class="js-download-btn bg-white text-primary-900 px-8 py-3.5 rounded-full font-semibold hover:bg-slate-100 transition-all hover:shadow-xl inline-flex items-center">
                    <i class="fa fa-windows mr-2"></i>
                    免费下载使用
                </a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="about" class="bg-primary-900 text-slate-300 pt-12 pb-6">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8 mb-10">
                <!-- 品牌信息 -->
                <div class="footer-col md:col-span-1">
                    <div class="flex items-center gap-2 mb-4">
                        <img src="http://fdcwz.com.cn/upload/logo/zxr.png" alt="ZClaw" class="w-8 h-8 rounded-full object-cover drop-shadow-[0_0_10px_rgba(255,255,255,0.2)]">
                        <div class="flex flex-col">
                            <span class="text-white text-lg font-bold leading-tight">ZClaw</span>
                            <span class="text-[10px] text-slate-400 tracking-wider">智星人旗下平台</span>
                        </div>
                    </div>
                    <p class="text-sm text-slate-400 mb-4">
                        专业级AI智能体办公平台，用科技提升办公效率，赋能每一位创作者。
                    </p>
                    <div class="flex gap-3">
                        <a href="#" class="w-8 h-8 rounded-full bg-primary-800 flex items-center justify-center text-sm hover:bg-primary-700 transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-primary-800 flex items-center justify-center text-sm hover:bg-primary-700 transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 产品 -->
                <div class="footer-col">
                    <h4 class="text-white font-semibold mb-4">智能体产品</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">商稿优化师</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">视频生成师</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">海报设计师</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">数据分析师</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">客户管理助手</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">更多智能体</a></li>
                    </ul>
                </div>
                
                <!-- 解决方案 -->
                <div class="footer-col">
                    <h4 class="text-white font-semibold mb-4">解决方案</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">个人成长版</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">企业智慧版</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">机构合作版</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">定制开发服务</a></li>
                        <li><a href="#download" class="hover:text-white transition-colors">客户端下载</a></li>
                    </ul>
                </div>
                
                <!-- 联系我们 -->
                <div class="footer-col">
                    <h4 class="text-white font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-start gap-2">
                            <i class="fa fa-building-o text-primary-400 mt-0.5"></i>
                            <span>深圳智星人智能科技有限公司</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa fa-map-marker text-primary-400 mt-0.5"></i>
                            <span>深圳市福田区沙头街道天安社区泰然四路29号天安创新科技广场一期A座801B</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa fa-envelope-o text-primary-400 mt-0.5"></i>
                            <span>xiaobin@dushikeji.com</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa fa-phone text-primary-400 mt-0.5"></i>
                            <span>13902986762</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 底部版权 -->
            <div class="border-t border-primary-800 pt-6 text-xs text-slate-400 flex flex-col md:flex-row justify-between items-center gap-3">
                <div>© 2026 深圳智星人智能科技有限公司 版权所有</div>
                <div class="flex gap-4">
                    <a href="/notice/user.html" class="hover:text-white transition-colors">用户协议</a>
                    <a href="/notice/private.html" class="hover:text-white transition-colors">隐私政策</a>
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">粤ICP备2023082737号-1</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 w-11 h-11 rounded-full bg-[#5C6AFF] text-white shadow-lg shadow-[#5C6AFF]/30 flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-[#4A58E8] hover:shadow-[#5C6AFF]/50 z-50" aria-label="返回顶部">
        <i class="fa fa-chevron-up"></i>
    </button>

    <script>
        // ── 动态下载链接：从后端配置接口加载 CDN 域名（update_url）并拼接版本号安装包路径 ──
        (function () {
            // 默认版本号（发版时若后端未配置 update_version，仅需修改此处）
            var APP_VERSION = '1.0.10';
            // 后端配置接口（同源，通过 nginx 反代到 Go 后端）
            var CONFIG_URL = '/api/config';

            function buildDownloadUrl(domain) {
                if (!domain) return '#';
                var base = domain.replace(/\/+$/, '');
                return base + '/update/' + APP_VERSION + '/ZClawGEO-' + APP_VERSION + '-win-x64.exe';
            }

            function applyDownloadUrl(url) {
                if (!url || url === '#') return;
                document.querySelectorAll('.js-download-btn').forEach(function (el) {
                    el.setAttribute('href', url);
                });
            }

            // 默认先填 fallback CDN 域名，再异步用后端配置覆盖
            applyDownloadUrl(buildDownloadUrl('http://cdn.aioa.cn'));

            fetch(CONFIG_URL)
                .then(function (res) { return res.json(); })
                .then(function (body) {
                    var rows = body && body.rows ? body.rows : null;
                    if (!rows) return;
                    var getKey = function (key, fallback) {
                        if (Array.isArray(rows)) {
                            for (var i = 0; i < rows.length; i++) {
                                if (rows[i].key === key && rows[i].value) return rows[i].value;
                            }
                            return fallback;
                        }
                        return rows[key] || fallback;
                    };
                    // 版本号：后端配了 update_version 则动态覆盖
                    var ver = getKey('update_version', '');
                    if (ver) APP_VERSION = String(ver).trim();
                    var domain = getKey('update_url', '') || getKey('site_imgurl', '') || getKey('site_url', '');
                    if (domain) applyDownloadUrl(buildDownloadUrl(domain));
                    // 页面版本号文本同步（若存在对应元素）
                    var verEl = document.getElementById('app-version-text');
                    if (verEl) verEl.textContent = APP_VERSION;
                })
                .catch(function () { /* 加载失败保持 fallback */ });
        })();
    </script>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-primary-950/95', 'backdrop-blur-md', 'shadow-lg');
            } else {
                navbar.classList.remove('bg-primary-950/95', 'backdrop-blur-md', 'shadow-lg');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            const href = anchor.getAttribute('href');
            if (!href || href === '#') return;
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target && target.scrollIntoView) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileNav = document.getElementById('mobileNav');
        const menuIcon = document.getElementById('menuIcon');
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', () => {
                const isOpen = !mobileNav.classList.contains('hidden');
                mobileNav.classList.toggle('hidden');
                menuIcon.className = isOpen ? 'fa fa-bars' : 'fa fa-times';
            });
            // 点击菜单内的链接后关闭菜单
            mobileNav.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileNav.classList.add('hidden');
                    menuIcon.className = 'fa fa-bars';
                });
            });
        }

        // 返回顶部按钮
        const backToTop = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 400) {
                backToTop.classList.remove('opacity-0', 'invisible');
                backToTop.classList.add('opacity-100', 'visible');
            } else {
                backToTop.classList.add('opacity-0', 'invisible');
                backToTop.classList.remove('opacity-100', 'visible');
            }
        });
        backToTop.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
    
    <script>
        gsap.registerPlugin(ScrollTrigger);

        // ── Hero 标题入场 ──
        gsap.from('.hero-title', { y: 60, opacity: 0, duration: 1, ease: 'power3.out' });
        gsap.from('.hero-subtitle', { y: 40, opacity: 0, duration: 1, delay: 0.2, ease: 'power3.out' });
        gsap.from('.hero-actions', { y: 30, opacity: 0, duration: 0.8, delay: 0.4, ease: 'power3.out' });
        gsap.from('.counter-section', { y: 20, opacity: 0, duration: 0.8, delay: 0.6, ease: 'power3.out' });
        gsap.from('.hero-visual', { scale: 0.8, opacity: 0, duration: 1.2, delay: 0.3, ease: 'back.out(1.4)' });

        // ── 智能体卡片排列入场 ──
        gsap.fromTo('#agents .agent-card',
            { y: 80, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.8, stagger: 0.15, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: '#agents', start: 'top 80%' }
            }
        );

        // ── 平台优势 ──
        gsap.fromTo('#advantages .advantage-item',
            { x: -60, opacity: 0 },
            { x: 0, opacity: 1, duration: 0.8, stagger: 0.2, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: '#advantages', start: 'top 80%' }
            }
        );
        gsap.fromTo('#advantages .advantage-demo',
            { x: 80, opacity: 0 },
            { x: 0, opacity: 1, duration: 1, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: '#advantages', start: 'top 75%' }
            }
        );

        // ── 下载区 ──
        gsap.fromTo('#download .download-card',
            { y: 60, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.8, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: '#download', start: 'top 80%' }
            }
        );

        // ── CTA ──
        gsap.fromTo('#cta-section .cta-content',
            { y: 50, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.8, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: '#cta-section', start: 'top 80%' }
            }
        );

        // ── 页脚 ──
        gsap.fromTo('footer .footer-col',
            { y: 40, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'power3.out',
              immediateRender: false,
              scrollTrigger: { trigger: 'footer', start: 'top 90%' }
            }
        );

        // ── 数字递增动画（GSAP 增强版） ──
        const counterSection = document.querySelector('.counter-section');
        if (counterSection) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        document.querySelectorAll('.counter-num').forEach(el => {
                            if (el.dataset.animated) return;
                            el.dataset.animated = 'true';
                            const target = parseInt(el.dataset.target);
                            const proxy = { value: 0 };
                            gsap.to(proxy, {
                                value: target,
                                duration: 1.5,
                                ease: 'power2.out',
                                onUpdate: () => { el.textContent = Math.round(proxy.value); }
                            });
                        });
                        observer.disconnect();
                    }
                });
            }, { threshold: 0.5 });
            observer.observe(counterSection);
        }
    </script>
</body>
</html>
