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/app/(marketing)/services/page.tsx

@@ -5,25 +5,28 @@ import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
 import { PageNav } from '@/components/layout/page-nav';
 
 export default function ServicesPage() {
+  const shouldReduceMotion = useReducedMotion();
+  const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-[var(--color-bg-primary)]">
       <section className="pt-32 pb-16">
         <div className="container-wide">
           <PageNav items={[{ label: '服务' }]} />
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
+            {...fadeUp}
+            animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
             className="max-w-3xl"
           >
-            <p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
-            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
+            <p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
+            <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
               服务
             </h1>
-            <p className="text-lg text-[#595959] leading-relaxed">
+            <p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
               专业技术团队，为您提供全方位的数字化解决方案
             </p>
           </motion.div>
@@ -36,32 +39,32 @@ export default function ServicesPage() {
             {SERVICES.map((service, index) => (
               <motion.div
                 key={service.id}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
+                {...fadeUp}
+                whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
               >
                 <StaticLink
                   href={`/services/${service.id}`}
-                  className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
+                  className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300 h-full"
                 >
                   <div className="flex items-start justify-between mb-4">
-                    <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
+                    <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-bold">
                       {String(index + 1).padStart(2, '0')}
                     </span>
-                    <ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
+                    <ArrowUpRight className="w-5 h-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand-primary)] transition-colors" />
                   </div>
-                  <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+                  <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
                     {service.title}
                   </h3>
-                  <p className="text-sm text-[#595959] leading-relaxed mb-4">
+                  <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">
                     {service.description}
                   </p>
                   <div className="flex flex-wrap gap-1.5">
                     {service.features.slice(0, 3).map((feature, idx) => (
                       <span
                         key={idx}
-                        className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F5F5] text-[#595959] rounded"
+                        className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] rounded"
                       >
                         {feature.split('：')[0]}
                       </span>
@@ -74,17 +77,17 @@ export default function ServicesPage() {
         </div>
       </section>
 
-      <section className="bg-[#F5F5F5] py-20">
+      <section className="bg-[var(--color-bg-tertiary)] py-20">
         <div className="container-wide text-center">
-          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
+          <h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-6">
             准备开始您的数字化转型之旅？
           </h2>
-          <p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
+          <p className="text-lg text-[var(--color-text-muted)] mb-8 max-w-2xl mx-auto">
             让我们与您同行，共创美好未来
           </p>
           <Button
             size="lg"
-            className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+            className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
             asChild
           >
             <StaticLink href="/contact">