SMANAGE/TempLate/1

<section class="container mx-auto px-4 py-16 md:py-24 overflow-hidden">
    <div class="max-w-7xl mx-auto relative">
        <!-- 背景装饰 -->
        <div class="absolute -top-16 -left-16 w-64 h-64 bg-primary/5 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>
        <div class="absolute -bottom-24 -right-24 w-80 h-80 bg-primary/8 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>

        <!-- 顶部标题区 -->
        <div class="mb-12 md:mb-16 relative">
            <div class="flex flex-wrap items-center gap-3 mb-5">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold text-primary bg-primary/10 dark:bg-blue-900/20 dark:text-blue-300 rounded-sm border border-primary/20 dark:border-blue-500/20 tracking-wider uppercase">
                    <i class="fa fa-building text-[10px]"></i> Studio Report
                </span>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-700/50 rounded-sm border border-gray-200 dark:border-slate-600/50 tracking-wider">
                    <i class="fa fa-calendar text-[10px]"></i> 2025-10-25
                </span>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 rounded-sm border border-emerald-200 dark:border-emerald-700/30 tracking-wider">
                    <i class="fa fa-check-circle text-[10px]"></i> 已归档
                </span>
            </div>
            <h2 class="text-[clamp(1.6rem,3.5vw,2.6rem)] font-bold text-text-primary dark:text-white mb-3 leading-tight tracking-tight">
                银河锋锐软件开发工作室
                <span class="text-primary dark:text-blue-400">第六次全体会议</span>
                纪要
            </h2>
            <p class="text-gray-500 dark:text-gray-400 text-sm md:text-base max-w-3xl leading-relaxed">
                本次会议围绕 <strong class="text-text-primary dark:text-white font-semibold">15 项关键议题</strong> 展开深度讨论，全面梳理工作室现状、部门制改革方向与长期发展战略，由工作室负责人 TermiNexus 主持并发表重要讲话。
            </p>
        </div>

        <!-- 主内容区：左侧媒体 + 右侧信息 -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-10 items-start">

            <!-- 左栏：视频 + 演讲者 + 关键数据 -->
            <div class="lg:col-span-5 space-y-5">
                <!-- 视频卡片 -->
                <div class="group overflow-hidden rounded-lg border border-gray-200 dark:border-slate-700 shadow-sm hover:shadow-md dark:shadow-black/30 transition-all duration-500 card-hover">
                    <div class="aspect-video bg-gray-50 dark:bg-slate-800 flex flex-col items-center justify-center relative">
                        <div class="text-center px-6">
                            <div class="w-14 h-14 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-exclamation text-gray-400 dark:text-gray-500 text-xl"></i>
                            </div>
                            <h4 class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">媒体文件不可用</h4>
                            <p class="text-xs text-gray-400 dark:text-gray-500">录像文件已损坏或丢失，无法播放</p>
                        </div>
                        <div class="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent pointer-events-none"></div>
                    </div>
                    <div class="px-5 py-4 bg-white dark:bg-slate-800 border-t border-gray-100 dark:border-slate-700 flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-text-primary dark:text-white">会议全程录像</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">原始录制：2025-10-25 · 16:07</p>
                        </div>
                        <span class="inline-flex items-center gap-1 px-2 py-1 text-xs text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded border border-red-100 dark:border-red-800/30">
                            <i class="fa fa-times-circle text-[10px]"></i> 文件丢失
                        </span>
                    </div>
                </div>

                <!-- 主持人信息 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg p-4 flex items-center gap-4 shadow-sm">
                    <div class="w-12 h-12 rounded-full overflow-hidden border-2 border-primary/20 dark:border-blue-500/20 flex-shrink-0">
                        <img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="TermiNexus" class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs text-gray-400 dark:text-gray-500 mb-0.5 uppercase tracking-wider">主持 &amp; 主讲</p>
                        <h3 class="text-base font-bold text-text-primary dark:text-white">TermiNexus</h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400">工作室负责人 · Studio Director</p>
                    </div>
                    <div class="flex-shrink-0 text-right">
                        <p class="text-xs text-gray-400 dark:text-gray-500">会议编号</p>
                        <p class="text-sm font-mono font-bold text-primary dark:text-blue-400">#GT2025（GX-006）</p>
                    </div>
                </div>

                <!-- 关键数据面板 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm">
                    <div class="px-5 py-3 border-b border-gray-100 dark:border-slate-700 flex items-center gap-2">
                        <i class="fa fa-bar-chart text-primary dark:text-blue-400 text-sm"></i>
                        <span class="text-sm font-semibold text-text-primary dark:text-white">会议关键指标</span>
                    </div>
                    <div class="grid grid-cols-3 divide-x divide-gray-100 dark:divide-slate-700">
                        <div class="px-4 py-4 text-center">
                            <p class="text-2xl font-bold text-primary dark:text-blue-400">15</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">议题数量</p>
                        </div>
                        <div class="px-4 py-4 text-center">
                            <p class="text-2xl font-bold text-primary dark:text-blue-400">4</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">核心项目</p>
                        </div>
                        <div class="px-4 py-4 text-center">
                            <p class="text-2xl font-bold text-primary dark:text-blue-400">6</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">部门覆盖</p>
                        </div>
                    </div>
                </div>

                <!-- 查看纪要按钮 -->
                <button
                    class="w-full bg-primary hover:bg-primary/90 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-5 py-3 rounded-lg font-medium text-sm transition-all duration-300 flex items-center justify-center gap-2 shadow-sm hover:shadow-md"
                    onclick="window.open('/Activity/Meeting/6/');"
                >
                    <i class="fa fa-file-text-o"></i>
                    查看完整会议纪要
                    <i class="fa fa-arrow-right text-xs opacity-70"></i>
                </button>
            </div>

            <!-- 右栏：议题详情 -->
            <div class="lg:col-span-7 space-y-4">

                <!-- 区块标题 -->
                <div class="flex items-center gap-3 mb-2">
                    <div class="h-px flex-1 bg-gray-200 dark:bg-slate-700"></div>
                    <span class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">核心议题摘要</span>
                    <div class="h-px flex-1 bg-gray-200 dark:bg-slate-700"></div>
                </div>

                <!-- 议题卡片列表 -->
                <!-- 议题 01 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
                    <div class="flex items-stretch">
                        <div class="w-1 bg-blue-500 flex-shrink-0"></div>
                        <div class="flex-1 p-5">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">成员发展与关怀</h4>
                                <span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">01</span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">重点关注九年级成员发展，强调平衡学业、生活与工作室事务；关注成员身心健康，提醒做好冬季健康防护，体现以人为本的管理理念。</p>
                            <div class="flex flex-wrap gap-1.5 mt-3">
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 border border-blue-100 dark:border-blue-800/30">人员管理</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 border border-blue-100 dark:border-blue-800/30">成员关怀</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 议题 02 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
                    <div class="flex items-stretch">
                        <div class="w-1 bg-indigo-500 flex-shrink-0"></div>
                        <div class="flex-1 p-5">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">组织架构改革 · 金字塔制 → 部门制</h4>
                                <span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">02</span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">推进从金字塔式组委制到扁平化部门制的核心变革，明确各部门分工与职能边界。识别当前痛点：人手短缺、新部门建设滞后、执行效率不足，提出重启人才计划作为核心解决方案。</p>
                            <div class="flex flex-wrap gap-1.5 mt-3">
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-indigo-50 dark:bg-indigo-900/20 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-800/30">组织变革</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-indigo-50 dark:bg-indigo-900/20 text-indigo-500 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-800/30">架构优化</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-red-50 dark:bg-red-900/20 text-red-400 dark:text-red-400 border border-red-100 dark:border-red-800/30">人才计划</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 议题 03 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
                    <div class="flex items-stretch">
                        <div class="w-1 bg-violet-500 flex-shrink-0"></div>
                        <div class="flex-1 p-5">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">部门重建与核心职能界定</h4>
                                <span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">03</span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">系统梳理现有部门构成及缺岗情况，表彰工程部、美工部核心成员的突出贡献。明确各部门核心职能定位与跨部门协作规范，为后续规模化扩张奠定制度基础。</p>
                            <div class="flex flex-wrap gap-1.5 mt-3">
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-violet-50 dark:bg-violet-900/20 text-violet-500 dark:text-violet-400 border border-violet-100 dark:border-violet-800/30">部门建设</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-violet-50 dark:bg-violet-900/20 text-violet-500 dark:text-violet-400 border border-violet-100 dark:border-violet-800/30">协作规范</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 议题 04 -->
                <div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md dark:hover:shadow-black/30 transition-all duration-300 hover:-translate-y-0.5 card-hover">
                    <div class="flex items-stretch">
                        <div class="w-1 bg-sky-500 flex-shrink-0"></div>
                        <div class="flex-1 p-5">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <h4 class="text-sm font-bold text-text-primary dark:text-white leading-snug">品牌建设与长期战略规划</h4>
                                <span class="flex-shrink-0 text-xs font-mono text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-700 px-2 py-0.5 rounded border border-gray-100 dark:border-slate-600">04</span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">探讨工作室名称定位、商标体系与企业文化内核建设；明确项目推进分工、质量保障标准及测试机制，系统优化 GERP 任务追踪、工作复盘与成员考核机制，提出新项目精细化推进与弹性时间管理方案。</p>
                            <div class="flex flex-wrap gap-1.5 mt-3">
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">品牌战略</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">质量管理</span>
                                <span class="text-[11px] px-2 py-0.5 rounded-sm bg-sky-50 dark:bg-sky-900/20 text-sky-500 dark:text-sky-400 border border-sky-100 dark:border-sky-800/30">GERP 优化</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 更多议题提示 -->
                <div class="flex items-center gap-3 py-2">
                    <div class="h-px flex-1 bg-gray-100 dark:bg-slate-700/50"></div>
                    <button onclick="window.open('/Activity/Meeting/6/');" class="text-xs text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-blue-400 transition-colors flex items-center gap-1.5 group">
                        <i class="fa fa-ellipsis-h"></i>
                        <span>另有 10 项议题，查看完整纪要</span>
                        <i class="fa fa-long-arrow-right text-[10px] opacity-0 group-hover:opacity-100 transition-opacity"></i>
                    </button>
                    <div class="h-px flex-1 bg-gray-100 dark:bg-slate-700/50"></div>
                </div>

            </div>
        </div>

        <!-- 会议结语 · 金句区 -->
        <div class="mt-16 md:mt-24 grid grid-cols-1 md:grid-cols-2 gap-6">

            <!-- 金句一 -->
            <div class="relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-8 shadow-sm overflow-hidden">
                <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-blue-500 to-indigo-500 rounded-l-xl"></div>
                <div class="absolute -top-4 -right-4 w-24 h-24 bg-primary/5 dark:bg-blue-500/5 rounded-full blur-2xl"></div>
                <i class="fa fa-quote-left text-primary/20 dark:text-blue-400/20 text-5xl absolute top-6 right-6"></i>
                <div class="relative pl-4">
                    <p class="text-base md:text-lg font-semibold text-text-primary dark:text-white leading-relaxed mb-3 font-milky-han">
                        部门制核心是分工明确，更是心往一处想 —— 工程部铸骨，美工部赋魂。
                    </p>
                    <p class="text-sm text-gray-500 dark:text-gray-400 font-milky-han">团队的价值不止于项目成果，更在于让每个成员在成长中遇见更好的自己。</p>
                    <div class="flex items-center gap-3 mt-5 pt-4 border-t border-gray-100 dark:border-slate-700">
                        <div class="w-7 h-7 rounded-full overflow-hidden">
                            <img src="https://hb.cdn.gvsds.com/assets/members/terminexus.jpg" alt="" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-text-primary dark:text-white">TermiNexus</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500">六会金句 · 2025-10-25</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 金句二 -->
            <div class="relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-8 shadow-sm overflow-hidden">
                <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-violet-500 to-sky-500 rounded-l-xl"></div>
                <div class="absolute -top-4 -right-4 w-24 h-24 bg-violet-500/5 dark:bg-violet-500/5 rounded-full blur-2xl"></div>
                <i class="fa fa-quote-left text-violet-300/30 dark:text-violet-400/20 text-5xl absolute top-6 right-6"></i>
                <div class="relative pl-4">
                    <p class="text-base md:text-lg font-semibold text-text-primary dark:text-white leading-relaxed mb-3 font-milky-han">
                        和而不同、创新为主、以人为本
                    </p>
                    <p class="text-sm md:text-base font-medium text-primary/70 dark:text-blue-300 leading-relaxed font-playlist-script">
                        Wishing you eternal happiness and joy, and thank you for bringing vitality to the organization.
                    </p>
                    <div class="flex items-center gap-3 mt-5 pt-4 border-t border-gray-100 dark:border-slate-700">
                        <div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-star text-white text-[10px]"></i>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-text-primary dark:text-white font-milky-han">银河锋锐软件开发工作室</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500">组织寄语 · 2025-10-25</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 底部 CTA -->
        <div class="mt-10 flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-5 bg-gray-50 dark:bg-slate-800/50 border border-gray-200 dark:border-slate-700 rounded-xl">
            <div class="text-center sm:text-left">
                <p class="text-sm font-semibold text-text-primary dark:text-white">本次会议已形成正式文件</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">包含完整决议事项、部门任务分配及后续跟进计划</p>
            </div>
            <button
                class="flex-shrink-0 bg-primary hover:bg-primary/90 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 shadow-sm hover:shadow-md"
                onclick="window.open('/Activity/Meeting/6/');"
            >
                <i class="fa fa-file-text-o"></i>
                访问完整会议纪要
                <i class="fa fa-external-link text-xs opacity-70"></i>
            </button>
        </div>

    </div>
