<template>
    <!-- ===== 1. HERO SECTION ===== -->
    <section class="hero-section relative overflow-visible">

      <!-- 背景 -->
      <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(160deg, #eef2ff 0%, #ede9fe 28%, #e8e4ff 52%, #f3e8ff 72%, #fce7f3 100%);"></div>
      <!-- 背景网格 -->
      <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle, rgba(99,102,241,0.05) 1px, transparent 1px); background-size: 36px 36px; opacity: 0.45;"></div>
      <!-- Grainy noise 纹理层 -->
      <svg class="absolute inset-0 w-full h-full pointer-events-none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.03">
        <filter id="hero-noise"><feTurbulence baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter>
        <rect width="100%" height="100%" filter="url(#hero-noise)"/>
      </svg>
      <!-- 背景光晕：沿四周边缘分布，多层叠加产生雾气涌动感 -->
      <div class="absolute inset-0 pointer-events-none overflow-hidden">
        <!-- 左上角：蓝紫主光晕 -->
        <div class="hero-orb hero-orb-1"></div>
        <!-- 右上角：粉紫主光晕 -->
        <div class="hero-orb hero-orb-2"></div>
        <!-- 顶部中央：淡蓝宽扁光晕 -->
        <div class="hero-orb hero-orb-3"></div>
        <!-- 左下角：蓝色辅助光晕 -->
        <div class="hero-orb hero-orb-4"></div>
        <!-- 右下角：粉色辅助光晕 -->
        <div class="hero-orb hero-orb-5"></div>
        <!-- 左侧竖向雾气带 -->
        <div class="hero-orb hero-orb-6"></div>
        <!-- 右侧竖向雾气带 -->
        <div class="hero-orb hero-orb-7"></div>
        <!-- 游走光晕：在雾气中若隐若现的漫射光晕 -->
        <div class="hero-aura hero-aura-1"></div>
        <div class="hero-aura hero-aura-2"></div>
        <div class="hero-aura hero-aura-3"></div>
        <div class="hero-aura hero-aura-4"></div>
        <div class="hero-aura hero-aura-5"></div>
        <div class="hero-aura hero-aura-6"></div>
      </div>

      <div class="relative z-10 max-w-screen-2xl mx-auto px-4 lg:px-8 w-full" style="flex:1; display:flex; flex-direction:column; min-height:0;">

        <!-- 顶部标题区 -->
          <div class="hero-title-section">
          <div class="hero-badge-pill hero-stagger" style="animation-delay: 0.1s;">
            <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
            全球 50,000+ 用户正在使用 · 四大顶级引擎强力支持
          </div>
          <h1 class="hero-title-wrap hero-stagger" style="animation-delay: 0.25s;">
            <span class="hero-title-line1">汇聚四大引擎</span>
            <span class="hero-title-line2">构建最强工作流体系</span>
          </h1>
        </div>

        <!-- 核心可视化区：Galaxy 布局 -->
        <div class="galaxy-viz-container" ref="galaxyVizRef">

          <!-- SVG 连接线覆盖层（绝对定位，全尺寸）-->
          <svg class="galaxy-svg" viewBox="0 0 1600 800"
               preserveAspectRatio="none"
               xmlns="http://www.w3.org/2000/svg">
            <!-- 滤镜定义 -->
            <defs>
              <filter id="line-glow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="3" result="blur"/>
                <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
              <filter id="dot-glow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="2.5" result="blur"/>
                <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>
            <!-- ===== 粒子流体连接线 v3（精确坐标，max-width 1440px 响应式）===== -->
            <!-- 隐藏路径引用 -->
            <path id="n8n-path-ref" d="M0,0" style="display:none"/>
            <path id="coze-path-ref" d="M0,0" style="display:none"/>
            <path id="dify-path-ref" d="M0,0" style="display:none"/>
            <path id="fastgpt-path-ref" d="M0,0" style="display:none"/>

            <!-- 轨迹引导线 -->
            <!-- N8N 轨迹引导线 -->
            <path data-track="n8n" d="M0,0"
                  fill="none"
                  stroke="#EA4B71"
                  stroke-width="2"
                  opacity="0.25"
                  stroke-linecap="round"
                  stroke-dasharray="6 4"/>
            <!-- COZE 轨迹引导线 -->
            <path data-track="coze" d="M0,0"
                  fill="none"
                  stroke="#8b5cf6"
                  stroke-width="2"
                  opacity="0.25"
                  stroke-linecap="round"
                  stroke-dasharray="6 4"/>
            <!-- DIFY 轨迹引导线 -->
            <path data-track="dify" d="M0,0"
                  fill="none"
                  stroke="#1C64F2"
                  stroke-width="2"
                  opacity="0.25"
                  stroke-linecap="round"
                  stroke-dasharray="6 4"/>
            <!-- FASTGPT 轨迹引导线 -->
            <path data-track="fastgpt" d="M0,0"
                  fill="none"
                  stroke="#2563EB"
                  stroke-width="2"
                  opacity="0.25"
                  stroke-linecap="round"
                  stroke-dasharray="6 4"/>

            <!-- 粒子流 -->
            <circle r="2.8" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.0s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.0s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.186s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.186s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.186s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.371s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.371s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.371s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.557s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.557s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.557s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.743s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.743s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.743s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="0.929s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="0.929s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="0.929s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="1.114s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="1.114s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="1.114s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="1.3s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="1.3s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="1.486s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="1.486s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="1.486s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="1.671s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="1.671s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="1.671s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="1.857s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="1.857s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="1.857s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="2.043s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="2.043s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="2.043s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="2.229s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="2.229s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="2.229s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#EA4B71" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.6s" begin="2.414s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.6s" begin="2.414s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.43s" begin="2.414s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="0.0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="0.0s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="0.0s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="0.221s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="0.221s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="0.221s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="0.443s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="0.443s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="0.443s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="0.664s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="0.664s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="0.664s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="0.886s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="0.886s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="0.886s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="1.107s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="1.107s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="1.107s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="1.329s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="1.329s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="1.329s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="1.55s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="1.55s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="1.55s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="1.771s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="1.771s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="1.771s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="1.993s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="1.993s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="1.993s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="2.214s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="2.214s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="2.214s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="2.436s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="2.436s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="2.436s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="2.657s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="2.657s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="2.657s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#8b5cf6" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.1s" begin="2.879s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.1s" begin="2.879s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.71s" begin="2.879s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="0.0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="0.0s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="0.0s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="0.243s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="0.243s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="0.243s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="0.486s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="0.486s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="0.486s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="0.729s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="0.729s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="0.729s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="0.971s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="0.971s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="0.971s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="1.214s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="1.214s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="1.214s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="1.457s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="1.457s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="1.457s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="1.7s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="1.7s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="1.7s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="1.943s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="1.943s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="1.943s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="2.186s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="2.186s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="2.186s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="2.429s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="2.429s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="2.429s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="2.671s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="2.671s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="2.671s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="2.914s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="2.914s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="2.914s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#1C64F2" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="3.4s" begin="3.157s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="3.4s" begin="3.157s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.87s" begin="3.157s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="0.0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="0.0s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="0.0s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="0.207s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="0.207s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="0.207s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="0.414s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="0.414s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="0.414s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="0.621s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="0.621s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="0.621s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="0.829s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="0.829s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="0.829s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="1.036s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="1.036s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="1.036s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="1.243s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="1.243s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="1.243s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="1.45s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="1.45s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="1.45s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="1.657s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="1.657s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="1.657s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="1.864s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="1.864s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="1.864s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="2.071s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="2.071s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="2.071s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="2.279s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="2.279s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="2.279s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.8" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="2.486s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="2.486s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.8;3.8;2.8"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="2.486s" repeatCount="indefinite"/>
            </circle>
            <circle r="2.0" fill="#2563EB" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.9s" begin="2.693s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;0.9;1;1;0.85;0"
                       keyTimes="0;0.08;0.2;0.8;0.92;1"
                       dur="2.9s" begin="2.693s" repeatCount="indefinite"/>
              <animate attributeName="r"
                       values="2.0;3.0;2.0"
                       keyTimes="0;0.5;1"
                       dur="1.59s" begin="2.693s" repeatCount="indefinite"/>
            </circle>

            <!-- 头部发光粒子 -->
            <circle r="3.5" fill="#fbbf24" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.08s" begin="0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#n8n-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;1;1;0"
                       keyTimes="0;0.05;0.9;1"
                       dur="2.08s" begin="0s" repeatCount="indefinite"/>
            </circle>
            <circle r="3.5" fill="#c4b5fd" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.48s" begin="0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#coze-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;1;1;0"
                       keyTimes="0;0.05;0.9;1"
                       dur="2.48s" begin="0s" repeatCount="indefinite"/>
            </circle>
            <circle r="3.5" fill="#67e8f9" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.72s" begin="0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#dify-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;1;1;0"
                       keyTimes="0;0.05;0.9;1"
                       dur="2.72s" begin="0s" repeatCount="indefinite"/>
            </circle>
            <circle r="3.5" fill="#6ee7b7" filter="url(#dot-glow)" opacity="0">
              <animateMotion dur="2.32s" begin="0s" repeatCount="indefinite" rotate="auto">
                <mpath href="#fastgpt-path-ref"/>
              </animateMotion>
              <animate attributeName="opacity"
                       values="0;1;1;0"
                       keyTimes="0;0.05;0.9;1"
                       dur="2.32s" begin="0s" repeatCount="indefinite"/>
            </circle>

            <!-- 起点节点脉冲 -->
            <circle cx="93" cy="166" r="4.5" fill="#EA4B71" filter="url(#dot-glow)">
              <animate attributeName="r" values="3.5;8;3.5" dur="2.2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.85;0.05;0.85" dur="2.2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="93" cy="501" r="4.5" fill="#1C64F2" filter="url(#dot-glow)">
              <animate attributeName="r" values="3.5;8;3.5" dur="2.2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.85;0.05;0.85" dur="2.2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="1117" cy="166" r="4.5" fill="#8b5cf6" filter="url(#dot-glow)">
              <animate attributeName="r" values="3.5;8;3.5" dur="2.2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.85;0.05;0.85" dur="2.2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="1117" cy="501" r="4.5" fill="#2563EB" filter="url(#dot-glow)">
              <animate attributeName="r" values="3.5;8;3.5" dur="2.2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.85;0.05;0.85" dur="2.2s" repeatCount="indefinite"/>
            </circle>

            <!-- 终点节点脉冲 -->
            <circle cx="351" cy="250" r="3" fill="#EA4B71" filter="url(#dot-glow)">
              <animate attributeName="r" values="2;6;2" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.7;0.05;0.7" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx="351" cy="415" r="3" fill="#1C64F2" filter="url(#dot-glow)">
              <animate attributeName="r" values="2;6;2" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.7;0.05;0.7" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx="859" cy="250" r="3" fill="#8b5cf6" filter="url(#dot-glow)">
              <animate attributeName="r" values="2;6;2" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.7;0.05;0.7" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx="859" cy="415" r="3" fill="#2563EB" filter="url(#dot-glow)">
              <animate attributeName="r" values="2;6;2" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.7;0.05;0.7" dur="2.2s" begin="0.5s" repeatCount="indefinite"/>
            </circle>

          </svg>

          <!-- ===== 四个平台节点（绝对定位，只保留图标+标题+数据）===== -->
          <!-- n8n：左上 -->
          <div class="engine-node engine-node-tl"
               :class="{'engine-node-active': activePlatform==='n8n'}"
               @mouseenter="activePlatform='n8n'" @mouseleave="activePlatform=null"
               ref="n8nCardRef">
            <div class="engine-icon-wrap" style="--brand: #EA4B71; --brand-glow: rgba(234,75,113,0.5);">
              <div class="engine-icon-ring"></div>
              <div class="engine-ripple engine-ripple-1"></div>
              <div class="engine-ripple engine-ripple-2"></div>
              <div class="engine-ripple engine-ripple-3"></div>
              <div class="engine-icon-core" style="background: white; padding: 4px;">
                <img src="@/assets/logos/n8n-official.png" alt="n8n" style="width:100%;height:100%;object-fit:contain;"/>
              </div>
            </div>
            <div class="engine-name" style="color: #EA4B71;">n8n</div>
            <div class="engine-subtitle">全球生态最强</div>
            <div class="engine-stat-badge" style="--brand: #EA4B71;">1,200+ 工作流</div>
            <div class="engine-tags">
              <span class="engine-tag" style="background: rgba(234,75,113,0.15); color: #f472b6; border-color: rgba(234,75,113,0.3);">始发免费</span>
              <span class="engine-tag" style="background: rgba(234,75,113,0.1); color: #f9a8d4; border-color: rgba(234,75,113,0.2);">8K+ 节点</span>
            </div>
          </div>

          <!-- Coze：左下 -->
          <div class="engine-node engine-node-tr"
               :class="{'engine-node-active': activePlatform==='coze'}"
               @mouseenter="activePlatform='coze'" @mouseleave="activePlatform=null"
               ref="cozeCardRef">
            <div class="engine-icon-wrap" style="--brand: #5B5BD6; --brand-glow: rgba(91,91,214,0.5);">
              <div class="engine-icon-ring"></div>
              <div class="engine-ripple engine-ripple-1"></div>
              <div class="engine-ripple engine-ripple-2"></div>
              <div class="engine-ripple engine-ripple-3"></div>
              <div class="engine-icon-core" style="background: transparent; padding: 0; overflow: hidden;">
                <img src="@/assets/logos/coze-official.png" alt="Coze" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;"/>
              </div>
            </div>
            <div class="engine-name" style="color: #8b5cf6;">Coze</div>
            <div class="engine-subtitle">国内生态第一</div>
            <div class="engine-stat-badge" style="--brand: #8b5cf6;">2,000+ 工作流</div>
            <div class="engine-tags">
              <span class="engine-tag" style="background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.3);">字节出品</span>
              <span class="engine-tag" style="background: rgba(139,92,246,0.1); color: #c4b5fd; border-color: rgba(139,92,246,0.2);">AI Bot</span>
            </div>
          </div>

          <!-- Dify：右上 -->
          <div class="engine-node engine-node-bl"
               :class="{'engine-node-active': activePlatform==='dify'}"
               @mouseenter="activePlatform='dify'" @mouseleave="activePlatform=null"
               ref="difyCardRef">
            <div class="engine-icon-wrap" style="--brand: #1C64F2; --brand-glow: rgba(28,100,242,0.5);">
              <div class="engine-icon-ring"></div>
              <div class="engine-ripple engine-ripple-1"></div>
              <div class="engine-ripple engine-ripple-2"></div>
              <div class="engine-ripple engine-ripple-3"></div>
              <div class="engine-icon-core" style="background: white; padding: 4px;">
                <img src="@/assets/logos/dify-official.png" alt="Dify" style="width:100%;height:100%;object-fit:contain;"/>
              </div>
            </div>
            <div class="engine-name" style="color: #1C64F2;">Dify</div>
            <div class="engine-subtitle">AI 集成最强</div>
            <div class="engine-stat-badge" style="--brand: #1C64F2;">2,400+ 工作流</div>
            <div class="engine-tags">
              <span class="engine-tag" style="background: rgba(28,100,242,0.15); color: #3b82f6; border-color: rgba(28,100,242,0.3);">LLM 专属</span>
              <span class="engine-tag" style="background: rgba(28,100,242,0.1); color: #60a5fa; border-color: rgba(28,100,242,0.2);">50+ 模型</span>
            </div>
          </div>

          <!-- FastGPT：右下 -->
          <div class="engine-node engine-node-br"
               :class="{'engine-node-active': activePlatform==='fastgpt'}"
               @mouseenter="activePlatform='fastgpt'" @mouseleave="activePlatform=null"
               ref="fastgptCardRef">
            <div class="engine-icon-wrap" style="--brand: #2563EB; --brand-glow: rgba(37,99,235,0.5);">
              <div class="engine-icon-ring"></div>
              <div class="engine-ripple engine-ripple-1"></div>
              <div class="engine-ripple engine-ripple-2"></div>
              <div class="engine-ripple engine-ripple-3"></div>
              <div class="engine-icon-core" style="background: white; padding: 4px;">
                <img src="@/assets/logos/fastgpt-official.png" alt="FastGPT" style="width:100%;height:100%;object-fit:contain;"/>
              </div>
            </div>
            <div class="engine-name" style="color: #2563EB;">FastGPT</div>
            <div class="engine-subtitle">专业知识库</div>
            <div class="engine-stat-badge" style="--brand: #2563EB;">1,000+ 工作流</div>
            <div class="engine-tags">
              <span class="engine-tag" style="background: rgba(37,99,235,0.15); color: #60a5fa; border-color: rgba(37,99,235,0.3);">企业首选</span>
              <span class="engine-tag" style="background: rgba(37,99,235,0.1); color: #93c5fd; border-color: rgba(37,99,235,0.2);">知识库</span>
            </div>
          </div>

          <!-- ===== 中央轮播图（横屏 16:9）===== -->
          <div class="hero-carousel" ref="hubCardRef"
               @mouseenter="carouselPaused=true" @mouseleave="carouselPaused=false">
            <!-- 顶部彩虹条 -->
            <div class="carousel-rainbow-bar"></div>

            <!-- 幻灯片容器 -->
            <div class="carousel-slides">

              <!-- 幻灯片 1：n8n 工作流 -->
              <div class="carousel-slide" :class="{active: heroSlide===0, prev: heroSlide===1}">
                <img src="/carousel/slide1-n8n.png" class="slide-img" alt="n8n AI 工作流" />
                <div class="slide-img-overlay">
                  <div class="slide-img-badge" style="background:rgba(234,75,113,0.9);">&#9889; n8n</div>
                  <div class="slide-img-title">AI Agent 智能工作流</div>
                  <div class="slide-img-desc">NocoDB 数据读取 → 条件判断 → AI Agent 处理，集成 Google Gemini 与 Structured Output</div>
                </div>
              </div>

              <!-- 幻灯片 2：Dify 工作流 -->
              <div class="carousel-slide" :class="{active: heroSlide===1, prev: heroSlide===2}">
                <img src="/carousel/slide2-dify.png" class="slide-img" alt="Dify 工作流" />
                <div class="slide-img-overlay">
                  <div class="slide-img-badge" style="background:rgba(28,100,242,0.9);">D Dify</div>
                  <div class="slide-img-title">深度研究 Agent 工作流</div>
                  <div class="slide-img-desc">意图分析 → 循环推理 → URL 提取，集成 gpt-4o 与 grok-3-beta 多模型协同</div>
                </div>
              </div>

              <!-- 幻灯片 3：Coze 工作流 -->
              <div class="carousel-slide" :class="{active: heroSlide===2, prev: heroSlide===3}">
                <img src="/carousel/slide3-coze.png" class="slide-img" alt="Coze 工作流" />
                <div class="slide-img-overlay">
                  <div class="slide-img-badge" style="background:rgba(139,92,246,0.9);">&#129302; Coze</div>
                  <div class="slide-img-title">多模态内容处理工作流</div>
                  <div class="slide-img-desc">图片/音频识别 → 大模型分析 → 语音转写，支持多种输入格式并行处理</div>
                </div>
              </div>

              <!-- 幻灯片 4：FastGPT 工作流 -->
              <div class="carousel-slide" :class="{active: heroSlide===3, prev: heroSlide===0}">
                <img src="/carousel/slide4-fastgpt.png" class="slide-img" alt="FastGPT 工作流" />
                <div class="slide-img-overlay">
                  <div class="slide-img-badge" style="background:rgba(37,99,235,0.9);">F FastGPT</div>
                  <div class="slide-img-title">企业知识库问答工作流</div>
                  <div class="slide-img-desc">问题分类 → 数据集检索 → 应用调用，支持 Sealos、FastGPT 多知识库路由</div>
                </div>
              </div>

            </div>

            <!-- 进度条 -->
            <div class="carousel-progress">
              <div class="carousel-progress-bar" :style="{width: ((heroSlide+1)/4*100)+'%'}"></div>
            </div>

            <!-- 指示器 -->
            <div class="carousel-dots" role="tablist" aria-label="轮播图导航">
              <button v-for="i in 4" :key="i"
                class="carousel-dot"
                role="tab"
                :aria-selected="heroSlide===i-1"
                :aria-label="'切换到第' + i + '张幻灯片'"
                :class="{active: heroSlide===i-1}"
                @click="heroSlide=i-1; carouselPaused=true"></button>
            </div>

            <!-- 左右箭头 -->
            <button class="carousel-arrow carousel-arrow-left" aria-label="上一张" @click="heroSlide=heroSlide>0?heroSlide-1:3; carouselPaused=true">
              <svg viewBox="0 0 24 24" fill="none" class="w-4 h-4"><path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <button class="carousel-arrow carousel-arrow-right" aria-label="下一张" @click="heroSlide=heroSlide<3?heroSlide+1:0; carouselPaused=true">
              <svg viewBox="0 0 24 24" fill="none" class="w-4 h-4"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
          </div>

        </div>

        <!-- 底部搜索框 + CTA -->
        <div class="text-center" style="flex-shrink:0; margin-top: clamp(8px, 1.5vh, 20px);">
          <!-- 大搜索框 -->
          <div class="max-w-2xl mx-auto hero-stagger" style="margin-bottom: clamp(4px, 0.8vh, 14px); animation-delay: 0.4s;">
            <div class="relative flex items-center rounded-2xl overflow-hidden hero-search-box"
                 style="background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(99,102,241,0.12), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.95);">
              <div class="flex items-center gap-2 pl-4 pr-2 flex-shrink-0">
                <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
              </div>
              <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索工作流，例如：内容创作、数据分析、客服机器人..."
                aria-label="搜索工作流"
                class="flex-1 py-3.5 text-sm text-slate-700 placeholder-slate-400 outline-none bg-transparent min-w-0"
                @keyup.enter="handleSearch"
              />
              <div class="hidden sm:flex items-center gap-1 px-2 flex-shrink-0">
                <button v-for="p in ['全部', 'n8n', 'Coze', 'Dify']" :key="p"
                  class="px-2 py-1 text-xs font-semibold rounded-lg transition-all duration-200"
                  :class="searchPlatform === p ? 'text-white shadow-sm' : 'text-slate-500 hover:bg-slate-100'"
                  :style="searchPlatform === p ? 'background: linear-gradient(135deg, #3b82f6, #6366f1);' : ''"
                  @click="searchPlatform = p">{{ p }}</button>
              </div>
              <button @click="handleSearch"
                class="m-1.5 px-4 py-2.5 text-sm font-bold text-white rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 flex-shrink-0"
                style="background: linear-gradient(135deg, #3b82f6, #6366f1);">
                搜索
              </button>
            </div>
            <!-- 热门搜索标签 -->
            <div class="flex items-center gap-2 mt-2.5 justify-center flex-wrap">
              <span class="text-xs text-slate-400">热门：</span>
              <button v-for="tag in ['AI 内容矩阵', '智能客服', '数据报告', 'FGM 客服', '邮件营销', '社媒运营']" :key="tag"
                class="px-2.5 py-1 text-xs text-slate-600 rounded-lg transition-all duration-200 cursor-pointer hover:text-blue-600"
                style="background: rgba(255,255,255,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.8);"
                @click="searchQuery = tag; handleSearch()">{{ tag }}</button>
            </div>
          </div>

          <!-- CTA 按鈕 -->
          <div class="flex items-center justify-center gap-3 flex-wrap hero-stagger" style="margin-bottom: clamp(4px, 0.8vh, 14px); animation-delay: 0.55s;">
            <button class="flex items-center gap-2 px-6 py-3 text-sm font-bold text-white rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                    style="background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
              免费创建工作流
              <svg class="w-4 h-4" 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"/></svg>
            </button>
            <button class="flex items-center gap-2 px-6 py-3 text-sm font-bold text-slate-700 rounded-xl transition-all duration-300 hover:text-blue-600 hover:shadow-md hover:-translate-y-1"
                    style="background: rgba(255,255,255,0.68); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 2px 12px rgba(0,0,0,0.06);">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h8"/></svg>
              浏览工作流市场
            </button>
          </div>

          <!-- 信任标志 -->
          <div class="flex items-center justify-center gap-6 flex-wrap hero-stagger" style="background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.75); border-radius: 999px; padding: 8px 20px; display: inline-flex; animation-delay: 0.7s;">
            <div class="flex items-center gap-2">
              <div class="flex -space-x-2">
                <div v-for="i in 5" :key="i" class="w-7 h-7 rounded-full border-2 border-white shadow-sm flex items-center justify-center text-white text-xs font-bold"
                     :style="`background: linear-gradient(135deg, hsl(${i*60}, 70%, 55%), hsl(${i*60+30}, 70%, 45%));`">
                  {{ ['李', '张', '王', '陈', '刘'][i-1] }}
                </div>
              </div>
              <div class="flex items-center gap-1">
                <div class="flex">
                  <svg v-for="s in 5" :key="s" class="w-3.5 h-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                </div>
                <span class="text-xs font-bold text-slate-700">4.9</span>
                <span class="text-xs text-slate-400">50,000+ 用户好评</span>
              </div>
            </div>
            <div class="flex items-center gap-4 text-xs text-slate-400">
              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>无需代码</span>
              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>免费开始</span>
              <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>7×24 运行</span>
            </div>
          </div>
        </div>

      </div>
    </section>

    <!-- ===== 1.5 重构后的灵动生态区 ===== -->
    <SectionAbout id="section-about" />

    <!-- ===== 1.6 AI 工作流引导区 ===== -->
    <SectionWhatIsWorkflow id="section-what-is" />

    <!-- ===== 2. 工作流演示区 ===== -->
    <SectionWorkflowDemo id="section-workflow" />

    <!-- ===== 3. 沉浸式场景轮播 ===== -->
    <SectionScenes id="section-scenes" :scenes="scenes" />

    <!-- ===== 4. Bento Grid 展台 ===== -->
    <SectionPlatforms id="section-platforms" :platforms="platforms" />

    <!-- ===== 5. 重构后的数据指挥中心 ===== -->
    <SectionStats id="section-stats" :stats="stats" />

    <!-- ===== 6. 双向流光带 ===== -->
    <SectionHotWorkflows id="section-hot" :hotWorkflows="hotWorkflows" />

    <!-- ===== 7. 智能画廊 ===== -->
    <SectionMarketplace
      id="section-marketplace"
      :displayList="displayList"
      :categories="categories"
      :activeCategory="activeCategory"
      @search="goSearchPlatform"
      @categoryChange="(id) => activeCategory = id"
      @detail="goDetail"
    />

    <!-- ===== 8. 流程点亮时间线 ===== -->
    <SectionHowItWorks id="section-how" :howItWorks="howItWorks" />

    <!-- ===== 9. 漂浮评价墙 ===== -->
    <SectionReviews id="section-reviews" :reviews="reviews" />

    <!-- ===== 10. 横向课程展架 ===== -->
    <SectionCourses id="section-courses" :courses="courses" />

    <!-- 波浪过渡: Courses → CTA -->
    <div class="section-divider" style="margin-top:-1px;">
      <svg viewBox="0 0 1440 80" preserveAspectRatio="none" style="display:block;width:100%;height:80px;">
        <defs>
          <linearGradient id="wave-to-cta" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#ede9fe"/>
            <stop offset="100%" stop-color="#fce7f3"/>
          </linearGradient>
        </defs>
        <path d="M0,20 C240,70 720,0 1200,50 C1350,65 1440,40 1440,40 L1440,80 L0,80 Z" fill="#312e81"/>
        <path d="M0,40 C360,80 720,10 1440,40 L1440,0 L0,0 Z" fill="url(#wave-to-cta)" opacity="0.3"/>
      </svg>
    </div>

    <!-- ===== 11. 星空召唤 ===== -->
    <SectionCTA id="section-cta" @start="goWorkflowAdd" />

    <!-- ===== Sticky CTA 悬浮按钮 ===== -->
    <Transition name="sticky-fade">
      <div v-if="showStickyCTA" class="sticky-cta-bar">
        <div class="sticky-cta-inner">
          <div class="sticky-cta-text">
            <span class="sticky-cta-logo">⚡</span>
            <span>暴米AI — 构建你的 AI 工作流</span>
          </div>
          <button class="sticky-cta-btn" @click="goWorkflowAdd">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            免费开始
          </button>
        </div>
      </div>
    </Transition>

    <!-- ===== 实时活动流 ===== -->
    <SectionLiveActivity />

    <!-- ===== 侧边锚点导航 ===== -->
    <nav class="side-nav" aria-label="页面导航">
      <div v-for="nav in sideNavItems" :key="nav.id"
           class="side-nav-dot"
           :class="{ active: activeSideNav === nav.id }"
           @click="scrollToSection(nav.id)">
        <span class="side-nav-tooltip">{{ nav.label }}</span>
        <span class="side-nav-circle"></span>
      </div>
    </nav>

