feat(website): 三轮视觉改造与页面过渡动画

改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS

src/components/ui/product-card.tsx

@@ -21,22 +21,22 @@ interface ProductStyleConfig {
 }
 
 const productConfig: ProductStyleConfig[] = [
-  { icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
-  { icon: Users, accentColor: '#D97706', accentColorRgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
-  { icon: FileText, accentColor: '#2563EB', accentColorRgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
-  { icon: BarChart3, accentColor: '#16A34A', accentColorRgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
-  { icon: Truck, accentColor: '#7C3AED', accentColorRgb: '124, 58, 237', glowStart: '#7C3AED', glowEnd: '#C41E3A' },
-  { icon: Building2, accentColor: '#0891B2', accentColorRgb: '8, 145, 178', glowStart: '#0891B2', glowEnd: '#2563EB' },
+  { icon: Database, accentColor: 'var(--color-brand-primary)', accentColorRgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)' },
+  { icon: Users, accentColor: 'var(--color-warning)', accentColorRgb: '217, 119, 6', glowStart: 'var(--color-warning)', glowEnd: 'var(--color-success)' },
+  { icon: FileText, accentColor: 'var(--color-accent-blue)', accentColorRgb: '37, 99, 235', glowStart: 'var(--color-accent-blue)', glowEnd: 'var(--color-accent-purple)' },
+  { icon: BarChart3, accentColor: 'var(--color-success)', accentColorRgb: '22, 163, 74', glowStart: 'var(--color-success)', glowEnd: 'var(--color-accent-cyan)' },
+  { icon: Truck, accentColor: 'var(--color-accent-purple)', accentColorRgb: '124, 58, 237', glowStart: 'var(--color-accent-purple)', glowEnd: 'var(--color-brand-primary)' },
+  { icon: Building2, accentColor: 'var(--color-accent-cyan)', accentColorRgb: '8, 145, 178', glowStart: 'var(--color-accent-cyan)', glowEnd: 'var(--color-accent-blue)' },
 ];
 
 const defaultConfig: ProductStyleConfig = {
-  icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706',
+  icon: Database, accentColor: 'var(--color-brand-primary)', accentColorRgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)',
 };
 
 const statusConfig = {
-  '研发中': { bg: 'rgba(196, 30, 58, 0.08)', text: '#C41E3A', border: 'rgba(196, 30, 58, 0.15)' },
-  '内测中': { bg: 'rgba(217, 119, 6, 0.08)', text: '#D97706', border: 'rgba(217, 119, 6, 0.15)' },
-  '已发布': { bg: 'rgba(22, 163, 74, 0.08)', text: '#16A34A', border: 'rgba(22, 163, 74, 0.15)' },
+  '研发中': { bg: 'rgba(var(--color-brand-primary-rgb), 0.08)', text: 'var(--color-brand-primary)', border: 'rgba(var(--color-brand-primary-rgb), 0.15)' },
+  '内测中': { bg: 'rgba(var(--color-warning-rgb), 0.08)', text: 'var(--color-warning)', border: 'rgba(var(--color-warning-rgb), 0.15)' },
+  '已发布': { bg: 'rgba(var(--color-success-rgb), 0.08)', text: 'var(--color-success)', border: 'rgba(var(--color-success-rgb), 0.15)' },
 } as const;
 
 export function ProductCard({ title, description, href, index, status }: ProductCardProps) {
@@ -77,21 +77,21 @@ export function ProductCard({ title, description, href, index, status }: Product
                 {status}
               </span>
             )}
-            <span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
+            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
               {String(index + 1).padStart(2, '0')}
             </span>
           </div>
         </div>
 
-        <h3 className="text-lg font-semibold mb-2 leading-snug tracking-tight text-[#1C1C1C]">
+        <h3 className="text-lg font-semibold mb-2 leading-snug tracking-tight text-[var(--color-text-primary)]">
           {title}
         </h3>
 
-        <p className="text-sm text-[#595959] leading-relaxed line-clamp-3 mb-5">
+        <p className="text-sm text-[var(--color-text-muted)] leading-relaxed line-clamp-3 mb-5">
           {description}
         </p>
 
-        <div className="flex items-center gap-1.5 text-sm font-medium text-[#A3A3A3] group-hover:text-[#C41E3A] transition-colors">
+        <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand-primary)] transition-colors">
           <span>了解规划</span>
           <ArrowUpRight className="w-4 h-4" strokeWidth={2} />
         </div>