</section>

<style>
.card-hover { transition: all .35s cubic-bezier(.25, .8, .25, 1); }
.font-milky-han { font-family: "Milky Han", "PingFang SC", "Microsoft YaHei", sans-serif; }
.font-playlist-script { font-family: "Playlist Script", cursive; }
.text-text-primary { color: #1a1a1a; }
.text-primary { color: #165dff; }
.bg-primary { background-color: #165dff; }
.border-primary { border-color: #165dff; }
</style>




    <!-- 1. Anchor: 占位符 -->
    <div class="vgs-anchor" id="parallax-anchor-a">
        
        <!-- 2. Viewport: 实际视窗 -->
        <div class="vgs-viewport bg-white text-black" id="parallax-viewport-a">
            
            <!-- 3. Wrapper: 横向滚动容器 -->
            <div class="vgs-wrapper">

                <!-- Card 1: Tech (Cyan Theme) -->
                <div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
                    <!-- 艺术背景球 -->
                    <div class="absolute w-[400px] h-[400px] bg-cyan-400 rounded-full blur-[80px] opacity-80 top-[20%] left-[20%] animate-float pointer-events-none"></div>
                    
                    <h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">3D <br> Visuals</h2>
                    <p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
                        打破维度的数字建模。<br>从几何抽象到超写实渲染。
                    </p>
                </div>

                <!-- Card 2: Art (Purple Theme) -->
                <div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
                    <!-- 艺术背景变形体 -->
                    <div class="absolute w-[600px] h-[600px] bg-fuchsia-500 rounded-[40%_60%_70%_30%_/_40%_50%_60%_50%] blur-[80px] opacity-80 bottom-[-100px] right-[-100px] animate-morph pointer-events-none"></div>
                    
                    <h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">Generative <br> Art</h2>
                    <p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
                        算法生成的无限可能。<br>每一帧都是独一无二的计算。
                    </p>
                </div>

                <!-- Card 3: Energy (Orange Theme) -->
                <div class="vgs-card flex flex-col items-center justify-center relative overflow-hidden">
                    <!-- 渐变背景 -->
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-100 to-red-50 opacity-60 pointer-events-none"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-orange-500/20 to-transparent pointer-events-none"></div>

                    <h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase mix-blend-overlay leading-none tracking-tighter">Motion <br> Dynamic</h2>
                    <p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
                        赋予静态画面以生命。<br>流畅的动效设计指引视线。
                    </p>
                </div>

                <!-- Card 4: Transition (Future) -->
                <!-- 最后一张卡片，视觉上引导进入黑色区域 -->
                <div class="vgs-card flex flex-col items-center justify-center bg-white relative overflow-hidden">
                    <!-- 渐变遮罩：模拟进入下方的纯黑背景 -->
                    <div class="absolute bottom-0 left-0 w-full h-[40%] bg-gradient-to-t from-black via-black/50 to-transparent z-20 pointer-events-none"></div>
                    
                    <h2 class="relative z-10 text-6xl md:text-8xl font-black uppercase leading-none tracking-tighter mix-blend-difference text-black">The <br> Future</h2>
                    <p class="relative z-10 text-xl md:text-2xl font-light text-center max-w-[600px] mt-6 text-gray-800">
                        准备好进入深色领域了吗？
                    </p>
                </div>

            </div>
        </div>
    </div>

    <!-- =========================================
         SECTION 3: IMMERSIVE DARK TRANSITION
         纯黑部分，科技风
         ========================================= -->
    <section class="bg-black text-white py-24 md:py-32 relative z-20" id="start-journey">
        <div class="container mx-auto px-6 max-w-7xl">
            <!-- 左侧装饰线 -->
            <div class="border-l-4 border-white pl-8 mb-16">
                <h2 class="text-4xl md:text-6xl font-bold tracking-tighter">沉浸式体验</h2>
            </div>
            
            <p class="text-gray-400 text-lg max-w-2xl mb-20 leading-relaxed">
                刚刚经历了高饱和度的视觉冲击，现在让我们回归纯粹的数据流。我们为 Web3、元宇宙概念项目提供底层视觉架构。
            </p>
            
            <!-- 特性列表 -->
            <ul class="space-y-0 divide-y divide-gray-800">
                <li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
                    <span class="group-hover:text-white text-gray-300 transition-colors">WebGL 开发</span>
                    <span class="font-mono text-gray-600 text-lg">01</span>
                </li>
                <li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
                    <span class="group-hover:text-white text-gray-300 transition-colors">Shader 编程</span>
                    <span class="font-mono text-gray-600 text-lg">02</span>
                </li>
                <li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
                    <span class="group-hover:text-white text-gray-300 transition-colors">交互原型</span>
                    <span class="font-mono text-gray-600 text-lg">03</span>
                </li>
                <li class="flex justify-between items-center py-8 text-2xl md:text-3xl font-bold group cursor-pointer">
                    <span class="group-hover:text-white text-gray-300 transition-colors">音频可视化</span>
                    <span class="font-mono text-gray-600 text-lg">04</span>
                </li>
            </ul>
        </div>
    </section>

    <!-- =========================================
         SECTION 4: VGS PARALLAX B (黑色画廊)
         黑色背景，展示项目图片
         ========================================= -->
    <div class="vgs-anchor" id="parallax-anchor-b">
        <div class="vgs-viewport bg-black text-white" id="parallax-viewport-b">
            <div class="vgs-wrapper">

                <!-- Intro Card -->
                <div class="vgs-card flex flex-col items-center justify-center">
                    <h2 class="text-5xl md:text-7xl font-black uppercase mb-4 text-white">Selected <br> Works</h2>
                    <p class="text-gray-500 text-lg">向右滑动查看更多项目案例</p>
                </div>

                <!-- Work 1 -->
                <div class="vgs-card flex flex-col items-center justify-center bg-neutral-900">
                    <div class="relative w-[90vw] md:w-[60vw] h-[50vh] md:h-[60vh] overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/seed/tech1/1200/800" alt="Project 1" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 ease-out">
                        
                        <!-- 悬停显示的信息 -->
                        <div class="absolute bottom-8 left-8 z-10 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                            <h3 class="text-4xl font-bold text-white mb-2">Cyber Punk City</h3>
                            <p class="text-sm uppercase tracking-wider text-cyan-400">Concept Art / 2024</p>
                        </div>
                    </div>
                </div>

                <!-- Work 2 -->
                <div class="vgs-card flex flex-col items-center justify-center bg-neutral-900">
                    <div class="relative w-[90vw] md:w-[60vw] h-[50vh] md:h-[60vh] overflow-hidden group cursor-pointer">
                        <img src="https://picsum.photos/seed/art2/1200/800" alt="Project 2" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 ease-out">
                        
                        <div class="absolute bottom-8 left-8 z-10 translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                            <h3 class="text-4xl font-bold text-white mb-2">Fluid Sim</h3>
                            <p class="text-sm uppercase tracking-wider text-purple-400">WebGL Experiment</p>
                        </div>
                    </div>
                </div>

                <!-- CTA Card -->
                <div class="vgs-card flex flex-col items-center justify-center pb-[20vh]">
                    <h2 class="text-5xl md:text-7xl font-black uppercase mb-10 text-white">Ready To <br> Start?</h2>
                    <button class="px-12 py-5 bg-white text-black font-bold text-sm uppercase tracking-widest hover:bg-gray-200 transition-colors duration-300">
                        联系我们
                    </button>
                </div>

            </div>
        </div>
    </div>



    <!-- 补充样式：用于视差库无法完全覆盖的特定效果 -->
    <style>
        body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
        
        /* 确保图片在悬停时有平滑过渡 */
        .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
        .group:hover .group-hover\:opacity-100 { opacity: 1; }
    </style>






<script src="https://www.gvsds.com/assets/js/vgs-parallax.js"></script>
<script>
        document.addEventListener('DOMContentLoaded', () => {
            const vgs = new VGSParallax();

            // 初始化 Zone A (活力多彩区) - 3个间隔 => 3屏宽滚动
            vgs.bind('#parallax-anchor-a', '#parallax-viewport-a', {
                scrollLength: window.innerWidth * 3
            });

            // 初始化 Zone B (黑色画廊区) - 3个间隔 => 3屏宽滚动
            vgs.bind('#parallax-anchor-b', '#parallax-viewport-b', {
                scrollLength: window.innerWidth * 3
            });
        });
</script>