</template>

<script setup>
import { ref, computed, inject, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { isLogin } from '@/utils/util.js';
import { useI18n } from 'vue-i18n';

import cozeLogo from '@/assets/imgs/coze.png';
import difyLogo from '@/assets/imgs/dify.png';
import n8nLogo from '@/assets/imgs/8n8.png';
import fastgptLogo from '@/assets/imgs/FastGPT.png';

import SectionAbout from './Home/SectionAbout.vue';
import SectionStats from './Home/SectionStats.vue';
import SectionPlatforms from './Home/SectionPlatforms.vue';
import SectionHotWorkflows from './Home/SectionHotWorkflows.vue';
import SectionMarketplace from './Home/SectionMarketplace.vue';
import SectionHowItWorks from './Home/SectionHowItWorks.vue';
import SectionScenes from './Home/SectionScenes.vue';
import SectionCourses from './Home/SectionCourses.vue';
import SectionReviews from './Home/SectionReviews.vue';
import SectionCTA from './Home/SectionCTA.vue';
import SectionWorkflowDemo from './Home/SectionWorkflowDemo.vue';
import SectionWhatIsWorkflow from './Home/SectionWhatIsWorkflow.vue';
import SectionLiveActivity from './Home/SectionLiveActivity.vue';

const router = useRouter();
const { t } = useI18n();
const openLoginDialog = inject('openLoginDialog');

// 当前激活的平台（用于 hover 交互）
const activePlatform = ref(null);

// 中央轮播图
const heroSlide = ref(0);
const carouselPaused = ref(false);
let heroCarouselTimer = null;

// SVG 连接线动态坐标
const galaxyVizRef = ref(null);
const n8nCardRef = ref(null);
const cozeCardRef = ref(null);
const hubCardRef = ref(null);
const difyCardRef = ref(null);
const fastgptCardRef = ref(null);



let resizeObserver = null;

// Hero 步骤
const heroSteps = ref([
  { icon: '🎯', label: '选择触发器' },
  { icon: '🔗', label: '连接节点' },
  { icon: '🤖', label: 'AI 处理' },
  { icon: '🚀', label: '自动执行' },
]);

// 节点状态
const nodeStatus = ref([
  { name: '定时触发', status: '完成' },
  { name: '数据获取', status: '完成' },
  { name: 'AI 处理', status: '运行中' },
  { name: '内容发布', status: '等待' },
]);

// 平台连接状态
const platformStatus = ref([
  { name: 'n8n', ok: true },
  { name: 'Coze', ok: true },
  { name: 'Dify', ok: true },
  { name: 'FastGPT', ok: true },
]);

// 统计数字
const stats = ref([
  { value: '10,000+', label: '工作流模板', subtitle: '覆盖内容创作、数据分析等 20+ 场景', icon: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=80&h=80&fit=crop&q=80' },
  { value: '50,000+', label: '活跃用户', subtitle: '来自全球 30+ 国家和地区的创作者', icon: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=80&h=80&fit=crop&q=80' },
  { value: '4', label: '顶级 AI 引擎', subtitle: 'n8n / Coze / Dify / FastGPT 全覆盖', icon: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=80&h=80&fit=crop&q=80' },
]);

// 平台数据
const platforms = ref([
  { name: 'n8n', logo: n8nLogo, count: '3,200', desc: '开源工作流自动化工具，支持 400+ 集成，灵活强大，适合技术团队构建复杂自动化流程。', tags: ['开源', '400+ 集成', '可视化编排'], bgFrom: '#FF6B35', bgTo: '#FF8C42', highlights: ['400+ 集成节点，覆盖主流 SaaS', '可视化编排，拖拽即用', '开源自部署，数据完全可控'], screenshot: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop&q=80' },
  { name: 'Coze', logo: cozeLogo, count: '2,800', desc: '字节跳动出品的 AI Bot 开发平台，内置丰富插件和知识库，快速构建智能对话工作流。', tags: ['AI Bot', '知识库', '插件生态'], bgFrom: '#1A73E8', bgTo: '#4285F4', highlights: ['丰富插件市场，一键接入能力', '内置知识库，支持多格式文档', '国内生态完善，合规无忧'], screenshot: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=400&fit=crop&q=80' },
  { name: 'Dify', logo: difyLogo, count: '2,400', desc: '专为 LLM 应用开发设计的平台，支持 RAG、Agent 等高级特性，开发者友好。', tags: ['LLM', 'RAG', 'Agent'], bgFrom: '#7C3AED', bgTo: '#8B5CF6', highlights: ['RAG 深度集成，知识检索精准', 'Agent 编排，复杂任务自动拆解', '多模型切换，灵活适配场景'], screenshot: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=400&fit=crop&q=80' },
  { name: 'FastGPT', logo: fastgptLogo, count: '1,600', desc: '基于 GPT 的知识库问答系统，支持私有化部署，专注企业级知识管理和智能问答。', tags: ['知识问答', '私有化', '企业级'], bgFrom: '#059669', bgTo: '#10B981', highlights: ['知识库专精，问答准确率 95%+', '私有化部署，数据安全可控', '企业级权限管理，多租户支持'], screenshot: 'https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?w=800&h=400&fit=crop&q=80' },
]);

// 热门工作流
const hotWorkflows = ref([
  { id: 1, platform: 'n8n', title: 'AI 全自动内容矩阵工作流', desc: '一键生成多平台内容，自动发布到微信公众号、小红书、抖音等，内容创作效率提升 10 倍。', price: 0, views: 18420, rating: 4.9, hot: true, image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=600&h=300&fit=crop&q=80' },
  { id: 2, platform: 'Coze', title: '智能客服全流程自动化', desc: '7×24 小时智能客服，自动处理 80% 常见问题，支持情绪识别和人工转接，大幅降低客服成本。', price: 49, views: 12300, rating: 4.8, hot: true, image: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=600&h=300&fit=crop&q=80' },
  { id: 3, platform: 'Dify', title: '企业数据分析报告生成器', desc: '自动连接数据库，智能分析数据趋势，生成精美可视化报告，支持 PDF/PPT 多格式导出。', price: 99, views: 9800, rating: 4.7, hot: false, image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=300&fit=crop&q=80' },
  { id: 4, platform: 'FastGPT', title: '代码审查与安全漏洞扫描', desc: '自动审查 PR 代码质量，检测安全漏洞，提供优化建议，支持 20+ 编程语言，无缝集成 GitHub。', price: 0, views: 14500, rating: 4.9, hot: true, image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&h=300&fit=crop&q=80' },
  { id: 5, platform: 'n8n', title: '电商全链路自动化运营', desc: '订单处理、库存管理、物流跟踪、售后服务一体化自动化，打通多平台数据，减少人工操作 90%。', price: 199, views: 7200, rating: 4.8, hot: false, image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&h=300&fit=crop&q=80' },
  { id: 6, platform: 'Coze', title: '社交媒体舆情监控系统', desc: '实时监控品牌在各平台的提及，自动分析情感倾向，生成品牌声誉报告，及时预警负面舆情。', price: 79, views: 8900, rating: 4.6, hot: false, image: 'https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=600&h=300&fit=crop&q=80' },
]);


// ===== 动态计算 SVG 连接线路径 =====

const calcSvgPaths = () => {
  const container = galaxyVizRef.value;
  if (!container) return;
  
  const svgEl = container.querySelector('.galaxy-svg');
  if (!svgEl) return;

  const containerRect = container.getBoundingClientRect();
  const cw = containerRect.width;
  const ch = containerRect.height;
  
  // 将 Galaxy 容器高度写入 CSS 变量，供轮播图高度计算使用
  document.documentElement.style.setProperty('--galaxy-h', ch + 'px');
  
  // SVG viewBox 与容器同步
  svgEl.setAttribute('viewBox', `0 0 ${cw} ${ch}`);
  
  // 获取各元素坐标（相对于容器）
  const getRelRect = (el) => {
    if (!el) return null;
    const r = el.getBoundingClientRect();
    return {
      left: r.left - containerRect.left,
      right: r.right - containerRect.left,
      top: r.top - containerRect.top,
      bottom: r.bottom - containerRect.top,
      cx: (r.left + r.right) / 2 - containerRect.left,
      cy: (r.top + r.bottom) / 2 - containerRect.top,
    };
  };

  const n8nR = getRelRect(n8nCardRef.value);
  const cozeR = getRelRect(cozeCardRef.value);
  const difyR = getRelRect(difyCardRef.value);
  const fgptR = getRelRect(fastgptCardRef.value);
  const hubR = getRelRect(hubCardRef.value);

  if (!n8nR || !hubR) return;

  // 连接点策略：从图标右/左边缘出发，连接到轮播图中心
  // 轮播图左右边缘的连接点（上下30%和70%处）
  const hubTop13 = hubR.top + (hubR.bottom - hubR.top) * 0.3;
  const hubTop23 = hubR.top + (hubR.bottom - hubR.top) * 0.7;
  // 轮播图中心点
  const hubCx = hubR.left + (hubR.right - hubR.left) * 0.5;
  const hubCy = hubR.top + (hubR.bottom - hubR.top) * 0.5;

  // 优化贝塞尔曲线：从图标右边缘中心到轮播图左边缘
  // 左侧图标：从图标右边缘中心出发，到轮播图左边缘
  const makePathFromLeft = (x1, y1, x2, y2) => {
    const dx = x2 - x1;
    // 控制点1：从起点向右延伸55%，保持起点高度
    const cp1x = x1 + dx * 0.55;
    const cp1y = y1;
    // 控制点2：到达终点前20%，保持终点高度
    const cp2x = x2 - dx * 0.20;
    const cp2y = y2;
    return `M${x1.toFixed(1)},${y1.toFixed(1)} C${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${x2.toFixed(1)},${y2.toFixed(1)}`;
  };

  // 右侧图标：从图标左边缘中心出发，到轮播图右边缘
  const makePathFromRight = (x1, y1, x2, y2) => {
    const dx = x1 - x2;
    // 控制点1：从起点向左延伸55%，保持起点高度
    const cp1x = x1 - dx * 0.55;
    const cp1y = y1;
    // 控制点2：到达终点前20%，保持终点高度
    const cp2x = x2 + dx * 0.20;
    const cp2y = y2;
    return `M${x1.toFixed(1)},${y1.toFixed(1)} C${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${x2.toFixed(1)},${y2.toFixed(1)}`;
  };

  const paths = {
    // 左侧图标（n8n 左上，dify 左下）：从图标右边缘出发，到轮播图左边缘
    n8n:     makePathFromLeft(n8nR.right,   n8nR.cy,   hubR.left,  hubTop13),
    dify:    makePathFromLeft(difyR.right,  difyR.cy,  hubR.left,  hubTop23),
    // 右侧图标（coze 右上，fastgpt 右下）：从图标左边缘出发，到轮播图右边缘
    coze:    makePathFromRight(cozeR.left,  cozeR.cy,  hubR.right, hubTop13),
    fastgpt: makePathFromRight(fgptR.left,  fgptR.cy,  hubR.right, hubTop23),
  };

  // 更新 SVG 路径
  ['n8n', 'coze', 'dify', 'fastgpt'].forEach(name => {
    const pathRef = svgEl.querySelector(`#${name}-path-ref`);
    if (pathRef) pathRef.setAttribute('d', paths[name]);
    // 更新轨迹引导线（第一个匹配的非隐藏path）
    const trackPath = svgEl.querySelector(`[data-track="${name}"]`);
    if (trackPath) trackPath.setAttribute('d', paths[name]);
  });
};

// ===== Sticky CTA + 侧边导航 =====
const showStickyCTA = ref(false);
const activeSideNav = ref('hero');
const sideNavItems = [
  { id: 'section-about', label: '平台介绍' },
  { id: 'section-workflow', label: '工作流演示' },
  { id: 'section-scenes', label: '应用场景' },
  { id: 'section-platforms', label: '引擎平台' },
  { id: 'section-stats', label: '数据统计' },
  { id: 'section-hot', label: '热门工作流' },
  { id: 'section-marketplace', label: '工作流市场' },
  { id: 'section-how', label: '使用流程' },
  { id: 'section-reviews', label: '用户评价' },
  { id: 'section-courses', label: '学习课程' },
  { id: 'section-cta', label: '立即开始' },
];

const scrollToSection = (id) => {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

let scrollHandler = null;

onMounted(async () => {
  // 英雄区轮播图自动播放（6秒切换）
  heroCarouselTimer = setInterval(() => {
    if (!carouselPaused.value) {
      heroSlide.value = heroSlide.value < 3 ? heroSlide.value + 1 : 0;
    }
  }, 6000);

  // 立即在 nextTick 后设置 --galaxy-h，确保初始渲染时轮播图高度正确
  await nextTick();
  if (galaxyVizRef.value) {
    const h = galaxyVizRef.value.getBoundingClientRect().height;
    if (h > 0) document.documentElement.style.setProperty('--galaxy-h', h + 'px');
  }

  // 初始计算 SVG 连接线坐标，等待 DOM + 字体 + 图片全部渲染完成
  // 用多次延迟确保坐标稳定
  const initSvg = () => {
    calcSvgPaths();
    if (galaxyVizRef.value) {
      resizeObserver = new ResizeObserver(() => { calcSvgPaths(); });
      resizeObserver.observe(galaxyVizRef.value);
    }
    window.addEventListener('resize', calcSvgPaths);
  };
  // 第一次：300ms（快速初始化）
  setTimeout(() => { calcSvgPaths(); }, 300);
  // 第二次：800ms（字体加载完成后）
  setTimeout(() => { calcSvgPaths(); }, 800);
  // 第三次：1500ms（图片加载完成后，最终稳定坐标）
  setTimeout(() => { initSvg(); }, 1500);

  // Sticky CTA + 侧边导航滚动监听
  scrollHandler = () => {
    const scrollY = window.scrollY;
    // Hero 区高度约 100vh，超过后显示 Sticky CTA
    showStickyCTA.value = scrollY > window.innerHeight * 0.8;

    // 更新侧边导航高亮
    const sections = sideNavItems.map(n => document.getElementById(n.id)).filter(Boolean);
    let current = 'section-about';
    for (const el of sections) {
      if (scrollY >= el.offsetTop - window.innerHeight * 0.4) {
        current = el.id;
      }
    }
    activeSideNav.value = current;
  };
  window.addEventListener('scroll', scrollHandler, { passive: true });
});
onUnmounted(() => {
  if (heroCarouselTimer) clearInterval(heroCarouselTimer);
  if (resizeObserver) resizeObserver.disconnect();
  window.removeEventListener('resize', calcSvgPaths);
  if (scrollHandler) window.removeEventListener('scroll', scrollHandler);
});

// 搜索 + 分类
const searchKeyword = ref('');
const activeCategory = ref('all');
const categories = ref([
  { id: 'all', name: '全部' }, { id: 'hot', name: '🔥 热门' }, { id: 'free', name: '🎁 免费' },
  { id: 'content', name: '内容创作' }, { id: 'data', name: '数据分析' },
  { id: 'automation', name: '自动化' }, { id: 'customer', name: '客服助手' }, { id: 'code', name: '开发工具' },
]);

const allWorkflows = ref([
  { id: 1, platform: 'n8n', title: 'AI 自动内容生成工作流', description: '基于 GPT-4 的全自动内容创作流水线，支持多平台一键发布，大幅提升内容团队生产效率。', tags: ['内容创作', 'GPT-4', '自动发布'], price: 0, views: 12840, rating: 4.9, downloads: 3200, category: 'content', coverImageUrl: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&h=300&fit=crop&q=80' },
  { id: 2, platform: 'Coze', title: '智能客服机器人搭建', description: '基于 RAG 知识库的智能客服系统，支持多轮对话、情绪识别和自动升级人工处理。', tags: ['客服', 'RAG', '知识库'], price: 29, views: 8650, rating: 4.8, downloads: 1890, category: 'customer', coverImageUrl: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=400&h=300&fit=crop&q=80' },
  { id: 3, platform: 'Dify', title: '数据分析报告自动生成', description: '连接数据库，自动抓取数据，通过 AI 分析生成可视化报告，支持 PDF/Excel 导出。', tags: ['数据分析', '可视化', '自动报告'], price: 49, views: 6320, rating: 4.7, downloads: 1240, category: 'data', coverImageUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&q=80' },
  { id: 4, platform: 'FastGPT', title: '社交媒体监控与分析', description: '实时监控多平台社交媒体提及，自动分析情感倾向，生成品牌声誉报告。', tags: ['社媒监控', '情感分析', '品牌'], price: 0, views: 9100, rating: 4.6, downloads: 2100, category: 'automation', coverImageUrl: 'https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=400&h=300&fit=crop&q=80' },
  { id: 5, platform: 'n8n', title: '电商订单自动化处理', description: '自动同步订单、更新库存、发送物流通知，打通多个电商平台，减少人工操作 90%。', tags: ['电商', '订单管理', 'ERP'], price: 99, views: 5480, rating: 4.9, downloads: 980, category: 'automation', coverImageUrl: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&q=80' },
  { id: 6, platform: 'Coze', title: 'AI 简历筛选与评估', description: '自动解析简历、匹配岗位要求，生成候选人评估报告，帮助 HR 提升招聘效率 5 倍。', tags: ['HR', '招聘', 'AI 评估'], price: 39, views: 4230, rating: 4.5, downloads: 760, category: 'automation', coverImageUrl: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=400&h=300&fit=crop&q=80' },
  { id: 7, platform: 'Dify', title: '多语言翻译与本地化', description: '支持 50+ 语言的智能翻译工作流，自动处理术语库、保持品牌语调一致性。', tags: ['翻译', '本地化', '多语言'], price: 0, views: 7890, rating: 4.8, downloads: 2340, category: 'content', coverImageUrl: 'https://images.unsplash.com/photo-1546410531-bb4caa6b424d?w=400&h=300&fit=crop&q=80' },
  { id: 8, platform: 'FastGPT', title: '代码审查与优化助手', description: '自动审查代码质量、检测安全漏洞、提供优化建议，支持 20+ 编程语言。', tags: ['代码审查', '安全', '开发效率'], price: 59, views: 11200, rating: 4.9, downloads: 3100, category: 'code', coverImageUrl: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop&q=80' },
  { id: 9, platform: 'n8n', title: '邮件营销自动化系统', description: '基于用户行为触发的智能邮件营销，个性化内容推送，打开率提升 300%。', tags: ['邮件营销', '自动化', '个性化'], price: 0, views: 6700, rating: 4.7, downloads: 1800, category: 'automation', coverImageUrl: 'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=400&h=300&fit=crop&q=80' },
  { id: 10, platform: 'Coze', title: 'AI 视频脚本创作助手', description: '输入主题，自动生成完整视频脚本，包含开场、正文、结尾和 CTA，适配各平台风格。', tags: ['视频脚本', 'AI 创作', '短视频'], price: 29, views: 15300, rating: 4.8, downloads: 4200, category: 'content', coverImageUrl: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop&q=80' },
  { id: 11, platform: 'Dify', title: '财务报表智能分析', description: '上传财务报表，AI 自动分析关键指标，识别风险点，生成管理层摘要报告。', tags: ['财务', '数据分析', '风险识别'], price: 149, views: 3900, rating: 4.6, downloads: 620, category: 'data', coverImageUrl: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=400&h=300&fit=crop&q=80' },
  { id: 12, platform: 'FastGPT', title: '产品需求文档生成器', description: '输入产品想法，AI 自动生成完整 PRD，包含用户故事、功能规格、验收标准等。', tags: ['产品管理', 'PRD', '需求分析'], price: 0, views: 8400, rating: 4.7, downloads: 2600, category: 'automation', coverImageUrl: 'https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?w=400&h=300&fit=crop&q=80' },
]);

const displayList = computed(() => {
  let list = allWorkflows.value;
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase();
    list = list.filter(item => item.title.toLowerCase().includes(kw) || item.tags.some(t => t.toLowerCase().includes(kw)));
  }
  if (activeCategory.value !== 'all') {
    if (activeCategory.value === 'hot') list = [...list].sort((a, b) => b.views - a.views).slice(0, 8);
    else if (activeCategory.value === 'free') list = list.filter(item => item.price === 0);
    else list = list.filter(item => item.category === activeCategory.value);
  }
  return list;
});

// 工作原理步骤
const howItWorks = ref([
  { icon: '🎯', title: '选择或创建工作流', desc: '从 10,000+ 模板中选择，或从零开始拖拽节点构建你的专属自动化工作流。支持触发器、条件判断、循环等所有逻辑节点。', color1: '#3B82F6', color2: '#6366F1', nodes: ['触发', '条件', '循环'], image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=200&fit=crop&q=80', detail: '从 10,000+ 模板中选择，或从零开始拖拽构建。', stat: '8,000+ 用户已通过此步骤创建工作流' },
  { icon: '🤖', title: '配置 AI 节点', desc: '接入 Coze、Dify、n8n、FastGPT 的 AI 能力，配置 GPT-4、Claude 等大模型，让 AI 在工作流中自动处理复杂任务。', color1: '#8B5CF6', color2: '#EC4899', nodes: ['GPT-4', 'Claude', 'Dify'], image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&h=200&fit=crop&q=80', detail: '一键接入四大引擎的 AI 能力，零代码配置。', stat: '平均每个工作流使用 3.2 个 AI 节点' },
  { icon: '🚀', title: '一键部署运行', desc: '工作流构建完成后，一键部署到云端。支持定时触发、Webhook 触发、手动触发等多种方式，7×24 小时不间断运行。', color1: '#10B981', color2: '#06B6D4', nodes: ['定时', 'Webhook', '手动'], image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=200&fit=crop&q=80', detail: '一键部署到云端，支持多种触发方式。', stat: '99.9% 运行可用性，日均处理 100 万+ 任务' },
]);

// 使用场景
const activeScene = ref('content');
const scenes = ref([
  { id: 'content', name: '内容创作', icon: '✍️', color1: '#3B82F6', color2: '#8B5CF6', title: '让 AI 成为您的内容创作引擎', desc: '从选题、撰写到发布，全流程 AI 自动化，内容创作效率提升 10 倍，让您专注于创意本身。', points: ['一键生成多平台适配内容', '自动同步发布到微信/小红书/抖音', 'AI 智能配图和排版优化', '内容数据分析与优化建议'], image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=800&h=500&fit=crop&q=80', stat: '10x', statLabel: '内容产出效率提升' },
  { id: 'data', name: '数据分析', icon: '📊', color1: '#0EA5E9', color2: '#06B6D4', title: '数据驱动决策，AI 自动洞察', desc: '连接多数据源，自动清洗、分析、可视化，生成专业报告，让数据真正驱动业务决策。', points: ['自动连接数据库和 API 数据源', '智能数据清洗和异常检测', '自动生成可视化图表和报告', '定时推送数据洞察到团队'], image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&q=80', stat: '80%', statLabel: '数据分析时间节省' },
  { id: 'customer', name: '客服运营', icon: '🎧', color1: '#10B981', color2: '#059669', title: '7×24 小时智能客服，永不疲倦', desc: '基于知识库的 AI 客服自动处理 80% 常见问题，复杂问题智能转人工，大幅降低客服成本。', points: ['自动回复常见问题，响应时间 < 1 秒', '情绪识别，负面情绪自动升级人工', '多渠道统一管理（微信/邮件/电话）', '客服数据分析和质量评估'], image: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=800&h=500&fit=crop&q=80', stat: '80%', statLabel: '客服问题自动处理率' },
  { id: 'code', name: '开发效率', icon: '💻', color1: '#F59E0B', color2: '#EF4444', title: 'AI 赋能开发团队，效率倍增', desc: '自动化代码审查、测试、部署流程，AI 辅助编写文档和测试用例，让开发团队专注于核心创新。', points: ['PR 自动代码审查和安全扫描', 'AI 自动生成单元测试用例', '智能文档生成和更新', 'CI/CD 流程自动化优化'], image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=500&fit=crop&q=80', stat: '5x', statLabel: '开发部署效率提升' },
]);

// 学习课程
const courses = ref([
  { id: 1, platform: 'n8n', title: 'n8n 从零到精通：构建企业级自动化工作流', desc: '系统学习 n8n 的核心概念和高级用法，从简单自动化到复杂企业级工作流的完整实战教程。', level: '初级', duration: '8 小时', students: 12400, rating: 4.9, reviews: 1280, price: 0, color1: '#FF6B35', color2: '#FF8C42', image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop&q=80' },
  { id: 2, platform: 'Coze', title: 'Coze AI Bot 开发实战：打造专属智能助手', desc: '从 Bot 创建到高级插件开发，学习如何利用 Coze 平台构建功能强大的 AI 智能助手。', level: '中级', duration: '12 小时', students: 8900, rating: 4.8, reviews: 890, price: 99, color1: '#1A73E8', color2: '#4285F4', image: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&h=300&fit=crop&q=80' },
  { id: 3, platform: 'Dify', title: 'Dify LLM 应用开发：RAG 与 Agent 实战', desc: '深入学习 Dify 平台的 RAG 知识库构建和 Agent 开发，打造企业级 AI 应用。', level: '高级', duration: '15 小时', students: 6200, rating: 4.7, reviews: 620, price: 149, color1: '#7C3AED', color2: '#8B5CF6', image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&q=80' },
  { id: 4, platform: 'FastGPT', title: 'FastGPT 企业知识库搭建与私有化部署', desc: '学习如何使用 FastGPT 构建企业私有知识库，实现安全、高效的内部知识管理系统。', level: '中级', duration: '10 小时', students: 4800, rating: 4.8, reviews: 480, price: 0, color1: '#059669', color2: '#10B981', image: 'https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?w=400&h=300&fit=crop&q=80' },
  { id: 5, platform: 'n8n', title: 'AI 工作流商业化：从创作到变现', desc: '学习如何将 AI 工作流包装成产品，在平台上销售变现，打造被动收入流。', level: '中级', duration: '6 小时', students: 9300, rating: 4.9, reviews: 930, price: 79, color1: '#F59E0B', color2: '#EF4444', image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&q=80' },
  { id: 6, platform: 'Dify', title: '多模态 AI 工作流：图文音视频一体化', desc: '探索 AI 在图像识别、语音处理、视频分析等多模态场景下的工作流构建方法。', level: '高级', duration: '18 小时', students: 3600, rating: 4.7, reviews: 360, price: 199, color1: '#EC4899', color2: '#F43F5E', image: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop&q=80' },
]);

// 用户评价
const reviews = ref([
  { id: 1, name: '张明远', role: '产品经理', company: '某互联网公司', platform: 'n8n', content: '用了这个平台之后，我们团队的内容生产效率直接翻了 5 倍。以前需要 3 个人做的事情，现在 1 个人配合工作流就搞定了，真的太香了！', avatar: 'https://i.pravatar.cc/80?img=11', companyLogo: 'https://i.pravatar.cc/40?img=60' },
  { id: 2, name: '李晓雯', role: '运营总监', company: '电商品牌', platform: 'Coze', content: '客服工作流帮我们节省了大量人力成本，80% 的常见问题都能自动回复，客户满意度反而提升了，因为响应速度更快了。', avatar: 'https://i.pravatar.cc/80?img=5', companyLogo: 'https://i.pravatar.cc/40?img=61' },
  { id: 3, name: '王建国', role: '数据分析师', company: '金融科技公司', platform: 'Dify', content: '数据报告生成工作流简直是神器！以前每周要花 2 天做报告，现在 30 分钟搞定，而且质量更好，领导非常满意。', avatar: 'https://i.pravatar.cc/80?img=15', companyLogo: 'https://i.pravatar.cc/40?img=62' },
  { id: 4, name: '陈思远', role: '独立开发者', company: '自由职业', platform: 'FastGPT', content: '在这里买了几个工作流，直接用到了客户项目里，省了我大量开发时间。平台的工作流质量很高，文档也很详细。', avatar: 'https://i.pravatar.cc/80?img=8', companyLogo: 'https://i.pravatar.cc/40?img=63' },
  { id: 5, name: '刘美华', role: 'CEO', company: '创业公司', platform: 'n8n', content: '作为小团队，AI 工作流让我们能以大公司的效率运转。特别是内容创作和客户管理的自动化，帮我们节省了至少 3 个人力。', avatar: 'https://i.pravatar.cc/80?img=20', companyLogo: 'https://i.pravatar.cc/40?img=64' },
  { id: 6, name: '赵志强', role: '技术总监', company: '软件公司', platform: 'Dify', content: '代码审查工作流帮我们团队发现了很多潜在 bug，安全扫描功能也很实用。现在代码质量明显提升，上线事故减少了 70%。', avatar: 'https://i.pravatar.cc/80?img=25', companyLogo: 'https://i.pravatar.cc/40?img=65' },
]);

// Hero 搜索
const searchQuery = ref('');
const searchPlatform = ref('全部');
const handleSearch = () => { if (searchQuery.value) goSearchPlatform(); };

// 跳转方法
const goSearchPlatform = () => { router.push({ path: '/search-platform', query: { workflowTitle: searchQuery.value || searchKeyword.value } }); };
const goWorkflowAdd = () => {
  if (!isLogin({ callback: openLoginDialog, t })) return;
  router.push({ path: 'workflow-add' });
};
const goDetail = (item) => { router.push({ path: `/workflow-detail/${item.id}` }); };
</script>

<style scoped>
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 3s ease-in-out infinite; }

/* ===== 光晕系统：沿四周边缘，超大尺寸+极高模糊+多层叠加+雾气涌动 ===== */

/* --- Keyframes --- */

/* 左上角：向右下内侧缓慢涌动 + 呼吸放大缩小 */
@keyframes orb-flow-1 {
  0%   { transform: translate(0,0) scale(1);           border-radius: 60% 40% 35% 65% / 55% 35% 65% 45%; opacity: 0.90; }
  20%  { transform: translate(3vw, 2vh) scale(1.18);   border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; opacity: 1.00; }
  40%  { transform: translate(5vw, 5vh) scale(0.82);   border-radius: 45% 55% 55% 45% / 45% 55% 45% 55%; opacity: 0.75; }
  60%  { transform: translate(3vw, 7vh) scale(1.12);   border-radius: 65% 35% 45% 55% / 35% 65% 55% 45%; opacity: 0.95; }
  80%  { transform: translate(1vw, 3vh) scale(0.88);   border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; opacity: 0.80; }
  100% { transform: translate(0,0) scale(1);           border-radius: 60% 40% 35% 65% / 55% 35% 65% 45%; opacity: 0.90; }
}

/* 右上角：向左下内侧缓慢涌动 + 呼吸放大缩小 */
@keyframes orb-flow-2 {
  0%   { transform: translate(0,0) scale(1);            border-radius: 40% 60% 65% 35% / 45% 65% 35% 55%; opacity: 0.88; }
  25%  { transform: translate(-4vw, 3vh) scale(0.80);   border-radius: 60% 40% 45% 55% / 55% 45% 55% 45%; opacity: 0.72; }
  50%  { transform: translate(-6vw, 6vh) scale(1.20);   border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%; opacity: 1.00; }
  75%  { transform: translate(-2vw, 4vh) scale(0.86);   border-radius: 45% 55% 50% 50% / 50% 50% 60% 40%; opacity: 0.78; }
  100% { transform: translate(0,0) scale(1);            border-radius: 40% 60% 65% 35% / 45% 65% 35% 55%; opacity: 0.88; }
}

/* 顶部中央：向下轻微涌动 + 呼吸放大缩小 */
@keyframes orb-flow-3 {
  0%   { transform: translateX(-50%) translate(0,0) scale(1);           border-radius: 50% 50% 60% 40% / 40% 40% 60% 60%; opacity: 0.75; }
  25%  { transform: translateX(-50%) translate(3vw, 2vh) scale(1.22);   border-radius: 60% 40% 50% 50% / 50% 40% 50% 60%; opacity: 0.95; }
  50%  { transform: translateX(-50%) translate(-2vw, 5vh) scale(0.78);  border-radius: 40% 60% 60% 40% / 40% 60% 60% 40%; opacity: 0.65; }
  75%  { transform: translateX(-50%) translate(4vw, 3vh) scale(1.15);   border-radius: 55% 45% 45% 55% / 45% 55% 55% 45%; opacity: 0.88; }
  100% { transform: translateX(-50%) translate(0,0) scale(1);           border-radius: 50% 50% 60% 40% / 40% 40% 60% 60%; opacity: 0.75; }
}

/* 左下角：向右上内侧缓慢涌动 + 呼吸放大缩小 */
@keyframes orb-flow-4 {
  0%   { transform: translate(0,0) scale(1);            border-radius: 65% 35% 55% 45% / 35% 55% 45% 65%; opacity: 0.85; }
  22%  { transform: translate(4vw, -3vh) scale(1.25);   border-radius: 45% 55% 35% 65% / 55% 35% 65% 45%; opacity: 1.00; }
  45%  { transform: translate(6vw, -6vh) scale(0.78);   border-radius: 55% 45% 65% 35% / 45% 65% 35% 55%; opacity: 0.70; }
  68%  { transform: translate(3vw, -4vh) scale(1.15);   border-radius: 60% 40% 50% 50% / 50% 50% 55% 45%; opacity: 0.92; }
  100% { transform: translate(0,0) scale(1);            border-radius: 65% 35% 55% 45% / 35% 55% 45% 65%; opacity: 0.85; }
}

/* 右下角：向左上内侧缓慢涌动 + 呼吸放大缩小 */
@keyframes orb-flow-5 {
  0%   { transform: translate(0,0) scale(1);             border-radius: 35% 65% 45% 55% / 65% 45% 55% 35%; opacity: 0.85; }
  28%  { transform: translate(-4vw, -3vh) scale(0.76);   border-radius: 55% 45% 65% 35% / 45% 65% 35% 55%; opacity: 0.68; }
  52%  { transform: translate(-6vw, -6vh) scale(1.24);   border-radius: 45% 55% 35% 65% / 55% 35% 65% 45%; opacity: 1.00; }
  76%  { transform: translate(-3vw, -4vh) scale(0.90);   border-radius: 60% 40% 55% 45% / 40% 60% 45% 55%; opacity: 0.80; }
  100% { transform: translate(0,0) scale(1);             border-radius: 35% 65% 45% 55% / 65% 45% 55% 35%; opacity: 0.85; }
}

/* 左侧竖向雾气带：上下缓慢飘动 + 呼吸放大缩小 */
@keyframes orb-flow-6 {
  0%   { transform: translate(0, 0) scale(1);           opacity: 0.55; }
  30%  { transform: translate(3vw, -6vh) scale(1.28);   opacity: 0.78; }
  60%  { transform: translate(1vw, -10vh) scale(0.75);  opacity: 0.42; }
  100% { transform: translate(0, 0) scale(1);           opacity: 0.55; }
}

/* 右侧竖向雾气带：上下缓慢飘动 + 呼吸放大缩小 */
@keyframes orb-flow-7 {
  0%   { transform: translate(0, 0) scale(1);            opacity: 0.50; }
  35%  { transform: translate(-3vw, 7vh) scale(0.72);    opacity: 0.38; }
  70%  { transform: translate(-1vw, 10vh) scale(1.30);   opacity: 0.75; }
  100% { transform: translate(0, 0) scale(1);            opacity: 0.50; }
}

/* --- 公共属性 --- */
.hero-orb {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, border-radius;
}

/* 光晕1：左上角，超大圆形，大量溢出边缘 */
.hero-orb-1 {
  top: -15vh;
  left: -15vw;
  width: clamp(500px, 55vw, 900px);
  height: clamp(500px, 55vw, 900px);
  background: radial-gradient(circle at 35% 35%,
    rgba(99,102,241,0.60) 0%,
    rgba(59,130,246,0.35) 30%,
    rgba(147,197,253,0.15) 55%,
    transparent 72%);
  filter: blur(clamp(60px, 8vw, 160px));
  animation: orb-flow-1 22s ease-in-out infinite alternate;
  animation-delay: -5s;
}

/* 光晕2：右上角，超大圆形，大量溢出边缘 */
.hero-orb-2 {
  top: -15vh;
  right: -15vw;
  width: clamp(480px, 52vw, 860px);
  height: clamp(480px, 52vw, 860px);
  background: radial-gradient(circle at 65% 35%,
    rgba(236,72,153,0.55) 0%,
    rgba(192,132,252,0.32) 30%,
    rgba(216,180,254,0.14) 55%,
    transparent 72%);
  filter: blur(clamp(60px, 8vw, 160px));
  animation: orb-flow-2 28s ease-in-out infinite alternate;
  animation-delay: -12s;
}

/* 光晕3：顶部中央，宽扁椭圆，沿顶边蔓延 */
.hero-orb-3 {
  top: -10vh;
  left: 50%;
  width: clamp(400px, 60vw, 1000px);
  height: clamp(200px, 25vw, 420px);
  background: radial-gradient(ellipse at center top,
    rgba(147,197,253,0.35) 0%,
    rgba(99,102,241,0.18) 40%,
    transparent 70%);
  filter: blur(clamp(50px, 7vw, 140px));
  animation: orb-flow-3 20s ease-in-out infinite alternate;
  animation-delay: -8s;
}

/* 光晕4：左下角，超大圆形，大量溢出边缘 */
.hero-orb-4 {
  bottom: -15vh;
  left: -15vw;
  width: clamp(400px, 45vw, 760px);
  height: clamp(400px, 45vw, 760px);
  background: radial-gradient(circle at 30% 65%,
    rgba(59,130,246,0.50) 0%,
    rgba(99,102,241,0.25) 35%,
    rgba(147,197,253,0.10) 60%,
    transparent 75%);
  filter: blur(clamp(55px, 7vw, 140px));
  animation: orb-flow-4 26s ease-in-out infinite alternate;
  animation-delay: -18s;
}

/* 光晕5：右下角，超大圆形，大量溢出边缘 */
.hero-orb-5 {
  bottom: -15vh;
  right: -15vw;
  width: clamp(420px, 47vw, 780px);
  height: clamp(420px, 47vw, 780px);
  background: radial-gradient(circle at 70% 65%,
    rgba(244,114,182,0.50) 0%,
    rgba(192,132,252,0.25) 35%,
    rgba(216,180,254,0.10) 60%,
    transparent 75%);
  filter: blur(clamp(55px, 7vw, 140px));
  animation: orb-flow-5 32s ease-in-out infinite alternate;
  animation-delay: -22s;
}

/* 光晕6：左侧竖向雾气带，极宽扁，沿左边缘蔓延 */
.hero-orb-6 {
  top: 5%;
  left: -30vw;
  width: clamp(350px, 50vw, 800px);
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 25% 50%,
    rgba(99,102,241,0.22) 0%,
    rgba(147,197,253,0.12) 40%,
    transparent 68%);
  filter: blur(clamp(70px, 10vw, 200px));
  animation: orb-flow-6 38s ease-in-out infinite alternate;
  animation-delay: -15s;
}

/* 光晕7：右侧竖向雾气带，极宽扁，沿右边缘蔓延 */
.hero-orb-7 {
  top: 5%;
  right: -30vw;
  width: clamp(350px, 50vw, 800px);
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 75% 50%,
    rgba(236,72,153,0.20) 0%,
    rgba(192,132,252,0.12) 40%,
    transparent 68%);
  filter: blur(clamp(70px, 10vw, 200px));
  animation: orb-flow-7 44s ease-in-out infinite alternate;
  animation-delay: -28s;
}

/* ===== 游走光晕系统：无边界漫射光晕，在雾气中若隐若现 ===== */
/*
 * 设计原则（Gemini 建议）：
 * - 无白色亮点中心：radial-gradient 从色彩直接过渡到 transparent
 * - 极大 blur：clamp(30px, 4vw, 80px)，消除所有边界感
 * - 尺寸较大：clamp(120px, 15vw, 280px)，光晕而非光点
 * - 低 opacity：0.0 ~ 0.55，若隐若现
 * - 游走路径：多关键帧 translate，模拟贝塞尔曲线感
 */

/* --- 游走路径 keyframes --- */

@keyframes aura-wander-1 {
  0%   { transform: translate(0, 0) scale(1);           opacity: 0; }
  12%  { opacity: 0.50; }
  28%  { transform: translate(7vw, 4vh) scale(1.2);     opacity: 0.35; }
  45%  { transform: translate(4vw, 10vh) scale(0.85);   opacity: 0.52; }
  62%  { transform: translate(10vw, 6vh) scale(1.1);    opacity: 0.28; }
  78%  { transform: translate(6vw, 13vh) scale(0.9);    opacity: 0.45; }
  90%  { opacity: 0.10; }
  100% { transform: translate(0, 0) scale(1);           opacity: 0; }
}

@keyframes aura-wander-2 {
  0%   { transform: translate(0, 0) scale(1);            opacity: 0; }
  10%  { opacity: 0.45; }
  25%  { transform: translate(-6vw, 7vh) scale(1.3);     opacity: 0.30; }
  42%  { transform: translate(-10vw, 3vh) scale(0.80);   opacity: 0.50; }
  58%  { transform: translate(-5vw, 11vh) scale(1.15);   opacity: 0.25; }
  74%  { transform: translate(-9vw, 7vh) scale(0.95);    opacity: 0.42; }
  88%  { opacity: 0.08; }
  100% { transform: translate(0, 0) scale(1);            opacity: 0; }
}

@keyframes aura-wander-3 {
  0%   { transform: translate(0, 0) scale(1);            opacity: 0; }
  14%  { opacity: 0.55; }
  30%  { transform: translate(4vw, -7vh) scale(1.25);    opacity: 0.38; }
  48%  { transform: translate(9vw, -3vh) scale(0.78);    opacity: 0.52; }
  65%  { transform: translate(5vw, -10vh) scale(1.18);   opacity: 0.22; }
  80%  { transform: translate(11vw, -6vh) scale(0.88);   opacity: 0.48; }
  92%  { opacity: 0.12; }
  100% { transform: translate(0, 0) scale(1);            opacity: 0; }
}

@keyframes aura-wander-4 {
  0%   { transform: translate(0, 0) scale(1);             opacity: 0; }
  8%   { opacity: 0.42; }
  22%  { transform: translate(-5vw, -8vh) scale(1.2);     opacity: 0.32; }
  40%  { transform: translate(-11vw, -4vh) scale(0.82);   opacity: 0.48; }
  57%  { transform: translate(-7vw, -12vh) scale(1.1);    opacity: 0.20; }
  73%  { transform: translate(-13vw, -8vh) scale(0.92);   opacity: 0.40; }
  88%  { opacity: 0.06; }
  100% { transform: translate(0, 0) scale(1);             opacity: 0; }
}

@keyframes aura-wander-5 {
  0%   { transform: translate(0, 0) scale(1);             opacity: 0; }
  15%  { opacity: 0.48; }
  32%  { transform: translate(12vw, 2vh) scale(1.35);     opacity: 0.38; }
  50%  { transform: translate(8vw, 8vh) scale(0.75);      opacity: 0.52; }
  68%  { transform: translate(15vw, 4vh) scale(1.2);      opacity: 0.22; }
  84%  { transform: translate(10vw, 10vh) scale(0.90);    opacity: 0.40; }
  94%  { opacity: 0.08; }
  100% { transform: translate(0, 0) scale(1);             opacity: 0; }
}

@keyframes aura-wander-6 {
  0%   { transform: translate(0, 0) scale(1);              opacity: 0; }
  11%  { opacity: 0.50; }
  27%  { transform: translate(-11vw, 3vh) scale(1.28);     opacity: 0.35; }
  44%  { transform: translate(-7vw, 9vh) scale(0.80);      opacity: 0.50; }
  61%  { transform: translate(-14vw, 5vh) scale(1.15);     opacity: 0.20; }
  77%  { transform: translate(-9vw, 12vh) scale(0.88);     opacity: 0.42; }
  91%  { opacity: 0.10; }
  100% { transform: translate(0, 0) scale(1);              opacity: 0; }
}

/* --- 游走光晕公共样式 --- */
.hero-aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}

/* 光晕1：左上区域，蓝紫色漫射光晕 */
.hero-aura-1 {
  top: 4%;
  left: 2%;
  width: clamp(140px, 18vw, 300px);
  height: clamp(120px, 15vw, 260px);
  background: radial-gradient(ellipse at 45% 45%,
    rgba(99, 102, 241, 0.55) 0%,
    rgba(99, 102, 241, 0.30) 25%,
    rgba(147, 197, 253, 0.15) 50%,
    rgba(147, 197, 253, 0.05) 70%,
    transparent 100%);
  filter: blur(clamp(32px, 4vw, 75px));
  animation: aura-wander-1 18s ease-in-out infinite;
  animation-delay: -4s;
}

/* 光晕2：右上区域，粉紫色漫射光晕 */
.hero-aura-2 {
  top: 6%;
  right: 3%;
  width: clamp(150px, 19vw, 320px);
  height: clamp(130px, 16vw, 280px);
  background: radial-gradient(ellipse at 55% 45%,
    rgba(192, 132, 252, 0.52) 0%,
    rgba(236, 72, 153, 0.28) 25%,
    rgba(244, 114, 182, 0.14) 50%,
    rgba(216, 180, 254, 0.05) 70%,
    transparent 100%);
  filter: blur(clamp(34px, 4.2vw, 78px));
  animation: aura-wander-2 22s ease-in-out infinite;
  animation-delay: -9s;
}

/* 光晕3：左下区域，蓝色漫射光晕 */
.hero-aura-3 {
  bottom: 8%;
  left: 4%;
  width: clamp(120px, 16vw, 270px);
  height: clamp(110px, 14vw, 240px);
  background: radial-gradient(ellipse at 42% 55%,
    rgba(59, 130, 246, 0.50) 0%,
    rgba(99, 102, 241, 0.25) 28%,
    rgba(147, 197, 253, 0.12) 52%,
    rgba(147, 197, 253, 0.04) 72%,
    transparent 100%);
  filter: blur(clamp(30px, 3.8vw, 70px));
  animation: aura-wander-3 20s ease-in-out infinite;
  animation-delay: -14s;
}

/* 光晕4：右下区域，粉色漫射光晕 */
.hero-aura-4 {
  bottom: 10%;
  right: 2%;
  width: clamp(130px, 17vw, 290px);
  height: clamp(120px, 15vw, 260px);
  background: radial-gradient(ellipse at 58% 55%,
    rgba(244, 114, 182, 0.50) 0%,
    rgba(192, 132, 252, 0.26) 28%,
    rgba(216, 180, 254, 0.12) 52%,
    rgba(216, 180, 254, 0.04) 72%,
    transparent 100%);
  filter: blur(clamp(32px, 4vw, 74px));
  animation: aura-wander-4 25s ease-in-out infinite;
  animation-delay: -7s;
}

/* 光晕5：右侧中部，紫色漫射光晕，稍大 */
.hero-aura-5 {
  top: 30%;
  right: 1%;
  width: clamp(160px, 20vw, 340px);
  height: clamp(140px, 18vw, 300px);
  background: radial-gradient(ellipse at 60% 50%,
    rgba(139, 92, 246, 0.48) 0%,
    rgba(192, 132, 252, 0.24) 28%,
    rgba(216, 180, 254, 0.10) 55%,
    rgba(216, 180, 254, 0.03) 75%,
    transparent 100%);
  filter: blur(clamp(36px, 4.5vw, 85px));
  animation: aura-wander-5 28s ease-in-out infinite;
  animation-delay: -18s;
}

/* 光晕6：左侧中部，蓝紫色漫射光晕，稍大 */
.hero-aura-6 {
  top: 28%;
  left: 0%;
  width: clamp(155px, 19vw, 330px);
  height: clamp(135px, 17vw, 290px);
  background: radial-gradient(ellipse at 40% 50%,
    rgba(99, 102, 241, 0.46) 0%,
    rgba(59, 130, 246, 0.22) 28%,
    rgba(147, 197, 253, 0.10) 55%,
    rgba(147, 197, 253, 0.03) 75%,
    transparent 100%);
  filter: blur(clamp(35px, 4.3vw, 82px));
  animation: aura-wander-6 32s ease-in-out infinite;
  animation-delay: -22s;
}

/* ===== 标题流光效果：两行共享同一道斜向流光 ===== */
/*
  原理（Gemini 方案）：
  - 两行使用完全相同的 background-size: 500% 100%
  - 光束在渐变中的位置百分比相同（均在 42%~58% 处）
  - 两行使用同一个 @keyframes title-shine，无 animation-delay 差异
  - 这样两行的 background-position 始终同步，视觉上是同一道光
  - keyframes：0%→13% 快速划过（约 0.8s / 6s），13%→100% 静止等待
*/

/*
  标准流光方案（参考 CodePen mnsh/yyYymMg 和 raghavvelan 教程）：
  - 单一渐变：基底色 → 亮高光 → 基底色，background-size: 200% auto
  - background-position 从 200% 到 -200% 连续循环（不停顿）
  - 斜向角度：-45deg（左下到右上，金属感）
  - 两行使用完全相同的 animation（同步）
  - 关键：渐变中不使用 transparent，始终用不透明颜色，文字不会消失
*/

/* ===== 标题区域整体容器 ===== */
.hero-title-section {
  text-align: center;
  flex-shrink: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* Badge 胶囊 */
.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4f46e5;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
  /* Badge 与标题之间的间距：加大，增强呼吸感 */
  margin-bottom: clamp(1rem, 2.5vh, 2rem);
  letter-spacing: 0.01em;
  /* 呼吸感渐隐渐显：4s 一个周期，easing 用 ease-in-out 让过渡更柔和 */
  animation: badge-breathe 4s ease-in-out infinite;
  transform-origin: center;
}

/* h1 容器 */
.hero-title-wrap {
  margin: 0;
  padding: 0;
  /* h1 本身不设 line-height，由各行 span 自己控制 */
  /* 字间距微微收紧，现代大标题常用 */
  letter-spacing: -0.02em;
}

/* 两行共用的基础属性 */
.hero-title-line1,
.hero-title-line2 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* block + 100% 宽度，文字用 text-align center 居中；
     不能用 fit-content，否则渐变动画会被截断 */
  display: block;
  width: 100%;
  text-align: center;
  /* 行高收紧，增强冲击力；在 span 上设置才能基于各行自身 font-size 计算 */
  line-height: 1.08;
  background-size: 200% auto;
  animation: title-shine 5s linear infinite;
  font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

/* 第一行：汇聚四大引擎
   字体略小、字重略轻，作为引导行
   与第二行同一蓝紫粉色系，但颜色更深、饱和度更低，形成层次感
   深蓝紫 → 中蓝紫 → 淡紫白高光 → 回到深蓝紫
*/
.hero-title-line1 {
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 800;
  /* 两行之间无额外间距，由 line-height 控制 */
  margin-bottom: 0;
  background-image: linear-gradient(
    -45deg,
    #4338ca 0%,
    #4338ca 25%,
    #6d28d9 35%,
    #a78bfa 44%,
    #ddd6fe 50%,
    #a78bfa 56%,
    #6d28d9 65%,
    #4338ca 75%,
    #4338ca 100%
  );
  animation-duration: 6s;
}

/* 第二行：构建最强工作流体系
   字体更大、字重最重，是核心信息
   蓝→紫→粉渐变，充满活力
*/
.hero-title-line2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 900;
  /* 上方留出少量间距，强调两行层次感 */
  margin-top: clamp(0.1rem, 0.4vh, 0.4rem);
  background-image: linear-gradient(
    -45deg,
    #3b82f6 0%,
    #6366f1 15%,
    #8b5cf6 28%,
    #c4b5fd 38%,
    #ede9fe 46%,
    #ffffff 50%,
    #ede9fe 54%,
    #c4b5fd 62%,
    #a855f7 75%,
    #ec4899 100%
  );
  animation-duration: 5s;
}

/* 共享 keyframes：连续循环，不停顿 */
@keyframes title-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Badge 呼吸动画：渐隐渐显，慢速而柔和，带微小的缩放感 */
@keyframes badge-breathe {
  0%   { opacity: 1;    transform: scale(1);       box-shadow: 0 2px 16px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255,255,255,1); }
  50%  { opacity: 0.55; transform: scale(0.975);   box-shadow: 0 2px 8px  rgba(99, 102, 241, 0.06), inset 0 1px 0 rgba(255,255,255,0.8); }
  100% { opacity: 1;    transform: scale(1);       box-shadow: 0 2px 16px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255,255,255,1); }
}

/* ===== Hero Section ===== */
.hero-section {
  /* 精确占满一屏：视口高度 - 导航栏高度 */
  height: calc(100dvh - var(--nav-height, 66px));
  min-height: 560px;
  max-height: 1400px;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* overflow-x:clip 防止水平溢出造成滚动条，同时允许子元素波纹在各方向超出显示 */
  overflow-x: clip;
  overflow-y: visible;
  /* 将 hero 高度暴露为 CSS 变量供子元素使用 */
  --hero-content-h: calc(100dvh - var(--nav-height, 66px));
}
.hero-section > .relative.z-10 {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* space-between 让轮播图充满剩余空间，标题和搜索框在上下 */
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  /* 顶部留白：让标题下移，顶部到标题 vs 标题到轮播图 ≈ 3:2 */
  padding-top: clamp(88px, 13vh, 155px);
  padding-bottom: clamp(4px, 0.8vh, 12px);
  min-height: 0;
  /* overflow:visible 允许 engine-node 光晕溢出容器边界，不被截断 */
  overflow: visible;
}

/* 旧布局已移除，新布局使用 galaxy-viz-container */

/* ===== Galaxy Viz Container ===== */
.galaxy-viz-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  /* 自适应充满剩余空间，保持原始比例 */
  flex: 1 1 0;
  min-height: 0;
  max-height: calc(100dvh - var(--nav-height, 66px) - 180px);
  /* overflow:visible 允许 engine-node 的光晕溢出，轮播图自身已有 overflow:hidden */
  overflow: visible;
}

/* SVG 背景层 */
.galaxy-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ===== 四个平台节点 ===== */
.engine-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
  width: clamp(110px, 9vw, 150px);
  /* 无卡片背景，仅图标+文字 */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.engine-node:hover,
.engine-node-active {
  transform: translateY(-8px) scale(1.05);
}

/* 节点位置：四角（vw 响应式）*/
/* 默认（大屏幕 ≥1200px）：图标靠近两侧，连接线有足够长度 */
.engine-node-tl { top: 10%; left: 0.5%; }
.engine-node-bl { bottom: 10%; left: 0.5%; }
.engine-node-tr { top: 10%; right: 0.5%; }
.engine-node-br { bottom: 10%; right: 0.5%; }
@media (max-width: 1199px) {
  .engine-node { width: 120px; }
  .engine-node-tl { top: 10%; left: 1%; }
  .engine-node-bl { bottom: 10%; left: 1%; }
  .engine-node-tr { top: 10%; right: 1%; }
  .engine-node-br { bottom: 10%; right: 1%; }
}
@media (max-width: 767px) {
  .engine-node { width: 80px; gap: 5px; }
        }

/* 图标包裹 */
.engine-icon-wrap {
  position: relative;
  width: clamp(80px, 6.5vw, 104px);
  height: clamp(80px, 6.5vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 脉冲光环 */
.engine-icon-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid var(--brand, #6366f1);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: engineRingPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
.engine-node:hover .engine-icon-ring,
.engine-node-active .engine-icon-ring {
  opacity: 1;
}
@keyframes engineRingPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  60%  { transform: scale(1.08); opacity: 0.2; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* ===== 波纹扩散效果（Gemini 优化方案）===== */
/* 三圈波纹各自独立 keyframes，起始/结束尺寸完全错开，彻底避免重叠 */
.engine-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--brand, #6366f1);
  opacity: 0;
  z-index: 0; /* 波纹在图标下方 */
  pointer-events: none;
}
/* 第 1 圈：最内层，90px → 155px，最不透明 */
.engine-ripple-1 {
  animation: engine-ripple-1 3.6s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0s;
}
/* 第 2 圈：中间层，120px → 175px，透明度适中 */
.engine-ripple-2 {
  animation: engine-ripple-2 3.6s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 1.2s;
}
/* 第 3 圈：最外层，150px → 200px，最透明 */
.engine-ripple-3 {
  animation: engine-ripple-3 3.6s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 2.4s;
}

/* 波纹起始尺寸均大于图标（~96px），确保从图标边缘外側就可见，不被图标遇盖 */
@keyframes engine-ripple-1 {
  0%     { width: 96px;  height: 96px;  opacity: 0.7;  border-width: 2px; }
  15%    { opacity: 0.5; }
  65%    { width: 148px; height: 148px; opacity: 0;   border-width: 0.5px; }
  65.01% { width: 96px;  height: 96px;  opacity: 0; }
  100%   { width: 96px;  height: 96px;  opacity: 0; }
}
@keyframes engine-ripple-2 {
  0%     { width: 96px;  height: 96px;  opacity: 0.5;  border-width: 1.5px; }
  15%    { opacity: 0.35; }
  65%    { width: 148px; height: 148px; opacity: 0;    border-width: 0.5px; }
  65.01% { width: 96px;  height: 96px;  opacity: 0; }
  100%   { width: 96px;  height: 96px;  opacity: 0; }
}
@keyframes engine-ripple-3 {
  0%     { width: 96px;  height: 96px;  opacity: 0.3;  border-width: 1px; }
  15%    { opacity: 0.2; }
  65%    { width: 148px; height: 148px; opacity: 0;    border-width: 0.5px; }
  65.01% { width: 96px;  height: 96px;  opacity: 0; }
  100%   { width: 96px;  height: 96px;  opacity: 0; }
}

@keyframes engine-ripple-shadow_UNUSED {
  0% {
    box-shadow:
      0 8px 32px rgba(0,0,0,0.22),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 50%, transparent),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 30%, transparent),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 15%, transparent),
      0 0 0 1px rgba(255,255,255,0.12),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
  33% {
    box-shadow:
      0 8px 32px rgba(0,0,0,0.22),
      0 0 0 10px  color-mix(in srgb, var(--brand, #6366f1) 25%, transparent),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 30%, transparent),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 15%, transparent),
      0 0 0 1px rgba(255,255,255,0.12),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
  66% {
    box-shadow:
      0 8px 32px rgba(0,0,0,0.22),
      0 0 0 20px  color-mix(in srgb, var(--brand, #6366f1) 8%, transparent),
      0 0 0 10px  color-mix(in srgb, var(--brand, #6366f1) 20%, transparent),
      0 0 0 0px   color-mix(in srgb, var(--brand, #6366f1) 15%, transparent),
      0 0 0 1px rgba(255,255,255,0.12),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
  100% {
    box-shadow:
      0 8px 32px rgba(0,0,0,0.22),
      0 0 0 30px  color-mix(in srgb, var(--brand, #6366f1) 0%, transparent),
      0 0 0 20px  color-mix(in srgb, var(--brand, #6366f1) 5%, transparent),
      0 0 0 10px  color-mix(in srgb, var(--brand, #6366f1) 10%, transparent),
      0 0 0 1px rgba(255,255,255,0.12),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
}

/* 图标核心 */
.engine-icon-core {
  width: clamp(72px, 5.5vw, 96px);
  height: clamp(72px, 5.5vw, 96px);
  border-radius: clamp(20px, 1.6vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  z-index: 2; /* 确保图标始终在波纹上方 */
}
.engine-icon-core::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  pointer-events: none;
}
.engine-node:hover .engine-icon-core,
.engine-node-active .engine-icon-core {
  box-shadow:
    0 12px 40px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.2),
    0 0 28px var(--brand-glow, rgba(99,102,241,0.5)),
    inset 0 1px 0 rgba(255,255,255,0.28);
  transform: scale(1.06) translateY(-3px);
}
@media (max-width: 767px) {
  .engine-icon-core { width: 60px; height: 60px; padding: 12px; border-radius: 18px; }
}

/* 平台名称 */
.engine-name {
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 0 20px currentColor;
  transition: text-shadow 0.3s ease;
}
.engine-node:hover .engine-name {
  text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
}
@media (max-width: 767px) {
  .engine-name { font-size: 14px; }
}

/* 副标题 */
.engine-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
@media (max-width: 767px) {
  .engine-subtitle { font-size: 9px; }
}

/* 特性标签 */
.engine-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}
.engine-tag {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid;
  backdrop-filter: blur(4px);
  transition: transform 0.25s ease;
}
.engine-node:hover .engine-tag {
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .engine-tag { font-size: 9px; padding: 2px 7px; }
}

/* ===== 中央轮播图（居中，高度跟随 galaxy 容器）===== */
.hero-carousel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  /* 横向占比：62%，更宽更突出 */
  width: 62%;
  max-width: 1000px;
  min-width: 280px;
  /* 高度恢复原始比例 × 0.82，保持纵向不变 */
  height: calc(var(--galaxy-h, 60vh) * 0.82);
  max-height: 560px;
  min-height: 160px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.5),
    0 0 0 3px rgba(99,102,241,0.25),
    0 24px 80px rgba(0,0,0,0.45),
    0 0 60px rgba(99,102,241,0.30),
    0 0 120px rgba(59,130,246,0.18),
    0 0 200px rgba(147,197,253,0.12),
    inset 0 1px 0 rgba(255,255,255,0.15);
  animation: carouselFloat 5s ease-in-out infinite alternate;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1199px) {
  .hero-carousel { width: 72%; height: calc(var(--galaxy-h, 55vh) * 0.82); max-width: 800px; }
}
@media (max-width: 767px) {
  .hero-carousel { width: 88%; min-width: 240px; height: calc(var(--galaxy-h, 50vh) * 0.78); }
}
@keyframes carouselFloat {
  0%   { transform: translate(-50%, -50%) translateY(-8px); }
  100% { transform: translate(-50%, -50%) translateY(8px); }
}

/* 顶部彩虹条 */
.carousel-rainbow-bar {
  height: 5px;
  background: linear-gradient(90deg, #ec4899, #f97316, #eab308, #10b981, #06b6d4, #6366f1);
  background-size: 200% 100%;
  animation: gradientFlow 5s linear infinite;
  position: relative;
  z-index: 5;
}
@keyframes gradientFlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* 幻灯片容器（flex:1 填满轮播图剩余高度）*/
.carousel-slides {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* 单张幻灯片 */
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  overflow: hidden;
}
.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.carousel-slide.prev {
  opacity: 0;
  transform: scale(1.02);
}

/* 图片幻灯片样式 */
.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f5f6f8;
  transition: transform 6s ease;
}
.carousel-slide.active .slide-img {
  transform: scale(1.02);
}

/* 图片覆盖层：渐变标题区域 */
.slide-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.08) 70%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px 14px;
  gap: 5px;
  z-index: 2;
}
.slide-img-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  width: fit-content;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
}
.slide-img-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.slide-img-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
@media (max-width: 1199px) {
  .slide-img-overlay { padding: 12px 14px 10px; gap: 4px; }
  .slide-img-title { font-size: 13px; }
  .slide-img-desc { font-size: 10px; }
}
@media (max-width: 767px) {
  .slide-img-overlay { padding: 8px 10px 7px; gap: 3px; }
  .slide-img-badge { font-size: 9px; padding: 2px 7px; }
  .slide-img-title { font-size: 11px; }
  .slide-img-desc { display: none; }
}

/* 幻灯片内容 */
.slide-content {
  position: relative;
  z-index: 2;
  padding: 20px 22px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .slide-content { padding: 16px 18px 12px; gap: 8px; }
}
@media (max-width: 767px) {
  .slide-content { padding: 10px 12px 8px; gap: 5px; }
}

/* Logo 行 */
.slide-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide-logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);
  box-shadow: 0 6px 20px rgba(99,102,241,0.5);
  position: relative;
  flex-shrink: 0;
}
.slide-logo-pulse {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(99,102,241,0.35);
  animation: ping 2.5s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
.slide-brand {
  font-weight: 900;
  font-size: 20px;
  color: #f1f5f9;
  line-height: 1;
  text-shadow: 0 0 20px rgba(99,102,241,0.6);
  letter-spacing: -0.02em;
}
.slide-tagline {
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  margin-top: 2px;
}

/* 标题 */
.slide-headline {
  font-size: 1.7em;
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  .slide-headline { font-size: 1.2em; }
}
.slide-highlight {
  background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 副标题 */
.slide-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  font-weight: 500;
}

/* 统计网格 */
.slide-stats-grid {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 14px 12px;
}
.slide-stat-item {
  flex: 1;
  text-align: center;
}
.slide-stat-num {
  display: block;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .slide-stat-num { font-size: 16px; }
}
.slide-stat-lbl {
  font-size: 11px;
  color: #64748b;
  line-height: 1;
  font-weight: 500;
}
.slide-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* 实时执行行 */
.slide-live-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 10px;
}
.slide-live-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
.slide-live-text {
  font-size: 10px;
  color: #64748b;
}
.slide-live-num {
  font-weight: 900;
  font-size: 13px;
  color: #34d399;
  margin-left: auto;
}

/* 平台流程图 */
.slide-platform-flow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c, white);
  flex-shrink: 0;
}
.flow-arrow {
  font-size: 12px;
  color: #475569;
  flex-shrink: 0;
}

/* 待求标签行 */
.slide-badge-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.slide-badge {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bc, rgba(99,102,241,0.4));
  color: var(--bc, #a78bfa);
}

/* 工作流步骤 */
.slide-workflow-steps {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  padding: 8px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.wf-step {
  display: flex;
  align-items: center;
  gap: 3px;
}
.wf-step-icon {
  font-size: 14px;
  line-height: 1;
}
.wf-step-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
}
.wf-step-arrow {
  font-size: 14px;
  color: #334155;
  margin: 0 1px;
}

/* 安全网格 */
.slide-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sec-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}
.sec-item svg {
  color: #6366f1;
  flex-shrink: 0;
}

/* CTA 幻灯片 */
.slide-content-cta {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.slide-cta-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f59e0b, #f97316, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(249,115,22,0.4);
  margin: 0 auto;
}
.slide-cta-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.slide-cta-primary {
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(249,115,22,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.slide-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(249,115,22,0.5);
}
.slide-cta-secondary {
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.slide-cta-secondary:hover {
  color: #f1f5f9;
  border-color: rgba(255,255,255,0.25);
}
.slide-social-proof {
  font-size: 10px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}

/* 进度条 */
.carousel-progress {
  height: 4px;
  background: rgba(255,255,255,0.08);
  position: relative;
}
.carousel-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  transition: width 0.4s ease;
}

/* 指示器圆点 */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 10px;
  background: rgba(0,0,0,0.2);
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
  padding: 0;
}
.carousel-dot.active {
  background: #6366f1;
  width: 18px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(99,102,241,0.6);
}

/* 左右箭头 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 10;
}
.carousel-arrow:hover {
  background: rgba(99,102,241,0.3);
  color: white;
}
.carousel-arrow-left { left: 6px; }
.carousel-arrow-right { right: 6px; }

/* 节点统计徽章 */
.engine-stat-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--brand, #6366f1);
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--brand, #6366f1);
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
  .engine-stat-badge { font-size: 9px; padding: 2px 7px; }
}

/* 旧卡片样式兼容（保留以防其他地方引用） */
.status-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* ===== Hero 搜索框聚焦渐变边框 ===== */
.hero-search-box {
  border: 2px solid rgba(255,255,255,0.85);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-search-box:focus-within {
  border-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)), linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ===== Hero 入场 stagger 动画 ===== */
.hero-stagger {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-fade-in 0.7s ease forwards;
}
@keyframes hero-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Section 波浪分隔线 ===== */
.section-divider {
  position: relative;
  z-index: 1;
  line-height: 0;
  overflow: hidden;
}

/* ===== Sticky CTA 悬浮条 ===== */
.sticky-cta-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  pointer-events: auto;
}
.sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(15, 10, 35, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 999px;
  padding: 10px 10px 10px 20px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.sticky-cta-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
}
.sticky-cta-logo {
  font-size: 16px;
}
.sticky-cta-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}
.sticky-cta-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.6);
}
.sticky-cta-btn:active {
  transform: scale(0.97);
}
/* Transition 动画 */
.sticky-fade-enter-active,
.sticky-fade-leave-active {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticky-fade-enter-from,
.sticky-fade-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
@media (max-width: 480px) {
  .sticky-cta-text { display: none; }
  .sticky-cta-inner { padding: 10px; }
  .sticky-cta-btn { padding: 10px 18px; }
}

/* ===== 侧边锚点导航 ===== */
.side-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}
.side-nav-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  gap: 8px;
}
.side-nav-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  border: 2px solid rgba(99, 102, 241, 0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.side-nav-dot:hover .side-nav-circle,
.side-nav-dot.active .side-nav-circle {
  background: #6366f1;
  border-color: #6366f1;
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
.side-nav-tooltip {
  position: absolute;
  right: 20px;
  background: rgba(15, 10, 35, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: all 0.2s ease;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.side-nav-dot:hover .side-nav-tooltip {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .side-nav { display: none; }
}
</style>

 
 
 
 
 
 
 
 
 
 
 
 
