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/header.tsx

@@ -77,7 +77,7 @@ function HeaderContent() {
           fixed top-0 left-0 right-0 z-50
           transition-all duration-300 ease-out
           ${isScrolled 
-            ? 'bg-white/95 backdrop-blur-xl border-b border-[#E2E8F0] shadow-sm' 
+            ? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-sm' 
             : 'bg-transparent'
           }
         `}
@@ -123,8 +123,8 @@ function HeaderContent() {
                       relative px-3 py-1.5 text-sm font-medium
                       transition-all duration-300
                       ${isActive(item)
-                        ? 'text-[#1C1C1C]'
-                        : 'text-[#3D3D3D] hover:text-[#1C1C1C]'
+                        ? 'text-[var(--color-text-primary)]'
+                        : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
                       }
                     `}
                     aria-current={isActive(item) ? 'page' : undefined}
@@ -132,7 +132,7 @@ function HeaderContent() {
                     {item.label}
                     <span 
                       className={`
-                        absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full
+                        absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[var(--color-brand-primary)] rounded-full
                         transition-all duration-200 ease-out
                         ${isActive(item) 
                           ? 'opacity-100 scale-x-100' 
@@ -155,7 +155,7 @@ function HeaderContent() {
             </div>
 
             <button
-              className="md:hidden p-3 -mr-3 text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5] rounded-lg transition-all duration-200 active:scale-95"
+              className="md:hidden p-3 -mr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)] rounded-lg transition-all duration-200 active:scale-95"
               onClick={() => setIsOpen(!isOpen)}
               onKeyDown={handleKeyDown}
               aria-expanded={isOpen}
@@ -190,7 +190,7 @@ function HeaderContent() {
               animate={{ x: 0 }}
               exit={{ x: '100%' }}
               transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              className="absolute top-16 right-0 bottom-0 left-0 bg-white/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
+              className="absolute top-16 right-0 bottom-0 left-0 bg-[var(--color-bg-primary)]/98 backdrop-blur-xl shadow-2xl overflow-y-auto"
               id="mobile-menu"
               role="navigation"
               aria-label="移动端导航"
@@ -211,8 +211,8 @@ function HeaderContent() {
                         block px-4 py-4 text-base font-medium rounded-lg
                         transition-all duration-200
                         ${isActive(item)
-                          ? 'text-[#1C1C1C] bg-[#F5F5F5] border-l-4 border-[#C41E3A]'
-                          : 'text-[#3D3D3D] hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
+                          ? 'text-[var(--color-text-primary)] bg-[var(--color-primary-lighter)] border-l-4 border-[var(--color-brand-primary)]'
+                          : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-lighter)]'
                         }
                       `}
                       style={{ minHeight: '48px', display: 'flex', alignItems: 'center' }}
@@ -221,7 +221,7 @@ function HeaderContent() {
                     </StaticLink>
                   </motion.div>
                 ))}
-                <div className="mt-6 px-4 pt-6 border-t border-[#E2E8F0]">
+                <div className="mt-6 px-4 pt-6 border-t border-[var(--color-border-primary)]">
                   <Button
                     className="w-full"
                     asChild
@@ -246,13 +246,13 @@ function HeaderFallback() {
     <header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
       <div className="container-wide">
         <div className="flex items-center justify-between h-16">
-          <div className="h-8 w-8 bg-gray-200 animate-pulse rounded" />
+          <div className="h-8 w-8 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
           <nav className="hidden md:flex items-center gap-1">
             {[1, 2, 3, 4, 5].map((i) => (
-              <div key={i} className="h-6 w-16 bg-gray-200 animate-pulse rounded mx-1" />
+              <div key={i} className="h-6 w-16 bg-[var(--color-skeleton-bg)] animate-pulse rounded mx-1" />
             ))}
           </nav>
-          <div className="h-9 w-20 bg-gray-200 animate-pulse rounded" />
+          <div className="h-9 w-20 bg-[var(--color-skeleton-bg)] animate-pulse rounded" />
         </div>
       </div>
     </header>