<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智影矩阵 - AI赋能视频创作，矩阵管理一站通</title>
    <meta name="description" content="从智能生成爆款脚本，到多平台账号统一管理，智影矩阵为您提供前所未有的一站式短视频营销解决方案。">
    <meta name="keywords" content="智影矩阵, AI营销, 短视频营销, 内容创作, 账号管理">
    <meta name="author" content="智影矩阵">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.yueouni.com/static/home/new/css/themeMixin.min.css">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.yueouni.com/static/home/new/css/themeMixin.min.css">
    <meta property="og:title" content="智影矩阵 - AI赋能视频创作，矩阵管理一站通">
    <meta property="og:description" content="从智能生成爆款脚本，到多平台账号统一管理，智影矩阵为您提供前所未有的一站式短视频营销解决方案。">
    <meta property="og:site_name" content="智影矩阵">
        <meta property="og:image" content="https://www.yueouni.com/assets/images/og-default.jpg">
        
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.yueouni.com/static/home/new/css/themeMixin.min.css">
    <meta property="twitter:title" content="智影矩阵 - AI赋能视频创作，矩阵管理一站通">
    <meta property="twitter:description" content="从智能生成爆款脚本，到多平台账号统一管理，智影矩阵为您提供前所未有的一站式短视频营销解决方案。">
    <meta property="twitter:site" content="@zhiyingmatrix">
    <meta property="twitter:creator" content="@zhiyingmatrix">
        <meta property="twitter:image" content="https://www.yueouni.com/assets/images/og-default.jpg">
    
    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
                "name": "智影矩阵",
        "description": "AI驱动的短视频营销工具，助力商家轻松创作爆款内容，实现矩阵账号管理和数据分析。",
        "url": "https://www.yueouni.com",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://www.yueouni.com/blog.php?search={search_term_string}",
            "query-input": "required name=search_term_string"
        }
            }
    </script>

    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 引入自定义字体或样式 -->
    <style>
        /* 可以在这里添加一些全局的自定义样式 */

        /* 确保网格布局正常工作 - 强制覆盖 */
        .grid {
            display: grid !important;
        }
        .gap-8 {
            gap: 2rem !important;
        }

        /* 强制网格布局 - 所有屏幕尺寸 */
        .grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 2rem !important;
        }

        /* 响应式调整 */
        @media (max-width: 1279px) {
            .grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 1023px) {
            .grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 767px) {
            .grid.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            }
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        
        /* Dropdown a la Mega Menu */
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 720px; /* 增加宽度以适应3列布局 */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            z-index: 1000;
            border-radius: 1rem;
            padding: 2rem;
            margin-top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #e5e7eb;
        }
        .dropdown-content .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 改为3列 */
            gap: 1.5rem; /* 统一间距 */
        }
        .dropdown-content a {
            display: block;
            padding: 1.25rem;
            border-radius: 0.75rem;
            transition: all 0.2s ease;
            border: 1px solid transparent;
            text-decoration: none;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        }
        .dropdown-content a:hover {
            background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
            border-color: #3b82f6;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
            text-decoration: none;
        }
        .dropdown-content a h3 {
            font-size: 0.875rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.25rem;
            transition: color 0.2s ease;
        }
        .dropdown-content a:hover h3 {
            color: #3b82f6;
        }
        .dropdown-content a p {
            font-size: 0.75rem;
            color: #6b7280;
            line-height: 1.4;
            margin: 0;
        }
        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.15s ease-in-out;
        }

        .dropdown-content[style*="block"] {
            opacity: 1;
        }

        /* 移动端菜单样式 */
        .mobile-menu {
            display: none;
        }
        .mobile-menu.active {
            display: block;
        }

        @media (max-width: 768px) {
            .dropdown-content {
                position: static;
                display: block;
                min-width: auto;
                box-shadow: none;
                border-radius: 0;
                padding: 0;
                margin-top: 0;
                transform: none;
                border: none;
                background-color: transparent;
            }
            .dropdown-content .grid {
                display: block;
                grid-template-columns: none;
                gap: 0;
            }
            .dropdown-content a {
                padding: 0.75rem 1rem;
                border-bottom: 1px solid #f3f4f6;
            }
        }

        /* 美化文章内容的样式 */
        .prose h1, .prose h2, .prose h3 {
            font-weight: 700;
        }
        .prose p {
            line-height: 1.75;
        }
        .prose a {
            color: #3b82f6; /* blue-500 */
            text-decoration: none;
        }
        .prose a:hover {
            text-decoration: underline;
        }
        .prose blockquote {
            border-left: 4px solid #d1d5db; /* gray-300 */
            padding-left: 1rem;
            color: #4b5563; /* gray-600 */
        }
        .prose pre {
             background-color: #1f2937; /* gray-800 */
             color: #d1d5db; /* gray-300 */
             padding: 1rem;
             border-radius: 0.5rem;
             overflow-x: auto;
        }
        .prose code:not(pre > code) {
            background-color: #e5e7eb; /* gray-200 */
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-size: 0.9em;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-700">

    <!-- 导航栏 -->
    <header class="bg-white/95 backdrop-blur-md shadow-lg sticky top-0 z-40 border-b border-gray-100">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <a href="index.php" class="flex items-center space-x-3 group">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-blue-500/25 transition-all duration-300 group-hover:scale-105">
                        <span class="text-white font-bold text-lg">智</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-xl font-bold bg-gradient-to-r from-gray-800 to-blue-800 bg-clip-text text-transparent">
                            智影矩阵
                        </span>
                        <span class="px-2 py-1 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-800 text-xs font-medium rounded-full">
                            AI
                        </span>
                    </div>
                </a>

                <!-- 移动端菜单按钮 -->
                <button class="md:hidden flex items-center justify-center w-10 h-10 rounded-lg hover:bg-gray-100 transition-colors" onclick="toggleMobileMenu()">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>

                <!-- 桌面端导航 -->
                <nav class="hidden md:flex space-x-8 items-center">
                <a href="index.php" class="relative text-gray-600 hover:text-blue-600 transition-all duration-300 font-medium group">
                    首页
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300"></span>
                </a>

                <div class="dropdown" onmouseenter="showDropdown(this)" onmouseleave="hideDropdown(this)">
                    <button class="relative text-gray-600 hover:text-blue-600 transition-all duration-300 flex items-center font-medium group">
                        功能特性
                        <svg class="w-4 h-4 ml-1 fill-current group-hover:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 14l-5-5h10l-5 5z"/></svg>
                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300"></span>
                    </button>
                    <div class="dropdown-content">
                        <div class="grid">
                            <a href="features/intelligent-creation.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">AI智能创作</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">一键生成爆款文案和脚本</p></div></a><a href="features/hotspot-creation.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">热点创作</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">轻松创作出流量爆款</p></div></a><a href="features/creative-production.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">创意制作</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">提供丰富的模板和素材</p></div></a><a href="features/rhythm-video.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">卡点视频</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">一键生成动感卡点视频</p></div></a><a href="features/video-editing.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">视频剪辑</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">强大的在线剪辑工具</p></div></a><a href="features/data-analysis.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">数据分析</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">全面监控视频表现</p></div></a><a href="features/cloud-storage.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">云端存储</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">安全可靠的云端素材库</p></div></a><a href="features/fast-efficient.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">快速高效</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">毫秒级响应，批量处理</p></div></a><a href="features/matrix-accounts.php" class="block p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200"><div><h3 class="font-semibold mb-1" style="color: #000000 !important;">矩阵账号管理</h3><p class="text-sm leading-relaxed" style="color: #374151 !important;">一站式管理多平台账号</p></div></a>                        </div>
                        <div class="mt-6 pt-4 border-t border-gray-200">
                            <a href="features.php" class="block text-center border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg text-sm font-medium hover:bg-blue-600 hover:text-white transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                                查看所有功能
                                <svg class="w-4 h-4 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>

                <a href="blog.php" class="relative text-gray-600 hover:text-blue-600 transition-all duration-300 font-medium group">
                    行业资讯
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="help.php" class="relative text-gray-600 hover:text-blue-600 transition-all duration-300 font-medium group">
                    帮助中心
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 group-hover:w-full transition-all duration-300"></span>
                </a>
            </nav>

                <div>
                    <a href="http://zhinanzhen.haina2008.com" target="_blank" rel="noopener noreferrer" class="group relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-blue-500/25 transition-all duration-300 transform hover:scale-105 overflow-hidden">
                        <span class="relative z-10">免费使用</span>
                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                        <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </a>
                </div>
            </div>

            <!-- 移动端菜单 -->
            <div class="mobile-menu md:hidden bg-white border-t border-gray-200" id="mobileMenu">
                <div class="px-4 py-2 space-y-1">
                    <a href="index.php" class="block px-3 py-2 text-gray-600 hover:text-blue-500 hover:bg-gray-50 rounded-md transition-colors">首页</a>

                    <!-- 移动端功能特性菜单 -->
                    <div class="dropdown">
                        <button class="w-full text-left px-3 py-2 text-gray-600 hover:text-blue-500 hover:bg-gray-50 rounded-md transition-colors flex items-center justify-between" onclick="toggleMobileDropdown(event)">
                            功能特性
                            <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="dropdown-content pl-4">
                            <div class="grid">
                                <a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">AI智能创作</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">热点创作</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">创意制作</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">卡点视频</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">视频剪辑</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">数据分析</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">云端存储</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">快速高效</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a><a href="" class="block"><div><h3 class="font-semibold text-sm" style="color: #000000 !important;">矩阵账号管理</h3><p class="text-xs" style="color: #374151 !important;"></p></div></a>                            </div>
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <a href="features.php" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                                    查看所有功能
                                </a>
                            </div>
                        </div>
                    </div>

                    <a href="blog.php" class="block px-3 py-2 text-gray-600 hover:text-blue-500 hover:bg-gray-50 rounded-md transition-colors">行业资讯</a>
                    <a href="help.php" class="block px-3 py-2 text-gray-600 hover:text-blue-500 hover:bg-gray-50 rounded-md transition-colors">帮助中心</a>

                    <div class="pt-4 border-t border-gray-200 mt-4">
                        <a href="http://zhinanzhen.haina2008.com" target="_blank" rel="noopener noreferrer" class="block text-center bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 transition-colors">
                            免费使用
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <script>
    function toggleMobileMenu() {
        const menu = document.getElementById('mobileMenu');
        menu.classList.toggle('active');
    }

    function toggleMobileDropdown(event) {
        event.preventDefault();
        const dropdown = event.target.closest('.dropdown');
        const content = dropdown.querySelector('.dropdown-content');
        const arrow = dropdown.querySelector('svg');

        if (content.style.display === 'block') {
            content.style.display = 'none';
            arrow.style.transform = 'rotate(0deg)';
        } else {
            content.style.display = 'block';
            arrow.style.transform = 'rotate(180deg)';
        }
    }

    // 桌面端下拉框控制
    let dropdownTimeout;

    function showDropdown(element) {
        clearTimeout(dropdownTimeout);
        const content = element.querySelector('.dropdown-content');
        if (content) {
            content.style.display = 'block';
        }
    }

    function hideDropdown(element) {
        dropdownTimeout = setTimeout(() => {
            const content = element.querySelector('.dropdown-content');
            if (content) {
                content.style.display = 'none';
            }
        }, 150); // 150ms延迟，给用户时间移动鼠标
    }

    // 点击外部关闭移动端菜单
    document.addEventListener('click', function(event) {
        const menu = document.getElementById('mobileMenu');
        const button = event.target.closest('button');

        if (!menu.contains(event.target) && (!button || button.onclick !== toggleMobileMenu)) {
            menu.classList.remove('active');
        }
    });
    </script>
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 overflow-hidden min-h-screen flex items-center">
  <!-- 动态背景效果 -->
  <div class="absolute inset-0 bg-tech-pattern opacity-10"></div>
  <div class="absolute inset-0">
    <div class="tech-particles"></div>
    <div class="tech-grid"></div>
  </div>

  <!-- 浮动几何元素 -->
  <div class="absolute top-20 left-10 w-20 h-20 border border-cyan-400 rotate-45 animate-pulse opacity-30"></div>
  <div class="absolute top-40 right-20 w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full animate-bounce opacity-20"></div>
  <div class="absolute bottom-32 left-1/4 w-12 h-12 border-2 border-green-400 rounded-full animate-spin opacity-25"></div>

  <div class="container mx-auto px-4 py-24 sm:py-32 text-center relative z-10">
    <!-- 主标题 -->
    <div class="mb-6">
      <h1 class="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 tracking-tight mb-4 leading-tight">
        AI赋能视频创作
      </h1>
      <h2 class="text-2xl sm:text-3xl font-bold text-white mb-3">
        矩阵管理一站通
      </h2>
    </div>

    <!-- 副标题 -->
    <p class="text-lg sm:text-xl text-blue-100 mb-8 max-w-4xl mx-auto leading-relaxed">
      基于深度学习与计算机视觉技术，为您提供前所未有的
      <span class="text-cyan-400 font-semibold">智能化短视频营销解决方案</span>
    </p>

    <!-- 核心数据展示 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10 max-w-4xl mx-auto">
      <div class="tech-stat-card">
        <div class="text-2xl font-bold text-cyan-400 mb-1">9+</div>
        <div class="text-blue-200 text-sm">AI核心功能</div>
      </div>
      <div class="tech-stat-card">
        <div class="text-2xl font-bold text-purple-400 mb-1">24/7</div>
        <div class="text-blue-200 text-sm">智能服务</div>
      </div>
      <div class="tech-stat-card">
        <div class="text-2xl font-bold text-green-400 mb-1">∞</div>
        <div class="text-blue-200 text-sm">创意可能</div>
      </div>
      <div class="tech-stat-card">
        <div class="text-2xl font-bold text-yellow-400 mb-1">1-Click</div>
        <div class="text-blue-200 text-sm">一键生成</div>
      </div>
    </div>

    <!-- CTA按钮 -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
      <a href="http://zhinanzhen.haina2008.com" target="_blank" rel="noopener noreferrer"
         class="tech-cta-primary group">
        <span class="relative z-10">立即体验 AI 创作</span>
        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </a>

      <a href="features.php" class="tech-cta-secondary group">
        <span>探索核心技术</span>
        <svg class="w-4 h-4 ml-2 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </a>
    </div>
  </div>

  <!-- 底部波浪装饰 -->
  <div class="absolute bottom-0 left-0 right-0">
    <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="relative block w-full h-16">
      <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
            class="fill-gray-50"></path>
    </svg>
  </div>
</section>

<!-- Features Section -->
<section class="py-24 bg-gradient-to-b from-gray-50 to-white relative">
  <!-- 背景装饰 -->
  <div class="absolute inset-0 bg-circuit-pattern opacity-5"></div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="text-center mb-20">
      <!-- 标签 -->
      <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-100 to-purple-100 rounded-full text-blue-800 text-sm font-medium mb-6">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
        </svg>
        AI 核心技术矩阵
      </div>

      <h2 class="text-5xl font-bold text-gray-900 mb-6">
        九大智能引擎
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
          重新定义创作
        </span>
      </h2>

      <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
        基于深度学习、计算机视觉与自然语言处理技术，构建完整的
        <span class="text-blue-600 font-semibold">智能视频创作生态系统</span>
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <a href="features/intelligent-creation.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-cyan-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-blue-100 text-blue-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              AI智能创作            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              基于深度学习技术，一键生成高质量视频脚本和创意文案，让您的内容创作效率提升10倍            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                节省90%的创意构思时间，告别创作瓶颈              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/hotspot-creation.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-400 to-pink-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-red-100 text-red-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1-4 4-4 1.657 0 3 .895 3 2 0 1-1 2-1 2s1.5.5 2 2c.5 1.5-.5 3.5-2.5 3.5-1 0-1.5-.5-1.5-.5s-1 1.5-2.5 1.5c-1 0-2.5-1-2.5-2.5 0-.5.5-1.5 1.5-2.5z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              热点创作            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              实时监控全网热点趋势，智能分析流量密码，帮您抢占热点先机，轻松打造爆款内容            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                提升3倍内容曝光率，抢占流量红利              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/creative-production.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-400 to-orange-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-yellow-100 text-yellow-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              创意制作            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              海量专业模板库，智能素材推荐，让您的视频制作更具创意和吸引力            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                零设计基础也能制作专业级视频              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/rhythm-video.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-400 to-indigo-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-purple-100 text-purple-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              卡点视频            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              AI智能识别音乐节拍，自动匹配视频剪辑点，一键生成动感十足的卡点视频            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                5分钟完成专业卡点视频制作              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/video-editing.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-400 to-emerald-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-green-100 text-green-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h1m4 0h1m-6-8h8a2 2 0 012 2v8a2 2 0 01-2 2H8a2 2 0 01-2-2V8a2 2 0 012-2z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              视频剪辑            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              专业级在线剪辑工具，支持多轨道编辑、特效添加、字幕生成等全套功能            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                无需下载软件，浏览器即可完成专业剪辑              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/data-analysis.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-400 to-blue-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-indigo-100 text-indigo-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              数据分析            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              全方位数据监控，智能分析用户行为，为您的内容优化提供科学依据            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                数据驱动决策，提升内容ROI              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/cloud-storage.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-400 to-slate-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gray-100 text-gray-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              云端存储            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              企业级云存储服务，多重备份保障，让您的创作素材永不丢失            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                随时随地访问素材，团队协作更高效              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/fast-efficient.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-400 to-orange-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-yellow-100 text-yellow-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              快速高效            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              强大的AI算法优化，毫秒级响应速度，批量处理能力，让您的创作效率飞速提升            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                创作效率提升10倍，节省大量时间成本              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
              <a href="features/matrix-accounts.php" class="group block relative bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 hover:border-blue-200 overflow-hidden">
          <!-- 背景渐变效果 -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

          <!-- 装饰线条 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-teal-400 to-cyan-400"></div>

          <div class="relative z-10">
            <!-- 图标容器 -->
            <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-teal-100 text-teal-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>            </div>

            <!-- 标题 -->
            <h3 class="text-2xl font-bold mb-3 text-gray-900 group-hover:text-blue-900 transition-colors duration-300">
              矩阵账号管理            </h3>

            <!-- 描述 -->
            <p class="text-gray-600 leading-relaxed mb-3 group-hover:text-gray-700 transition-colors duration-300">
              统一管理多平台账号，一键同步发布，智能数据分析，让运营效率翻倍            </p>

            <!-- 用户价值 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 p-3 rounded-lg mb-4 border-l-4 border-green-400">
              <div class="flex items-center mb-1">
                <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
                <span class="text-sm font-semibold text-green-700">为您带来的价值</span>
              </div>
              <p class="text-sm text-green-600">
                运营效率提升5倍，管理成本降低80%              </p>
            </div>

            <!-- 技术标签 -->
            <div class="flex items-center text-sm font-medium group-hover:text-gray-900 transition-colors duration-300" style="color: #1f2937 !important;">
              <span>了解技术原理</span>
              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 悬停时的光效 -->
          <div class="absolute -top-2 -right-2 w-20 h-20 bg-gradient-to-br from-white/20 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
          </div>
  </div>
</section>

<!-- Technology Advantages Section -->
<section class="py-24 bg-gradient-to-b from-white to-gray-50 relative">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <div class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-100 to-blue-100 rounded-full text-green-800 text-sm font-medium mb-6">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        技术优势
      </div>

      <h2 class="text-4xl font-bold text-gray-900 mb-6">
        为什么选择
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
          智影矩阵
        </span>
      </h2>

      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        基于前沿AI技术，为内容创作者提供专业级的智能化解决方案
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- 技术优势 1 -->
      <div class="group bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200">
        <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 text-white mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">深度学习引擎</h3>
        <p class="text-gray-600 leading-relaxed mb-4">
          采用先进的深度神经网络架构，能够理解视频内容的语义信息，实现智能化的内容分析与生成。
        </p>
        <div class="flex items-center text-blue-600 font-medium text-sm">
          <span>技术细节</span>
          <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>

      <!-- 技术优势 2 -->
      <div class="group bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-purple-200">
        <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 text-white mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">计算机视觉</h3>
        <p class="text-gray-600 leading-relaxed mb-4">
          集成先进的计算机视觉算法，能够精准识别图像内容、人物表情、场景构图，为智能剪辑提供技术支撑。
        </p>
        <div class="flex items-center text-purple-600 font-medium text-sm">
          <span>算法原理</span>
          <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>

      <!-- 技术优势 3 -->
      <div class="group bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-green-200">
        <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-500 text-white mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">自然语言处理</h3>
        <p class="text-gray-600 leading-relaxed mb-4">
          运用NLP技术理解文本语义，生成符合品牌调性的营销文案，实现从创意构思到内容输出的全流程自动化。
        </p>
        <div class="flex items-center text-green-600 font-medium text-sm">
          <span>应用场景</span>
          <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Latest Articles Section -->
<section class="py-20 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-gray-800">最新行业洞察</h2>
      <p class="text-gray-600 mt-2 text-lg">来自我们AI内容引擎的前沿分析与实战干货。</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8">
                      <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl border border-gray-100 flex flex-col group">
                                  <a href="article.php?slug=article-20250809103206">
                <img src="./assets/images/covers/article-20250809103206.jpg?v=1754747410" alt="AI驱动短视频矩阵：企业多平台运营效率提升密码" class="w-full h-48 object-cover">
            </a>
                    <div class="p-5 flex-grow">
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                2025-08-09              </span>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2 line-clamp-2">AI驱动短视频矩阵：企业多平台运营效率提升密码</h3>
            <p class="text-gray-600 mb-4 line-clamp-3 text-sm">本文深入解析AI在短视频矩阵账号管理中的应用，从内容生产自动化、账号协同智能化到数据决策精准化，结合实战案例，为企业破解多平台运营效率痛点提供指南。</p>
          </div>
          <div class="p-5 pt-0 border-t border-gray-100">
            <a href="article.php?slug=article-20250809103206" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors group-hover:translate-x-1 transform transition-transform">
              阅读全文
              <svg class="w-5 h-5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
          </div>
        </div>
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl border border-gray-100 flex flex-col group">
                                  <a href="article.php?slug=article-20250809100204">
                <img src="./assets/images/covers/article-20250809100204.jpg?v=1754747410" alt="AI驱动短视频矩阵：多平台运营效率提升密码" class="w-full h-48 object-cover">
            </a>
                    <div class="p-5 flex-grow">
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                2025-08-09              </span>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2 line-clamp-2">AI驱动短视频矩阵：多平台运营效率提升密码</h3>
            <p class="text-gray-600 mb-4 line-clamp-3 text-sm">本文深度解析AI在短视频矩阵管理中的应用，从内容生成、账号运营到数据洞察，揭秘企业如何用AI解决多平台运营痛点，实现效率提升与规模化增长。</p>
          </div>
          <div class="p-5 pt-0 border-t border-gray-100">
            <a href="article.php?slug=article-20250809100204" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors group-hover:translate-x-1 transform transition-transform">
              阅读全文
              <svg class="w-5 h-5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
          </div>
        </div>
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl border border-gray-100 flex flex-col group">
                                  <a href="article.php?slug=article-20250809100154">
                <img src="./assets/images/covers/article-20250809100154.jpg?v=1754747410" alt="AI驱动短视频矩阵：多平台运营效率新解法" class="w-full h-48 object-cover">
            </a>
                    <div class="p-5 flex-grow">
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                2025-08-09              </span>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2 line-clamp-2">AI驱动短视频矩阵：多平台运营效率新解法</h3>
            <p class="text-gray-600 mb-4 line-clamp-3 text-sm">本文深入剖析短视频矩阵运营痛点，详解AI在内容生成、账号自动化、数据整合等场景的应用，结合案例说明AI如何提升多平台运营效率，为企业提供AI驱动矩阵管理的实践指南。</p>
          </div>
          <div class="p-5 pt-0 border-t border-gray-100">
            <a href="article.php?slug=article-20250809100154" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors group-hover:translate-x-1 transform transition-transform">
              阅读全文
              <svg class="w-5 h-5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
          </div>
        </div>
                  </div>
    <div class="text-center mt-12">
        <a href="blog.php" class="text-blue-600 font-semibold hover:text-blue-800 transition-colors inline-flex items-center">
          查看所有文章
          <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
    </div>
  </div>
</section>

<!-- Final CTA Section -->
<section class="relative py-24 bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 overflow-hidden">
  <!-- 背景效果 -->
  <div class="absolute inset-0 bg-tech-pattern opacity-20"></div>
  <div class="absolute inset-0">
    <div class="tech-particles"></div>
  </div>

  <!-- 装饰元素 -->
  <div class="absolute top-10 left-10 w-32 h-32 border border-cyan-400/30 rotate-45 animate-pulse"></div>
  <div class="absolute bottom-10 right-10 w-24 h-24 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-full animate-bounce"></div>

  <div class="container mx-auto px-4 text-center relative z-10">
    <!-- 主标题 -->
    <div class="mb-8">
      <h2 class="text-5xl sm:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 mb-6 leading-tight">
        开启AI创作时代
      </h2>
      <p class="text-2xl text-blue-100 mb-4">
        准备好彻底改变您的内容创作流程了吗？
      </p>
      <p class="text-xl text-blue-200 max-w-3xl mx-auto leading-relaxed">
        加入智影矩阵，让人工智能成为您最强大的创作伙伴，
        <span class="text-cyan-400 font-semibold">体验前所未有的创作效率</span>
      </p>
    </div>

    <!-- 特性亮点 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12 max-w-4xl mx-auto">
      <div class="flex items-center justify-center space-x-3">
        <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-green-400 to-emerald-500">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <span class="text-blue-100 font-medium">零门槛上手</span>
      </div>
      <div class="flex items-center justify-center space-x-3">
        <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <span class="text-blue-100 font-medium">效率提升10倍</span>
      </div>
      <div class="flex items-center justify-center space-x-3">
        <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-purple-400 to-pink-500">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <span class="text-blue-100 font-medium">24/7 智能服务</span>
      </div>
    </div>

    <!-- CTA按钮组 -->
    <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
      <a href="http://zhinanzhen.haina2008.com" target="_blank" rel="noopener noreferrer"
         class="group relative inline-flex items-center px-12 py-4 bg-gradient-to-r from-cyan-500 via-blue-600 to-purple-600 text-white font-bold text-xl rounded-full transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-cyan-500/25 overflow-hidden">
        <span class="relative z-10">立即免费体验</span>
        <svg class="w-6 h-6 ml-3 group-hover:translate-x-1 transition-transform duration-300 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
        <div class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </a>

      <a href="features.php" class="group inline-flex items-center px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-semibold border border-white/30 rounded-full transition-all duration-300 hover:bg-white/20">
        <span>了解更多功能</span>
        <svg class="w-5 h-5 ml-2 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </a>
    </div>

    <!-- 底部提示 -->
    <p class="text-blue-300 text-sm mt-8 opacity-80">
      无需信用卡 • 即刻开始 • 专业技术支持
    </p>
  </div>
</section>

<style>
/* 科技感背景图案 */
.bg-tech-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(6, 182, 212, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16, 185, 129, 0.05) 25%, transparent 25%);
  background-size: 100px 100px, 150px 150px, 50px 50px, 50px 50px;
  animation: techPatternMove 20s ease-in-out infinite;
}

