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/layout/mobile-tab-bar.tsx

@@ -2,14 +2,14 @@
 
 import { StaticLink } from '@/components/ui/static-link';
 import { usePathname } from 'next/navigation';
-import { Home, Briefcase, Package, FileText, User } from 'lucide-react';
+import { Home, Lightbulb, Package, FileText, User } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
 
 const tabs = [
   { id: 'home', label: '首页', href: '/', icon: Home },
-  { id: 'services', label: '服务', href: '/services', icon: Briefcase },
   { id: 'products', label: '产品', href: '/products', icon: Package },
+  { id: 'solutions', label: '方案', href: '/solutions', icon: Lightbulb },
   { id: 'about', label: '关于', href: '/about', icon: FileText },
   { id: 'contact', label: '联系', href: '/contact', icon: User },
 ];
@@ -27,8 +27,8 @@ export function MobileTabBar() {
     if (id === 'products') {
       return pathname === '/products' || pathname.startsWith('/products/');
     }
-    if (id === 'services') {
-      return pathname === '/services' || pathname.startsWith('/services/');
+    if (id === 'solutions') {
+      return pathname === '/solutions' || pathname.startsWith('/solutions/');
     }
     if (id === 'about') {
       return pathname === '/about';
@@ -37,7 +37,7 @@ export function MobileTabBar() {
   };
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white/95 backdrop-blur-xl border-t border-[#E5E5E5] safe-area-inset-bottom">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-t border-[var(--color-border-primary)] safe-area-inset-bottom">
       <div className="flex items-center justify-around h-16">
         {tabs.map((tab) => {
           const Icon = tab.icon;
@@ -53,13 +53,13 @@ export function MobileTabBar() {
                 <Icon
                   className={cn(
                     'w-6 h-6 transition-colors',
-                    active ? 'text-[#C41E3A]' : 'text-[#5C5C5C] group-hover:text-[#1C1C1C]'
+                    active ? 'text-[var(--color-brand-primary)]' : 'text-[var(--color-text-placeholder)] group-hover:text-[var(--color-text-primary)]'
                   )}
                 />
                 <span
                   className={cn(
                     'text-xs mt-1 transition-colors',
-                    active ? 'text-[#C41E3A] font-medium' : 'text-[#5C5C5C]'
+                    active ? 'text-[var(--color-brand-primary)] font-medium' : 'text-[var(--color-text-placeholder)]'
                   )}
                 >
                   {tab.label}
@@ -67,7 +67,7 @@ export function MobileTabBar() {
                 {active && (
                   <motion.div
                     layoutId="activeTab"
-                    className="absolute -bottom-1 w-8 h-0.5 bg-[#C41E3A] rounded-full"
+                    className="absolute -bottom-1 w-8 h-0.5 bg-[var(--color-brand-primary)] rounded-full"
                     transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                   />
                 )}