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/sections/challenge-section.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { ChallengeCard } from '@/components/ui/challenge-card';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
@@ -30,44 +29,27 @@ const CHALLENGES = [
 ];
 
 export function ChallengeSection() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLElement>(null);
   const shouldReduceMotion = useReducedMotion();
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry?.isIntersecting) {
-          setIsVisible(true);
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, []);
-
   return (
-    <section
-      id="challenges"
-      ref={sectionRef}
-      className="py-20 md:py-28 bg-[#FAFAFA]"
-    >
+    <section id="challenges" className="py-20 md:py-28 bg-[var(--color-bg-primary)]">
       <div className="container-wide">
         <motion.div
           initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={isVisible ? { opacity: 1, y: 0 } : {}}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
-          className="text-center max-w-3xl mx-auto mb-14"
+          className="mb-14"
         >
-          <h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
-            您的挑战，我们的<span className="text-[#C41E3A] font-calligraphy">使命</span>
+          <div className="flex items-center gap-4 mb-4">
+            <div className="h-px flex-1 bg-[var(--color-border-primary)]" />
+            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">CHALLENGES</span>
+            <div className="h-px flex-1 bg-[var(--color-border-primary)]" />
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] text-center">
+            您的挑战，我们的<span className="text-[var(--color-brand-primary)] font-calligraphy">使命</span>
           </h2>
-          <p className="text-base text-[#595959]">
+          <p className="text-base text-[var(--color-text-muted)] text-center mt-4 max-w-xl mx-auto">
             深入理解企业数字化进程中的核心痛点，提供针对性解决方案
           </p>
         </motion.div>