.bg-circuit-pattern {
  background-image:
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* 粒子动画 */
.tech-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(59, 130, 246, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(139, 92, 246, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(6, 182, 212, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(16, 185, 129, 0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particlesFloat 15s linear infinite;
}

.tech-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridPulse 4s ease-in-out infinite;
}

/* 数据卡片样式 */
.tech-stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.tech-stat-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* CTA按钮样式 */
.tech-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  font-weight: 600;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  overflow: hidden;
}

.tech-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.tech-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tech-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 动画定义 */
@keyframes techPatternMove {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-10px, -10px); }
  50% { transform: translate(10px, -5px); }
  75% { transform: translate(-5px, 10px); }
}

@keyframes particlesFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-100px); }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .tech-stat-card {
    padding: 16px 12px;
  }

  .tech-cta-primary,
  .tech-cta-secondary {
    padding: 10px 20px;
    font-size: 14px;
  }
}
</style>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- About Section -->
                <div>
                    <h3 class="text-xl font-bold mb-4">智影矩阵</h3>
                    <p class="text-gray-400">
                        AI赋能视频创作，矩阵号管理一站通。
                    </p>
                </div>

                <!-- Links Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="index.php" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="blog.php" class="text-gray-400 hover:text-white transition-colors">行业资讯</a></li>
                        <li><a href="help.php" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="features.php" class="text-gray-400 hover:text-white transition-colors">功能特性</a></li>
                        <li><a href="friend-links.php" class="text-gray-400 hover:text-white transition-colors">友情链接</a></li>
                        <li><a href="./sitemap.xml" class="text-gray-400 hover:text-white transition-colors">网站地图</a></li>
                    </ul>
                </div>

                <!-- Contact Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <div class="space-y-2 text-gray-400">
                        <p>客服邮箱：part-1@163.com</p>
                        <p>工作时间：周一至周五 9:00-18:00</p>
                        <div class="mt-4">
                            <div class="w-32 h-32 bg-white rounded-lg p-2 shadow-md border border-gray-200">
                                <img src="assets/images/qrcode.svg" alt="客服二维码" class="w-full h-full object-contain" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="w-full h-full bg-gray-700 rounded flex items-center justify-center" style="display: none;">
                                    <span class="text-sm text-gray-500">客服二维码</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-400 mt-2 text-center">扫码联系客服</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 友情链接区域 -->
                        <div class="border-t border-gray-700 mt-8 pt-6">
                <h3 class="text-lg font-semibold mb-4 text-center">友情链接</h3>
                <div class="flex flex-wrap justify-center gap-4">
                                            <a
                            href="https://www.baidu.com"
                            target="_blank"
                            class="text-gray-400 hover:text-white transition-colors text-sm px-2 py-1 rounded hover:bg-gray-700"
                        >
                            百度                        </a>
                                            <a
                            href="https://www.tencent.com"
                            target="_blank"
                            class="text-gray-400 hover:text-white transition-colors text-sm px-2 py-1 rounded hover:bg-gray-700"
                        >
                            腾讯                        </a>
                                            <a
                            href="https://www.alibaba.com"
                            target="_blank"
                            class="text-gray-400 hover:text-white transition-colors text-sm px-2 py-1 rounded hover:bg-gray-700"
                        >
                            阿里巴巴                        </a>
                                        <a href="friend-links.php" class="text-blue-400 hover:text-blue-300 transition-colors text-sm px-2 py-1 rounded hover:bg-gray-700">
                        更多 →
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500">
                <p>&copy; 2025 智影矩阵. All Rights Reserved.</p>
                <p class="mt-2 text-sm">冀ICP备18006008号-1</p>
            </div>
        </div>
    </footer>

    <!-- 百度统计 -->
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d4329a02e10d9db609d8e0e449b1db1f";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</body>
</html>