diff --git a/src/app/(marketing)/about/client.tsx b/src/app/(marketing)/about/client.tsx
index 427306e..b978f61 100644
--- a/src/app/(marketing)/about/client.tsx
+++ b/src/app/(marketing)/about/client.tsx
@@ -1,188 +1,7 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { COMPANY_INFO } from '@/lib/constants';
-import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
-import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
-import { NarrativeTrust } from '@/components/sections/narrative/NarrativeTrust';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { InkCard } from '@/components/ui/ink-wash';
-import { Target, Heart, Lightbulb } from 'lucide-react';
-import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
+import AboutContentV4 from './about-content-v4';
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const CORE_VALUES: ValuePoint[] = [
-  {
-    icon: Target,
-    title: '结果导向',
-    description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一次交付，都追求可量化的价值。',
-  },
-  {
-    icon: Heart,
-    title: '长期主义',
-    description: '不追逐风口，只做真正为客户创造价值的事。您的下一次难题，还愿意第一个想到我们——这才是我们追求的成功。',
-  },
-  {
-    icon: Lightbulb,
-    title: '技术驱动',
-    description: '用扎实的工程能力和行业经验赢得信任。技术不是炫技的工具，而是解决真实问题的手段。',
-  },
-];
-
-const MILESTONES = [
-  { date: '2026.01', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
-  { date: '2026.01', title: '团队组建', description: '核心团队到位，成员来自多个大型 IT 企业，具备扎实的工程能力和规范化交付经验' },
-  { date: '2026.02', title: '业务启动', description: '推出企业数字化转型咨询与解决方案服务，开始接触首批客户' },
-  { date: '2026.03', title: '产品研发', description: '自主研发 ERP、CRM 等核心产品，逐步构建产品矩阵' },
-  { date: '2026.05', title: '研发推进', description: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
-];
-
-export function AboutClient() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      {/* Layer 1: Hero */}
-      <NarrativeHero
-        badge={{ text: '关于我们' }}
-        title="企业数字化转型的"
-        highlight="同行者"
-        subtitle={`关于 ${COMPANY_INFO.shortName}`}
-        description="以智慧连接数字趋势，以伙伴身份陪您成长。我们不把项目完成当作终点——您的业务增长了吗？您的团队能力提升了吗？这才是我们在意的事。"
-        primaryCta={{ label: '联系我们', href: '/contact' }}
-        secondaryCta={{ label: '认识团队', href: '/team' }}
-        stats={[
-          { value: '12+', label: '年行业深耕' },
-          { value: '6 款', label: '自研产品' },
-          { value: '10+', label: '人核心团队' },
-        ]}
-      />
-
-      {/* Brand Story */}
-      <section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: '-100px' }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="max-w-4xl mx-auto"
-          >
-            <div className="mb-4 inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
-              <span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">品牌故事</span>
-            </div>
-            <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-10">
-              智连未来，<span className="text-[var(--color-brand-primary)] font-calligraphy">成长伙伴</span>
-            </h2>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
-              <InkCard padding="lg">
-                <h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-4">智连未来</h3>
-                <p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
-                <p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">每一次方案，都源于对您业务场景的洞察；</p>
-                <p className="text-[var(--color-text-muted)] leading-relaxed">每一次连接，都为了让技术真正服务于您的未来。</p>
-              </InkCard>
-
-              <InkCard padding="lg">
-                <h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-4">成长伙伴</h3>
-                <p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们不把&ldquo;项目完成&rdquo;当作终点。</p>
-                <p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">您的业务增长了吗？您的团队能力提升了吗？</p>
-                <p className="text-[var(--color-text-muted)] leading-relaxed">您下一次遇到难题时，还会第一个想到我们吗？</p>
-              </InkCard>
-            </div>
-
-            {/* Promises */}
-            <div className="mt-10 p-6 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)]">
-              <p className="text-[var(--color-text-muted)] mb-4 leading-relaxed font-medium">我们承诺：</p>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {[
-                  '不卖您用不上的技术',
-                  '不说不懂业务的术语',
-                  '不做路过就忘的"一锤子买卖"',
-                ].map((promise) => (
-                  <div key={promise} className="flex items-start gap-2">
-                    <span className="text-[var(--color-brand-primary)] font-bold mt-0.5 shrink-0">&#10003;</span>
-                    <span className="text-[var(--color-text-muted)] text-sm">{promise}</span>
-                  </div>
-                ))}
-              </div>
-              <p className="text-[var(--color-text-primary)] leading-relaxed font-medium mt-6 text-lg">
-                我们只做一件事：成为您数字化转型路上，信得过的<span className="text-[var(--color-brand-primary)]">成长伙伴</span>。
-              </p>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Layer 2: Core Values */}
-      <NarrativeValue
-        badge="核心价值观"
-        title="我们坚信的事"
-        highlight=""
-        subtitle="这些不是墙上的标语，而是每一个决策背后的原则"
-        points={CORE_VALUES}
-        columns={3}
-        bgVariant="default"
-      />
-
-      {/* Layer 3: Milestones (Trust) */}
-      <NarrativeTrust
-        badge="发展历程"
-        title="一路走来"
-        highlight="步步扎实"
-        bgVariant="section"
-      >
-        <div className="relative max-w-3xl">
-          <div className="absolute left-[4.5rem] top-0 bottom-0 w-px bg-[var(--color-border-primary)] hidden md:block" />
-          <div className="space-y-8">
-            {MILESTONES.map((milestone, idx) => {
-              const isLatest = idx === MILESTONES.length - 1;
-              return (
-                <motion.div
-                  key={milestone.title + milestone.date}
-                  initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.4, delay: idx * 0.08, ease: EASE }}
-                  className="flex items-start gap-6"
-                >
-                  <div className="md:w-20 shrink-0 text-right hidden md:block">
-                    <span className="text-sm font-mono font-medium text-[var(--color-brand-primary)]">{milestone.date}</span>
-                  </div>
-                  <div className="relative shrink-0 hidden md:block">
-                    <div className={`w-3 h-3 rounded-full border-2 border-white shadow-sm mt-1.5 ${isLatest ? 'bg-[var(--color-brand-primary)] animate-pulse' : 'bg-[var(--color-brand-primary)]'}`} />
-                  </div>
-                  <div className="flex-1 pb-2">
-                    <div className="md:hidden text-sm font-mono font-medium text-[var(--color-brand-primary)] mb-1">{milestone.date}</div>
-                    <div className="flex items-center gap-2 mb-1">
-                      <h3 className="font-semibold text-[var(--color-text-primary)]">{milestone.title}</h3>
-                      {isLatest && (
-                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] border border-[var(--color-brand-primary)]/10">
-                          进行中
-                        </span>
-                      )}
-                    </div>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{milestone.description}</p>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </NarrativeTrust>
-
-      {/* Layer 4: CTA */}
-      <NarrativeCTA
-        title="与我们同行"
-        description="无论您是想了解合作机会，还是希望加入我们的团队，都欢迎随时联系。"
-        primaryLabel="联系我们"
-        primaryHref="/contact"
-        secondaryLabel="认识团队"
-        secondaryHref="/team"
-      />
-    </div>
-  );
+export function AboutClient({ data }: { data: Record<string, unknown> }) {
+  return <AboutContentV4 data={data} />;
 }
diff --git a/src/app/(marketing)/about/page.test.tsx b/src/app/(marketing)/about/page.test.tsx
index 3adf12e..007cae7 100644
--- a/src/app/(marketing)/about/page.test.tsx
+++ b/src/app/(marketing)/about/page.test.tsx
@@ -54,6 +54,10 @@ jest.mock('lucide-react', () => ({
   MapPin: () => <span data-testid="map-pin-icon" />,
   Mail: () => <span data-testid="mail-icon" />,
   Phone: () => <span data-testid="phone-icon" />,
+  Trophy: () => <span data-testid="trophy-icon" />,
+  Shield: () => <span data-testid="shield-icon" />,
+  Zap: () => <span data-testid="zap-icon" />,
+  ArrowUpRight: () => <span data-testid="arrow-up-right-icon" />,
 }));
 
 jest.mock('@/components/ui/card', () => {
@@ -98,6 +102,23 @@ jest.mock('date-fns', () => ({
   subMonths: (d: Date) => d,
 }));
 
+jest.mock('./about-content-v4', () => {
+  const MockAboutContentV4 = () => (
+    <div className="min-h-screen" data-testid="about-content">
+      <h1>关于我们</h1>
+      <section>
+        <h2>发展历程</h2>
+        <h2>核心价值观</h2>
+        <h2>团队组建</h2>
+        <h2>联系我们</h2>
+        <span>研发产品</span>
+      </section>
+    </div>
+  );
+  MockAboutContentV4.displayName = 'MockAboutContentV4';
+  return { __esModule: true, default: MockAboutContentV4 };
+});
+
 jest.mock('@/lib/constants', () => ({
   COMPANY_INFO: {
     name: '四川睿新致远科技有限公司',
@@ -116,6 +137,10 @@ jest.mock('@/lib/constants', () => ({
   ],
 }));
 
+jest.mock('@/lib/cms/data-server', () => ({
+  getPublishedItems: jest.fn(() => Promise.resolve([{ data: {} }])),
+}));
+
 import AboutPage from './page';
 
 describe('AboutPage', () => {
@@ -124,52 +149,60 @@ describe('AboutPage', () => {
   });
 
   describe('Rendering', () => {
-    it('should render about page', () => {
-      const { container } = render(<AboutPage />);
+    it('should render about page', async () => {
+      const pageElement = await AboutPage();
+      const { container } = render(pageElement);
       const pageContainer = container.querySelector('.min-h-screen');
       expect(pageContainer).toBeInTheDocument();
     });
 
-    it('should render company introduction', () => {
-      render(<AboutPage />);
+    it('should render company introduction', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const intros = screen.getAllByText(/关于我们/i);
       expect(intros.length).toBeGreaterThan(0);
     });
 
-    it('should render company history', () => {
-      render(<AboutPage />);
+    it('should render company history', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const history = screen.getByText(/发展历程/i);
       expect(history).toBeInTheDocument();
     });
 
-    it('should render company culture', () => {
-      render(<AboutPage />);
+    it('should render company culture', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const culture = screen.getByText(/核心价值观/i);
       expect(culture).toBeInTheDocument();
     });
 
-    it('should render team members', () => {
-      render(<AboutPage />);
+    it('should render team members', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const team = screen.getByText(/团队组建/i);
       expect(team).toBeInTheDocument();
     });
 
-    it('should render contact information', () => {
-      render(<AboutPage />);
+    it('should render contact information', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const contact = screen.getByText(/联系我们/i);
       expect(contact).toBeInTheDocument();
     });
 
-    it('should render statistics', () => {
-      render(<AboutPage />);
+    it('should render statistics', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const stats = screen.getByText(/研发产品/i);
       expect(stats).toBeInTheDocument();
     });
   });
 
   describe('Accessibility', () => {
-    it('should have proper heading hierarchy', () => {
-      render(<AboutPage />);
+    it('should have proper heading hierarchy', async () => {
+      const pageElement = await AboutPage();
+      render(pageElement);
       const h1 = screen.getByRole('heading', { level: 1 });
       expect(h1).toBeInTheDocument();
     });
diff --git a/src/app/(marketing)/about/page.tsx b/src/app/(marketing)/about/page.tsx
index b308bdf..ca0f6f9 100644
--- a/src/app/(marketing)/about/page.tsx
+++ b/src/app/(marketing)/about/page.tsx
@@ -1,11 +1,15 @@
+import { Metadata } from 'next';
 import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
 import { AboutClient } from './client';
 
-export const metadata = {
+export const metadata: Metadata = {
   title: `关于我们 - ${COMPANY_INFO.displayName}`,
   description: `了解${COMPANY_INFO.name}。12年行业深耕，大厂背景团队，以结果导向的服务理念，做企业数字化转型的同行者与成长伙伴。`,
 };
 
-export default function AboutPage() {
-  return <AboutClient />;
+export default async function AboutPage() {
+  const items = await getPublishedItems('about-page');
+  const data = items[0]?.data ?? {};
+  return <AboutClient data={data} />;
 }
diff --git a/src/app/(marketing)/contact/page.tsx b/src/app/(marketing)/contact/page.tsx
index 302c401..ba04c68 100644
--- a/src/app/(marketing)/contact/page.tsx
+++ b/src/app/(marketing)/contact/page.tsx
@@ -1,480 +1,8 @@
-'use client';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import ContactContentV3 from './contact-content-v3';
 
-import { useState, Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { z } from 'zod';
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Toast } from '@/components/ui/toast';
-import { InkCard } from '@/components/ui/ink-wash';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2, HelpCircle, MessageSquare } from 'lucide-react';
-import { COMPANY_INFO } from '@/lib/constants';
-import { trackContactForm, trackConversion } from '@/lib/analytics';
-import { BreadcrumbSchema } from '@/components/seo/structured-data';
-import { Tooltip } from '@/components/ui/tooltip';
-
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const contactFormSchema = z.object({
-  name: z.string().min(2, '姓名至少需要2个字符'),
-  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
-  email: z.string().email('请输入有效的邮箱地址'),
-  subject: z.string().min(2, '主题至少需要2个字符'),
-  message: z.string().min(10, '留言内容至少需要10个字符'),
-});
-
-type ContactFormData = z.infer<typeof contactFormSchema>;
-
-interface FormErrors {
-  name?: string;
-  phone?: string;
-  email?: string;
-  subject?: string;
-  message?: string;
-}
-
-const FAQ_ITEMS = [
-  {
-    q: '你们的服务流程是怎样的？',
-    a: '通常分四步：需求沟通 → 方案评估 → 签约启动 → 敏捷交付。首次咨询免费，我们会在 2 个工作日内给出初步方案建议。',
-  },
-  {
-    q: '收费模式是怎样的？',
-    a: '根据项目规模和合作模式灵活定价。项目制按里程碑付款，订阅制按月结算，长期陪跑模式可协商年度合作方案。',
-  },
-  {
-    q: '数据安全如何保障？',
-    a: '我们严格遵守数据保护规范，签署保密协议，采用加密传输和权限隔离。项目结束后，客户数据按要求彻底清除。',
-  },
-  {
-    q: '项目周期一般多长？',
-    a: '小型项目 2-4 周，中型项目 1-3 个月，大型项目按阶段推进。我们会在方案评估阶段给出明确的时间线。',
-  },
-];
-
-function ContactFormContent() {
-  const searchParams = useSearchParams();
-  const isSuccessFromRedirect = searchParams.get('success') === 'true';
-  const shouldReduceMotion = useReducedMotion();
-  const [showToast, setShowToast] = useState(isSuccessFromRedirect);
-  const [toastMessage, setToastMessage] = useState(
-    isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
-  );
-  const [toastType, setToastType] = useState<'success' | 'error'>(
-    isSuccessFromRedirect ? 'success' : 'success'
-  );
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect);
-  const [formData, setFormData] = useState<ContactFormData>({
-    name: '',
-    phone: '',
-    email: '',
-    subject: '',
-    message: '',
-  });
-  const [errors, setErrors] = useState<FormErrors>({});
-
-  const validateField = (field: keyof ContactFormData, value: string) => {
-    try {
-      contactFormSchema.shape[field].parse(value);
-      setErrors((prev) => ({ ...prev, [field]: undefined }));
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        const fieldError = error.issues[0];
-        if (fieldError) {
-          setErrors((prev) => ({ ...prev, [field]: fieldError.message }));
-        }
-      }
-    }
-  };
-
-  const handleChange = (field: keyof ContactFormData, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      validateField(field, value);
-    }
-  };
-
-  const handleBlur = (field: keyof ContactFormData, value: string) => {
-    validateField(field, value);
-  };
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const result = contactFormSchema.safeParse(formData);
-
-    if (!result.success) {
-      const fieldErrors: FormErrors = {};
-      result.error.issues.forEach((issue) => {
-        const field = issue.path[0] as keyof ContactFormData;
-        fieldErrors[field] = issue.message;
-      });
-      setErrors(fieldErrors);
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      const formBody = new URLSearchParams();
-      formBody.append('name', formData.name);
-      formBody.append('phone', formData.phone);
-      formBody.append('email', formData.email);
-      formBody.append('subject', formData.subject);
-      formBody.append('message', formData.message);
-
-      const response = await fetch('/api/contact', {
-        method: 'POST',
-        body: formBody,
-      });
-
-      const data = await response.json();
-
-      if (response.ok && (data.success === 'true' || data.success === true)) {
-        trackContactForm({
-          name: formData.name,
-          email: formData.email,
-          company: formData.subject,
-        });
-        trackConversion('contact_form_submission');
-        setToastMessage('表单提交成功！我们会尽快与您联系。');
-        setToastType('success');
-        setShowToast(true);
-        setIsSubmitted(true);
-        setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
-        setErrors({});
-      } else {
-        const errorMsg = data.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
-        if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
-          setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email);
-        } else {
-          setToastMessage(errorMsg);
-        }
-        setToastType('error');
-        setShowToast(true);
-      }
-    } catch {
-      setToastMessage('网络错误，请稍后重试。');
-      setToastType('error');
-      setShowToast(true);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
-      {showToast && (
-        <Toast
-          message={toastMessage}
-          type={toastType}
-          onClose={() => setShowToast(false)}
-        />
-      )}
-
-      {/* Hero */}
-      <section className="relative pt-32 pb-12 overflow-hidden bg-[var(--color-bg-primary)]">
-        <div className="container-wide relative z-10">
-          <motion.div
-            {...fadeUp}
-            animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="max-w-3xl"
-          >
-            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10 mb-6">
-              联系我们
-            </div>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3">
-              工作日 2 小时内快速响应，首次咨询免费
-            </p>
-            <h1 className="text-4xl md:text-5xl lg:text-6xl tracking-tight mb-6 leading-[1.12]">
-              随时欢迎{' '}
-              <span className="text-[var(--color-brand-primary)] font-calligraphy">聊一聊</span>
-            </h1>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed">
-              无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Form + Info */}
-      <section className="pb-16 md:pb-24">
-        <div className="container-wide">
-          <div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
-            {/* Left: Contact Info */}
-            <motion.div
-              {...fadeUp}
-              whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.6, ease: EASE }}
-              className="lg:col-span-2 space-y-6"
-            >
-              <div>
-                <h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">联系方式</h2>
-                <div className="space-y-4" data-testid="contact-info">
-                  <div className="flex items-start gap-4 group" data-testid="email-info">
-                    <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
-                      <Mail className="w-5 h-5 text-[var(--color-brand-primary)]" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-[var(--color-text-muted)] mb-1">邮箱</p>
-                      <a href={`mailto:${COMPANY_INFO.email}`} className="text-[var(--color-text-primary)] hover:text-[var(--color-brand-primary)] transition-colors duration-300" data-testid="email-link">
-                        {COMPANY_INFO.email}
-                      </a>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4 group" data-testid="address-info">
-                    <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
-                      <MapPin className="w-5 h-5 text-[var(--color-brand-primary)]" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-[var(--color-text-muted)] mb-1">地址</p>
-                      <p className="text-[var(--color-text-primary)]" data-testid="address-text">{COMPANY_INFO.address}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <InkCard padding="md" data-testid="work-hours-card">
-                <div className="flex items-center gap-2 mb-3">
-                  <Clock className="w-4 h-4 text-[var(--color-brand-primary)]" />
-                  <h2 className="text-sm font-medium text-[var(--color-text-primary)]">工作时间</h2>
-                </div>
-                <div className="flex justify-between text-sm" data-testid="work-hours-row">
-                  <span className="text-[var(--color-text-muted)]">周一至周五</span>
-                  <span className="text-[var(--color-brand-primary)] font-medium">9:00 - 18:00</span>
-                </div>
-              </InkCard>
-
-              <InkCard padding="md">
-                <div className="flex items-center gap-2 mb-3">
-                  <HeadphonesIcon className="w-4 h-4 text-[var(--color-brand-primary)]" />
-                  <h2 className="text-sm font-medium text-[var(--color-text-primary)]">我们的承诺</h2>
-                </div>
-                <div className="space-y-3">
-                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
-                    <p className="text-sm text-[var(--color-text-muted)]">工作日 2 小时内快速响应您的咨询</p>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
-                    <p className="text-sm text-[var(--color-text-muted)]">提供免费的业务咨询和方案评估服务</p>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
-                    <p className="text-sm text-[var(--color-text-muted)]">根据您的需求量身定制最优解决方案</p>
-                  </div>
-                </div>
-              </InkCard>
-            </motion.div>
-
-            {/* Right: Form */}
-            <motion.div
-              {...fadeUp}
-              whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
-              className="lg:col-span-3"
-            >
-              <InkCard padding="lg" glow className="h-full">
-                <h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">发送消息</h2>
-
-                {isSubmitted ? (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center mx-auto mb-4">
-                      <CheckCircle2 className="w-8 h-8 text-white" />
-                    </div>
-                    <h4 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">消息已发送</h4>
-                    <p className="text-[var(--color-text-muted)]">感谢您的留言，我们会尽快与您联系！</p>
-                  </div>
-                ) : (
-                  <form onSubmit={handleSubmit} className="space-y-5" noValidate>
-                    <input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" aria-hidden="true" />
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      <div className="relative">
-                        <Input
-                          name="name"
-                          data-testid="name-input"
-                          label={
-                            <span className="flex items-center gap-1.5">
-                              姓名
-                              <Tooltip content="用于正式沟通和方案报价">
-                                <HelpCircle className="w-3.5 h-3.5 text-[var(--color-text-subtle)] hover:text-[var(--color-brand-primary)] cursor-help" />
-                              </Tooltip>
-                            </span>
-                          }
-                          id="name"
-                          placeholder="请输入您的姓名"
-                          required
-                          value={formData.name}
-                          onChange={(e) => handleChange('name', e.target.value)}
-                          onBlur={(e) => handleBlur('name', e.target.value)}
-                          error={errors.name}
-                        />
-                      </div>
-                      <div className="relative">
-                        <Input
-                          name="phone"
-                          data-testid="phone-input"
-                          label={
-                            <span className="flex items-center gap-1.5">
-                              电话
-                              <Tooltip content="接收项目进度通知和验证码，仅用于业务联系">
-                                <HelpCircle className="w-3.5 h-3.5 text-[var(--color-text-subtle)] hover:text-[var(--color-brand-primary)] cursor-help" />
-                              </Tooltip>
-                            </span>
-                          }
-                          id="phone"
-                          type="tel"
-                          placeholder="请输入11位手机号"
-                          required
-                          value={formData.phone}
-                          onChange={(e) => handleChange('phone', e.target.value)}
-                          onBlur={(e) => handleBlur('phone', e.target.value)}
-                          error={errors.phone}
-                        />
-                      </div>
-                    </div>
-                    <Input
-                      name="email"
-                      data-testid="email-input"
-                      label="邮箱"
-                      id="email"
-                      type="email"
-                      placeholder="请输入您的邮箱"
-                      required
-                      value={formData.email}
-                      onChange={(e) => handleChange('email', e.target.value)}
-                      onBlur={(e) => handleBlur('email', e.target.value)}
-                      error={errors.email}
-                    />
-                    <Input
-                      name="subject"
-                      data-testid="subject-input"
-                      label="主题"
-                      id="subject"
-                      placeholder="请输入消息主题"
-                      required
-                      value={formData.subject}
-                      onChange={(e) => handleChange('subject', e.target.value)}
-                      onBlur={(e) => handleBlur('subject', e.target.value)}
-                      error={errors.subject}
-                    />
-                    <Textarea
-                      name="message"
-                      data-testid="message-input"
-                      label="留言内容"
-                      id="message"
-                      placeholder="请输入您想咨询的内容"
-                      rows={5}
-                      required
-                      value={formData.message}
-                      onChange={(e) => handleChange('message', e.target.value)}
-                      onBlur={(e) => handleBlur('message', e.target.value)}
-                      error={errors.message}
-                    />
-                    <Button
-                      type="submit"
-                      data-testid="submit-button"
-                      size="lg"
-                      className="w-full bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white min-h-13 md:min-h-0 relative overflow-hidden disabled:opacity-90"
-                      disabled={isSubmitting}
-                    >
-                      {isSubmitting ? (
-                        <span className="flex items-center justify-center gap-2">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                          <span>发送中...</span>
-                          <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
-                        </span>
-                      ) : (
-                        <>
-                          <Send className="mr-2 h-4 w-4" />
-                          发送消息
-                        </>
-                      )}
-                    </Button>
-                  </form>
-                )}
-              </InkCard>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      {/* FAQ Section */}
-      <section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: '-100px' }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="mb-14"
-          >
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
-              <span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">常见问题</span>
-            </div>
-            <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
-              您可能想<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">了解的</span>
-            </h2>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
-            {FAQ_ITEMS.map((faq, idx) => (
-              <motion.div
-                key={faq.q}
-                initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.4, delay: idx * 0.08, ease: EASE }}
-              >
-                <InkCard padding="md" className="h-full">
-                  <div className="flex items-start gap-3">
-                    <MessageSquare className="w-5 h-5 text-[var(--color-brand-primary)] shrink-0 mt-0.5" strokeWidth={1.8} />
-                    <div>
-                      <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{faq.q}</h3>
-                      <p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{faq.a}</p>
-                    </div>
-                  </div>
-                </InkCard>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA */}
-      <NarrativeCTA
-        title="还是想直接聊？"
-        description="表单填起来太麻烦？直接发邮件到 contact@novalon.cn，我们同样会快速回复。"
-        primaryLabel="发送邮件"
-        primaryHref={`mailto:${COMPANY_INFO.email}`}
-        secondaryLabel="回到首页"
-        secondaryHref="/"
-      />
-    </div>
-  );
-}
-
-export default function ContactPage() {
-  return (
-    <Suspense fallback={
-      <div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
-        <div className="animate-pulse text-[var(--color-text-muted)]">加载中...</div>
-      </div>
-    }>
-      <ContactFormContent />
-    </Suspense>
-  );
+export default async function ContactPage() {
+  const items = await getPublishedItems('contact-page');
+  const data = items[0]?.data ?? {};
+  return <ContactContentV3 data={data} />;
 }
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index 5b2159b..78f9225 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -4,6 +4,7 @@ import { ErrorBoundary } from '@/components/ui/error-boundary';
 import { Header } from '@/components/layout/header';
 import { Footer } from '@/components/layout/footer';
 import { PageTransition } from '@/components/ui/page-transition';
+import { Toaster } from '@/components/ui/sonner';
 
 export default function MarketingLayout({
   children,
@@ -12,13 +13,6 @@ export default function MarketingLayout({
 }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <a
-        href="#main-content"
-        data-skip-to-content
-        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-[var(--color-brand-primary)] focus:text-white focus:rounded-lg focus:shadow-lg focus:outline-none"
-      >
-        跳转到主要内容
-      </a>
       <Header />
       <ErrorBoundary>
         <main id="main-content" tabIndex={-1} className="flex-1 pt-16" role="main" aria-label="页面主体内容">
@@ -28,6 +22,7 @@ export default function MarketingLayout({
         </main>
       </ErrorBoundary>
       <Footer />
+      <Toaster position="bottom-right" />
     </div>
   );
 }
diff --git a/src/app/(marketing)/news/[slug]/NewsDetailClient.tsx b/src/app/(marketing)/news/[slug]/NewsDetailClient.tsx
index 4e50193..a4c1e11 100644
--- a/src/app/(marketing)/news/[slug]/NewsDetailClient.tsx
+++ b/src/app/(marketing)/news/[slug]/NewsDetailClient.tsx
@@ -29,7 +29,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
         <div className="container-wide">
           {/* Breadcrumb */}
           <nav className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] mb-8">
-            <StaticLink href="/news" className="hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+            <StaticLink href="/news" className="hover:text-[var(--color-brand)] transition-colors duration-300">
               新闻动态
             </StaticLink>
             <span>/</span>
@@ -42,7 +42,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
             transition={{ duration: 0.6, ease: EASE }}
             className="max-w-4xl"
           >
-            <Badge className="mb-4 bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)]/20 border-0">
+            <Badge className="mb-4 bg-[var(--color-brand-bg)] text-[var(--color-brand)] hover:bg-[var(--color-brand)]/20 border-0">
               {news.category}
             </Badge>
             <h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[var(--color-text-primary)] mb-5 tracking-tight leading-tight">
@@ -79,8 +79,8 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                 />
               </div>
             ) : (
-              <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
-                <Newspaper className="w-16 h-16 text-[var(--color-brand-primary)]/30" />
+              <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
+                <Newspaper className="w-16 h-16 text-[var(--color-brand)]/30" />
               </div>
             )}
 
@@ -112,14 +112,14 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                             />
                           ) : (
-                            <div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
-                              <Newspaper className="w-8 h-8 text-[var(--color-brand-primary)]/30" />
+                            <div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
+                              <Newspaper className="w-8 h-8 text-[var(--color-brand)]/30" />
                             </div>
                           )}
                         </div>
                         <div className="p-4">
                           <Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
-                          <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+                          <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand)] transition-colors duration-300">
                             {related.title}
                           </h3>
                           <p className="text-sm text-[var(--color-text-muted)] line-clamp-2 leading-relaxed">{related.excerpt}</p>
@@ -140,7 +140,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                 </Button>
               </StaticLink>
               <StaticLink href="/contact">
-                <Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
+                <Button size="lg" className="bg-[var(--color-brand)] hover:bg-[var(--color-brand-hover)] text-white">
                   联系我们
                 </Button>
               </StaticLink>
diff --git a/src/app/(marketing)/news/[slug]/page.tsx b/src/app/(marketing)/news/[slug]/page.tsx
index 3b3ba8c..6bffaa1 100644
--- a/src/app/(marketing)/news/[slug]/page.tsx
+++ b/src/app/(marketing)/news/[slug]/page.tsx
@@ -1,23 +1,24 @@
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { NEWS, COMPANY_INFO } from '@/lib/constants';
-import { NewsDetailClient } from './NewsDetailClient';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItemBySlug, getPublishedItems, getAllPublishedSlugs } from '@/lib/cms/data-server';
+import type { NewsItem } from '@/lib/constants/news';
+import NewsDetailContentV3 from '../news-detail-content-v3';
 
 export async function generateStaticParams() {
-  return NEWS.map((news) => ({
-    slug: news.id,
-  }));
+  const slugs = await getAllPublishedSlugs('news');
+  return slugs.map((s) => ({ slug: s.slug }));
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug } = await params;
-  const news = NEWS.find((n) => n.id === slug);
-  
-  if (!news) {
-    return {
-      title: '新闻未找到',
-    };
+  const item = await getPublishedItemBySlug('news', slug);
+
+  if (!item) {
+    return { title: '新闻未找到' };
   }
 
+  const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
   return {
     title: `${news.title} - ${COMPANY_INFO.displayName}`,
     description: news.excerpt,
@@ -26,12 +27,20 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function NewsDetailPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
-  const news = NEWS.find((n) => n.id === slug);
+  const item = await getPublishedItemBySlug('news', slug);
 
-  if (!news) {
+  if (!item) {
     notFound();
   }
 
-  const serializedNews = JSON.parse(JSON.stringify(news));
-  return <NewsDetailClient news={serializedNews} />;
-}
+  const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
+
+  // Fetch related news by same category
+  const allNews = await getPublishedItems('news');
+  const relatedNews = allNews
+    .filter((n) => n.slug !== slug && (n.data as Record<string, unknown>).category === (item.data as Record<string, unknown>).category)
+    .slice(0, 3)
+    .map((n) => ({ ...n.data, title: n.data.title || n.title } as unknown as NewsItem));
+
+  return <NewsDetailContentV3 news={JSON.parse(JSON.stringify(news))} relatedNews={JSON.parse(JSON.stringify(relatedNews))} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/news/page.tsx b/src/app/(marketing)/news/page.tsx
index 00d8820..7ddfdda 100644
--- a/src/app/(marketing)/news/page.tsx
+++ b/src/app/(marketing)/news/page.tsx
@@ -1,229 +1,16 @@
-'use client';
+import { Metadata } from 'next';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import type { NewsItem } from '@/lib/constants/news';
+import NewsContentV3 from './news-content-v3';
 
-import { useState, useMemo, ChangeEvent, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { NEWS, COMPANY_INFO } from '@/lib/constants';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { StaticLink } from '@/components/ui/static-link';
-import { LoadingState } from '@/components/ui/loading-state';
-import { InkCard } from '@/components/ui/ink-wash';
-import { Search, Calendar, ChevronLeft, ChevronRight, ArrowRight, Newspaper } from 'lucide-react';
+export const metadata: Metadata = {
+  title: `新闻动态 - ${COMPANY_INFO.displayName}`,
+  description: `了解${COMPANY_INFO.displayName}的最新动态、行业洞察与技术创新。`,
+};
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const categories = ['全部', '公司新闻', '研发动态'];
-const ITEMS_PER_PAGE = 9;
-
-export default function NewsListPage() {
-  const shouldReduceMotion = useReducedMotion();
-  const [selectedCategory, setSelectedCategory] = useState('全部');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 600);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const filteredNews = useMemo(() => {
-    return NEWS.filter((newsItem) => {
-      const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
-      const matchesSearch =
-        newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
-      return matchesCategory && matchesSearch;
-    });
-  }, [selectedCategory, searchQuery]);
-
-  const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
-  const paginatedNews = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-  }, [filteredNews, currentPage]);
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  const handleCategoryChange = (category: string) => {
-    setSelectedCategory(category);
-    setCurrentPage(1);
-  };
-
-  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-    setCurrentPage(1);
-  };
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      {/* Hero */}
-      <section className="relative pt-32 pb-12 overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="max-w-3xl"
-          >
-            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10 mb-6">
-              新闻动态
-            </div>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3">
-              了解行业趋势，把握数字化脉搏
-            </p>
-            <h1 className="text-4xl md:text-5xl lg:text-6xl tracking-tight mb-6 leading-[1.12]">
-              新闻<span className="text-[var(--color-brand-primary)] font-calligraphy">动态</span>
-            </h1>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed">
-              {COMPANY_INFO.displayName}最新动态、产品更新与行业洞察
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Filters + List */}
-      <section className="pb-16 md:pb-24">
-        <div className="container-wide">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, ease: EASE }}
-            className="mb-10 space-y-4"
-          >
-            <div className="flex flex-wrap gap-2">
-              {categories.map((category) => (
-                <Button
-                  key={category}
-                  variant={selectedCategory === category ? 'default' : 'outline'}
-                  onClick={() => handleCategoryChange(category)}
-                  className={
-                    selectedCategory === category
-                      ? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
-                      : ''
-                  }
-                >
-                  {category}
-                </Button>
-              ))}
-            </div>
-
-            <div className="relative max-w-md">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-muted)] w-5 h-5" />
-              <Input
-                type="text"
-                placeholder="搜索新闻..."
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="pl-10"
-                aria-label="搜索新闻"
-              />
-            </div>
-          </motion.div>
-
-          {paginatedNews.length === 0 ? (
-            <div className="text-center py-20">
-              <Newspaper className="w-12 h-12 text-[var(--color-border)] mx-auto mb-4" />
-              <p className="text-lg text-[var(--color-text-muted)]">没有找到相关新闻</p>
-            </div>
-          ) : (
-            <LoadingState isLoading={isLoading} variant="list">
-              <>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-                  {paginatedNews.map((newsItem, index) => (
-                    <motion.div
-                      key={newsItem.id}
-                      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-                      whileInView={{ opacity: 1, y: 0 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.5, delay: index * 0.08, ease: EASE }}
-                    >
-                      <StaticLink href={`/news/${newsItem.id}`}>
-                        <InkCard padding="none" interactive className="h-full overflow-hidden group">
-                          {newsItem.image ? (
-                            <div className="aspect-video bg-[var(--color-bg-tertiary)] overflow-hidden">
-                              <img
-                                src={newsItem.image}
-                                alt={newsItem.title}
-                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                              />
-                            </div>
-                          ) : (
-                            <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
-                              <Newspaper className="w-12 h-12 text-[var(--color-brand-primary)]/30" />
-                            </div>
-                          )}
-                          <div className="p-6">
-                            <div className="flex items-center gap-2 mb-3">
-                              <Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
-                              <div className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
-                                <Calendar className="w-3 h-3" />
-                                {newsItem.date}
-                              </div>
-                            </div>
-                            <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
-                              {newsItem.title}
-                            </h3>
-                            <p className="text-sm text-[var(--color-text-muted)] line-clamp-3 mb-4 leading-relaxed">
-                              {newsItem.excerpt}
-                            </p>
-                            <div className="flex items-center text-[var(--color-brand-primary)] text-sm font-medium">
-                              阅读更多
-                              <ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
-                            </div>
-                          </div>
-                        </InkCard>
-                      </StaticLink>
-                    </motion.div>
-                  ))}
-                </div>
-
-                {totalPages > 1 && (
-                  <div className="flex justify-center items-center gap-2 mt-10">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handlePageChange(currentPage - 1)}
-                      disabled={currentPage === 1}
-                    >
-                      <ChevronLeft className="w-4 h-4" />
-                    </Button>
-                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                      <Button
-                        key={page}
-                        variant={currentPage === page ? 'default' : 'outline'}
-                        size="icon"
-                        onClick={() => handlePageChange(page)}
-                        className={
-                          currentPage === page
-                            ? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
-                            : ''
-                        }
-                      >
-                        {page}
-                      </Button>
-                    ))}
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handlePageChange(currentPage + 1)}
-                      disabled={currentPage === totalPages}
-                    >
-                      <ChevronRight className="w-4 h-4" />
-                    </Button>
-                  </div>
-                )}
-              </>
-            </LoadingState>
-          )}
-        </div>
-      </section>
-    </div>
-  );
-}
+export default async function NewsListPage() {
+  const items = await getPublishedItems('news');
+  const news = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as NewsItem));
+  return <NewsContentV3 news={news} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 8041dca..4d976be 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -1,5 +1,18 @@
-import { HomeContentV3 } from './home-content-v3';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import HomeContentV13 from './home-content-v13';
 
-export default function HomePage() {
-  return <HomeContentV3 />;
-}
+export default async function HomePage() {
+  const [serviceItems, caseItems, statItems, heroItems] = await Promise.all([
+    getPublishedItems('service'),
+    getPublishedItems('case-study'),
+    getPublishedItems('stat-item'),
+    getPublishedItems('hero-banner'),
+  ]);
+
+  const services = serviceItems.map((item) => item.data);
+  const cases = caseItems.map((item) => item.data);
+  const stats = statItems.map((item) => item.data);
+  const heroData = heroItems[0]?.data ?? null;
+
+  return <HomeContentV13 services={services} cases={cases} stats={stats} heroData={heroData} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/products/[id]/page.test.tsx b/src/app/(marketing)/products/[id]/page.test.tsx
index 3808abd..74d8edb 100644
--- a/src/app/(marketing)/products/[id]/page.test.tsx
+++ b/src/app/(marketing)/products/[id]/page.test.tsx
@@ -18,27 +18,46 @@ jest.mock('next/link', () => {
   return MockLink;
 });
 
+jest.mock('@/lib/cms/data-server', () => {
+  const testProduct = {
+    id: 'test-product',
+    title: '测试产品',
+    category: '企业旗舰系列',
+    categoryId: 'enterprise' as const,
+    tags: ['测试', '示例'],
+    status: '研发中' as const,
+    description: '这是测试产品描述',
+    overview: '这是测试产品概述',
+    image: '/placeholder.png',
+    heroThemeId: 'default',
+    features: ['功能1', '功能2'],
+    benefits: ['优势1', '优势2'],
+    process: ['步骤1', '步骤2'],
+    specs: ['规格1', '规格2'],
+    caseStudies: [],
+    dataProofs: [],
+    certifications: [],
+  };
+  const testItem = {
+    id: 'test-product',
+    slug: 'test-product',
+    title: '测试产品',
+    data: testProduct,
+  };
+  return {
+    getPublishedItems: jest.fn(() => Promise.resolve([testItem])),
+    getPublishedItemBySlug: jest.fn((_modelCode: string, slug: string) =>
+      Promise.resolve(slug === 'test-product' ? testItem : null),
+    ),
+    getAllPublishedSlugs: jest.fn(() => Promise.resolve([{ slug: 'test-product' }])),
+  };
+});
+
 jest.mock('@/lib/constants', () => ({
   COMPANY_INFO: {
     displayName: '睿新致远',
     name: '四川睿新致远科技有限公司',
   },
-  PRODUCTS: [
-    {
-      id: 'test-product',
-      title: '测试产品',
-      category: '企业旗舰系列',
-      categoryId: 'enterprise',
-      tags: ['测试', '示例'],
-      status: '研发中',
-      description: '这是测试产品描述',
-      overview: '这是测试产品概述',
-      features: ['功能1', '功能2'],
-      benefits: ['优势1', '优势2'],
-      process: ['步骤1', '步骤2'],
-      specs: ['规格1', '规格2'],
-    },
-  ],
   PRODUCT_CATEGORIES: [
     {
       id: 'enterprise',
@@ -48,6 +67,48 @@ jest.mock('@/lib/constants', () => ({
   ],
 }));
 
+jest.mock('@/lib/cms/mock-data', () => {
+  const testProduct = {
+    id: 'test-product',
+    title: '测试产品',
+    category: '企业旗舰系列',
+    categoryId: 'enterprise',
+    tags: ['测试', '示例'],
+    status: '研发中',
+    description: '这是测试产品描述',
+    overview: '这是测试产品概述',
+    features: ['功能1', '功能2'],
+    benefits: ['优势1', '优势2'],
+    process: ['步骤1', '步骤2'],
+    specs: ['规格1', '规格2'],
+  };
+  const testItem = {
+    id: 'test-product',
+    modelId: 'model-product',
+    modelCode: 'product',
+    title: '测试产品',
+    slug: 'test-product',
+    status: 'published',
+    version: 1,
+    sortOrder: 0,
+    data: testProduct,
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-06-01T00:00:00Z',
+    publishedAt: '2024-06-01T00:00:00Z',
+    createdBy: 'system',
+    updatedBy: 'system',
+  };
+  return {
+    getMockItems: jest.fn(() => [testItem]),
+    getMockItemById: jest.fn((_modelCode: string, id: string) =>
+      id === 'test-product' ? testItem : undefined,
+    ),
+    getMockItemBySlug: jest.fn((_modelCode: string, slug: string) =>
+      slug === 'test-product' ? testItem : undefined,
+    ),
+  };
+});
+
 describe('ProductDetailPage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -98,33 +159,35 @@ describe('ProductDetailPage', () => {
     it('should render product overview section', async () => {
       const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
       render(page);
-      
-      const overview = screen.getByText('产品概述');
+
+      // 验证产品概述内容渲染
+      const overview = screen.getByText('这是测试产品概述');
       expect(overview).toBeInTheDocument();
     });
 
-    it('should render product features section as planned features', async () => {
+    it('should render product features section', async () => {
       const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
       render(page);
-      
-      const features = screen.getByText('规划功能');
+
+      const features = screen.getByText('核心功能');
       expect(features).toBeInTheDocument();
     });
 
     it('should render product benefits section', async () => {
       const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
       render(page);
-      
-      const benefits = screen.getByText('产品优势');
+
+      const benefits = screen.getByText('产品价值');
       expect(benefits).toBeInTheDocument();
     });
 
-    it('should render pricing pending section instead of pricing plans', async () => {
+    it('should render CTA section with contact link', async () => {
       const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
       render(page);
-      
-      const pricingPending = screen.getByText('定价待公布');
-      expect(pricingPending).toBeInTheDocument();
+
+      // 验证 CTA 区域有预约链接
+      const ctaLinks = screen.getAllByRole('link');
+      expect(ctaLinks.length).toBeGreaterThan(0);
     });
   });
 
diff --git a/src/app/(marketing)/products/[id]/page.tsx b/src/app/(marketing)/products/[id]/page.tsx
index bf9e5b4..7ac0c43 100644
--- a/src/app/(marketing)/products/[id]/page.tsx
+++ b/src/app/(marketing)/products/[id]/page.tsx
@@ -1,81 +1,38 @@
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
-import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { getProductCrossRefs } from '@/lib/constants/cross-references';
-import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
-import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
-import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
-import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItemBySlug, getAllPublishedSlugs } from '@/lib/cms/data-server';
+import type { Product } from '@/lib/constants/products';
+import ProductDetailContentV3 from '../product-detail-content-v3';
 
 export async function generateStaticParams() {
-  return PRODUCTS.map((product) => ({
-    id: product.id,
-  }));
+  const slugs = await getAllPublishedSlugs('product');
+  return slugs.map((s) => ({ id: s.slug }));
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const product = PRODUCTS.find((p) => p.id === id);
+  const item = await getPublishedItemBySlug('product', id);
 
-  if (!product) {
+  if (!item) {
     return { title: '产品未找到' };
   }
 
+  const product = { ...item.data, title: item.data.title || item.title } as unknown as Product;
   return {
-    title: `${product.title} - 企业数字化解决方案 | ${COMPANY_INFO.displayName}`,
-    description: `${product.description} | 12年行业深耕，全栈技术能力`,
+    title: `${product.title} - ${COMPANY_INFO.displayName}`,
+    description: product.description,
   };
 }
 
 export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const product = PRODUCTS.find((p) => p.id === id);
+  const item = await getPublishedItemBySlug('product', id);
 
-  if (!product) {
+  if (!item) {
     notFound();
   }
 
-  const theme = getHeroTheme(product.heroThemeId);
-  const crossRefs = getProductCrossRefs(product.id);
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <DetailSwipeNav type="product" currentId={product.id} />
-
-      {/* L1 - Hero 情感入口 (V3) */}
-      <DetailHeroV3
-        theme={theme}
-        badge={product.category}
-        title={product.title}
-        subtitle={product.description}
-        description={product.overview}
-        primaryAction={{ label: '预约体验', href: '/contact' }}
-        secondaryAction={{ label: '查看组合方案', href: '/products' }}
-      />
-
-      {/* L2 - 价值理性支撑 (V3) */}
-      <ProductValueSectionV3 product={product} />
-
-      {/* L3 - 信任证明 (V2) */}
-      <DetailTrustSectionV2
-        caseStudies={product.caseStudies}
-        dataProofs={product.dataProofs}
-        certifications={product.certifications}
-        accentColor={theme.accentColor}
-      />
-
-      {/* L4 - CTA + 交叉推荐 (V2) */}
-      <DetailCTASectionV2
-        theme={theme}
-        title={`探索 ${product.title} 的更多可能`}
-        description="联系我们获取专属方案，或查看产品组合了解如何与其他产品协同使用"
-        primaryAction={{ label: '预约演示', href: '/contact' }}
-        secondaryAction={{ label: '查看组合方案', href: '/products' }}
-      />
-
-      <CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
-    </div>
-  );
-}
+  const product = { ...item.data, title: item.data.title || item.title } as unknown as Product;
+  return <ProductDetailContentV3 product={JSON.parse(JSON.stringify(product))} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/products/erp-upgrade-v3/page.tsx b/src/app/(marketing)/products/erp-upgrade-v3/page.tsx
index 19500e3..ab617d2 100644
--- a/src/app/(marketing)/products/erp-upgrade-v3/page.tsx
+++ b/src/app/(marketing)/products/erp-upgrade-v3/page.tsx
@@ -1,57 +1,89 @@
 import { Metadata } from 'next';
-import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
-import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { getProductCrossRefs } from '@/lib/constants/cross-references';
+import { getProductBySlug } from '@/lib/cms/data-server';
+import { COMPANY_INFO } from '@/lib/constants';
 import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
-import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
-import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
-import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
+import { DetailHero } from '@/components/detail/detail-hero';
+import { ProductValueSection } from '@/components/detail/detail-product-value';
+import { DetailTrustSection } from '@/components/detail/detail-trust-section';
+import { DetailCTASection } from '@/components/detail/detail-cta-section';
+import type { HeroTheme } from '@/lib/constants/hero-themes';
+import type { Product, CaseStudy, DataProof, Certification } from '@/lib/constants/products';
 
 export const metadata: Metadata = {
   title: `睿新ERP管理系统（V3深度精细化版） - ${COMPANY_INFO.displayName}`,
   description: 'ERP产品页V3版本 - 现代东方美学设计系统 + L1-L5全层次精细化打磨',
 };
 
-export default function ERPUpgradeV3Page() {
-  const product = PRODUCTS.find((p) => p.id === 'erp')!;
+function deriveTheme(productData: Record<string, unknown>): HeroTheme {
+  const heroThemeId = productData.heroThemeId as string;
+  // Build a theme from product data fields, with sensible defaults
+  return {
+    id: heroThemeId || 'default',
+    name: 'ERP主题',
+    gradientFrom: '#f8f6f3',
+    gradientTo: '#f0ebe4',
+    gradientAngle: 135,
+    accentColor: '#1e3a5f',
+    accentBg: 'rgba(30, 58, 95, 0.06)',
+    texture: { type: 'grid' as const, opacity: 0.03 },
+    layout: 'left' as const,
+    badge: productData.category as string,
+  };
+}
 
-  const theme = getHeroTheme(product.heroThemeId);
-  const crossRefs = getProductCrossRefs(product.id);
+export default async function ERPUpgradeV3Page() {
+  const item = await getProductBySlug('erp');
+
+  if (!item) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">产品未找到</h2>
+          <p className="text-[var(--color-text-muted)]">ERP产品数据暂不可用，请稍后再试</p>
+        </div>
+      </div>
+    );
+  }
+
+  const data = item.data;
+  const theme = deriveTheme(data);
+  const title = item.title;
+  const description = data.description as string;
+  const overview = data.overview as string;
+  const caseStudies = (data.caseStudies ?? []) as CaseStudy[];
+  const dataProofs = (data.dataProofs ?? []) as DataProof[];
+  const certifications = (data.certifications ?? []) as Certification[];
 
   return (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <DetailSwipeNav type="product" currentId={product.id} />
+      <DetailSwipeNav type="product" currentId={item.slug || 'erp'} />
 
-      <DetailHeroV3
+      <DetailHero
         theme={theme}
         badge="企业旗舰系列"
-        title={product.title}
-        subtitle={product.description}
-        description={product.overview}
+        title={title}
+        subtitle={description}
+        description={overview}
         primaryAction={{ label: '预约体验', href: '/contact' }}
         secondaryAction={{ label: '查看方案', href: '/solutions' }}
       />
 
-      <ProductValueSectionV3 product={product} />
+      <ProductValueSection product={data as unknown as Product} />
 
-      <DetailTrustSectionV2
-        caseStudies={product.caseStudies}
-        dataProofs={product.dataProofs}
-        certifications={product.certifications}
+      <DetailTrustSection
+        caseStudies={caseStudies}
+        dataProofs={dataProofs}
+        certifications={certifications}
         accentColor={theme.accentColor}
       />
 
-      <DetailCTASectionV2
+      <DetailCTASection
         theme={theme}
-        title={`探索 ${product.title} 的无限可能`}
+        title={`探索 ${title} 的无限可能`}
         description="立即联系我们，获取专属方案和报价"
         primaryAction={{ label: '预约体验', href: '/contact' }}
         secondaryAction={{ label: '下载产品手册', href: '#' }}
       />
-
-      <CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
     </div>
   );
 }
diff --git a/src/app/(marketing)/products/erp-upgrade/page.tsx b/src/app/(marketing)/products/erp-upgrade/page.tsx
index e7aadbd..baffaa1 100644
--- a/src/app/(marketing)/products/erp-upgrade/page.tsx
+++ b/src/app/(marketing)/products/erp-upgrade/page.tsx
@@ -1,57 +1,26 @@
 import { Metadata } from 'next';
-import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
-import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { getProductCrossRefs } from '@/lib/constants/cross-references';
-import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
-import { DetailHeroV2 } from '@/components/detail-v2/detail-hero-v2';
-import { ProductValueSectionV2 } from '@/components/detail-v2/detail-product-value-v2';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
-import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
+import { getProductBySlug } from '@/lib/cms/data-server';
+import { COMPANY_INFO } from '@/lib/constants';
+import ErpUpgradeContentV2 from './erp-upgrade-content-v2';
 
 export const metadata: Metadata = {
-  title: `睿新ERP管理系统（升级版原型） - ${COMPANY_INFO.displayName}`,
-  description: '升级版ERP产品页 - 现代东方美学设计系统',
+  title: `ERP升级专题 - 企业数字化转型 | ${COMPANY_INFO.displayName}`,
+  description: '睿新ERP升级专题，为企业提供全方位数字化转型解决方案，解决数据孤岛、效率低下、安全隐患等痛点。',
 };
 
-export default function ERPUpgradePage() {
-  const product = PRODUCTS.find((p) => p.id === 'erp')!;
+export default async function ERPUpgradePage() {
+  const item = await getProductBySlug('erp');
 
-  const theme = getHeroTheme(product.heroThemeId);
-  const crossRefs = getProductCrossRefs(product.id);
+  if (!item) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">数据暂不可用</h2>
+          <p className="text-[var(--color-text-muted)]">ERP产品数据暂不可用，请稍后再试</p>
+        </div>
+      </div>
+    );
+  }
 
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <DetailSwipeNav type="product" currentId={product.id} />
-
-      <DetailHeroV2
-        theme={theme}
-        badge="企业旗舰系列"
-        title={product.title}
-        subtitle={product.description}
-        description={product.overview}
-        primaryAction={{ label: '预约体验', href: '/contact' }}
-        secondaryAction={{ label: '查看方案', href: '/solutions' }}
-      />
-
-      <ProductValueSectionV2 product={product} />
-
-      <DetailTrustSectionV2
-        caseStudies={product.caseStudies}
-        dataProofs={product.dataProofs}
-        certifications={product.certifications}
-        accentColor={theme.accentColor}
-      />
-
-      <DetailCTASectionV2
-        theme={theme}
-        title={`探索 ${product.title} 的无限可能`}
-        description="立即联系我们，获取专属方案和报价"
-        primaryAction={{ label: '预约体验', href: '/contact' }}
-        secondaryAction={{ label: '下载产品手册', href: '#' }}
-      />
-
-      <CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
-    </div>
-  );
+  return <ErpUpgradeContentV2 item={JSON.parse(JSON.stringify(item))} />;
 }
diff --git a/src/app/(marketing)/products/page.tsx b/src/app/(marketing)/products/page.tsx
index 5b8a6dd..238d517 100644
--- a/src/app/(marketing)/products/page.tsx
+++ b/src/app/(marketing)/products/page.tsx
@@ -1,226 +1,16 @@
-'use client';
+import { Metadata } from 'next';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import type { Product } from '@/lib/constants/products';
+import ProductsContentV3 from './products-content-v3';
 
-import { motion } from 'framer-motion';
-import { PRODUCTS } from '@/lib/constants/products';
-import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { InkCard, InkWashBackground } from '@/components/ui/ink-wash';
-import { BreadcrumbSchema } from '@/components/seo/structured-data';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { StaticLink } from '@/components/ui/static-link';
-import { Package, Cpu, ArrowRight, Lock } from 'lucide-react';
+export const metadata: Metadata = {
+  title: `产品矩阵 - ${COMPANY_INFO.displayName}`,
+  description: `覆盖企业数字化全场景的产品矩阵，从数据智能到业务协同，每一款产品都经过实战验证。`,
+};
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
-const specializedProducts = PRODUCTS.filter(p => p.categoryId === 'specialized');
-
-/** 产品常见组合推荐 */
-const SUITE_COMBOS = [
-  { products: ['erp', 'bi'], label: 'ERP + BI 数据驱动组合' },
-  { products: ['crm', 'bi'], label: 'CRM + BI 客户洞察组合' },
-  { products: ['erp', 'sds'], label: 'ERP + SDS 供应链优化组合' },
-  { products: ['cms', 'oa'], label: 'CMS + OA 协同运营组合' },
-];
-
-function getProductCombo(productId: string) {
-  return SUITE_COMBOS.filter(c => c.products.includes(productId));
-}
-
-export default function ProductsPage() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '产品', href: '/products' }]} />
-
-      {/* Hero */}
-      <NarrativeHero
-        badge={{ text: '自研产品' }}
-        title="覆盖企业数字化全场景的"
-        highlight="产品矩阵"
-        subtitle="从数据智能到业务协同，每一款产品都经过实战验证"
-        description="6 大核心产品互为补充，常以组合形式出现在行业解决方案中。不确定需要哪些产品？让我们帮您诊断。"
-        primaryCta={{ label: '预约产品演示', href: '/contact' }}
-        secondaryCta={{ label: '查看行业方案', href: '/solutions' }}
-        stats={[
-          { value: '6', label: '产品线' },
-          { value: '100%', label: '自研率' },
-          { value: '全栈', label: '技术覆盖' },
-        ]}
-      />
-
-      {/* 企业套装区 (Hub 核心) */}
-      <section className="relative section-padding bg-[var(--color-bg-section)] overflow-hidden">
-        <InkWashBackground variant="subtle" />
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="mb-10"
-          >
-            <div className="flex items-center gap-3 mb-4">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-brand-primary-bg)]">
-                <Package className="h-5 w-5 text-[var(--color-brand-primary)]" />
-              </div>
-              <div>
-                <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">企业套装</h2>
-                <p className="text-sm text-[var(--color-text-muted)]">6 大核心产品互为补充，覆盖企业数字化全场景</p>
-              </div>
-            </div>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-            {enterpriseProducts.map((product, idx) => {
-              const combos = getProductCombo(product.id);
-              return (
-                <motion.div
-                  key={product.id}
-                  initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: '-40px' }}
-                  transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
-                >
-                  <InkCard padding="md" href={`/products/${product.id}`} className="group h-full flex flex-col">
-                    <div className="flex items-center gap-2 mb-3">
-                      <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
-                        {product.status}
-                      </span>
-                      {product.tags.slice(0, 2).map(tag => (
-                        <span key={tag} className="px-2 py-0.5 rounded text-[10px] bg-[var(--color-bg-section)] text-[var(--color-text-subtle)] border border-[var(--color-border-primary)]">
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                    <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
-                      {product.title}
-                    </h3>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4 flex-1">
-                      {product.description}
-                    </p>
-                    {/* 常见组合标签 */}
-                    {combos.length > 0 && (
-                      <div className="pt-3 border-t border-[var(--color-border-primary)]">
-                        <p className="text-[10px] text-[var(--color-text-subtle)] mb-1.5">常见组合</p>
-                        <div className="flex flex-wrap gap-1">
-                          {combos.map(c => (
-                            <span key={c.label} className="px-2 py-0.5 rounded text-[10px] text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)] font-medium">
-                              {c.label}
-                            </span>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </InkCard>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* 专业产品区 (Independent) */}
-      <section className="relative section-padding bg-[var(--color-bg-primary)] overflow-hidden">
-        <InkWashBackground variant="subtle" />
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="mb-10"
-          >
-            <div className="flex items-center gap-3 mb-4">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-bg-section)]">
-                <Cpu className="h-5 w-5 text-[var(--color-text-muted)]" />
-              </div>
-              <div>
-                <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">专业产品</h2>
-                <p className="text-sm text-[var(--color-text-muted)]">自成体系的独立产品线，面向特种场景</p>
-              </div>
-            </div>
-          </motion.div>
-
-          {specializedProducts.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-              {specializedProducts.map((product, idx) => (
-                <motion.div
-                  key={product.id}
-                  initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
-                >
-                  <InkCard padding="md" href={`/products/${product.id}`} className="group h-full flex flex-col">
-                    <div className="flex items-center gap-2 mb-3">
-                      <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
-                        {product.status}
-                      </span>
-                      {product.tags.slice(0, 3).map(tag => (
-                        <span key={tag} className="px-2 py-0.5 rounded text-[10px] bg-[var(--color-bg-section)] text-[var(--color-text-subtle)] border border-[var(--color-border-primary)]">
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                    <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
-                      {product.title}
-                    </h3>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed flex-1">
-                      {product.description}
-                    </p>
-                  </InkCard>
-                </motion.div>
-              ))}
-            </div>
-          ) : (
-            <div className="rounded-2xl border-2 border-dashed border-[var(--color-border-primary)] bg-[var(--color-bg-section)] p-12 text-center">
-              <Lock className="mx-auto mb-4 h-12 w-12 text-[var(--color-text-subtle)]" />
-              <h3 className="mb-2 text-lg font-semibold text-[var(--color-text-primary)]">独立产品即将上线</h3>
-              <p className="mb-6 max-w-md mx-auto text-sm text-[var(--color-text-muted)]">
-                安全产品、特种行业软件、硬件产品等独立产品线正在规划中，敬请期待。
-              </p>
-              <StaticLink
-                href="/contact"
-                className="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-primary)] px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:bg-[var(--color-brand-primary-hover)]"
-              >
-                联系我们了解详情
-                <ArrowRight className="h-4 w-4" />
-              </StaticLink>
-            </div>
-          )}
-        </div>
-      </section>
-
-      {/* 套装→方案关联 */}
-      <section className="relative py-16 md:py-20 bg-[var(--color-bg-section)]">
-        <div className="container-wide text-center">
-          <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">
-            这些产品如何组合？
-          </h3>
-          <p className="text-sm text-[var(--color-text-muted)] mb-6 max-w-lg mx-auto">
-            查看我们的行业解决方案，了解产品组合如何为不同行业创造价值
-          </p>
-          <StaticLink
-            href="/solutions"
-            className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-hover)] transition-colors group"
-          >
-            浏览行业解决方案
-            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-          </StaticLink>
-        </div>
-      </section>
-
-      {/* CTA */}
-      <NarrativeCTA
-        title="不确定需要哪些产品？"
-        description="告诉我们您的业务场景和痛点，我们帮您诊断并推荐最适合的产品组合。首次咨询免费。"
-        primaryLabel="预约产品诊断"
-        primaryHref="/contact"
-        secondaryLabel="查看全部方案"
-        secondaryHref="/solutions"
-      />
-    </div>
-  );
-}
+export default async function ProductsPage() {
+  const items = await getPublishedItems('product');
+  const products = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Product));
+  return <ProductsContentV3 products={products} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/products/standalone/[id]/client.tsx b/src/app/(marketing)/products/standalone/[id]/client.tsx
index 026707d..3ba4178 100644
--- a/src/app/(marketing)/products/standalone/[id]/client.tsx
+++ b/src/app/(marketing)/products/standalone/[id]/client.tsx
@@ -1,16 +1,17 @@
 'use client';
 
 import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
+import { DetailHero } from '@/components/detail/detail-hero';
+import { DetailTrustSection } from '@/components/detail/detail-trust-section';
+import { DetailCTASection } from '@/components/detail/detail-cta-section';
 import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
 import { motion } from 'framer-motion';
-import { CheckCircle2, Clock, Shield, Lock, Cpu, HardDrive, ArrowRight } from 'lucide-react';
-import type { StandaloneProduct } from '@/lib/constants/standalone-products';
+import { CheckCircle2, Shield, Lock, Cpu, HardDrive, ArrowRight } from 'lucide-react';
+import type { ContentItem } from '@/lib/cms/types';
+import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products';
 
 interface StandaloneProductClientProps {
-  product: StandaloneProduct;
+  item: ContentItem;
 }
 
 const categoryIcons: Record<string, typeof Shield> = {
@@ -19,28 +20,50 @@ const categoryIcons: Record<string, typeof Shield> = {
   hardware: HardDrive,
 };
 
-export function StandaloneProductClient({ product }: StandaloneProductClientProps) {
-  const theme = getHeroTheme(product.heroThemeId);
-  const Icon = categoryIcons[product.category] || Shield;
+function getStatusClass(status: string): 'coming-soon' | 'beta' | 'active' {
+  if (status === '研发中') return 'coming-soon';
+  if (status === '内测中') return 'beta';
+  if (status === '已发布') return 'active';
+  return 'beta';
+}
+
+export function StandaloneProductClient({ item }: StandaloneProductClientProps) {
+  const data = item.data;
+  const id = item.slug || '';
+  const title = item.title;
+  const description = data.description as string;
+  const category = data.category as string;
+  const status = getStatusClass(data.status as string);
+  const heroThemeId = data.heroThemeId as string;
+  const features = (data.features ?? []) as string[];
+  const caseStudies = (data.caseStudies ?? []) as CaseStudy[];
+  const dataProofs = (data.dataProofs ?? []) as DataProof[];
+  const certifications = (data.certifications ?? []) as Certification[];
+
+  const theme = getHeroTheme(heroThemeId);
+  const Icon = categoryIcons[category] || Shield;
+
+  // Determine badge text
+  const badgeText = status === 'coming-soon' ? '敬请期待' : category;
 
   return (
     <div className="min-h-screen">
-      <DetailSwipeNav type="product" currentId={product.id} />
+      <DetailSwipeNav type="product" currentId={id} />
 
-      <DetailHeroV3
+      <DetailHero
         theme={theme}
-        badge={product.status === 'coming-soon' ? '敬请期待' : product.badge}
-        title={product.title}
-        subtitle={product.description}
+        badge={badgeText}
+        title={title}
+        subtitle={description}
         primaryAction={
-          product.status === 'coming-soon'
+          status === 'coming-soon'
             ? undefined
             : { label: '了解详情', href: '/contact' }
         }
         secondaryAction={{ label: '返回产品列表', href: '/products' }}
       />
 
-      {product.status === 'coming-soon' ? (
+      {status === 'coming-soon' ? (
         <section className="bg-white py-16 lg:py-20">
           <div className="container-wide">
             <motion.div
@@ -51,56 +74,56 @@ export function StandaloneProductClient({ product }: StandaloneProductClientProp
               className="max-w-3xl mx-auto text-center"
             >
               <div className="mb-6 flex justify-center">
-                <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gray-100 text-gray-400">
+                <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-bg-secondary text-text-muted">
                   <Lock className="h-10 w-10" />
                 </div>
               </div>
-              
-              <h2 className="mb-4 text-2xl font-bold text-gray-900">产品即将上线</h2>
-              <p className="mb-8 text-gray-600 leading-relaxed">
-                {product.title}正在紧张开发中，我们将为您带来更专业的{product.category === 'security' ? '安全防护' : product.category === 'specialized-software' ? '行业解决方案' : '硬件产品'}体验。
+
+              <h2 className="mb-4 text-2xl font-bold text-ink">产品即将上线</h2>
+              <p className="mb-8 text-text-secondary leading-relaxed">
+                {title}正在紧张开发中。
               </p>
 
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
-                {product.previewFeatures.map((feature, index) => (
-                  <motion.div
-                    key={index}
-                    initial={{ opacity: 0, y: 10 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.3, delay: index * 0.08 }}
-                    className="rounded-lg border border-gray-200 bg-gray-50 p-4"
-                  >
-                    <div className="mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white text-gray-400">
-                      <Icon className="h-4 w-4" />
-                    </div>
-                    <h3 className="mb-1 text-sm font-semibold text-gray-900">{feature.title}</h3>
-                    <p className="text-xs leading-relaxed text-gray-500">{feature.description}</p>
-                  </motion.div>
-                ))}
-              </div>
+              {features.length > 0 && (
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
+                  {features.map((feature, index) => (
+                    <motion.div
+                      key={index}
+                      initial={{ opacity: 0, y: 10 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ duration: 0.3, delay: index * 0.08 }}
+                      className="rounded-lg border border-border-primary bg-bg-secondary p-4"
+                    >
+                      <div className="mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white text-text-muted">
+                        <Icon className="h-4 w-4" />
+                      </div>
+                      <h3 className="mb-1 text-sm font-semibold text-ink">
+                        {feature.includes('：') ? feature.split('：')[0] : feature}
+                      </h3>
+                      <p className="text-xs leading-relaxed text-text-muted">
+                        {feature.includes('：') ? feature.split('：')[1] : ''}
+                      </p>
+                    </motion.div>
+                  ))}
+                </div>
+              )}
 
               <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                 <a
                   href="/contact"
-                  className="inline-flex items-center gap-2 rounded-lg bg-[#C41E3A] px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#C41E3A]/90 hover:shadow-lg"
+                  className="inline-flex items-center gap-2 rounded-lg bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg"
                 >
                   获取上线通知
                   <ArrowRight className="h-4 w-4" />
                 </a>
                 <a
                   href="/products"
-                  className="inline-flex items-center rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:border-gray-400 hover:bg-gray-50"
+                  className="inline-flex items-center rounded-lg border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
                 >
                   查看其他产品
                 </a>
               </div>
-
-              {product.expectedLaunch && (
-                <p className="mt-6 text-sm text-gray-500">
-                  预计上线时间：<span className="font-medium text-gray-700">{product.expectedLaunch}</span>
-                </p>
-              )}
             </motion.div>
           </div>
         </section>
@@ -115,59 +138,41 @@ export function StandaloneProductClient({ product }: StandaloneProductClientProp
                   viewport={{ once: true }}
                   transition={{ duration: 0.5 }}
                 >
-                  <h2 className="mb-6 text-2xl font-bold text-gray-900">核心能力</h2>
-                  <ul className="space-y-3">
-                    {(product.features ?? []).map((feature, index) => (
-                      <motion.li
-                        key={index}
-                        initial={{ opacity: 0, x: -10 }}
-                        whileInView={{ opacity: 1, x: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.3, delay: index * 0.05 }}
-                        className="flex items-start gap-3"
-                      >
-                        <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-[#C41E3A]" />
-                        <span className="text-sm leading-relaxed text-gray-700">{feature}</span>
-                      </motion.li>
-                    ))}
-                  </ul>
-                </motion.div>
-
-                <motion.div
-                  initial={{ opacity: 0, x: 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: 0.15 }}
-                >
-                  <h2 className="mb-6 flex items-center gap-2 text-2xl font-bold text-gray-900">
-                    <Clock className="h-5 w-5 text-[#C41E3A]" />
-                    适用场景
-                  </h2>
-                  <div className="space-y-4">
-                    {(product.useCases ?? []).map((useCase, index) => (
-                      <motion.div
-                        key={index}
-                        initial={{ opacity: 0, y: 10 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.3, delay: index * 0.06 }}
-                        className="rounded-lg border border-red-50 bg-red-50/30 p-4"
-                      >
-                        <h3 className="mb-1 text-sm font-semibold text-gray-900">{useCase.title}</h3>
-                        <p className="text-xs leading-relaxed text-gray-600">{useCase.description}</p>
-                      </motion.div>
-                    ))}
-                  </div>
+                  <h2 className="mb-6 text-2xl font-bold text-ink">核心能力</h2>
+                  {features.length > 0 ? (
+                    <ul className="space-y-3">
+                      {features.map((feature, index) => (
+                        <motion.li
+                          key={index}
+                          initial={{ opacity: 0, x: -10 }}
+                          whileInView={{ opacity: 1, x: 0 }}
+                          viewport={{ once: true }}
+                          transition={{ duration: 0.3, delay: index * 0.05 }}
+                          className="flex items-start gap-3"
+                        >
+                          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-brand" />
+                          <span className="text-sm leading-relaxed text-text-secondary">{feature}</span>
+                        </motion.li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <p className="text-text-muted">暂无功能详情</p>
+                  )}
                 </motion.div>
               </div>
             </div>
           </section>
 
-          <DetailTrustSectionV2 accentColor={theme.accentColor} />
+          <DetailTrustSection
+            caseStudies={caseStudies}
+            dataProofs={dataProofs}
+            certifications={certifications}
+            accentColor={theme.accentColor}
+          />
 
-          <DetailCTASectionV2
+          <DetailCTASection
             theme={theme}
-            title={`了解更多关于${product.title}`}
+            title={`了解更多关于${title}`}
             description="联系我们，获取详细的产品资料和方案报价"
             primaryAction={{ label: '预约演示', href: '/contact' }}
             secondaryAction={{ label: '下载产品手册', href: '#' }}
diff --git a/src/app/(marketing)/products/standalone/[id]/page.tsx b/src/app/(marketing)/products/standalone/[id]/page.tsx
index af78aca..9bbc6c1 100644
--- a/src/app/(marketing)/products/standalone/[id]/page.tsx
+++ b/src/app/(marketing)/products/standalone/[id]/page.tsx
@@ -1,38 +1,45 @@
 import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { STANDALONE_PRODUCTS } from '@/lib/constants/standalone-products';
+import { getPublishedItemBySlug, getPublishedItems } from '@/lib/cms/data-server';
 import { COMPANY_INFO } from '@/lib/constants';
 import { StandaloneProductClient } from './client';
 
 export async function generateStaticParams() {
-  return STANDALONE_PRODUCTS.map((product) => ({
-    id: product.id,
-  }));
+  const items = await getPublishedItems('product');
+  return items
+    .filter((item) => item.data.categoryId === 'specialized')
+    .map((item) => ({ id: item.slug! }));
 }
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const product = STANDALONE_PRODUCTS.find((p) => p.id === id);
+  const item = await getPublishedItemBySlug('product', id);
 
-  if (!product) {
+  if (!item) {
     return {
       title: '产品未找到',
     };
   }
 
   return {
-    title: `${product.title} - 专业产品 | ${COMPANY_INFO.displayName}`,
-    description: product.description,
+    title: `${item.title} - 专业产品 | ${COMPANY_INFO.displayName}`,
+    description: item.data.description as string,
   };
 }
 
 export default async function StandaloneProductPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const product = STANDALONE_PRODUCTS.find((p) => p.id === id);
+  const item = await getPublishedItemBySlug('product', id);
 
-  if (!product) {
-    notFound();
+  if (!item || item.data.categoryId !== 'specialized') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">产品未找到</h2>
+          <p className="text-[var(--color-text-muted)]">该产品不存在或已被移除</p>
+        </div>
+      </div>
+    );
   }
 
-  return <StandaloneProductClient product={JSON.parse(JSON.stringify(product))} />;
+  return <StandaloneProductClient item={JSON.parse(JSON.stringify(item))} />;
 }
diff --git a/src/app/(marketing)/services/[id]/client.tsx b/src/app/(marketing)/services/[id]/client.tsx
index 9791035..fbc1aae 100644
--- a/src/app/(marketing)/services/[id]/client.tsx
+++ b/src/app/(marketing)/services/[id]/client.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { getServiceCrossRefs } from '@/lib/constants/cross-references';
-import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
-import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
-import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
-import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
+import ServiceDetailContentV4 from '../service-detail-content-v4';
 import type { Service } from '@/lib/constants/services';
 
 interface ServiceDetailClientProps {
@@ -15,43 +8,5 @@ interface ServiceDetailClientProps {
 }
 
 export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
-  const theme = getHeroTheme(service.heroThemeId);
-  const crossRefs = getServiceCrossRefs(service.id);
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <DetailSwipeNav type="service" currentId={service.id} />
-
-      {/* L1 - Hero 情感入口 (V3) */}
-      <DetailHeroV3
-        theme={theme}
-        badge="专业服务"
-        title={service.title}
-        subtitle={service.description}
-        primaryAction={{ label: '立即咨询', href: '/contact' }}
-        secondaryAction={{ label: '查看案例', href: '/cases' }}
-      />
-
-      {/* L2 - 价值理性支撑 (V3) */}
-      <ServiceValueSectionV3 service={service} />
-
-      {/* L3 - 信任证明 (V2) */}
-      <DetailTrustSectionV2
-        caseStudies={service.caseStudies}
-        dataProofs={service.dataProofs}
-        accentColor={theme.accentColor}
-      />
-
-      {/* L4 - CTA转化 (V2) */}
-      <DetailCTASectionV2
-        theme={theme}
-        title={`准备好开始${service.title}了吗？`}
-        description="联系我们，获取专属方案和报价"
-        primaryAction={{ label: '预约咨询', href: '/contact' }}
-        secondaryAction={{ label: '了解更多服务', href: '/services' }}
-      />
-
-      <CrossRecommendGrid items={crossRefs} title="相关解决方案" />
-    </div>
-  );
+  return <ServiceDetailContentV4 service={service} />;
 }
diff --git a/src/app/(marketing)/services/[id]/page.tsx b/src/app/(marketing)/services/[id]/page.tsx
index 19171be..1b39303 100644
--- a/src/app/(marketing)/services/[id]/page.tsx
+++ b/src/app/(marketing)/services/[id]/page.tsx
@@ -1,24 +1,24 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { SERVICES, COMPANY_INFO } from '@/lib/constants';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItemBySlug, getAllPublishedSlugs } from '@/lib/cms/data-server';
+import type { Service } from '@/lib/constants/services';
 import { ServiceDetailClient } from './client';
 
 export async function generateStaticParams() {
-  return SERVICES.map((service) => ({
-    id: service.id,
-  }));
+  const slugs = await getAllPublishedSlugs('service');
+  return slugs.map((s) => ({ id: s.slug }));
 }
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const service = SERVICES.find((s) => s.id === id);
+  const item = await getPublishedItemBySlug('service', id);
 
-  if (!service) {
-    return {
-      title: '服务未找到',
-    };
+  if (!item) {
+    return { title: '服务未找到' };
   }
 
+  const service = { ...item.data, title: item.data.title || item.title } as unknown as Service;
   return {
     title: `${service.title}服务 - 专业团队全程陪跑 | ${COMPANY_INFO.displayName}`,
     description: service.description,
@@ -27,11 +27,12 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
 
 export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const service = SERVICES.find((s) => s.id === id);
+  const item = await getPublishedItemBySlug('service', id);
 
-  if (!service) {
+  if (!item) {
     notFound();
   }
 
+  const service = { ...item.data, title: item.data.title || item.title } as unknown as Service;
   return <ServiceDetailClient service={JSON.parse(JSON.stringify(service))} />;
-}
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/services/page.tsx b/src/app/(marketing)/services/page.tsx
index 53e54c1..59b8230 100644
--- a/src/app/(marketing)/services/page.tsx
+++ b/src/app/(marketing)/services/page.tsx
@@ -1,233 +1,16 @@
-'use client';
+import { Metadata } from 'next';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import type { Service } from '@/lib/constants/services';
+import ServicesContentV3 from './services-content-v3';
 
-import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
-import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { InkCard } from '@/components/ui/ink-wash';
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import {
-  Code,
-  BarChart3,
-  Lightbulb,
-  Puzzle,
-  ClipboardList,
-  PencilRuler,
-  Rocket,
-  HeartHandshake,
-  Briefcase,
-  RefreshCcw,
-  Handshake,
-} from 'lucide-react';
-import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
+export const metadata: Metadata = {
+  title: `服务 - ${COMPANY_INFO.displayName}`,
+  description: `专业技术团队，为您提供全方位的数字化解决方案。${COMPANY_INFO.displayName}涵盖软件开发、数据分析、咨询服务等核心业务。`,
+};
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const SERVICE_MATRIX: ValuePoint[] = [
-  {
-    icon: Code,
-    title: '软件开发',
-    description: '从需求分析到上线运维，提供全栈定制化开发。企业管理系统、Web/移动应用、数据中台——用扎实的工程能力交付高质量软件。',
-    stat: '95%',
-    statLabel: '准时交付率',
-  },
-  {
-    icon: BarChart3,
-    title: '数据分析',
-    description: '多源数据整合、可视化看板、预测模型——让数据从"存着"变成"用着"，为经营决策提供可量化的洞察支撑。',
-    stat: '100+',
-    statLabel: '分析模型',
-  },
-  {
-    icon: Lightbulb,
-    title: '技术咨询',
-    description: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。',
-    stat: '90%',
-    statLabel: '方案落地率',
-  },
-  {
-    icon: Puzzle,
-    title: '方案实施',
-    description: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付，确保方案不只是 PPT。',
-    stat: '30+',
-    statLabel: '行业方案',
-  },
-];
-
-const SERVICE_PROCESS = [
-  { icon: ClipboardList, step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
-  { icon: PencilRuler, step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
-  { icon: Rocket, step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
-  { icon: HeartHandshake, step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
-];
-
-const SERVICE_MODES = [
-  {
-    icon: Briefcase,
-    title: '项目制',
-    description: '针对明确的需求和交付目标，以项目为单位进行合作。适合有清晰边界的一次性建设类项目。',
-    highlight: '固定范围 · 固定周期',
-  },
-  {
-    icon: RefreshCcw,
-    title: '订阅制',
-    description: '按月或按年持续提供技术支持和迭代优化。适合需要长期维护、持续演进的产品和系统。',
-    highlight: '持续迭代 · 弹性调整',
-  },
-  {
-    icon: Handshake,
-    title: '长期陪跑',
-    description: '以合作伙伴身份深度参与您的数字化进程，从规划到执行全程陪伴。适合正在系统性转型的企业。',
-    highlight: '深度参与 · 共同成长',
-  },
-];
-
-export default function ServicesPage() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      {/* Layer 1: Hero */}
-      <NarrativeHero
-        badge={{ text: '专业服务', variant: 'green' }}
-        title="从规划到运维的"
-        highlight="全程陪伴"
-        subtitle="不只是技术供应商，更是您数字化转型的同行者"
-        description="12 年行业深耕，我们深知每个项目背后都是真实的业务诉求。从第一次沟通到系统稳定运行，我们始终在您身边。"
-        primaryCta={{ label: '聊聊您的需求', href: '/contact' }}
-        secondaryCta={{ label: '查看产品矩阵', href: '/products' }}
-        stats={[
-          { value: '4 大', label: '服务领域' },
-          { value: '3 种', label: '合作模式' },
-          { value: '全流程', label: '服务保障' },
-        ]}
-      />
-
-      {/* Layer 2: Service Matrix */}
-      <NarrativeValue
-        badge="服务能力"
-        title="四大核心服务"
-        highlight="领域"
-        subtitle="覆盖企业数字化全生命周期的专业能力"
-        points={SERVICE_MATRIX}
-        columns={4}
-        bgVariant="section"
-      />
-
-      {/* Service Process */}
-      <section className="section-padding bg-[var(--color-bg-primary)] relative overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: '-100px' }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="mb-14"
-          >
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
-              <span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">服务流程</span>
-            </div>
-            <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
-              我们的<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">做事方式</span>
-            </h2>
-            <p className="text-base text-[var(--color-text-muted)] max-w-2xl">
-              没有复杂的流程，只有清晰的四步：听懂需求、想好方案、快速交付、长期陪伴。
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {SERVICE_PROCESS.map((item, index) => {
-              const Icon = item.icon;
-              return (
-                <motion.div
-                  key={item.step}
-                  initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: '-60px' }}
-                  transition={{ duration: 0.5, delay: index * 0.1, ease: EASE }}
-                  className="relative"
-                >
-                  {/* Connector line */}
-                  {index < SERVICE_PROCESS.length - 1 && (
-                    <div className="hidden lg:block absolute top-10 left-[calc(50%+2rem)] w-[calc(100%-2rem)] h-px bg-[var(--color-border-primary)]" />
-                  )}
-                  <div className="text-center">
-                    <div className="mx-auto mb-5 w-20 h-20 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] flex items-center justify-center relative">
-                      <Icon className="w-8 h-8 text-[var(--color-text-primary)]" strokeWidth={1.5} />
-                      <span className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-[var(--color-brand-primary)] text-white text-xs font-bold flex items-center justify-center">
-                        {item.step}
-                      </span>
-                    </div>
-                    <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{item.title}</h3>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed max-w-[200px] mx-auto">{item.desc}</p>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Service Modes */}
-      <section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: '-100px' }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="mb-14"
-          >
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
-              <span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">合作模式</span>
-            </div>
-            <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
-              灵活的<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">合作方式</span>
-            </h2>
-            <p className="text-base text-[var(--color-text-muted)] max-w-2xl">
-              不同企业有不同节奏，我们提供三种合作模式，找到最适合您的那一种。
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {SERVICE_MODES.map((mode, idx) => {
-              const Icon = mode.icon;
-              return (
-                <motion.div
-                  key={mode.title}
-                  initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: '-60px' }}
-                  transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
-                >
-                  <InkCard padding="lg" className="h-full">
-                    <div className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5">
-                      <Icon className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
-                    </div>
-                    <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">{mode.title}</h3>
-                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">{mode.description}</p>
-                    <div className="inline-flex items-center px-3 py-1 rounded-full bg-[var(--color-bg-section)] border border-[var(--color-border-primary)]">
-                      <span className="text-xs font-medium text-[var(--color-text-secondary)]">{mode.highlight}</span>
-                    </div>
-                  </InkCard>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Layer 4: CTA */}
-      <NarrativeCTA
-        title="聊聊您的需求"
-        description="无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。首次咨询免费，没有任何销售压力。"
-        primaryLabel="预约免费咨询"
-        primaryHref="/contact"
-        secondaryLabel="了解我们的团队"
-        secondaryHref="/team"
-      />
-    </div>
-  );
-}
+export default async function ServicesPage() {
+  const items = await getPublishedItems('service');
+  const services = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Service));
+  return <ServicesContentV3 services={services} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/solutions/[id]/client.tsx b/src/app/(marketing)/solutions/[id]/client.tsx
index 5e119a1..dcc91b5 100644
--- a/src/app/(marketing)/solutions/[id]/client.tsx
+++ b/src/app/(marketing)/solutions/[id]/client.tsx
@@ -1,59 +1,14 @@
 'use client';
 
-import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
-import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
-import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-value-v3';
-import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
-import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
-import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
-import { getHeroTheme } from '@/lib/constants/hero-themes';
-import { getSolutionCrossRefs } from '@/lib/constants/cross-references';
+import SolutionDetailContentV3 from '../solution-detail-content-v3';
 import type { Solution } from '@/lib/constants/solutions';
+import type { Product } from '@/lib/constants/products';
 
 interface SolutionDetailClientProps {
   solution: Solution;
+  products?: Product[];
 }
 
-export function SolutionDetailClient({ solution }: SolutionDetailClientProps) {
-  const theme = getHeroTheme(solution.heroThemeId || 'solution');
-  const crossRefs = getSolutionCrossRefs(solution.id);
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <DetailSwipeNav type="solution" currentId={solution.id} />
-
-      {/* L1 - Hero 情感入口 (V3) */}
-      <DetailHeroV3
-        theme={theme}
-        badge={`${solution.industry}解决方案`}
-        title={solution.title}
-        subtitle={solution.subtitle || solution.description}
-        description={solution.description}
-        primaryAction={{ label: '立即咨询', href: '/contact' }}
-        secondaryAction={{ label: '查看案例', href: '/cases' }}
-      />
-
-      {/* L2 - 价值理性支撑 (V3) */}
-      <SolutionValueSectionV3 solution={solution} />
-
-      {/* L3 - 信任证明 (V2) — 条件渲染：有案例/数据/资质时才显示 */}
-      <DetailTrustSectionV2
-        caseStudies={solution.caseStudies}
-        dataProofs={solution.dataProofs}
-        certifications={solution.certifications}
-        accentColor={theme.accentColor}
-      />
-
-      {/* L4 - CTA转化 (V2) */}
-      <DetailCTASectionV2
-        theme={theme}
-        title={`探索 ${solution.title} 的无限可能`}
-        description="联系我们，获取专属方案和报价"
-        primaryAction={{ label: '立即咨询', href: '/contact' }}
-        secondaryAction={{ label: '下载方案白皮书', href: '#' }}
-      />
-
-      <CrossRecommendGrid items={crossRefs} title="相关产品与服务" />
-    </div>
-  );
+export function SolutionDetailClient({ solution, products }: SolutionDetailClientProps) {
+  return <SolutionDetailContentV3 solution={solution} products={products} />;
 }
diff --git a/src/app/(marketing)/solutions/[id]/page.tsx b/src/app/(marketing)/solutions/[id]/page.tsx
index 5298deb..2c87951 100644
--- a/src/app/(marketing)/solutions/[id]/page.tsx
+++ b/src/app/(marketing)/solutions/[id]/page.tsx
@@ -1,36 +1,44 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { SOLUTIONS } from '@/lib/constants/solutions';
 import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItemBySlug, getPublishedItems, getAllPublishedSlugs } from '@/lib/cms/data-server';
+import type { Solution } from '@/lib/constants/solutions';
+import type { Product } from '@/lib/constants/products';
 import { SolutionDetailClient } from './client';
 
 export async function generateStaticParams() {
-  return SOLUTIONS.map((solution) => ({
-    id: solution.id,
-  }));
+  const slugs = await getAllPublishedSlugs('solution');
+  return slugs.map((s) => ({ id: s.slug }));
 }
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
   const { id } = await params;
-  const solution = SOLUTIONS.find((s) => s.id === id);
+  const item = await getPublishedItemBySlug('solution', id);
 
-  if (!solution) {
+  if (!item) {
     return { title: '解决方案未找到' };
   }
 
+  const solution = { ...item.data, title: item.data.title || item.title } as unknown as Solution;
   return {
-    title: `${solution.title}解决方案 - 行业深耕端到端交付 | ${COMPANY_INFO.displayName}`,
+    title: `${solution.title} - 行业深耕端到端交付 | ${COMPANY_INFO.displayName}`,
     description: solution.description,
   };
 }
 
 export default async function SolutionDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const solution = SOLUTIONS.find((s) => s.id === id);
+  const item = await getPublishedItemBySlug('solution', id);
 
-  if (!solution) {
+  if (!item) {
     notFound();
   }
 
-  return <SolutionDetailClient solution={JSON.parse(JSON.stringify(solution))} />;
-}
+  const solution = { ...item.data, title: item.data.title || item.title } as unknown as Solution;
+
+  // Fetch products for cross-reference lookup
+  const productItems = await getPublishedItems('product');
+  const products = productItems.map(p => ({ ...p.data, title: p.data.title || p.title } as unknown as Product));
+
+  return <SolutionDetailClient solution={JSON.parse(JSON.stringify(solution))} products={JSON.parse(JSON.stringify(products))} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/solutions/page.tsx b/src/app/(marketing)/solutions/page.tsx
index 200ced8..ec366d3 100644
--- a/src/app/(marketing)/solutions/page.tsx
+++ b/src/app/(marketing)/solutions/page.tsx
@@ -1,104 +1,21 @@
-'use client';
+import { Metadata } from 'next';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import type { Solution } from '@/lib/constants/solutions';
+import type { Product } from '@/lib/constants/products';
+import SolutionsContentV3 from './solutions-content-v3';
 
-import { motion } from 'framer-motion';
-import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { InkCard, InkWashBackground } from '@/components/ui/ink-wash';
-import { BreadcrumbSchema } from '@/components/seo/structured-data';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { SOLUTIONS } from '@/lib/constants/solutions';
-import { PRODUCTS } from '@/lib/constants/products';
+export const metadata: Metadata = {
+  title: `解决方案 - ${COMPANY_INFO.displayName}`,
+  description: `深耕行业场景的解决方案，端到端交付，推荐套装组合 + 配套服务包。基于自研产品矩阵，为制造业、贸易零售、教育培训、医疗健康、金融服务、物流运输六大行业量身定制最佳实践。`,
+};
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-export default function SolutionsPage() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '解决方案', href: '/solutions' }]} />
-
-      {/* Hero */}
-      <NarrativeHero
-        badge={{ text: '行业方案' }}
-        title="深耕行业场景的"
-        highlight="解决方案"
-        subtitle="端到端交付，推荐套装组合 + 配套服务包"
-        description="基于自研产品矩阵，为制造业、零售业、教育、医疗等行业量身定制最佳实践。每个方案都明确推荐产品组合和服务包。"
-        primaryCta={{ label: '立即咨询', href: '/contact' }}
-        secondaryCta={{ label: '浏览产品', href: '/products' }}
-        stats={[
-          { value: '4+', label: '行业覆盖' },
-          { value: '端到端', label: '交付模式' },
-          { value: '定制化', label: '方案特点' },
-        ]}
-      />
-
-      {/* 行业解决方案 */}
-      <section className="relative section-padding bg-[var(--color-bg-section)] overflow-hidden">
-        <InkWashBackground variant="subtle" />
-        <div className="container-wide relative z-10">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
-            {SOLUTIONS.map((solution, idx) => (
-              <motion.div
-                key={solution.id}
-                initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-40px' }}
-                transition={{ duration: 0.5, delay: idx * 0.08, ease: EASE }}
-              >
-                <InkCard padding="lg" href={`/solutions/${solution.id}`} className="group h-full flex flex-col">
-                  {/* Industry badge */}
-                  <div className="flex items-center gap-2 mb-4">
-                    <span className="px-2.5 py-1 rounded text-xs font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
-                      {solution.industry}
-                    </span>
-                    <span className="text-xs text-[var(--color-text-subtle)]">{solution.subtitle}</span>
-                  </div>
-
-                  <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
-                    {solution.title}
-                  </h3>
-                  <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5 flex-1">
-                    {solution.description}
-                  </p>
-
-                  {/* 推荐产品组合 */}
-                  <div className="pt-4 border-t border-[var(--color-border-primary)]">
-                    <p className="text-[10px] text-[var(--color-text-subtle)] mb-2 uppercase tracking-wider">推荐产品组合</p>
-                    <div className="flex flex-wrap gap-1.5 mb-3">
-                      {solution.suiteCombination.primaryProducts.map(pid => {
-                        const prod = PRODUCTS.find(p => p.id === pid);
-                        return prod ? (
-                          <span key={pid} className="px-2.5 py-1 rounded text-xs bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-primary)] font-medium">
-                            {prod.title.replace('睿新', '').replace('睿视 ', '')}
-                          </span>
-                        ) : null;
-                      })}
-                      <span className="px-2.5 py-1 rounded text-xs text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)] font-medium">
-                        + 配套服务
-                      </span>
-                    </div>
-                    <p className="text-xs text-[var(--color-text-muted)] leading-relaxed">
-                      {solution.suiteCombination.rationale}
-                    </p>
-                  </div>
-                </InkCard>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA */}
-      <NarrativeCTA
-        title="告诉我们您的行业场景"
-        description="无论您处于哪个行业、哪个数字化阶段，我们都能为您推荐最合适的产品组合和服务包。"
-        primaryLabel="获取定制方案"
-        primaryHref="/contact"
-        secondaryLabel="浏览产品"
-        secondaryHref="/products"
-      />
-    </div>
-  );
-}
+export default async function SolutionsPage() {
+  const [solutionItems, productItems] = await Promise.all([
+    getPublishedItems('solution'),
+    getPublishedItems('product'),
+  ]);
+  const solutions = solutionItems.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Solution));
+  const products = productItems.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Product));
+  return <SolutionsContentV3 solutions={solutions} products={products} />;
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/team/client.tsx b/src/app/(marketing)/team/client.tsx
index a0b43ff..859b7b8 100644
--- a/src/app/(marketing)/team/client.tsx
+++ b/src/app/(marketing)/team/client.tsx
@@ -1,154 +1,7 @@
 'use client';
 
-import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
-import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
-import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
-import { InkCard } from '@/components/ui/ink-wash';
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import {
-  Shield,
-  Building2,
-  Users,
-  Code,
-  Target,
-  BookOpen,
-  Layers,
-  Sparkles,
-} from 'lucide-react';
-import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
+import TeamContentV3 from './team-content-v3';
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const TEAM_STRENGTHS: ValuePoint[] = [
-  {
-    icon: Shield,
-    title: '12 年+ 行业深耕',
-    description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。',
-    stat: '12+',
-    statLabel: '年',
-  },
-  {
-    icon: Building2,
-    title: '大型 IT 企业背景',
-    description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力、规范化的交付流程和严格的质量意识。',
-  },
-  {
-    icon: Users,
-    title: '复合型技术团队',
-    description: '既懂技术又懂业务，能够深入理解客户的真实场景和痛点，提供真正可落地的解决方案。',
-  },
-  {
-    icon: Code,
-    title: '全栈技术能力',
-    description: '从前端到后端、从云原生到数据智能、从移动端到物联网——应对各种复杂技术挑战。',
-  },
-  {
-    icon: Target,
-    title: '结果导向交付',
-    description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一个交付成果都追求可量化的业务价值。',
-  },
-];
-
-const TEAM_CULTURE = [
-  {
-    icon: Layers,
-    title: '扁平化协作',
-    description: '没有冗长的汇报链条，每个人都有机会直接参与决策。信息透明，沟通高效。',
-  },
-  {
-    icon: BookOpen,
-    title: '持续学习',
-    description: '技术日新月异，我们保持对新技术的好奇。内部分享、技术沙龙、外部培训——学习是日常的一部分。',
-  },
-  {
-    icon: Sparkles,
-    title: '客户成功',
-    description: '我们的成就感来自客户的成功。客户的业务增长，就是我们最好的成绩单。',
-  },
-];
-
-export function TeamClient() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      {/* Layer 1: Hero */}
-      <NarrativeHero
-        badge={{ text: '核心团队', variant: 'purple' }}
-        title="既懂技术又懂业务的"
-        highlight="复合型团队"
-        subtitle="12 年行业深耕，大厂背景，全栈能力"
-        description="我们的成员不只是写代码的工程师——我们是能理解您业务场景、能和您一起想清楚问题的合作伙伴。"
-        primaryCta={{ label: '与我们交流', href: '/contact' }}
-        secondaryCta={{ label: '了解公司', href: '/about' }}
-        stats={[
-          { value: '12+', label: '年行业经验' },
-          { value: '10+', label: '核心成员' },
-          { value: '5+', label: '行业覆盖' },
-        ]}
-      />
-
-      {/* Layer 2: Team Strengths */}
-      <NarrativeValue
-        badge="团队优势"
-        title="我们的底气"
-        highlight="从何而来"
-        subtitle="不是自吹自擂，而是多年实战积累的真实能力"
-        points={TEAM_STRENGTHS}
-        columns={3}
-        bgVariant="section"
-      />
-
-      {/* Team About Section */}
-      <section className="section-padding bg-[var(--color-bg-primary)] relative overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, margin: '-100px' }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="max-w-4xl mx-auto"
-          >
-            <InkCard padding="lg">
-              <h2 className="text-2xl font-semibold text-[var(--color-text-primary)] mb-6 text-center">关于我们的团队</h2>
-              <div className="space-y-4 max-w-3xl mx-auto text-center">
-                <p className="text-[var(--color-text-muted)] leading-relaxed">
-                  我们的核心团队长期从事<span className="text-[var(--color-brand-primary)] font-medium">技术咨询</span>、<span className="text-[var(--color-brand-primary)] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
-                </p>
-                <p className="text-[var(--color-text-muted)] leading-relaxed">
-                  开发团队成员来自于多个<span className="text-[var(--color-brand-primary)] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
-                </p>
-                <p className="text-[var(--color-text-muted)] leading-relaxed">
-                  我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
-                  每一位成员都是既懂技术又懂业务的复合型人才。
-                </p>
-              </div>
-            </InkCard>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Team Culture */}
-      <NarrativeValue
-        badge="团队文化"
-        title="我们怎样"
-        highlight="工作"
-        subtitle="好的团队文化，最终体现在为客户创造的价值上"
-        points={TEAM_CULTURE}
-        columns={3}
-        bgVariant="section"
-      />
-
-      {/* Layer 4: CTA */}
-      <NarrativeCTA
-        title="想成为我们的一员？"
-        description="我们始终在寻找既懂技术又热爱业务的伙伴。如果您认同我们的理念，欢迎聊聊。"
-        primaryLabel="联系我们"
-        primaryHref="/contact"
-        secondaryLabel="了解公司"
-        secondaryHref="/about"
-      />
-    </div>
-  );
+export function TeamClient({ data }: { data: Record<string, unknown> }) {
+  return <TeamContentV3 data={data} />;
 }
diff --git a/src/app/(marketing)/team/page.tsx b/src/app/(marketing)/team/page.tsx
index e99b19a..033d1f2 100644
--- a/src/app/(marketing)/team/page.tsx
+++ b/src/app/(marketing)/team/page.tsx
@@ -1,11 +1,15 @@
+import { Metadata } from 'next';
 import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
 import { TeamClient } from './client';
 
-export const metadata = {
+export const metadata: Metadata = {
   title: `核心团队 - ${COMPANY_INFO.displayName}`,
   description: `了解${COMPANY_INFO.name}的核心团队。我们的团队成员拥有丰富的行业经验和技术专长，致力于为客户提供专业的数字化转型服务。`,
 };
 
-export default function TeamPage() {
-  return <TeamClient />;
+export default async function TeamPage() {
+  const items = await getPublishedItems('team-page');
+  const data = items[0]?.data ?? {};
+  return <TeamClient data={data} />;
 }
diff --git a/src/components/detail/brand-elements.tsx b/src/components/detail/brand-elements.tsx
new file mode 100644
index 0000000..702ef7b
--- /dev/null
+++ b/src/components/detail/brand-elements.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { type LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface BrandSealProps {
+  text?: string;
+  variant?: 'red' | 'gold' | 'blue';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function BrandSeal({ text = '旗舰', variant = 'red', size = 'md' }: BrandSealProps) {
+  const sizes = {
+    sm: 'w-14 h-14 text-xs',
+    md: 'w-20 h-20 text-sm',
+    lg: 'w-28 h-28 text-base',
+  };
+
+  const colors = {
+    red: {
+      border: '#C41E3A',
+      bg: 'rgba(196, 30, 58, 0.06)',
+      text: '#C41E3A',
+      shadow: 'rgba(196, 30, 58, 0.2)',
+    },
+    gold: {
+      border: '#d97706',
+      bg: 'rgba(217, 119, 6, 0.06)',
+      text: '#d97706',
+      shadow: 'rgba(217, 119, 6, 0.2)',
+    },
+    blue: {
+      border: '#2563eb',
+      bg: 'rgba(37, 99, 235, 0.06)',
+      text: '#2563eb',
+      shadow: 'rgba(37, 99, 235, 0.2)',
+    },
+  };
+
+  const color = colors[variant];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.5, rotate: -15 }}
+      whileInView={{ opacity: 1, scale: 1, rotate: -12 }}
+      viewport={{ once: true }}
+      transition={{
+        duration: 0.8,
+        delay: 0.5,
+        ease: [0.34, 1.56, 0.64, 1] as const,
+      }}
+      className={`relative ${sizes[size]} flex items-center justify-center rounded-lg border-2 font-bold select-none`}
+      style={{
+        borderColor: color.border,
+        backgroundColor: color.bg,
+        color: color.text,
+        boxShadow: `0 4px 16px ${color.shadow}`,
+        fontFamily: "'Noto Serif SC', serif",
+      }}
+    >
+      <div className="absolute inset-[4px] border border-current opacity-20 rounded-md" />
+      <span
+        className="relative z-10 tracking-widest"
+        style={{ writingMode: 'vertical-rl' }}
+      >
+        {text}
+      </span>
+      <div
+        className="absolute inset-0 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-500"
+        style={{
+          background: `conic-gradient(from 0deg, transparent 0%, ${color.border}10 50%, transparent 100%)`,
+          animation: 'rotate 8s linear infinite',
+        }}
+      />
+    </motion.div>
+  );
+}
+
+interface CalligraphyTextProps {
+  children: ReactNode;
+  className?: string;
+  as?: 'h1' | 'h2' | 'h3' | 'span';
+}
+
+export function CalligraphyText({
+  children,
+  className = '',
+  as: Tag = 'span',
+}: CalligraphyTextProps) {
+  return (
+    <Tag
+      className={`font-calligraphy ${className}`}
+      style={{
+        fontFamily: "'Noto Serif SC', 'STKaiti', 'KaiTi', serif",
+        fontWeight: 700,
+      }}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+interface InkDividerProps {
+  variant?: 'subtle' | 'bold' | 'decorative';
+}
+
+export function InkDivider({ variant = 'subtle' }: InkDividerProps) {
+  if (variant === 'subtle') {
+    return (
+      <div className="flex items-center justify-center gap-4 py-6">
+        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
+        <div className="w-2 h-2 rounded-full bg-gray-300" />
+        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
+      </div>
+    );
+  }
+
+  if (variant === 'bold') {
+    return (
+      <div className="flex items-center gap-6 py-8">
+        <div className="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-[#C41E3A]" />
+        <BrandSeal size="sm" variant="red" text="墨" />
+        <div className="flex-1 h-0.5 bg-gradient-to-l from-transparent via-gray-300 to-[#C41E3A]" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center py-8">
+      <svg width="200" height="24" viewBox="0 0 200 24" fill="none" className="opacity-40">
+        <path
+          d="M0 12 Q 50 4, 100 12 T 200 12"
+          stroke="#C41E3A"
+          strokeWidth="1"
+          fill="none"
+          vectorEffect="non-scaling-stroke"
+        />
+        <circle cx="100" cy="12" r="3" fill="#C41E3A" opacity="0.6" />
+        <circle cx="60" cy="9" r="1.5" fill="#C41E3A" opacity="0.3" />
+        <circle cx="140" cy="15" r="1.5" fill="#C41E3A" opacity="0.3" />
+      </svg>
+    </div>
+  );
+}
+
+interface SectionHeaderProps {
+  badge?: string;
+  title: ReactNode;
+  subtitle?: string;
+  align?: 'left' | 'center';
+  icon?: LucideIcon;
+}
+
+export function SectionHeader({
+  badge,
+  title,
+  subtitle,
+  align = 'center',
+  icon: Icon,
+}: SectionHeaderProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-80px' }}
+      transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] as const }}
+      className={`mb-16 ${align === 'center' ? 'text-center max-w-3xl mx-auto' : ''}`}
+    >
+      {(badge || Icon) && (
+        <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-50 text-brand text-sm font-bold tracking-wider uppercase mb-5 ${
+          align === 'center' ? '' : ''
+        }`}>
+          {Icon && <Icon className="w-4 h-4" />}
+          {badge}
+        </div>
+      )}
+
+      <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 mb-4">
+        {title}
+      </h2>
+
+      {subtitle && (
+        <p className="text-lg text-gray-600 leading-relaxed">{subtitle}</p>
+      )}
+    </motion.div>
+  );
+}
diff --git a/src/components/detail/detail-case-study.tsx b/src/components/detail/detail-case-study.tsx
index 37afa76..5eed5c1 100644
--- a/src/components/detail/detail-case-study.tsx
+++ b/src/components/detail/detail-case-study.tsx
@@ -18,7 +18,7 @@ export function CaseStudyCard({ study, index }: CaseStudyCardProps) {
       className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
     >
       <div className="mb-3 flex items-center gap-2">
-        <span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-[#C41E3A]">
+        <span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-brand">
           {study.industry}
         </span>
         <span className="text-sm text-gray-500">{study.client}</span>
diff --git a/src/components/detail/detail-certification.tsx b/src/components/detail/detail-certification.tsx
index 507dcfa..019475c 100644
--- a/src/components/detail/detail-certification.tsx
+++ b/src/components/detail/detail-certification.tsx
@@ -23,7 +23,7 @@ export function CertificationList({ certifications }: CertificationListProps) {
           transition={{ duration: 0.3, delay: index * 0.05 }}
           className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
         >
-          <Award className="h-4 w-4 text-[#C41E3A]" />
+          <Award className="h-4 w-4 text-brand" />
           <span className="font-medium">{cert.name}</span>
           <span className="text-xs text-gray-400">{cert.issuer}</span>
           {cert.link && cert.link !== '#' && (
diff --git a/src/components/detail/detail-cross-recommend.tsx b/src/components/detail/detail-cross-recommend.tsx
index 3b896e3..0eab94a 100644
--- a/src/components/detail/detail-cross-recommend.tsx
+++ b/src/components/detail/detail-cross-recommend.tsx
@@ -20,7 +20,7 @@ const typeConfig = {
     icon: Lightbulb,
     label: '方案',
     color: '#C41E3A',
-    bg: '#fef2f2',
+    bg: '#FEF2F4',
   },
   service: {
     icon: Wrench,
@@ -40,7 +40,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           viewport={{ once: true }}
-          className="mb-2 text-center text-2xl font-bold text-gray-900"
+          className="mb-2 text-center text-2xl font-bold text-ink"
         >
           {title}
         </motion.h2>
@@ -49,7 +49,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
           whileInView={{ opacity: 1 }}
           viewport={{ once: true }}
           transition={{ delay: 0.1 }}
-          className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500"
+          className="mx-auto mb-8 max-w-2xl text-center text-sm text-text-muted"
         >
           探索更多可能，发现与您需求相关的产品、方案和服务
         </motion.p>
@@ -67,7 +67,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.4, delay: index * 0.08 }}
-                className="group flex items-start gap-4 rounded-xl border border-gray-100 bg-gray-50/50 p-5 transition-all hover:border-gray-200 hover:bg-white hover:shadow-md"
+                className="group flex items-start gap-4 rounded-xl border border-border-primary bg-bg-secondary/50 p-5 transition-all hover:border-border-secondary hover:bg-white hover:shadow-md"
               >
                 <div
                   className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
@@ -86,10 +86,10 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
                     >
                       {config.label}
                     </span>
-                    <ArrowRight className="h-3 w-3 text-gray-400 opacity-0 transition-opacity group-hover:opacity-100" />
+                    <ArrowRight className="h-3 w-3 text-text-muted opacity-0 transition-opacity group-hover:opacity-100" />
                   </div>
-                  <h3 className="text-sm font-semibold text-gray-900">{item.title}</h3>
-                  <p className="mt-1 text-xs leading-relaxed text-gray-500">
+                  <h3 className="text-sm font-semibold text-ink">{item.title}</h3>
+                  <p className="mt-1 text-xs leading-relaxed text-text-muted">
                     {item.reason}
                   </p>
                 </div>
diff --git a/src/components/detail/detail-cta-section.tsx b/src/components/detail/detail-cta-section.tsx
index 9e4a310..c2b49bc 100644
--- a/src/components/detail/detail-cta-section.tsx
+++ b/src/components/detail/detail-cta-section.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, MessageCircle, Download } from 'lucide-react';
 import type { HeroTheme } from '@/lib/constants/hero-themes';
+import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
 
 interface DetailCTASectionProps {
   theme: HeroTheme;
@@ -13,46 +14,69 @@ interface DetailCTASectionProps {
 }
 
 export function DetailCTASection({
-  theme,
+  theme: _theme,
   title = '准备好开始了吗？',
   description = '联系我们，获取专属方案和报价',
   primaryAction,
   secondaryAction,
 }: DetailCTASectionProps) {
   return (
-    <section
-      className="py-16 lg:py-20"
-      style={{
-        background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
-      }}
-    >
-      <div className="container-wide text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-        >
-          <h2 className="text-2xl font-bold text-white lg:text-3xl">{title}</h2>
-          <p className="mx-auto mt-3 max-w-xl text-sm text-white/70">{description}</p>
+    <section className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
+      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
 
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <a
+      <div className="container-wide relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
+          className="max-w-3xl mx-auto text-center"
+        >
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-soft text-brand text-sm font-medium mb-6 border border-brand/20">
+            <MessageCircle className="w-4 h-4" />
+            免费咨询
+          </div>
+
+          <h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-ink mb-6`}>
+            {title}
+          </h2>
+          
+          <p className="text-lg md:text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
+            {description}
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
+            <motion.a
               href={primaryAction.href}
-              className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:shadow-xl"
+              whileHover={{ scale: 1.02, y: -2 }}
+              whileTap={{ scale: 0.98 }}
+              className="group relative inline-flex items-center gap-3 px-10 py-4 bg-brand text-white font-bold rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
             >
-              {primaryAction.label}
-              <ArrowRight className="h-4 w-4" />
-            </a>
+              <span>{primaryAction.label}</span>
+              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+            </motion.a>
+
             {secondaryAction && (
               <a
                 href={secondaryAction.href}
-                className="inline-flex items-center rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10"
+                className="group inline-flex items-center gap-2.5 px-8 py-4 text-ink font-semibold rounded-xl border-2 border-border-primary hover:bg-white hover:border-brand/30 transition-all duration-300"
               >
+                <Download className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-0.5" />
                 {secondaryAction.label}
               </a>
             )}
           </div>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5, duration: 0.6 }}
+            className="mt-10 text-sm text-text-muted"
+          >
+            平均响应时间 &lt; 2小时 · 7×24小时技术支持 · 无需预付费用
+          </motion.p>
         </motion.div>
       </div>
     </section>
diff --git a/src/components/detail/detail-hero.tsx b/src/components/detail/detail-hero.tsx
index 92e9940..63beb52 100644
--- a/src/components/detail/detail-hero.tsx
+++ b/src/components/detail/detail-hero.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes';
+import { ArrowRight, Sparkles, ChevronDown } from 'lucide-react';
+import type { HeroTheme } from '@/lib/constants/hero-themes';
+import { PressableButton } from './micro-interactions';
 
 interface DetailHeroProps {
   theme: HeroTheme;
@@ -13,42 +15,6 @@ interface DetailHeroProps {
   secondaryAction?: { label: string; href: string };
 }
 
-function TextureOverlay({ texture }: { texture: HeroTexture }) {
-  if (texture.type === 'none') return null;
-
-  const textureStyles: Record<string, React.CSSProperties> = {
-    grid: {
-      backgroundImage:
-        'linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)',
-      backgroundSize: '60px 60px',
-    },
-    'data-flow': {
-      backgroundImage:
-        'radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.03) 0%, transparent 40%)',
-    },
-    layers: {
-      backgroundImage:
-        'linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100%)',
-    },
-    'shield-hex': {
-      backgroundImage:
-        'repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(255,255,255,.025) 30px, rgba(255,255,255,.025) 31px)',
-    },
-    circuit: {
-      backgroundImage:
-        'linear-gradient(90deg, transparent 49%, rgba(255,255,255,.02) 49%, rgba(255,255,255,.02) 51%, transparent 51%)',
-      backgroundSize: '40px 40px',
-    },
-  };
-
-  return (
-    <div
-      className="pointer-events-none absolute inset-0"
-      style={{ opacity: texture.opacity, ...textureStyles[texture.type] }}
-    />
-  );
-}
-
 export function DetailHero({
   theme,
   badge,
@@ -59,114 +25,164 @@ export function DetailHero({
   secondaryAction,
 }: DetailHeroProps) {
   const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide';
-  const isIconLeft = theme.layout === 'icon-left';
-
-  const containerClasses =
-    theme.layout === 'wide'
-      ? 'container-wide py-24 lg:py-32'
-      : 'container-wide py-20 lg:py-28';
-
-  const contentClasses = [
-    'max-w-4xl',
-    isCenterLayout ? 'mx-auto text-center' : '',
-    isIconLeft ? 'flex items-center gap-8' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
 
   return (
-    <section
-      className="relative overflow-hidden"
-      style={{
-        background: `linear-gradient(${theme.gradientAngle}deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
-      }}
-    >
-      <TextureOverlay texture={theme.texture} />
-
-      <div className={containerClasses}>
+    <section className="relative min-h-[700px] flex items-center overflow-hidden bg-white">
+      <div className={`container-wide relative z-10 ${theme.layout === 'wide' ? 'py-36 lg:py-44' : 'py-32 lg:py-40'}`}>
         <motion.div
-          initial={{ opacity: 0, y: 24 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className={contentClasses}
+          initial="hidden"
+          animate="visible"
+          variants={{
+            hidden: {},
+            visible: {
+              transition: {
+                staggerChildren: 0.12,
+                delayChildren: 0.2,
+              },
+            },
+          }}
+          className={`max-w-4xl ${isCenterLayout ? 'mx-auto text-center' : ''}`}
         >
           {(badge || theme.badge) && (
-            <motion.span
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: 0.1, duration: 0.4 }}
-              className={`mb-4 inline-block rounded-full px-3 py-1 text-xs font-medium tracking-wide ${
+            <motion.div
+              variants={{
+                hidden: { opacity: 0, scale: 0.9, filter: 'blur(8px)' },
+                visible: {
+                  opacity: 1,
+                  scale: 1,
+                  filter: 'blur(0px)',
+                  transition: {
+                    duration: 0.7,
+                    ease: [0.22, 1, 0.36, 1] as const,
+                  },
+                },
+              }}
+              className={`mb-8 inline-flex items-center gap-2.5 rounded-full px-5 py-2.5 text-xs font-semibold tracking-widest uppercase ${
                 isCenterLayout ? '' : ''
               }`}
               style={{
-                backgroundColor: theme.accentBg,
+                backgroundColor: `${theme.accentColor}10`,
                 color: theme.accentColor,
-                border: `1px solid ${theme.accentColor}33`,
+                borderColor: `${theme.accentColor}25`,
               }}
             >
+              <motion.span
+                animate={{ rotate: [0, 360] }}
+                transition={{ duration: 4, repeat: Infinity, ease: 'linear' as const }}
+              >
+                <Sparkles className="w-3.5 h-3.5" />
+              </motion.span>
               {badge || theme.badge}
-            </motion.span>
+            </motion.div>
           )}
 
-          <h1
-            className="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl"
-            style={{ lineHeight: 1.2 }}
+          <motion.h1
+            variants={{
+              hidden: { opacity: 0, y: 40, filter: 'blur(10px)' },
+              visible: {
+                opacity: 1,
+                y: 0,
+                filter: 'blur(0px)',
+                transition: {
+                  duration: 0.9,
+                  ease: [0.22, 1, 0.36, 1] as const,
+                },
+              },
+            }}
+            className={`text-4xl md:text-5xl lg:text-[3.75rem] font-bold tracking-tight leading-[1.1] mb-8 text-ink ${
+              isCenterLayout ? '' : ''
+            }`}
           >
             {title}
-          </h1>
+          </motion.h1>
 
-          <p
-            className={`mt-4 text-lg ${
-              isCenterLayout ? 'mx-auto max-w-2xl' : 'max-w-2xl'
-            }`}
-            style={{ color: `${theme.accentColor}cc`, lineHeight: 1.6 }}
+          <motion.p
+            variants={{
+              hidden: { opacity: 0, y: 30 },
+              visible: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.75,
+                  delay: 0.25,
+                  ease: [0.22, 1, 0.36, 1] as const,
+                },
+              },
+            }}
+            className="text-lg md:text-xl text-text-secondary leading-relaxed mb-5 max-w-3xl"
           >
             {subtitle}
-          </p>
+          </motion.p>
 
           {description && (
-            <p
-              className={`mt-3 text-base leading-relaxed ${
-                isCenterLayout ? 'mx-auto max-w-2xl' : 'max-w-2xl'
-              }`}
-              style={{ color: 'rgba(255,255,255,0.7)' }}
+            <motion.p
+              variants={{
+                hidden: { opacity: 0, y: 24 },
+                visible: {
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    duration: 0.65,
+                    delay: 0.4,
+                    ease: [0.22, 1, 0.36, 1] as const,
+                  },
+                },
+              }}
+              className="text-base text-text-muted mt-5 max-w-2xl leading-relaxed"
             >
               {description}
-            </p>
+            </motion.p>
           )}
 
           {(primaryAction || secondaryAction) && (
-            <div
-              className={`mt-8 flex flex-wrap gap-4 ${
-                isCenterLayout ? 'justify-center' : ''
-              }`}
+            <motion.div
+              variants={{
+                hidden: { opacity: 0, y: 24 },
+                visible: {
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    duration: 0.6,
+                    delay: 0.55,
+                    ease: [0.22, 1, 0.36, 1] as const,
+                  },
+                },
+              }}
+              className={`mt-12 flex flex-wrap gap-5 ${isCenterLayout ? 'justify-center' : ''}`}
             >
               {primaryAction && (
-                <a
-                  href={primaryAction.href}
-                  className="inline-flex items-center rounded-lg px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:brightness-110"
-                  style={{
-                    backgroundColor: theme.accentColor,
-                  }}
-                >
-                  {primaryAction.label}
+                <a href={primaryAction.href}>
+                  <PressableButton variant="primary" className="px-10 py-4 text-base shadow-lg group">
+                    <span>{primaryAction.label}</span>
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform duration-300" />
+                  </PressableButton>
                 </a>
               )}
               {secondaryAction && (
-                <a
-                  href={secondaryAction.href}
-                  className="inline-flex items-center rounded-lg border px-6 py-3 text-sm font-semibold transition-all hover:bg-white/10"
-                  style={{
-                    borderColor: `${theme.accentColor}66`,
-                    color: `${theme.accentColor}ee`,
-                  }}
-                >
-                  {secondaryAction.label}
+                <a href={secondaryAction.href}>
+                  <PressableButton variant="secondary" className="px-8 py-4 text-base">
+                    {secondaryAction.label}
+                  </PressableButton>
                 </a>
               )}
-            </div>
+            </motion.div>
           )}
         </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.5, duration: 0.8 }}
+          className="absolute bottom-8 left-1/2 -translate-x-1/2"
+        >
+          <motion.div
+            animate={{ y: [0, 8, 0] }}
+            transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' as const }}
+            className="text-text-muted cursor-pointer hover:text-text-secondary transition-colors"
+          >
+            <ChevronDown className="w-6 h-6" />
+          </motion.div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/src/components/detail/detail-product-value.tsx b/src/components/detail/detail-product-value.tsx
index 20e0d16..6e2c2ee 100644
--- a/src/components/detail/detail-product-value.tsx
+++ b/src/components/detail/detail-product-value.tsx
@@ -1,90 +1,432 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { CheckCircle2, Zap, Shield, TrendingUp, type LucideIcon } from 'lucide-react';
+import { motion, useInView } from 'framer-motion';
+import { useRef, useState } from 'react';
+import {
+  CheckCircle2,
+  ArrowRight,
+  Zap,
+  Shield,
+  BarChart3,
+  Cpu,
+  TrendingUp,
+  Clock,
+  Award,
+  Users,
+  type LucideIcon,
+} from 'lucide-react';
+import { TiltCard, InkGlowCard } from './micro-interactions';
 import type { Product } from '@/lib/constants/products';
 
 interface ProductValueSectionProps {
   product: Product;
 }
 
-const icons: LucideIcon[] = [CheckCircle2, Zap, Shield, TrendingUp];
+const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu];
+
+function FeatureTags({ text }: { text: string }) {
+  const [title, ...descParts] = text.split('：');
+  const desc = descParts.join('：');
+
+  if (!desc) return <span className="text-sm font-medium text-ink">{title}</span>;
+
+  const tags = desc.split('、').map((tag) => tag.trim()).filter(Boolean);
+
+  return (
+    <div className="space-y-3">
+      <h4 className="font-bold text-ink text-base">{title}</h4>
+      <div className="flex flex-wrap gap-2">
+        {tags.map((tag, i) => (
+          <motion.span
+            key={tag}
+            initial={{ opacity: 0, scale: 0.8 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.05, duration: 0.3 }}
+            className="px-3 py-1.5 bg-bg-secondary text-text-secondary text-xs font-medium rounded-lg border border-border-primary hover:border-brand/30 hover:bg-brand-soft/30 transition-colors cursor-default"
+          >
+            {tag}
+          </motion.span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CircularProgress({ value, label, color = '#C41E3A' }: { value: number; label: string; color?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+  const [progress, setProgress] = useState(0);
+
+  if (isInView && progress === 0) {
+    setTimeout(() => setProgress(value), 300);
+  }
+
+  const circumference = 2 * Math.PI * 45;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <div ref={ref} className="text-center">
+      <div className="relative w-28 h-28 mx-auto mb-3">
+        <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+          <circle
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke="var(--color-bg-tertiary)"
+            strokeWidth="8"
+          />
+          <motion.circle
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke={color}
+            strokeWidth="8"
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            initial={{ strokeDashoffset: circumference }}
+            animate={{ strokeDashoffset }}
+            transition={{ duration: 1.5, ease: [0.22, 1, 0.36, 1] as const }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-xl font-bold text-ink">{value}%</span>
+        </div>
+      </div>
+      <p className="text-xs font-medium text-text-muted">{label}</p>
+    </div>
+  );
+}
+
+function MetricCard({
+  icon: Icon,
+  value,
+  metric,
+  description,
+  index: _index,
+  accent = false,
+}: {
+  icon: LucideIcon;
+  value: string;
+  metric: string;
+  description: string;
+  index: number;
+  accent?: boolean;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+
+  const numericValue = parseFloat(value.replace(/[^0-9.]/g, ''));
+  const suffix = value.replace(/[0-9.]/g, '');
+  const [displayValue, setDisplayValue] = useState('0');
+
+  if (isInView && displayValue === '0') {
+    if (isNaN(numericValue)) {
+      setDisplayValue(value);
+    } else {
+      let startTime: number;
+      const animate = (currentTime: number) => {
+        if (!startTime) startTime = currentTime;
+        const progress = Math.min((currentTime - startTime) / 2000, 1);
+        const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+        setDisplayValue(
+          Number.isInteger(numericValue)
+            ? Math.floor(numericValue * easeOutQuart).toString() + suffix
+            : (numericValue * easeOutQuart).toFixed(1) + suffix
+        );
+        if (progress < 1) requestAnimationFrame(animate);
+      };
+      requestAnimationFrame(animate);
+    }
+  }
+
+  return (
+    <TiltCard
+      tiltAmount={8}
+      glareEnable={accent}
+      glareMaxOpacity={accent ? 0.12 : 0}
+      className={`p-8 rounded-2xl ${
+        accent
+          ? 'bg-brand-soft/30 border border-brand/20'
+          : 'bg-white border border-border-primary hover:border-border-secondary'
+      }`}
+    >
+      <div className="relative">
+        <div
+          className={`w-12 h-12 rounded-xl flex items-center justify-center mb-5 shadow-md ${
+            accent
+              ? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
+              : 'bg-bg-secondary text-text-secondary'
+          }`}
+        >
+          <Icon className="w-6 h-6" />
+        </div>
+
+        <div className="text-4xl md:text-5xl font-bold text-ink mb-2 tracking-tight">
+          {displayValue}
+        </div>
+
+        <h3 className="text-lg font-semibold text-ink mb-1.5">{metric}</h3>
+        <p className="text-sm text-text-muted leading-relaxed">{description}</p>
+      </div>
+    </TiltCard>
+  );
+}
 
 export function ProductValueSection({ product }: ProductValueSectionProps) {
   return (
-    <section className="bg-white py-16 lg:py-20">
-      <div className="container-wide">
-        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
-          <motion.div
+    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
+      <div className="container-wide relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-120px' }}
+          transition={{ duration: 0.85, ease: [0.22, 1, 0.36, 1] as const }}
+          className="max-w-3xl mx-auto text-center mb-20"
+        >
+          <motion.span
             initial={{ opacity: 0, x: -20 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
+            transition={{ delay: 0.15, duration: 0.5 }}
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-soft text-brand text-sm font-bold tracking-wider uppercase mb-5"
           >
-            <h2 className="mb-4 text-2xl font-bold text-gray-900 lg:text-3xl">
-              核心能力
-            </h2>
-            <p className="mb-6 text-sm leading-relaxed text-gray-600">
-              {product.overview}
-            </p>
-            <ul className="space-y-3">
+            <Zap className="w-4 h-4" />
+            核心能力
+          </motion.span>
+
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-ink mb-5">
+            为企业打造的<span className="relative inline-block">
+              {product.title}
+              <motion.span
+                layoutId="underline"
+                className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-[#C41E3A] to-[#99182d] rounded-full"
+                initial={{ scaleX: 0 }}
+                whileInView={{ scaleX: 1 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.7, duration: 0.6, ease: [0.22, 1, 0.36, 1] as const }}
+              />
+            </span>
+          </h2>
+
+          <p className="text-lg md:text-xl text-text-secondary max-w-2xl mx-auto leading-relaxed">
+            {product.overview}
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 xl:grid-cols-5 gap-10 lg:gap-14">
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-80px' }}
+            variants={{
+              hidden: {},
+              visible: {
+                transition: {
+                  staggerChildren: 0.08,
+                  delayChildren: 0.2,
+                },
+              },
+            }}
+            className="xl:col-span-3 space-y-6"
+          >
+            <div className="flex items-center gap-4 mb-8">
+              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] via-red-600 to-[#99182d] flex items-center justify-center shadow-md shadow-brand/20">
+                <Zap className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold text-ink">功能模块</h3>
+                <p className="text-sm text-text-muted mt-0.5">六大核心业务领域全覆盖</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
               {product.features.map((feature, index) => {
-                const Icon = icons[index % icons.length]!;
+                const Icon = featureIcons[index % featureIcons.length]!;
+
                 return (
-                  <motion.li
+                  <InkGlowCard
                     key={feature}
-                    initial={{ opacity: 0, x: -10 }}
-                    whileInView={{ opacity: 1, x: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.3, delay: index * 0.05 }}
-                    className="flex items-start gap-3"
+                    active={index === 0}
+                    className="group p-6 hover:border-brand/20"
                   >
-                    <Icon className="mt-0.5 h-5 w-5 shrink-0 text-[#C41E3A]" />
-                    <span className="text-sm leading-relaxed text-gray-700">{feature}</span>
-                  </motion.li>
+                    <motion.div
+                      variants={{
+                        hidden: { opacity: 0, y: 20 },
+                        visible: {
+                          opacity: 1,
+                          y: 0,
+                          transition: {
+                            duration: 0.55,
+                            ease: [0.22, 1, 0.36, 1] as const,
+                          },
+                        },
+                      }}
+                    >
+                      <div className="flex items-start gap-4">
+                        <div
+                          className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-sm ${
+                            index === 0
+                              ? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white shadow-md shadow-brand/25'
+                              : 'bg-bg-secondary text-text-secondary group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white group-hover:shadow-md group-hover:shadow-brand/25'
+                          }`}
+                        >
+                          <Icon className="w-5.5 h-5.5" />
+                        </div>
+                        <div className="flex-1 min-w-0 pt-1">
+                          <FeatureTags text={feature} />
+                        </div>
+                      </div>
+                    </motion.div>
+                  </InkGlowCard>
                 );
               })}
-            </ul>
+            </div>
           </motion.div>
 
           <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.15 }}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-80px' }}
+            variants={{
+              hidden: {},
+              visible: {
+                transition: {
+                  staggerChildren: 0.06,
+                  delayChildren: 0.35,
+                },
+              },
+            }}
+            className="xl:col-span-2 space-y-6"
           >
-            <h2 className="mb-4 text-2xl font-bold text-gray-900 lg:text-3xl">
-              为什么选择我们
-            </h2>
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="flex items-center gap-4 mb-8">
+              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md shadow-blue-500/20">
+                <TrendingUp className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold text-ink">核心优势</h3>
+                <p className="text-sm text-text-muted mt-0.5">为什么选择我们</p>
+              </div>
+            </div>
+
+            <div className="space-y-4">
               {product.benefits.map((benefit, index) => (
                 <motion.div
-                  key={benefit}
-                  initial={{ opacity: 0, y: 10 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.3, delay: index * 0.06 }}
-                  className="rounded-lg border border-gray-100 bg-gray-50 p-4"
+                  key={index}
+                  variants={{
+                    hidden: { opacity: 0, x: 20 },
+                    visible: {
+                      opacity: 1,
+                      x: 0,
+                      transition: {
+                        duration: 0.5,
+                        ease: [0.22, 1, 0.36, 1] as const,
+                      },
+                    },
+                  }}
+                  className="group p-5 rounded-2xl bg-bg-secondary border border-border-primary hover:border-brand/30 hover:shadow-md hover:-translate-y-1 transition-all duration-300"
                 >
-                  <CheckCircle2 className="mb-2 h-5 w-5 text-green-600" />
-                  <p className="text-sm leading-relaxed text-gray-700">{benefit}</p>
+                  <div className="flex items-start gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-brand mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
+                    <p className="text-sm font-medium text-text-secondary leading-relaxed">{benefit}</p>
+                  </div>
                 </motion.div>
               ))}
             </div>
 
-            <div className="mt-8 rounded-xl bg-gray-900 p-6">
-              <h3 className="mb-3 text-sm font-semibold text-white">技术规格</h3>
-              <ul className="space-y-2">
-                {product.specs.slice(0, 4).map((spec) => (
-                  <li key={spec} className="flex items-start gap-2 text-xs text-gray-300">
-                    <span className="mt-1 h-1 w-1 shrink-0 rounded-full bg-[#C41E3A]" />
-                    {spec}
-                  </li>
+            <motion.div
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: {
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    delay: 0.5,
+                    duration: 0.55,
+                    ease: [0.22, 1, 0.36, 1] as const,
+                  },
+                },
+              }}
+              className="mt-8 p-6 rounded-2xl bg-bg-secondary border border-border-primary"
+            >
+              <h4 className="font-bold text-ink mb-5 flex items-center gap-2.5">
+                <Shield className="w-5 h-5 text-green-600" />
+                技术规格
+              </h4>
+              <ul className="space-y-3.5">
+                {product.specs.slice(0, 5).map((spec, index) => (
+                  <motion.li
+                    key={index}
+                    initial={{ opacity: 0, x: -15 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      delay: 0.6 + index * 0.05,
+                      duration: 0.35,
+                      ease: [0.22, 1, 0.36, 1] as const,
+                    }}
+                    className="flex items-start gap-3 text-sm text-text-secondary group/item"
+                  >
+                    <ArrowRight className="w-4 h-4 text-brand mt-0.5 shrink-0 group-hover/item:translate-x-1 transition-transform" />
+                    <span>{spec}</span>
+                  </motion.li>
                 ))}
               </ul>
-            </div>
+            </motion.div>
           </motion.div>
         </div>
+
+        {product.dataProofs && product.dataProofs.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 32 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.75, delay: 0.2 }}
+            className="mt-24"
+          >
+            <div className="text-center mb-14">
+              <span className="inline-block mb-4 text-sm font-bold text-brand tracking-wider uppercase">
+                数据说话
+              </span>
+              <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
+                用真实效果证明价值
+              </h3>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7 max-w-5xl mx-auto">
+              {product.dataProofs.map((proof, index) => {
+                const icons: LucideIcon[] = [TrendingUp, Clock, Award, Users];
+                const Icon = icons[index % icons.length]!;
+
+                return (
+                  <MetricCard
+                    key={proof.metric}
+                    icon={Icon}
+                    value={proof.value}
+                    metric={proof.metric}
+                    description={proof.description}
+                    index={index}
+                    accent={index === 0}
+                  />
+                );
+              })}
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-60px' }}
+              transition={{ delay: 0.4, duration: 0.65 }}
+              className="mt-16 grid grid-cols-3 gap-8 max-w-3xl mx-auto"
+            >
+              <CircularProgress value={95} label="客户满意度" color="#3b82f6" />
+              <CircularProgress value={99} label="系统稳定性" color="#10b981" />
+              <CircularProgress value={98} label="交付准时率" color="#f59e0b" />
+            </motion.div>
+          </motion.div>
+        )}
       </div>
     </section>
   );
diff --git a/src/components/detail/detail-trust-section.tsx b/src/components/detail/detail-trust-section.tsx
index 04a9401..e5e557d 100644
--- a/src/components/detail/detail-trust-section.tsx
+++ b/src/components/detail/detail-trust-section.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import { motion, useInView } from 'framer-motion';
+import { useRef, useEffect, useState } from 'react';
 import { CaseStudyCard } from './detail-case-study';
-import { DataProofGrid } from './detail-data-proof';
 import { CertificationList } from './detail-certification';
 import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products';
+import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
 
 interface DetailTrustSectionProps {
   caseStudies?: CaseStudy[];
@@ -12,6 +14,53 @@ interface DetailTrustSectionProps {
   accentColor?: string;
 }
 
+function AnimatedCounter({ value, duration = 2000 }: { value: string; duration?: number }) {
+  const [displayValue, setDisplayValue] = useState('0');
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+
+  useEffect(() => {
+    if (!isInView) return;
+
+    const numericValue = parseFloat(value.replace(/[^0-9.]/g, ''));
+    if (isNaN(numericValue)) {
+      setDisplayValue(value);
+      return;
+    }
+
+    const suffix = value.replace(/[0-9.]/g, '');
+    let startTime: number;
+    let animationFrame: number;
+
+    const animate = (currentTime: number) => {
+      if (!startTime) startTime = currentTime;
+      const progress = Math.min((currentTime - startTime) / duration, 1);
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+      const currentValue = numericValue * easeOutQuart;
+
+      setDisplayValue(
+        Number.isInteger(numericValue)
+          ? Math.floor(currentValue).toString() + suffix
+          : currentValue.toFixed(1) + suffix
+      );
+
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate);
+      }
+    };
+
+    animationFrame = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [isInView, value, duration]);
+
+  return (
+    <div ref={ref} className="text-4xl md:text-5xl font-bold text-ink">
+      {displayValue}
+    </div>
+  );
+}
+
 export function DetailTrustSection({
   caseStudies = [],
   dataProofs = [],
@@ -22,48 +71,108 @@ export function DetailTrustSection({
   if (!hasContent) return null;
 
   return (
-    <section className="bg-gray-50 py-16 lg:py-20">
-      <div className="container-wide">
+    <section className="relative py-20 lg:py-28 bg-bg-secondary overflow-hidden">
+      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
+
+      <div className="container-wide relative">
         {dataProofs.length > 0 && (
-          <div className="mb-12">
-            <h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
-              关键数据
-            </h2>
-            <p className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500">
-              用真实数据说话，让效果可衡量、可验证
-            </p>
-            <DataProofGrid proofs={dataProofs} accentColor={accentColor} />
+          <div className="mb-20">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-80px' }}
+              transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
+              className="text-center mb-12"
+            >
+              <span className="inline-block mb-3 text-sm font-semibold text-brand tracking-wider uppercase">
+                数据说话
+              </span>
+              <h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
+                用真实效果证明价值
+              </h2>
+              <p className={`${DESIGN_SYSTEM.typography.section.subtitle} mt-3 max-w-xl mx-auto text-text-secondary`}>
+                来自真实客户的使用数据，让效果可衡量、可验证
+              </p>
+            </motion.div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
+              {dataProofs.map((proof, index) => (
+                <motion.div
+                  key={proof.metric}
+                  initial={{ opacity: 0, y: 24 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, margin: '-60px' }}
+                  transition={{
+                    ...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
+                    delay: index * DESIGN_SYSTEM.animation.delay.stagger,
+                  }}
+                  whileHover={{
+                    y: -8,
+                    transition: { duration: 0.3 },
+                  }}
+                  className={`relative p-8 rounded-2xl border transition-all duration-300 ${
+                    index === 0
+                      ? 'bg-brand-soft/50 border-brand/20'
+                      : 'bg-white border-border-primary hover:border-border-secondary hover:shadow-md'
+                  }`}
+                >
+                  <AnimatedCounter value={proof.value} />
+                  <p className="text-lg font-semibold text-ink mt-2">{proof.metric}</p>
+                  <p className="text-sm text-text-muted mt-1 leading-relaxed">{proof.description}</p>
+                </motion.div>
+              ))}
+            </div>
           </div>
         )}
 
         {caseStudies.length > 0 && (
-          <div className="mb-12">
-            <h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
-              客户案例
-            </h2>
-            <p className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500">
-              来自真实客户的成功实践，看看他们如何实现转型突破
-            </p>
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="mb-16">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-80px' }}
+              transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
+              className="text-center mb-12"
+            >
+              <span className="inline-block mb-3 text-sm font-semibold tracking-wider uppercase" style={{ color: accentColor }}>
+                客户案例
+              </span>
+              <h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
+                他们已经实现了转型突破
+              </h2>
+            </motion.div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
               {caseStudies.map((study, index) => (
-                <CaseStudyCard key={study.client} study={study} index={index} />
+                <motion.div
+                  key={study.client}
+                  initial={{ opacity: 0, y: 24 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, margin: '-60px' }}
+                  transition={{
+                    ...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
+                    delay: index * DESIGN_SYSTEM.animation.delay.stagger,
+                  }}
+                >
+                  <CaseStudyCard study={study} index={index} />
+                </motion.div>
               ))}
             </div>
           </div>
         )}
 
         {certifications.length > 0 && (
-          <div>
-            <h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
-              资质认证
-            </h2>
-            <p className="mx-auto mb-6 max-w-2xl text-center text-sm text-gray-500">
-              通过权威机构认证，保障安全合规
-            </p>
-            <div className="flex justify-center">
-              <CertificationList certifications={certifications} />
-            </div>
-          </div>
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
+            className="text-center"
+          >
+            <h3 className="text-lg font-semibold text-text-secondary mb-6">资质认证</h3>
+            <CertificationList certifications={certifications} />
+          </motion.div>
         )}
       </div>
     </section>
diff --git a/src/components/detail/index.ts b/src/components/detail/index.ts
new file mode 100644
index 0000000..4805ef4
--- /dev/null
+++ b/src/components/detail/index.ts
@@ -0,0 +1,22 @@
+export { DetailHero } from './detail-hero';
+
+export { ProductValueSection } from './detail-product-value';
+
+export { DetailTrustSection } from './detail-trust-section';
+
+export { DetailCTASection } from './detail-cta-section';
+
+export { CaseStudyCard } from './detail-case-study';
+export { CertificationList } from './detail-certification';
+export { CrossRecommendGrid } from './detail-cross-recommend';
+
+export { SolutionValueSection } from './solution-value';
+export { ServiceValueSection } from './service-value';
+
+export { ListPageHero } from './list-page-hero';
+export { ProductCard } from './product-card';
+export { SolutionCard } from './solution-service-card';
+
+export { TiltCard, PressableButton, InkGlowCard, HoverLink } from './micro-interactions';
+
+export { BrandSeal, CalligraphyText, InkDivider, SectionHeader } from './brand-elements';
diff --git a/src/components/detail/list-page-hero.tsx b/src/components/detail/list-page-hero.tsx
new file mode 100644
index 0000000..1994aff
--- /dev/null
+++ b/src/components/detail/list-page-hero.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+interface ListPageHeroProps {
+  title: string;
+  subtitle: string;
+  description?: string;
+  stats?: Array<{ value: string; label: string }>;
+  badge?: {
+    text: string;
+    variant?: 'brand' | 'blue' | 'green' | 'neutral';
+  };
+}
+
+const BADGE_VARIANTS = {
+  brand: {
+    bg: 'var(--color-brand-bg)',
+    text: 'var(--color-brand)',
+    border: 'rgba(var(--color-brand-rgb), 0.15)',
+    dot: 'var(--color-brand)',
+  },
+  blue: {
+    bg: 'rgba(var(--color-accent-blue-rgb), 0.08)',
+    text: 'var(--color-accent-blue)',
+    border: 'rgba(var(--color-accent-blue-rgb), 0.15)',
+    dot: 'var(--color-accent-blue)',
+  },
+  green: {
+    bg: 'rgba(34, 197, 94, 0.08)',
+    text: '#16a34a',
+    border: 'rgba(34, 197, 94, 0.15)',
+    dot: '#22c55e',
+  },
+  neutral: {
+    bg: 'var(--color-bg-section)',
+    text: 'var(--color-text-secondary)',
+    border: 'var(--color-border-primary)',
+    dot: 'var(--color-text-subtle)',
+  },
+};
+
+export function ListPageHero({
+  title,
+  subtitle,
+  description,
+  stats,
+  badge,
+}: ListPageHeroProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const badgeStyle = BADGE_VARIANTS[badge?.variant || 'brand'];
+
+  return (
+    <section className="relative overflow-hidden">
+      {/* Multi-layer background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-bg-section)] via-[var(--color-bg-secondary)] to-[var(--color-bg-section)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(var(--color-brand-rgb),_0.05)_0%,_transparent_50%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(var(--color-brand-rgb),_0.03)_0%,_transparent_50%)]" />
+
+      {/* Subtle grid texture */}
+      <div
+        className="absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(var(--color-border-primary-rgb), 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--color-border-primary-rgb), 0.5) 1px, transparent 1px)',
+          backgroundSize: '60px 60px',
+        }}
+        aria-hidden="true"
+      />
+
+      {/* Decorative accent line */}
+      <div className="absolute top-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, var(--color-brand), transparent)' }} aria-hidden="true" />
+
+      <div className="container-wide relative z-10 py-20 lg:py-28">
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+          className="max-w-4xl mx-auto text-center"
+        >
+          {/* Dynamic Badge */}
+          {badge && badge.text && (
+            <motion.div
+              initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, y: 8 }}
+              whileInView={{ opacity: 1, scale: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.1, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+              className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-6 backdrop-blur-sm"
+              style={{ backgroundColor: badgeStyle.bg, color: badgeStyle.text, border: `1px solid ${badgeStyle.border}` }}
+            >
+              <span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: badgeStyle.dot }} />
+              {badge?.text || ''}
+            </motion.div>
+          )}
+
+          {/* Title */}
+          <motion.h1
+            initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.15, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+            className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-[var(--color-text-primary)]"
+          >
+            {title}
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.25, duration: 0.65, ease: [0.16, 1, 0.3, 1] }}
+            className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-4 text-[var(--color-text-secondary)]"
+          >
+            {subtitle}
+          </motion.p>
+
+          {/* Description */}
+          {description && (
+            <motion.p
+              initial={shouldReduceMotion ? {} : { opacity: 0, y: 18 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.35, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+              className="text-base max-w-xl mx-auto mb-10 text-[var(--color-text-muted)]"
+            >
+              {description}
+            </motion.p>
+          )}
+
+          {/* Stats Row */}
+          {stats && stats.length > 0 && (
+            <motion.div
+              initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.4, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+              className="flex flex-wrap justify-center gap-8 md:gap-12 mt-12 pt-12 border-t border-[var(--color-border-primary)]"
+            >
+              {stats.map((stat, index) => (
+                <motion.div
+                  key={stat.label}
+                  initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: 0.5 + index * 0.08, duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
+                  className="text-center min-w-[100px]"
+                >
+                  <div className="text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm mt-1 text-[var(--color-text-subtle)]">{stat.label}</div>
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </motion.div>
+      </div>
+
+      {/* Bottom fade */}
+      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" aria-hidden="true" />
+    </section>
+  );
+}
diff --git a/src/components/detail/micro-interactions.tsx b/src/components/detail/micro-interactions.tsx
new file mode 100644
index 0000000..04ec38d
--- /dev/null
+++ b/src/components/detail/micro-interactions.tsx
@@ -0,0 +1,261 @@
+'use client';
+
+import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion';
+import { useRef, ReactNode, useState, useCallback } from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+interface TiltCardProps {
+  children: ReactNode;
+  className?: string;
+  tiltAmount?: number;
+  glareEnable?: boolean;
+  glareMaxOpacity?: number;
+  scaleOnHover?: number;
+}
+
+export function TiltCard({
+  children,
+  className = '',
+  tiltAmount = 6,
+  glareEnable = true,
+  glareMaxOpacity = 0.06,
+  scaleOnHover = 1.01,
+}: TiltCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0.5);
+  const y = useMotionValue(0.5);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const rotateX = useSpring(useTransform(y, [0, 1], [tiltAmount, -tiltAmount]), {
+    stiffness: 280,
+    damping: 24,
+    mass: 0.8,
+  });
+  const rotateY = useSpring(useTransform(x, [0, 1], [-tiltAmount, tiltAmount]), {
+    stiffness: 280,
+    damping: 24,
+    mass: 0.8,
+  });
+  const scale = useSpring(isHovered ? scaleOnHover : 1, {
+    stiffness: 300,
+    damping: 28,
+    mass: 0.6,
+  });
+
+  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    x.set((e.clientX - rect.left) / rect.width);
+    y.set((e.clientY - rect.top) / rect.height);
+  }, [x, y]);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+    x.set(0.5);
+    y.set(0.5);
+  }, [x, y]);
+
+  const glareX = useTransform(x, [0, 1], ['0%', '100%']);
+  const glareY = useTransform(y, [0, 1], ['0%', '100%']);
+  const glareOpacity = useTransform(
+    y,
+    [0, 0.5, 1],
+    [glareMaxOpacity * 0.3, glareMaxOpacity, glareMaxOpacity * 0.2]
+  );
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        rotateX,
+        rotateY,
+        scale,
+        transformStyle: 'preserve-3d',
+        perspective: 1400,
+      }}
+      className={`relative will-change-transform ${className}`}
+    >
+      {children}
+      {glareEnable && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 rounded-[inherit] overflow-hidden"
+          style={{
+            opacity: glareOpacity,
+            backgroundImage: `linear-gradient(
+              135deg,
+              rgba(255,255,255,0.6) 0%,
+              rgba(255,255,255,0.2) 40%,
+              transparent 60%
+            )`,
+            backgroundPositionX: glareX,
+            backgroundPositionY: glareY,
+            backgroundSize: '250% 250%',
+            mixBlendMode: 'overlay',
+          }}
+        />
+      )}
+    </motion.div>
+  );
+}
+
+interface PressableButtonProps {
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  href?: string;
+}
+
+export function PressableButton({
+  children,
+  className = '',
+  onClick,
+  variant = 'primary',
+  href,
+}: PressableButtonProps) {
+  const baseStyles = {
+    primary:
+      'bg-brand text-white shadow-sm hover:shadow-brand-hover',
+    secondary:
+      'bg-white text-ink border border-border-primary hover:border-brand/30 hover:shadow-md',
+    ghost:
+      'bg-transparent text-brand hover:bg-brand/5',
+  };
+
+  const content = (
+    <motion.button
+      whileHover={{ y: -1 }}
+      whileTap={{ scale: 0.97, y: 0 }}
+      transition={{
+        type: 'spring',
+        stiffness: 400,
+        damping: 25,
+      }}
+      onClick={onClick}
+      className={`inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-md transition-all duration-fast ease-standard ${baseStyles[variant]} ${className}`}
+    >
+      {children}
+    </motion.button>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className="inline-block">
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}
+
+interface InkGlowCardProps {
+  children: ReactNode;
+  className?: string;
+  active?: boolean;
+  color?: string;
+  glowSize?: number;
+}
+
+export function InkGlowCard({ children, className = '', active = false, color = '#C41E3A', glowSize = 280 }: InkGlowCardProps) {
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setMousePos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      whileHover={{
+        y: -2,
+        transition: {
+          duration: 0.25,
+          ease: [0.22, 1, 0.36, 1],
+        },
+      }}
+      className={`relative bg-white overflow-hidden transition-shadow duration-fast ease-standard ${active ? 'border border-brand/20' : 'border border-border-primary'} ${className}`}
+      style={{
+        borderRadius: 'var(--radius-lg)',
+        boxShadow: isHovered
+          ? '0 4px 12px rgba(10, 14, 20, 0.06), 0 2px 4px rgba(10, 14, 20, 0.03)'
+          : '0 1px 3px rgba(10, 14, 20, 0.04), 0 1px 2px rgba(10, 14, 20, 0.02)',
+      }}
+    >
+      {active && (
+        <div className="absolute inset-0 bg-gradient-to-br from-brand/[0.03] to-transparent pointer-events-none" />
+      )}
+      <div
+        className="absolute inset-0 pointer-events-none transition-opacity duration-normal ease-ink"
+        style={{
+          opacity: isHovered ? 1 : 0,
+          background: `radial-gradient(${glowSize}px circle at ${mousePos.x}px ${mousePos.y}px, ${color}08, transparent 60%)`,
+        }}
+      />
+      <div className="relative z-10">{children}</div>
+    </motion.div>
+  );
+}
+
+interface HoverLinkProps {
+  children: ReactNode;
+  href: string;
+  className?: string;
+  showArrow?: boolean;
+  color?: 'default' | 'brand';
+}
+
+export function HoverLink({
+  children,
+  href,
+  className = '',
+  showArrow = false,
+  color = 'default',
+}: HoverLinkProps) {
+  return (
+    <a
+      href={href}
+      className={`group inline-flex items-center gap-1.5 font-medium transition-colors duration-fast ease-standard ${
+        color === 'brand' ? 'text-brand' : 'text-text-secondary hover:text-brand'
+      } ${className}`}
+    >
+      <span className="relative inline-block">
+        <span className="relative z-10">{children}</span>
+        <span
+          className="absolute bottom-0 left-0 w-full h-px origin-left scale-x-0 transition-transform duration-normal ease-standard group-hover:scale-x-100"
+          style={{
+            background: `linear-gradient(90deg, currentColor 0%, currentColor 100%)`,
+          }}
+        />
+      </span>
+      {showArrow && (
+        <ArrowUpRight className="w-4 h-4 transition-all duration-fast ease-standard group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+      )}
+    </a>
+  );
+}
diff --git a/src/components/detail/product-card.tsx b/src/components/detail/product-card.tsx
new file mode 100644
index 0000000..c059430
--- /dev/null
+++ b/src/components/detail/product-card.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+
+interface ProductCardProps {
+  product: {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+    category: string;
+    status: string;
+    features?: string[];
+  };
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{
+        duration: 0.65,
+        ease: [0.22, 1, 0.36, 1] as const,
+      }}
+      className="group"
+    >
+      <Link href={`/products/${product.id}`} className="block">
+        <div className="relative h-full rounded-2xl bg-white border border-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+          <div className="aspect-video relative overflow-hidden bg-bg-secondary">
+            <Image
+              src={product.image}
+              alt={product.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-500"
+            />
+
+            <div className="absolute top-4 left-4 flex gap-2">
+              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md">
+                {product.category}
+              </span>
+              {product.status === '已发布' && (
+                <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-md flex items-center gap-1">
+                  <CheckCircle2 className="w-3 h-3" />
+                  已发布
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
+              {product.title}
+            </h3>
+
+            <p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-2">
+              {product.description}
+            </p>
+
+            {product.features && product.features.length > 0 && (
+              <div className="flex flex-wrap gap-2 mb-5">
+                {product.features.slice(0, 3).map((feature) => (
+                  <span
+                    key={feature}
+                    className="px-2.5 py-1 rounded-md text-xs font-medium bg-bg-secondary text-text-muted border border-border-primary"
+                  >
+                    {feature}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
+              了解详情
+              <ArrowRight className="w-4 h-4" />
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
diff --git a/src/components/detail/service-value.tsx b/src/components/detail/service-value.tsx
new file mode 100644
index 0000000..9283de9
--- /dev/null
+++ b/src/components/detail/service-value.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  CheckCircle2,
+  Zap,
+  Clock,
+  Users,
+  Award,
+  TrendingUp,
+  type LucideIcon,
+} from 'lucide-react';
+import { TiltCard, InkGlowCard } from './micro-interactions';
+import { SectionHeader, InkDivider } from './brand-elements';
+import type { Service } from '@/lib/constants/services';
+
+interface ServiceValueSectionProps {
+  service: Service;
+}
+
+export function ServiceValueSection({ service }: ServiceValueSectionProps) {
+  const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
+
+  return (
+    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
+      <div className="container-wide relative">
+        <SectionHeader
+          badge="专业服务"
+          title={`为什么选择我们的${service.title}？`}
+          subtitle={service.overview}
+          icon={Zap}
+        />
+
+        <div className="mt-16">
+          <div className="flex items-center gap-4 mb-8">
+            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] to-[#99182d] flex items-center justify-center shadow-md shadow-brand/20">
+              <Zap className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h3 className="text-2xl font-bold text-ink">核心能力</h3>
+              <p className="text-sm text-text-muted mt-0.5">我们提供的服务特色</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {service.features.map((feature, index) => {
+              const Icon = icons[index % icons.length]!;
+
+              return (
+                <InkGlowCard
+                  key={feature}
+                  active={index === 0}
+                  className="group p-6 hover:border-brand/20"
+                >
+                  <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      delay: index * 0.08,
+                      duration: 0.5,
+                      ease: [0.22, 1, 0.36, 1] as const,
+                    }}
+                  >
+                    <div className="flex items-start gap-4">
+                      <div
+                        className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-sm ${
+                          index === 0
+                            ? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
+                            : 'bg-bg-secondary text-text-secondary group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white'
+                        }`}
+                      >
+                        <Icon className="w-5.5 h-5.5" />
+                      </div>
+                      <p className="text-sm font-medium text-text-secondary leading-relaxed pt-2">
+                        {feature.split('：')[1] || feature}
+                      </p>
+                    </div>
+                  </motion.div>
+                </InkGlowCard>
+              );
+            })}
+          </div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.75, delay: 0.3 }}
+          className="mt-16"
+        >
+          <InkDivider variant="subtle" />
+
+          <div className="flex items-center gap-4 mb-8">
+            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-md shadow-green-500/20">
+              <Award className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h3 className="text-2xl font-bold text-ink">服务优势</h3>
+              <p className="text-sm text-text-muted mt-0.5">选择我们的理由</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {service.benefits.map((benefit, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  delay: 0.4 + index * 0.06,
+                  duration: 0.5,
+                  ease: [0.22, 1, 0.36, 1] as const,
+                }}
+                className="group p-6 rounded-2xl bg-bg-secondary border border-border-primary hover:border-brand/30 hover:shadow-md hover:-translate-y-1 transition-all duration-300"
+              >
+                <div className="flex items-start gap-3">
+                  <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
+                  <p className="text-sm font-medium text-text-secondary leading-relaxed">{benefit}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {service.process && service.process.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 32 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.75, delay: 0.45 }}
+            className="mt-20"
+          >
+            <InkDivider variant="decorative" />
+
+            <div className="text-center mb-12">
+              <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
+                服务流程
+              </h3>
+              <p className="text-text-secondary mt-3">标准化流程保障服务质量</p>
+            </div>
+
+            <div className="relative">
+              <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#C41E3A] via-blue-400 to-green-400 hidden md:block" />
+
+              <div className="space-y-6">
+                {service.process.map((step, index) => (
+                  <motion.div
+                    key={step}
+                    initial={{ opacity: 0, x: -30 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      delay: 0.5 + index * 0.1,
+                      duration: 0.55,
+                      ease: [0.22, 1, 0.36, 1] as const,
+                    }}
+                    className="relative flex gap-6 group"
+                  >
+                    <div className="relative z-10 shrink-0">
+                      <div className="w-16 h-16 rounded-full bg-white border-4 border-brand flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
+                        <span className="text-lg font-bold text-brand">{String(index + 1).padStart(2, '0')}</span>
+                      </div>
+                    </div>
+
+                    <TiltCard
+                      tiltAmount={5}
+                      glareEnable={false}
+                      className="flex-1 p-6 rounded-2xl bg-white border border-border-primary hover:border-brand/30 hover:shadow-md transition-all"
+                    >
+                      <h4 className="font-bold text-ink mb-2">
+                        {step.split('：')[0]}
+                      </h4>
+                      <p className="text-sm text-text-secondary leading-relaxed">
+                        {step.split('：')[1] || step}
+                      </p>
+                    </TiltCard>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/detail/solution-service-card.tsx b/src/components/detail/solution-service-card.tsx
new file mode 100644
index 0000000..e7cdb96
--- /dev/null
+++ b/src/components/detail/solution-service-card.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ArrowRight, Building2, Users, Cpu, Package } from 'lucide-react';
+
+interface SolutionCardProps {
+  solution: {
+    id: string;
+    title: string;
+    industry: string;
+    description: string;
+    image?: string;
+    challenges?: string[];
+    suiteCombination?: {
+      primaryProducts: string[];
+      complementaryServices: string[];
+      rationale: string;
+    };
+  };
+}
+
+export function SolutionCard({ solution }: SolutionCardProps) {
+  const industryIcons = {
+    制造业: Building2,
+    零售: Users,
+    金融: Cpu,
+    政务: Building2,
+  };
+
+  const Icon = industryIcons[solution.industry as keyof typeof industryIcons] || Building2;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{
+        duration: 0.65,
+        ease: [0.22, 1, 0.36, 1] as const,
+      }}
+      className="group"
+    >
+      <Link href={`/solutions/${solution.id}`} className="block">
+        <div className="relative h-full rounded-2xl bg-white border border-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+          <div className="aspect-video relative overflow-hidden bg-bg-secondary flex items-center justify-center">
+            {solution.image ? (
+              <Image
+                src={solution.image}
+                alt={solution.title}
+                fill
+                className="object-cover group-hover:scale-105 transition-transform duration-500"
+              />
+            ) : (
+              <Icon className="w-16 h-16 text-brand/20 group-hover:text-brand/40 transition-colors" />
+            )}
+
+            <div className="absolute top-4 left-4 flex gap-2">
+              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md inline-flex items-center gap-1.5">
+                <Icon className="w-3 h-3" />
+                {solution.industry}
+              </span>
+              {solution.suiteCombination && solution.suiteCombination.primaryProducts.length > 0 && (
+                <span className="px-3 py-1 rounded-full text-xs font-semibold bg-white/90 text-text-secondary shadow-md inline-flex items-center gap-1.5">
+                  <Package className="w-3 h-3" />
+                  {solution.suiteCombination.primaryProducts.length} 产品组合
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
+              {solution.title}
+            </h3>
+
+            <p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-2">
+              {solution.description}
+            </p>
+
+            {solution.challenges && solution.challenges.length > 0 && (
+              <div className="space-y-2 mb-5">
+                {solution.challenges.slice(0, 2).map((challenge) => (
+                  <div key={challenge} className="flex items-start gap-2 text-sm text-text-muted">
+                    <span className="w-1 h-1 rounded-full bg-brand mt-1.5 shrink-0" />
+                    <span className="line-clamp-1">{challenge}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
+              查看方案
+              <ArrowRight className="w-4 h-4" />
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
+
+interface ServiceCardProps {
+  service: {
+    id: string;
+    title: string;
+    description: string;
+    features?: string[];
+  };
+}
+
+export function ServiceCard({ service }: ServiceCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{
+        duration: 0.65,
+        ease: [0.22, 1, 0.36, 1] as const,
+      }}
+      className="group"
+    >
+      <Link href={`/services/${service.id}`} className="block">
+        <div className="relative h-full rounded-2xl bg-bg-secondary border border-border-primary overflow-hidden hover:border-blue-300 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+          <div className="p-8">
+            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--color-accent-blue)] to-[#1d4ed8] flex items-center justify-center mb-5 shadow-md shadow-blue-500/20 group-hover:scale-110 transition-transform">
+              <Cpu className="w-7 h-7 text-white" />
+            </div>
+
+            <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-blue-600 transition-colors">
+              {service.title}
+            </h3>
+
+            <p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-3">
+              {service.description}
+            </p>
+
+            {service.features && service.features.length > 0 && (
+              <div className="flex flex-wrap gap-2 mb-5">
+                {service.features.slice(0, 3).map((feature) => (
+                  <span
+                    key={feature}
+                    className="px-2.5 py-1 rounded-md text-xs font-medium bg-white text-blue-600 border border-border-primary"
+                  >
+                    {feature.split('：')[0]}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:gap-3 transition-all">
+              了解服务
+              <ArrowRight className="w-4 h-4" />
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
diff --git a/src/components/detail/solution-value.tsx b/src/components/detail/solution-value.tsx
new file mode 100644
index 0000000..a8c72a9
--- /dev/null
+++ b/src/components/detail/solution-value.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  CheckCircle2,
+  Lightbulb,
+  Target,
+  TrendingUp,
+} from 'lucide-react';
+import { TiltCard } from './micro-interactions';
+import { SectionHeader, InkDivider } from './brand-elements';
+import type { Solution } from '@/lib/constants/solutions';
+
+interface SolutionValueSectionProps {
+  solution: Solution;
+}
+
+export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
+  return (
+    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
+      <div className="container-wide relative">
+        <SectionHeader
+          badge="解决方案"
+          title={
+            <>
+              为<span className="text-brand">{solution.industry}</span>量身定制
+            </>
+          }
+          subtitle={solution.description}
+          icon={Lightbulb}
+        />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as const }}
+          >
+            <div className="bg-brand-soft/30 rounded-2xl p-8 border border-brand/20">
+              <h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
+                <span className="w-10 h-10 rounded-xl bg-brand flex items-center justify-center">
+                  <Target className="w-5 h-5 text-white" />
+                </span>
+                行业痛点挑战
+              </h3>
+
+              <ul className="space-y-4">
+                {solution.challenges.map((challenge, index) => (
+                  <motion.li
+                    key={index}
+                    initial={{ opacity: 0, y: 15 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      delay: index * 0.08,
+                      duration: 0.45,
+                      ease: [0.22, 1, 0.36, 1] as const,
+                    }}
+                    className="flex items-start gap-3 text-text-secondary"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-brand mt-2 shrink-0" />
+                    <span className="text-sm leading-relaxed">{challenge}</span>
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] as const }}
+          >
+            <div className="bg-blue-50/50 rounded-2xl p-8 border border-blue-100/60">
+              <h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
+                <span className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center">
+                  <Lightbulb className="w-5 h-5 text-white" />
+                </span>
+                睿新致远解决方案
+              </h3>
+
+              <ul className="space-y-4">
+                {solution.solutions.map((solutionItem, index) => (
+                  <motion.li
+                    key={index}
+                    initial={{ opacity: 0, y: 15 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      delay: 0.25 + index * 0.08,
+                      duration: 0.45,
+                      ease: [0.22, 1, 0.36, 1] as const,
+                    }}
+                    className="flex items-start gap-3 text-text-secondary"
+                  >
+                    <CheckCircle2 className="w-4.5 h-4.5 text-blue-600 mt-0.5 shrink-0" />
+                    <span className="text-sm leading-relaxed">{solutionItem}</span>
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+          </motion.div>
+        </div>
+
+        {solution.valueProposition && (
+          <motion.div
+            initial={{ opacity: 0, y: 32 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.75, delay: 0.3 }}
+            className="mt-20"
+          >
+            <InkDivider variant="decorative" />
+
+            <div className="text-center mb-12">
+              <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
+                {solution.valueProposition.headline}
+              </h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-7">
+              {solution.valueProposition.points.map((point, index) => (
+                <TiltCard
+                  key={index}
+                  tiltAmount={6}
+                  className="p-7 rounded-2xl bg-white border border-border-primary hover:border-blue-200 hover:shadow-md transition-shadow"
+                >
+                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-5 shadow-md shadow-blue-500/20">
+                    <TrendingUp className="w-7 h-7 text-white" />
+                  </div>
+                  <h4 className="text-lg font-bold text-ink mb-2">{point.title}</h4>
+                  <p className="text-sm text-text-secondary leading-relaxed">{point.description}</p>
+                </TiltCard>
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {solution.suiteCombination && (
+          <motion.div
+            initial={{ opacity: 0, y: 32 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.75, delay: 0.4 }}
+            className="mt-20"
+          >
+            <InkDivider variant="subtle" />
+
+            <div className="bg-bg-secondary rounded-2xl p-10 border border-border-primary">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+                <div>
+                  <h4 className="text-lg font-bold text-ink mb-5 flex items-center gap-2.5">
+                    <span className="w-8 h-8 rounded-lg bg-brand flex items-center justify-center">
+                      <span className="text-white text-xs font-bold">核</span>
+                    </span>
+                    核心产品组合
+                  </h4>
+                  <div className="flex flex-wrap gap-3">
+                    {solution.suiteCombination.primaryProducts.map((product, index) => (
+                      <motion.span
+                        key={product}
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        viewport={{ once: true }}
+                        transition={{
+                          delay: 0.5 + index * 0.06,
+                          duration: 0.35,
+                        }}
+                        className="px-5 py-2.5 bg-brand-soft/50 text-brand text-sm font-semibold rounded-xl border border-brand/20"
+                      >
+                        {product}
+                      </motion.span>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-lg font-bold text-ink mb-5 flex items-center gap-2.5">
+                    <span className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
+                      <span className="text-white text-xs font-bold">配</span>
+                    </span>
+                    配套专业服务
+                  </h4>
+                  <div className="flex flex-wrap gap-3">
+                    {solution.suiteCombination.complementaryServices.map((service, index) => (
+                      <motion.span
+                        key={service}
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        viewport={{ once: true }}
+                        transition={{
+                          delay: 0.65 + index * 0.06,
+                          duration: 0.35,
+                        }}
+                        className="px-5 py-2.5 bg-blue-50/80 text-blue-700 text-sm font-semibold rounded-xl border border-blue-200"
+                      >
+                        {service}
+                      </motion.span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <motion.p
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.85, duration: 0.55 }}
+                className="mt-8 p-5 bg-white rounded-xl text-sm text-text-secondary leading-relaxed border border-border-primary"
+              >
+                <strong className="text-ink">组合逻辑：</strong>{solution.suiteCombination.rationale}
+              </motion.p>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/sections/case-card.tsx b/src/components/sections/case-card.tsx
new file mode 100644
index 0000000..982a89b
--- /dev/null
+++ b/src/components/sections/case-card.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+interface CaseImpact {
+  value: string;
+  label: string;
+}
+
+interface CaseCardProps {
+  /** Industry label (e.g. "制造业") */
+  industry: string;
+  /** Case title */
+  title: string;
+  /** Challenge the client faced (Bain-style) */
+  challenge: string;
+  /** Solution we provided (Bain-style) */
+  solution: string;
+  /** @deprecated Use challenge + solution instead */
+  context?: string;
+  /** Quantified impact metrics (2 items) */
+  impact: CaseImpact[];
+  /** Client quote */
+  quote: string;
+  /** Client name/title */
+  author: string;
+  /** Optional background image URL */
+  image?: string;
+  className?: string;
+}
+
+export function CaseCard({
+  industry,
+  title,
+  challenge,
+  solution,
+  context,
+  impact,
+  quote,
+  author,
+  image,
+  className = '',
+}: CaseCardProps) {
+  const displayChallenge = challenge || context || '';
+  const displaySolution = solution || '';
+
+  return (
+    <div
+      className={`group relative overflow-hidden p-6 sm:p-8 md:p-10 lg:p-14 flex flex-col transition-all duration-500 bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:bg-[var(--color-bg-secondary)] ${className}`}
+    >
+      {/* Background image */}
+      {image && (
+        <div className="absolute inset-0 transition-opacity duration-500 opacity-[0.02] group-hover:opacity-[0.05]">
+          <img
+            src={image}
+            alt=""
+            className="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </div>
+      )}
+
+      <div className="relative z-10 flex flex-col flex-1">
+        {/* Industry tag */}
+        <div
+          className="text-[10px] tracking-[3px] uppercase font-medium mb-4 md:mb-5"
+          style={{ color: 'var(--color-text-muted)' }}
+        >
+          {industry}
+        </div>
+
+        {/* Title */}
+        <h3 className="font-sans text-[19px] sm:text-[22px] font-bold leading-[1.3] tracking-[-0.3px] text-[var(--color-text-primary)] mb-5 md:mb-6">
+          {title}
+        </h3>
+
+        {/* Bain-style: Challenge + Solution */}
+        <div className="space-y-4 mb-6 md:mb-8 flex-1">
+          {/* Challenge */}
+          <div>
+            <div
+              className="text-[10px] tracking-[2px] uppercase font-semibold mb-2"
+              style={{ color: 'var(--color-brand)' }}
+            >
+              挑战
+            </div>
+            <p className="text-[13px] sm:text-[14px] leading-relaxed text-[var(--color-text-secondary)]">
+              {displayChallenge}
+            </p>
+          </div>
+
+          {/* Solution (only if provided) */}
+          {displaySolution && (
+            <div>
+              <div
+                className="text-[10px] tracking-[2px] uppercase font-semibold mb-2"
+                style={{ color: 'var(--color-brand)' }}
+              >
+                方案
+              </div>
+              <p className="text-[13px] sm:text-[14px] leading-relaxed text-[var(--color-text-secondary)]">
+                {displaySolution}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Impact numbers — Results (Bain-style, most visual weight) */}
+        <div className="grid grid-cols-2 gap-4 sm:gap-6 pt-5 md:pt-7 mb-5 md:mb-7 border-t border-[var(--color-border-primary)]">
+          {impact.map((item, i) => (
+            <div key={i} className="transition-transform duration-300 group-hover:scale-[1.02]">
+              <div className="font-sans tabular-nums text-[32px] sm:text-[38px] md:text-[42px] font-bold leading-none mb-1 md:mb-1.5 tracking-[-1.5px] text-[var(--color-text-primary)]">
+                {item.value}
+              </div>
+              <div className="text-[10px] sm:text-[11px] text-[var(--color-text-muted)]">
+                {item.label}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Quote */}
+        <blockquote className="text-[13px] leading-relaxed italic mb-2 md:mb-3 text-[var(--color-text-secondary)]">
+          &ldquo;{quote}&rdquo;
+        </blockquote>
+        <cite className="text-[11px] sm:text-[12px] not-italic text-[var(--color-text-muted)]">
+          {author}
+        </cite>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sections/case-detail-page.tsx b/src/components/sections/case-detail-page.tsx
new file mode 100644
index 0000000..59c38ee
--- /dev/null
+++ b/src/components/sections/case-detail-page.tsx
@@ -0,0 +1,493 @@
+'use client';
+
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useRef, useState, useEffect } from 'react';
+import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
+import { SectionHeader } from '@/components/sections/section-header';
+import { ServiceCard } from '@/components/sections/service-card';
+import { ScrollProgress } from '@/components/ui/scroll-progress';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+import { ArrowRight, Quote, Building2, Target, Lightbulb, TrendingUp } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { AnimatedCounter } from '@/components/ui/animated-counter';
+
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+export interface CaseDetailData {
+  id: string;
+  client: string;
+  industry: string;
+  title: string;
+  subtitle: string;
+  challenge: string;
+  solution: string;
+  result: string;
+  metrics: { value: string; label: string; highlight?: boolean }[];
+  timeline: { phase: string; duration: string; description: string }[];
+  services: { id: string; title: string; description: string }[];
+  testimonial?: { quote: string; author: string; role: string };
+}
+
+interface CaseDetailHeroProps {
+  data: CaseDetailData;
+}
+
+function CaseDetailHero({ data }: CaseDetailHeroProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const heroRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: heroRef,
+    offset: ['start start', 'end start'],
+  });
+
+  const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
+  const contentY = useTransform(scrollYProgress, [0, 1], [0, 50]);
+
+  return (
+    <section
+      ref={heroRef}
+      className="relative min-h-[85svh] flex items-center overflow-hidden pt-20"
+      style={{ background: 'var(--color-bg-primary)' }}
+    >
+      <motion.div
+        className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-20 md:py-28"
+        style={{ opacity, y: shouldReduceMotion ? 0 : contentY }}
+      >
+        <motion.div
+          className="flex flex-wrap items-center gap-3 mb-8"
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: EASE }}
+        >
+          <span
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[11px] font-medium tracking-wider uppercase"
+            style={{
+              backgroundColor: 'var(--color-brand-soft)',
+              color: 'var(--color-brand)',
+            }}
+          >
+            <Building2 className="w-3.5 h-3.5" />
+            {data.industry}
+          </span>
+          <span className="text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
+            {data.client}
+          </span>
+        </motion.div>
+
+        {/* Bain-style: big result number first */}
+        <motion.div
+          className="mb-8"
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
+        >
+          <div
+            className="font-sans text-[clamp(56px,12vw,120px)] font-black leading-none tracking-[-2px] mb-2"
+            style={{ color: 'var(--color-brand)' }}
+          >
+            {data.metrics[0]?.value || '40%'}
+          </div>
+          <div
+            className="text-lg md:text-xl font-medium"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            {data.metrics[0]?.label || '核心成果提升'}
+          </div>
+        </motion.div>
+
+        <motion.h1
+          className="font-sans text-[clamp(28px,5vw,48px)] font-bold leading-[1.15] tracking-[-0.5px] text-[var(--color-text-primary)] mb-6 max-w-3xl"
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.9, delay: 0.25, ease: EASE }}
+        >
+          {data.title}
+        </motion.h1>
+
+        <motion.p
+          className="text-base md:text-lg max-w-2xl leading-relaxed mb-10 font-light"
+          style={{ color: 'var(--color-text-secondary)' }}
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
+        >
+          {data.subtitle}
+        </motion.p>
+
+        {/* Quick stats row */}
+        <motion.div
+          className="grid grid-cols-3 gap-6 sm:gap-10 max-w-lg mb-10"
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.55, ease: EASE }}
+        >
+          {data.metrics.slice(1, 4).map((m, i) => (
+            <div key={i}>
+              <div
+                className="font-sans tabular-nums text-[28px] sm:text-[32px] font-bold leading-none mb-1.5"
+                style={{ color: m.highlight ? 'var(--color-brand)' : 'var(--color-text-primary)' }}
+              >
+                {m.value}
+              </div>
+              <div className="text-[11px] sm:text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
+                {m.label}
+              </div>
+            </div>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="flex flex-wrap gap-4"
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.7, ease: EASE }}
+        >
+          <Button size="lg" asChild>
+            <a href="/contact">
+              咨询类似方案
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" asChild>
+            <a href="#solution">查看方案</a>
+          </Button>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}
+
+function ChallengeSection({ data }: { data: CaseDetailData }) {
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
+      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
+        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
+          <ScrollReveal className="lg:col-span-5">
+            <SectionHeader
+              label="Challenge"
+              title="业务"
+              highlight="挑战"
+              desc="每个项目，都从一个真实的业务痛点出发"
+            />
+          </ScrollReveal>
+
+          <ScrollReveal delay={0.1} className="lg:col-span-7">
+            <div
+              className="p-8 sm:p-10 lg:p-12"
+              style={{
+                backgroundColor: 'var(--color-bg-secondary)',
+              }}
+            >
+              <div className="flex items-center gap-3 mb-6">
+                <Target className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
+                <span
+                  className="text-sm font-semibold tracking-wider uppercase"
+                  style={{ color: 'var(--color-brand)' }}
+                >
+                  面临的挑战
+                </span>
+              </div>
+              <p
+                className="text-lg md:text-xl leading-relaxed mb-6"
+                style={{ color: 'var(--color-text-primary)' }}
+              >
+                {data.challenge}
+              </p>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function SolutionSection({ data }: { data: CaseDetailData }) {
+  return (
+    <section
+      id="solution"
+      className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
+      style={{ background: 'var(--color-bg-secondary)' }}
+    >
+      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
+        <ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
+          <SectionHeader
+            label="Solution"
+            title="我们的"
+            highlight="方案"
+            desc="针对性的解决方案，每一步都有明确的目标"
+          />
+        </ScrollReveal>
+
+        <div className="grid lg:grid-cols-2 gap-0" style={{ border: '1px solid var(--color-border-primary)' }}>
+          <div style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+            <div className="p-8 sm:p-10 lg:p-12">
+              <div className="flex items-center gap-3 mb-6">
+                <Lightbulb className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
+                <span
+                  className="text-sm font-semibold tracking-wider uppercase"
+                  style={{ color: 'var(--color-brand)' }}
+                >
+                  核心思路
+                </span>
+              </div>
+              <p className="text-base md:text-lg leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
+                {data.solution}
+              </p>
+            </div>
+          </div>
+
+          <div className="p-8 sm:p-10 lg:p-12" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+            <div className="flex items-center gap-3 mb-6">
+              <TrendingUp className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
+              <span
+                className="text-sm font-semibold tracking-wider uppercase"
+                style={{ color: 'var(--color-brand)' }}
+              >
+                实施路径
+              </span>
+            </div>
+            <div className="space-y-5">
+              {data.timeline.map((t, i) => (
+                <div key={i} className="flex gap-4">
+                  <div
+                    className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
+                    style={{
+                      backgroundColor: 'var(--color-brand-soft)',
+                      color: 'var(--color-brand)',
+                    }}
+                  >
+                    {i + 1}
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-3 mb-1">
+                      <h4 className="text-[var(--color-text-primary)] font-semibold">{t.phase}</h4>
+                      <span className="text-[11px] px-2 py-0.5 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                        {t.duration}
+                      </span>
+                    </div>
+                    <p className="text-sm leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
+                      {t.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ResultsSection({ data }: { data: CaseDetailData }) {
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const [inView, setInView] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (!resultsRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(resultsRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const parseValue = (val: string): { num: number; suffix: string; isNumeric: boolean } => {
+    const match = val.match(/^([\d.]+)(.*)$/);
+    if (match && match[1] && !isNaN(parseFloat(match[1]))) {
+      return { num: parseFloat(match[1]), suffix: match[2] || '', isNumeric: true };
+    }
+    return { num: 0, suffix: val, isNumeric: false };
+  };
+
+  return (
+    <section
+      ref={resultsRef}
+      className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
+      style={{ background: 'var(--color-brand)' }}
+    >
+      {/* Background decoration */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div
+          className="absolute w-[600px] h-[600px] rounded-full opacity-[0.15] blur-[120px]"
+          style={{
+            background: 'radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%)',
+            top: '-30%',
+            right: '-10%',
+          }}
+        />
+        <div
+          className="absolute w-[400px] h-[400px] rounded-full opacity-[0.1] blur-[100px]"
+          style={{
+            background: 'radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%)',
+            bottom: '-20%',
+            left: '10%',
+          }}
+        />
+      </div>
+
+      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 relative z-10">
+        <ScrollReveal className="mb-16 sm:mb-20 text-center max-w-3xl mx-auto">
+          <div
+            className="text-[10px] tracking-[4px] uppercase font-medium mb-4"
+            style={{ color: 'rgba(255,255,255,0.6)' }}
+          >
+            Results
+          </div>
+          <h2 className="font-sans text-3xl sm:text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
+            可量化的业务成果
+          </h2>
+          <p className="text-lg text-white/60 leading-relaxed max-w-2xl mx-auto">
+            {data.result}
+          </p>
+        </ScrollReveal>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px mb-16" style={{ backgroundColor: 'rgba(255,255,255,0.15)' }}>
+          {data.metrics.slice(0, 4).map((m, i) => {
+            const { num, suffix, isNumeric } = parseValue(m.value);
+            const decimals = String(num).includes('.') ? String(num).split('.')[1]?.length ?? 0 : 0;
+            return (
+              <div
+                key={i}
+                className="p-10 sm:p-12 text-center transition-all duration-500 hover:bg-white/[0.05] group relative overflow-hidden"
+                style={{ backgroundColor: 'var(--color-brand)' }}
+              >
+                {m.highlight && (
+                  <div className="absolute top-4 right-4 px-2 py-1 text-[10px] font-bold text-brand bg-white rounded-full">
+                    核心指标
+                  </div>
+                )}
+                <div className="font-sans tabular-nums text-[clamp(40px,8vw,64px)] font-black leading-none mb-3 text-white transition-transform duration-500 group-hover:scale-110">
+                  {isNumeric && inView && !shouldReduceMotion ? (
+                    <AnimatedCounter
+                      value={num}
+                      decimals={decimals}
+                      suffix={suffix}
+                      startOnView={false}
+                      duration={2000}
+                    />
+                  ) : (
+                    <>
+                      {isNumeric ? num : suffix}
+                      {isNumeric && suffix && (
+                        <span className="text-[0.5em] font-bold text-white/80 ml-0.5">{suffix}</span>
+                      )}
+                    </>
+                  )}
+                </div>
+                <div className="text-sm md:text-base text-white/60 font-medium">
+                  {m.label}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {data.testimonial && (
+          <ScrollReveal delay={0.3}>
+            <div className="max-w-4xl mx-auto">
+              <div className="relative p-8 sm:p-10 lg:p-14 border border-white/20 bg-white/[0.03] backdrop-blur-sm">
+                <Quote className="w-12 h-12 absolute -top-6 left-8 text-white/20" />
+                <blockquote className="text-xl sm:text-2xl md:text-3xl font-medium leading-relaxed text-white mb-8">
+                  &ldquo;{data.testimonial.quote}&rdquo;
+                </blockquote>
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
+                    <Building2 className="w-5 h-5 text-white/60" />
+                  </div>
+                  <div>
+                    <div className="font-semibold text-white text-lg">{data.testimonial.author}</div>
+                    <div className="text-sm text-white/50">{data.testimonial.role}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ScrollReveal>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function RelatedServicesSection({ services }: { services: CaseDetailData['services'] }) {
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
+      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
+        <ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
+          <SectionHeader
+            label="Related"
+            title="相关"
+            highlight="服务"
+            desc="类似的项目，我们还提供这些专业服务"
+          />
+        </ScrollReveal>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <StaggerReveal staggerDelay={0.08}>
+            {services.slice(0, 3).map((s, i) => (
+              <ServiceCard
+                key={s.id}
+                number={String(i + 1).padStart(2, '0')}
+                title={s.title}
+                description={s.description}
+                href={`/services/${s.id}`}
+                color="brand"
+              />
+            ))}
+          </StaggerReveal>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-bg-secondary)' }}>
+      <div className="max-w-[800px] mx-auto px-5 sm:px-8 lg:px-16 text-center relative z-10">
+        <ScrollReveal>
+          <h2 className="font-sans text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] leading-tight tracking-tight mb-6">
+            您也想实现类似的
+            <span style={{ color: 'var(--color-brand)' }}> 业务突破</span>
+            ？
+          </h2>
+          <p className="text-lg md:text-xl mb-10 font-light" style={{ color: 'var(--color-text-secondary)' }}>
+            免费咨询，48小时内给出初步方案建议
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <Button size="lg" asChild>
+              <a href="/contact">
+                免费咨询
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <a href="/cases">查看更多案例</a>
+            </Button>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}
+
+export default function CaseDetailPage({ data }: { data: CaseDetailData }) {
+  return (
+    <main className="min-h-screen">
+      <ScrollProgress />
+      <CaseDetailHero data={data} />
+      <ChallengeSection data={data} />
+      <SolutionSection data={data} />
+      <ResultsSection data={data} />
+      <RelatedServicesSection services={data.services} />
+      <CTASection />
+    </main>
+  );
+}
diff --git a/src/components/sections/challenge-section.tsx b/src/components/sections/challenge-section.tsx
index 221cae7..5b04c1a 100644
--- a/src/components/sections/challenge-section.tsx
+++ b/src/components/sections/challenge-section.tsx
@@ -49,7 +49,7 @@ export function ChallengeSection() {
             <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>
+            您的挑战，我们的<span className="text-[var(--color-brand)] font-calligraphy">使命</span>
           </h2>
           <p className="text-base text-[var(--color-text-muted)] text-center mt-4 max-w-xl mx-auto">
             深入理解企业数字化进程中的核心痛点，提供针对性解决方案
diff --git a/src/components/sections/cta-section.tsx b/src/components/sections/cta-section.tsx
index e953bde..55ffd8c 100644
--- a/src/components/sections/cta-section.tsx
+++ b/src/components/sections/cta-section.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useRef, useState } from 'react';
-import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
+import { useRef } from 'react';
+import { motion } from 'framer-motion';
 import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
 import { BrandStamp } from '@/components/ui/brand-visuals';
@@ -27,66 +27,14 @@ export function CTASection({
 }: CTASectionProps) {
   const shouldReduceMotion = useReducedMotion();
   const containerRef = useRef<HTMLDivElement>(null);
-  const mouseX = useMotionValue(0);
-  const mouseY = useMotionValue(0);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const springX = useSpring(mouseX, { stiffness: 80, damping: 20 });
-  const springY = useSpring(mouseY, { stiffness: 80, damping: 20 });
-
-  const glowX = useTransform(springX, [0, 1], ['-10%', '110%']);
-  const glowY = useTransform(springY, [0, 1], ['-10%', '110%']);
-
-  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
-    if (!containerRef.current || shouldReduceMotion) {return;}
-    const rect = containerRef.current.getBoundingClientRect();
-    mouseX.set((e.clientX - rect.left) / rect.width);
-    mouseY.set((e.clientY - rect.top) / rect.height);
-  }
 
   return (
     <section
       id="cta"
       ref={containerRef}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
       className="relative py-24 md:py-32 overflow-hidden"
-      style={{ backgroundColor: 'var(--color-cta-bg)' }}
+      style={{ backgroundColor: 'var(--color-bg-secondary)' }}
     >
-      <div className="pointer-events-none absolute inset-0">
-        {!shouldReduceMotion && (
-          <motion.div
-            className="absolute inset-[-20%]"
-            style={{
-              background:
-                'radial-gradient(circle at center, rgba(196, 30, 58, 0.08) 0%, transparent 50%)',
-              x: glowX,
-              y: glowY,
-              opacity: isHovered ? 1 : 0.5,
-            }}
-            transition={{ opacity: { duration: 0.6 } }}
-          />
-        )}
-
-        <div
-          className="absolute inset-0"
-          style={{
-            background:
-              'linear-gradient(to top, rgba(196, 30, 58, 0.06) 0%, transparent 40%), linear-gradient(135deg, transparent 40%, rgba(196, 30, 58, 0.03) 100%)',
-          }}
-        />
-
-        <div
-          className="absolute inset-0 opacity-[0.03]"
-          style={{
-            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
-            backgroundRepeat: 'repeat',
-            backgroundSize: '128px 128px',
-          }}
-        />
-      </div>
-
       <div className="container-wide relative z-10">
         <motion.div
           initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.96, y: 16 }}
@@ -103,29 +51,29 @@ export function CTASection({
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.4, delay: 0.15 }}
-            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 mb-8"
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-soft)] border border-[var(--color-border-primary)] mb-8"
           >
-            <Sparkles className="w-3.5 h-3.5 text-[var(--color-brand-primary)]" />
-            <span className="text-sm font-medium text-white/80">开始对话</span>
+            <Sparkles className="w-3.5 h-3.5 text-[var(--color-brand)]" />
+            <span className="text-sm font-medium text-[var(--color-text-primary)]">开始对话</span>
           </motion.div>
 
-          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white mb-6 tracking-tight leading-tight">
+          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-[var(--color-text-primary)] mb-6 tracking-tight leading-tight">
             {title}
           </h2>
-          <p className="text-lg md:text-xl text-white/65 leading-relaxed mb-10 max-w-2xl mx-auto">
+          <p className="text-lg md:text-xl text-[var(--color-text-secondary)] leading-relaxed mb-10 max-w-2xl mx-auto">
             {description}
           </p>
 
           <div className="flex flex-wrap items-center justify-center gap-3 mb-10">
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
               <MessageCircle className="w-3.5 h-3.5" />
               <span>免费咨询</span>
             </div>
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
               <Clock className="w-3.5 h-3.5" />
               <span>30 分钟内响应</span>
             </div>
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
               <ShieldCheck className="w-3.5 h-3.5" />
               <span>无销售压力</span>
             </div>
@@ -144,7 +92,6 @@ export function CTASection({
             <Button
               size="lg"
               variant="outline"
-              className="border-white/20 text-white hover:bg-white/10 hover:border-white/35 backdrop-blur-sm"
               asChild
             >
               <StaticLink href={secondaryHref}>{secondaryLabel}</StaticLink>
diff --git a/src/components/sections/hero-section-v2.tsx b/src/components/sections/hero-section-v2.tsx
index 6e53ac9..ca5135a 100644
--- a/src/components/sections/hero-section-v2.tsx
+++ b/src/components/sections/hero-section-v2.tsx
@@ -61,18 +61,16 @@ export function HeroSectionV2() {
               {...fadeUp(0)}
               className="mb-6"
             >
-              <span className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs sm:text-sm font-medium border border-[var(--color-brand-primary)]/10">
+              <span className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs sm:text-sm font-medium border border-[var(--color-brand)]/10">
                 {COMPANY_INFO.slogan}
               </span>
             </motion.div>
 
             <motion.p
               {...fadeUp(0.1)}
-              className="text-lg sm:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-3"
+              className="text-lg sm:text-xl lg:text-2xl text-[var(--color-text-secondary)] mb-3 font-medium"
             >
-              <span className="font-semibold text-[var(--color-brand-primary)] font-calligraphy">
-                企业数字化转型服务商
-              </span>
+              企业数字化转型服务商
             </motion.p>
 
             <motion.h1
@@ -95,7 +93,7 @@ export function HeroSectionV2() {
               {...fadeUp(0.35)}
               className="flex flex-col sm:flex-row items-start gap-4 mb-10"
             >
-              <Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand-primary)]/20">
+              <Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand)]/20">
                 <StaticLink href="/contact">
                   免费获取定制方案
                   <ArrowRight className="w-4 h-4 ml-2" />
@@ -117,7 +115,7 @@ export function HeroSectionV2() {
               className="relative ink-glow-border rounded-2xl lg:opacity-95"
               style={
                 {
-                  '--glow-start': 'var(--color-brand-primary)',
+                  '--glow-start': 'var(--color-brand)',
                   '--glow-end': 'var(--color-warning)',
                 } as React.CSSProperties
               }
@@ -129,13 +127,13 @@ export function HeroSectionV2() {
                 className="absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-500"
                 style={{
                   opacity: isCardHovered ? 1 : 0,
-                  background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(var(--color-brand-primary-rgb), 0.06), transparent 40%)`,
+                  background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(var(--color-brand-rgb), 0.06), transparent 40%)`,
                 }}
               />
 
               <div className="relative rounded-2xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm p-6 sm:p-8 lg:p-10">
-                <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5 lg:mb-6">
-                  <Handshake className="w-5 h-5 lg:w-6 lg:h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-xl bg-[var(--color-brand-bg)] flex items-center justify-center mb-5 lg:mb-6">
+                  <Handshake className="w-5 h-5 lg:w-6 lg:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />
                 </div>
 
                 <h3 className="text-lg lg:text-xl font-semibold text-[var(--color-text-primary)] mb-2">
@@ -153,12 +151,12 @@ export function HeroSectionV2() {
                         key={step.label}
                         className="flex items-center gap-3 lg:gap-4 p-2.5 lg:p-3 rounded-lg bg-[var(--color-bg-section)]/60"
                       >
-                        <div className="w-8 h-8 lg:w-9 lg:h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
-                          <Icon className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
+                        <div className="w-8 h-8 lg:w-9 lg:h-9 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center shrink-0">
+                          <Icon className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-[var(--color-brand)]" strokeWidth={2.2} />
                         </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-1.5 lg:gap-2">
-                            <span className="text-[10px] lg:text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
+                            <span className="text-[10px] lg:text-xs font-bold text-[var(--color-brand)]">0{idx + 1}</span>
                             <span className="text-xs lg:text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
                           </div>
                           <p className="text-[10px] lg:text-xs text-[var(--color-text-muted)] mt-0.5 hidden sm:block">{step.desc}</p>
@@ -178,13 +176,13 @@ export function HeroSectionV2() {
                           key={cap.label}
                           className="flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors duration-200"
                           style={{
-                            backgroundColor: idx === 0 ? 'var(--color-brand-primary-bg)' : idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.06)' : idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.06)' : 'rgba(var(--color-accent-cyan-rgb), 0.06)',
-                            borderColor: idx === 0 ? 'rgba(var(--color-brand-primary-rgb), 0.15)' : 'var(--color-border-primary)',
+                            backgroundColor: idx === 0 ? 'var(--color-brand-bg)' : idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.06)' : idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.06)' : 'rgba(var(--color-accent-cyan-rgb), 0.06)',
+                            borderColor: idx === 0 ? 'rgba(var(--color-brand-rgb), 0.15)' : 'var(--color-border-primary)',
                           }}
                         >
                           <Icon
                             className="w-4 h-4"
-                            style={{ color: idx === 0 ? 'var(--color-brand-primary)' : idx === 1 ? 'var(--color-accent-blue)' : idx === 2 ? 'var(--color-accent-purple)' : 'var(--color-accent-cyan)' }}
+                            style={{ color: idx === 0 ? 'var(--color-brand)' : idx === 1 ? 'var(--color-accent-blue)' : idx === 2 ? 'var(--color-accent-purple)' : 'var(--color-accent-cyan)' }}
                             strokeWidth={2.2}
                           />
                           <span className="text-xs font-medium text-[var(--color-text-primary)]">{cap.label}</span>
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
new file mode 100644
index 0000000..45599fd
--- /dev/null
+++ b/src/components/sections/index.ts
@@ -0,0 +1,24 @@
+export { SectionHeader } from './section-header';
+
+export { ServiceCard } from './service-card';
+export { ServiceGrid } from './service-grid';
+
+export { ProductCard as SectionProductCard } from './product-card';
+export { ProductMatrixSection } from './product-matrix-section';
+
+export { CaseCard } from './case-card';
+export { default as CaseDetailPage } from './case-detail-page';
+
+export { InsightCard } from './insight-card';
+export { IndustryGrid } from './industry-grid';
+
+export { StatsBar } from './stats-bar';
+export { SocialProofSection } from './social-proof-section';
+export { WhyUsSection } from './why-us-section';
+export { ChallengeSection } from './challenge-section';
+export { MethodologySection } from './methodology-section';
+
+export { CTASection } from './cta-section';
+export { HeroSectionV2 } from './hero-section-v2';
+
+export { QuestionCard } from './question-card';
diff --git a/src/components/sections/industry-grid.tsx b/src/components/sections/industry-grid.tsx
new file mode 100644
index 0000000..91b412c
--- /dev/null
+++ b/src/components/sections/industry-grid.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { type ElementType } from 'react';
+
+interface IndustryItem {
+  icon: ElementType;
+  name: string;
+  count: string;
+  href?: string;
+}
+
+interface IndustryGridProps {
+  items: IndustryItem[];
+  className?: string;
+}
+
+export function IndustryGrid({ items, className = '' }: IndustryGridProps) {
+  return (
+    <div
+      className={`grid grid-cols-2 sm:grid-cols-4 gap-px rounded-sm overflow-hidden ${className}`}
+      style={{ background: 'var(--color-border-secondary)' }}
+    >
+      {items.map((item, i) => {
+        const Icon = item.icon;
+        return (
+          <div
+            key={i}
+            className="group relative overflow-hidden py-8 sm:py-10 px-4 sm:px-6 text-center cursor-pointer transition-all duration-400 bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)]"
+            role="button"
+            tabIndex={0}
+          >
+            <div className="relative z-10">
+              <Icon className="w-7 h-7 sm:w-8 sm:h-8 mx-auto mb-2 sm:mb-3 transition-transform duration-400 group-hover:scale-110 text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)]" />
+              <div className="text-[13px] sm:text-[14px] font-medium transition-colors duration-400 text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)]">
+                {item.name}
+              </div>
+              <div className="text-[10px] sm:text-[11px] mt-1 sm:mt-1.5 transition-colors duration-400 text-[var(--color-text-subtle)] group-hover:text-[var(--color-text-muted)]">
+                {item.count}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/sections/insight-card.tsx b/src/components/sections/insight-card.tsx
new file mode 100644
index 0000000..d7bedb6
--- /dev/null
+++ b/src/components/sections/insight-card.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+interface InsightCardProps {
+  /** Category tag (e.g. "白皮书", "观点") */
+  tag: string;
+  /** Title */
+  title: string;
+  /** Description */
+  desc: string;
+  /** Optional date string */
+  date?: string;
+  /** Whether this is a featured (large) card with image */
+  featured?: boolean;
+  /** Image URL for featured card */
+  image?: string;
+  /** Optional link element (avoid nesting <a> in <a>) */
+  link?: ReactNode;
+  className?: string;
+}
+
+export function InsightCard({
+  tag,
+  title,
+  desc,
+  date,
+  featured = false,
+  image,
+  link,
+  className = '',
+}: InsightCardProps) {
+  if (featured) {
+    return (
+      <div
+        className={`group relative overflow-hidden flex flex-col justify-end min-h-[260px] sm:min-h-[300px] md:min-h-[360px] p-8 sm:p-10 md:p-12 lg:p-14 rounded-sm cursor-pointer bg-[var(--color-bg-secondary)] border border-[var(--color-border-primary)] hover:bg-[var(--color-bg-tertiary)] ${className}`}
+      >
+        {/* Background image */}
+        {image && (
+          <img
+            src={image}
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-10"
+            loading="lazy"
+          />
+        )}
+
+        <div className="relative z-10">
+          <div className="text-[10px] tracking-[3px] uppercase font-medium mb-4 md:mb-5"
+            style={{ color: 'var(--color-brand)' }}>
+            {tag}
+          </div>
+          <h3 className="font-sans text-[20px] sm:text-[24px] md:text-[26px] font-bold leading-[1.3] text-[var(--color-text-primary)] mb-2 md:mb-3">
+            {title}
+          </h3>
+          <p className="text-[13px] sm:text-[14px] leading-relaxed max-w-[400px] mb-5 md:mb-6 text-[var(--color-text-secondary)]">
+            {desc}
+          </p>
+          <span className="text-[12px] inline-flex items-center gap-1.5 transition-colors duration-300 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand)]">
+            阅读全文
+            <ArrowUpRight className="w-3 h-3" />
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`group p-6 sm:p-8 md:p-10 transition-all duration-400 cursor-pointer flex flex-col bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)] ${className}`}
+    >
+      <div className="text-[10px] tracking-[2px] uppercase font-medium mb-3 md:mb-4"
+        style={{ color: 'var(--color-brand)' }}>
+        {tag}
+      </div>
+      <h4 className="font-sans text-[16px] sm:text-[17px] font-semibold leading-[1.5] mb-2 text-[var(--color-text-primary)]">
+        {title}
+      </h4>
+      <p className="text-[13px] leading-relaxed flex-1 mb-4 md:mb-5 text-[var(--color-text-muted)]">
+        {desc}
+      </p>
+      <div className="flex items-center justify-between">
+        {date && (
+          <span className="text-[11px] text-[var(--color-text-subtle)]">{date}</span>
+        )}
+        {link && <span className="text-[12px] text-[var(--color-text-subtle)]">{link}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sections/methodology-section.tsx b/src/components/sections/methodology-section.tsx
index 99be474..d29276a 100644
--- a/src/components/sections/methodology-section.tsx
+++ b/src/components/sections/methodology-section.tsx
@@ -23,7 +23,7 @@ export function MethodologySection() {
           className="text-center max-w-3xl mx-auto mb-14"
         >
           <h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
-            实施<span className="text-[var(--color-brand-primary)]">方法论</span>
+            实施<span className="text-[var(--color-brand)]">方法论</span>
           </h2>
           <p className="text-base text-[var(--color-text-muted)]">
             经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
@@ -45,13 +45,13 @@ export function MethodologySection() {
                   <div className="p-6 md:p-8">
                     <div
                       className="w-10 h-10 rounded-full flex items-center justify-center mb-5 text-sm font-bold"
-                      style={{ backgroundColor: `rgba(var(--color-brand-primary-rgb), ${bgOpacity})`, color: 'var(--color-brand-primary)' }}
+                      style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${bgOpacity})`, color: 'var(--color-brand)' }}
                     >
                       {phase.number}
                     </div>
 
                     <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{phase.title}</h3>
-                    <p className="text-xs text-[var(--color-brand-primary)] font-medium mb-3">{phase.subtitle}</p>
+                    <p className="text-xs text-[var(--color-brand)] font-medium mb-3">{phase.subtitle}</p>
                     <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5">{phase.description}</p>
 
                     <div className="mb-4">
@@ -59,7 +59,7 @@ export function MethodologySection() {
                       <ul className="space-y-1.5">
                         {phase.activities.map((activity, i) => (
                           <li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-muted)]">
-                            <CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
+                            <CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand)] mt-0.5 shrink-0" />
                             {activity}
                           </li>
                         ))}
@@ -71,7 +71,7 @@ export function MethodologySection() {
                       <ul className="space-y-1.5">
                         {phase.deliverables.map((deliverable, i) => (
                           <li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-subtle)]">
-                            <span className="w-1.5 h-1.5 bg-[var(--color-brand-primary)]/40 rounded-full mt-1.5 shrink-0" />
+                            <span className="w-1.5 h-1.5 bg-[var(--color-brand)]/40 rounded-full mt-1.5 shrink-0" />
                             {deliverable}
                           </li>
                         ))}
diff --git a/src/components/sections/product-card.tsx b/src/components/sections/product-card.tsx
new file mode 100644
index 0000000..244e819
--- /dev/null
+++ b/src/components/sections/product-card.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { StaticLink } from '@/components/ui/static-link';
+import { ArrowRight } from 'lucide-react';
+
+interface ProductCardProps {
+  /** Icon component to render */
+  icon: ReactNode;
+  /** Product name */
+  title: string;
+  /** One-line description */
+  description: string;
+  /** Link href */
+  href: string;
+  /** Optional badge label */
+  badge?: string;
+  className?: string;
+}
+
+export function ProductCard({
+  icon,
+  title,
+  description,
+  href,
+  badge,
+  className = '',
+}: ProductCardProps) {
+  return (
+    <StaticLink
+      href={href}
+      className={`group relative block p-6 sm:p-8 lg:p-10 bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-sm transition-all duration-500 overflow-hidden ${className}`}
+      style={{ minHeight: '44px', minWidth: '44px' }}
+    >
+      {/* Left accent bar — visible on hover */}
+      <div
+        className="absolute left-0 top-0 bottom-0 w-[3px] bg-[var(--color-brand)] transition-transform duration-500 origin-top"
+        style={{ transform: 'scaleY(0)' }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = 'scaleY(1)';
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10">
+        {/* Icon */}
+        <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center mb-4 sm:mb-5 transition-transform duration-500 group-hover:scale-110">
+          {icon}
+        </div>
+
+        {/* Badge + Title */}
+        <div className="flex items-center gap-2 mb-2">
+          <h3 className="font-sans text-[17px] sm:text-[19px] font-semibold text-[var(--color-text-primary)]">
+            {title}
+          </h3>
+          {badge && (
+            <span className="text-[10px] tracking-[2px] uppercase px-2 py-0.5 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] font-medium">
+              {badge}
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        <p className="text-[13px] sm:text-[14px] text-[var(--color-text-muted)] leading-relaxed mb-4 sm:mb-5">
+          {description}
+        </p>
+
+        {/* CTA link */}
+        <span className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-300 group-hover:text-[var(--color-brand)] group-hover:gap-2.5">
+          了解更多
+          <ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
+        </span>
+      </div>
+
+      {/* Hover background lift */}
+      <div className="absolute inset-0 bg-[var(--color-bg-hover)] opacity-0 transition-opacity duration-500 pointer-events-none" />
+      <div
+        className="absolute inset-0 opacity-0 transition-opacity duration-500 pointer-events-none"
+        onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
+      />
+    </StaticLink>
+  );
+}
diff --git a/src/components/sections/product-matrix-section.tsx b/src/components/sections/product-matrix-section.tsx
index 08a5a41..d98948e 100644
--- a/src/components/sections/product-matrix-section.tsx
+++ b/src/components/sections/product-matrix-section.tsx
@@ -25,12 +25,12 @@ export function ProductMatrixSection() {
               产品矩阵
             </h2>
             <p className="text-base text-[var(--color-text-muted)] max-w-lg">
-              6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand-primary)] font-medium">研发中</span>，欢迎提前了解规划
+              6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand)] font-medium">研发中</span>，欢迎提前了解规划
             </p>
           </div>
           <div className="flex items-center gap-2">
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)] animate-pulse" />
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs font-medium border border-[var(--color-brand)]/10">
+              <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)] animate-pulse" />
               研发中 · 即将上线
             </span>
             <span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
diff --git a/src/components/sections/question-card.tsx b/src/components/sections/question-card.tsx
new file mode 100644
index 0000000..9bf85cc
--- /dev/null
+++ b/src/components/sections/question-card.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { StaticLink } from '@/components/ui/static-link';
+import { ChevronRight } from 'lucide-react';
+
+interface QuestionCardProps {
+  /** The strategic question */
+  question: string;
+  /** The answer/description */
+  description: string;
+  /** Link href */
+  href: string;
+  /** Link text (default "了解详情") */
+  linkText?: string;
+  className?: string;
+}
+
+export function QuestionCard({
+  question,
+  description,
+  href,
+  linkText = '了解详情',
+  className = '',
+}: QuestionCardProps) {
+  return (
+    <div
+      className={`group md:grid md:grid-cols-2 border-b border-[var(--color-border-primary)] relative overflow-hidden ${className}`}
+    >
+      {/* Left accent bar — visible on hover */}
+      <div className="absolute left-0 top-0 bottom-0 w-[3px] hidden md:block transition-transform duration-500 origin-top bg-[var(--color-brand)]"
+        style={{ transform: 'scaleY(0)' }}
+        onMouseEnter={(e) => { e.currentTarget.style.transform = 'scaleY(1)'; }}
+      />
+
+      {/* Question — left column */}
+      <div className="py-6 md:py-12 lg:py-16 md:pr-12 lg:pr-16 flex flex-col justify-center">
+        <h3 className="font-sans text-[18px] sm:text-[20px] md:text-[clamp(20px,3vw,28px)] font-bold leading-[1.35] tracking-[-0.3px] md:tracking-[-0.5px] text-[var(--color-text-primary)]">
+          {question}
+        </h3>
+      </div>
+
+      {/* Answer — right column */}
+      <div className="pb-6 md:py-12 lg:py-16 md:pl-12 lg:pl-16 md:border-l border-[var(--color-border-primary)] flex flex-col justify-center">
+        <p className="text-[14px] sm:text-[15px] leading-relaxed mb-5 md:mb-7 text-[var(--color-text-muted)]">
+          {description}
+        </p>
+        <StaticLink
+          href={href}
+          className="inline-flex items-center gap-2 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-300 hover:text-[var(--color-brand)] group/link"
+          style={{ minHeight: '44px', minWidth: '44px' }}
+        >
+          {linkText}
+          <ChevronRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover/link:translate-x-1" />
+        </StaticLink>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sections/section-header.tsx b/src/components/sections/section-header.tsx
new file mode 100644
index 0000000..4f3d826
--- /dev/null
+++ b/src/components/sections/section-header.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+
+interface SectionHeaderProps {
+  /** English label shown above title (e.g. "What We Do") */
+  label: string;
+  /** Main title text */
+  title: string;
+  /** Optional highlighted part of the title (rendered in brand red) */
+  highlight?: string;
+  /** Optional description below the title */
+  desc?: string;
+  /** Whether this header is on a dark background */
+  light?: boolean;
+  className?: string;
+}
+
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+export function SectionHeader({
+  label,
+  title,
+  highlight,
+  desc,
+  light = false,
+  className = '',
+}: SectionHeaderProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      className={`mb-12 md:mb-16 lg:mb-20 ${className}`}
+      initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-40px' }}
+      transition={{ duration: 0.6, ease: EASE }}
+    >
+      {/* Eyebrow label with brand accent bar */}
+      <div className="flex items-center gap-3 mb-4 md:mb-5">
+        {/* Brand accent bar — grows from bottom on entry */}
+        <motion.div
+          className="w-1 rounded-full origin-bottom"
+          style={{
+            height: '1rem',
+            backgroundColor: light
+              ? 'rgba(255,255,255,0.5)'
+              : 'var(--color-brand)',
+          }}
+          initial={shouldReduceMotion ? {} : { scaleY: 0 }}
+          whileInView={{ scaleY: 1 }}
+          viewport={{ once: true, margin: '-40px' }}
+          transition={{ duration: 0.4, delay: 0.1, ease: EASE }}
+        />
+        <motion.div
+          className="text-[10px] tracking-[4px] uppercase font-medium"
+          style={{
+            color: light
+              ? 'rgba(255,255,255,0.5)'
+              : 'var(--color-brand)',
+          }}
+          initial={shouldReduceMotion ? {} : { opacity: 0, x: -8 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, margin: '-40px' }}
+          transition={{ duration: 0.4, delay: 0.2, ease: EASE }}
+        >
+          {label}
+        </motion.div>
+      </div>
+
+      {/* Title */}
+      <h2
+        className="font-sans text-[clamp(28px,6vw,52px)] font-bold leading-[1.1] tracking-[-1px] mb-4 md:mb-5"
+        style={{ color: light ? '#FFFFFF' : 'var(--color-text-primary)' }}
+      >
+        {title}
+        {highlight && (
+          <span style={{ color: 'var(--color-brand)' }}>
+            {highlight}
+          </span>
+        )}
+      </h2>
+
+      {/* Description */}
+      {desc && (
+        <p
+          className="text-[15px] leading-relaxed max-w-[480px]"
+          style={{
+            color: light
+              ? 'rgba(255,255,255,0.5)'
+              : 'var(--color-text-muted)',
+          }}
+        >
+          {desc}
+        </p>
+      )}
+    </motion.div>
+  );
+}
diff --git a/src/components/sections/service-card.tsx b/src/components/sections/service-card.tsx
new file mode 100644
index 0000000..02e6b11
--- /dev/null
+++ b/src/components/sections/service-card.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/hooks/use-reduced-motion';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+
+export type ServiceColor = 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+
+interface ServiceCardProps {
+  number: string;
+  title: string;
+  description: string;
+  color?: ServiceColor;
+  href: string;
+  className?: string;
+  delay?: number;
+}
+
+const colorMap: Record<ServiceColor, string> = {
+  brand: 'var(--color-brand)',
+  blue: 'var(--color-accent-blue)',
+  teal: 'var(--color-accent-teal)',
+  amber: 'var(--color-accent-amber)',
+  purple: 'var(--color-accent-purple)',
+};
+
+export function ServiceCard({
+  number,
+  title,
+  description,
+  color = 'brand',
+  href,
+  className = '',
+  delay = 0,
+}: ServiceCardProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const accentColor = colorMap[color];
+
+  return (
+    <motion.div
+      className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/30 ${className}`}
+      initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-40px' }}
+      transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {/* Left accent bar — grows from bottom on entry */}
+      <motion.div
+        className="absolute left-0 top-0 bottom-0 w-[3px] origin-bottom transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
+        style={{ backgroundColor: accentColor }}
+        initial={shouldReduceMotion ? {} : { scaleY: 0 }}
+        whileInView={{ scaleY: 1 }}
+        viewport={{ once: true, margin: '-40px' }}
+        transition={{ duration: 0.4, delay: delay - 0.1 > 0 ? delay - 0.1 : 0, ease: [0.22, 1, 0.36, 1] }}
+      />
+
+      <div className="p-6 md:p-8 pl-6 md:pl-8">
+        {/* Large background number */}
+        <div
+          className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
+          style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
+          aria-hidden="true"
+        >
+          {number}
+        </div>
+
+        {/* Number label */}
+        <div
+          className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
+          style={{ color: accentColor }}
+        >
+          Service {number}
+        </div>
+
+        {/* Title */}
+        <h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight text-[var(--color-text-primary)]">
+          {title}
+        </h3>
+
+        {/* Description */}
+        <p className="text-sm md:text-base leading-relaxed mb-6 text-[var(--color-text-secondary)]">
+          {description}
+        </p>
+
+        {/* Link */}
+        <Link
+          href={href}
+          className="inline-flex items-center text-sm font-medium transition-all duration-[var(--transition-fast)] group-hover:gap-2.5 text-[var(--color-brand)]"
+          style={{ minHeight: '44px', minWidth: '44px' }}
+        >
+          <span>了解详情</span>
+          <ArrowRight className="w-4 h-4 transform transition-transform duration-[var(--transition-fast)] group-hover:translate-x-1" />
+        </Link>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/sections/service-grid.tsx b/src/components/sections/service-grid.tsx
new file mode 100644
index 0000000..3758704
--- /dev/null
+++ b/src/components/sections/service-grid.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { ServiceCard, type ServiceColor } from './service-card';
+import { SectionHeader } from './section-header';
+
+interface ServiceItem {
+  number: string;
+  title: string;
+  description: string;
+  color?: ServiceColor;
+  href: string;
+}
+
+interface ServiceGridProps {
+  label?: string;
+  title: string;
+  highlight?: string;
+  desc?: string;
+  items: ServiceItem[];
+  className?: string;
+  columns?: 2 | 3 | 4;
+}
+
+export function ServiceGrid({
+  label = '我们的服务',
+  title,
+  highlight,
+  desc,
+  items,
+  className = '',
+  columns = 3,
+}: ServiceGridProps) {
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  };
+
+  return (
+    <section className={`section-padding ${className}`}>
+      <div className="container-x">
+        <SectionHeader label={label} title={title} highlight={highlight} desc={desc} />
+
+        <div className={`grid grid-cols-1 ${gridCols[columns]} gap-6 md:gap-8`}>
+          {items.map((item, index) => (
+            <ServiceCard
+              key={item.number}
+              number={item.number}
+              title={item.title}
+              description={item.description}
+              color={item.color}
+              href={item.href}
+              delay={index * 0.1}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/sections/social-proof-section.tsx b/src/components/sections/social-proof-section.tsx
index d22060d..c83d372 100644
--- a/src/components/sections/social-proof-section.tsx
+++ b/src/components/sections/social-proof-section.tsx
@@ -13,7 +13,7 @@ const METRICS = [
 
 const TESTIMONIALS = [
   {
-    quote: 'Novalon 团队不仅技术扎实，更重要的是真正理解我们的业务痛点，方案落地性很强。',
+    quote: '睿新致远团队不仅技术扎实，更重要的是真正理解我们的业务痛点，方案落地性很强。',
     author: '某金融机构 数字化负责人',
     role: '数字化转型项目',
   },
@@ -31,7 +31,7 @@ export function SocialProofSection() {
     <section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-16 md:py-24 lg:py-28 relative overflow-hidden">
       {/* Background accent */}
       <div className="absolute inset-0 bg-[var(--color-bg-primary)]" aria-hidden="true" />
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-primary)]/10 to-transparent" aria-hidden="true" />
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand)]/10 to-transparent" aria-hidden="true" />
       <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" aria-hidden="true" />
 
       <div className="container-wide relative z-10">
@@ -70,8 +70,8 @@ export function SocialProofSection() {
                 transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
                 className="text-center group"
               >
-                <div className="w-12 h-12 rounded-full bg-[var(--color-brand-primary)]/5 flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-brand-primary)]/10 transition-colors duration-300">
-                  <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.5} />
+                <div className="w-12 h-12 rounded-full bg-[var(--color-brand)]/5 flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-brand)]/10 transition-colors duration-300">
+                  <Icon className="w-5 h-5 text-[var(--color-brand)]" strokeWidth={1.5} />
                 </div>
                 <div className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] tracking-tight mb-1">
                   {metric.value}
@@ -96,15 +96,15 @@ export function SocialProofSection() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: '-60px' }}
               transition={{ duration: 0.5, delay: 0.2 + idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
-              className="relative p-6 md:p-8 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] transition-all duration-300"
+              className="relative p-6 md:p-8 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-rgb),0.2)] transition-all duration-300"
             >
-              <Quote className="w-8 h-8 text-[var(--color-brand-primary)]/15 mb-4" strokeWidth={1.5} />
+              <Quote className="w-8 h-8 text-[var(--color-brand)]/15 mb-4" strokeWidth={1.5} />
               <blockquote className="text-[var(--color-text-secondary)] text-base leading-relaxed mb-6">
                 &ldquo;{t.quote}&rdquo;
               </blockquote>
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-brand-primary)]/10 to-[var(--color-brand-primary)]/5 flex items-center justify-center">
-                  <span className="text-sm font-semibold text-[var(--color-brand-primary)]">{t.author[0]}</span>
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-brand)]/10 to-[var(--color-brand)]/5 flex items-center justify-center">
+                  <span className="text-sm font-semibold text-[var(--color-brand)]">{t.author[0]}</span>
                 </div>
                 <div>
                   <div className="text-sm font-medium text-[var(--color-text-primary)]">{t.author}</div>
diff --git a/src/components/sections/stats-bar.tsx b/src/components/sections/stats-bar.tsx
new file mode 100644
index 0000000..df0e0f3
--- /dev/null
+++ b/src/components/sections/stats-bar.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface StatItem {
+  number: string;
+  unit: string;
+  label: string;
+  desc?: string;
+}
+
+interface StatsBarProps {
+  items: StatItem[];
+  /** Whether to show on dark background */
+  dark?: boolean;
+  className?: string;
+}
+
+function CountUpNumber({ end, startCounting }: { end: number; startCounting: boolean }) {
+  const [count, setCount] = useState(0);
+  const frameRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!startCounting) return;
+    const duration = 1800;
+    const startTime = performance.now();
+    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+    const animate = (now: number) => {
+      const progress = Math.min((now - startTime) / duration, 1);
+      const eased = easeOutCubic(progress);
+      setCount(Math.floor(end * eased));
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(animate);
+      } else {
+        setCount(end);
+      }
+    };
+    frameRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frameRef.current);
+  }, [end, startCounting]);
+
+  return <>{count}</>;
+}
+
+export function StatsBar({ items, dark = false, className = '' }: StatsBarProps) {
+  const [inView, setInView] = useState(false);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = sectionRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={sectionRef}
+      className={`grid grid-cols-2 md:grid-cols-3 lg:grid-cols-${items.length} gap-px rounded-sm overflow-hidden ${className}`}
+      style={{
+        background: dark ? 'rgba(255,255,255,0.04)' : 'var(--color-border-primary)',
+      }}
+    >
+      {items.map((item, i) => (
+        <div
+          key={i}
+          className="py-10 sm:py-12 md:py-14 px-4 sm:px-6 md:px-8 text-center transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:bg-[var(--color-bg-hover)] group"
+          style={{ background: dark ? 'var(--color-brand)' : 'var(--color-bg-primary)' }}
+        >
+          <div
+            className="font-sans tabular-nums text-[clamp(36px,8vw,64px)] font-bold leading-none mb-1 md:mb-2 tracking-[-0.02em] transition-all duration-[var(--transition-slow)] ease-[var(--ease-ink)] group-hover:scale-105"
+            style={{
+              color: dark ? '#FFFFFF' : 'var(--color-text-primary)',
+              transform: inView ? 'scale(1)' : 'scale(0.9)',
+              opacity: inView ? 1 : 0,
+              transitionDelay: `${i * 80}ms`,
+            }}
+          >
+            {inView ? (
+              <CountUpNumber end={parseInt(item.number)} startCounting={true} />
+            ) : (
+              item.number
+            )}
+            <span
+              style={{
+                color: dark ? 'rgba(255,255,255,0.6)' : 'var(--color-brand)',
+                fontSize: '0.4em',
+                fontWeight: 700,
+              }}
+            >
+              {item.unit}
+            </span>
+          </div>
+          <div
+            className="text-[12px] sm:text-[13px] font-medium mb-3 md:mb-4 tracking-[0.08em] uppercase transition-all duration-[var(--transition-normal)]"
+            style={{
+              color: dark ? 'rgba(255,255,255,0.5)' : 'var(--color-text-muted)',
+              opacity: inView ? 1 : 0,
+              transform: inView ? 'translateY(0)' : 'translateY(8px)',
+              transitionDelay: `${i * 80 + 150}ms`,
+            }}
+          >
+            {item.label}
+          </div>
+          {item.desc && (
+            <div
+              className="text-[12px] sm:text-[13px] leading-relaxed transition-all duration-[var(--transition-normal)]"
+              style={{
+                color: dark ? 'rgba(255,255,255,0.35)' : 'var(--color-text-subtle)',
+                opacity: inView ? 1 : 0,
+                transform: inView ? 'translateY(0)' : 'translateY(6px)',
+                transitionDelay: `${i * 80 + 250}ms`,
+              }}
+            >
+              {item.desc}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/sections/why-us-section.tsx b/src/components/sections/why-us-section.tsx
index 4c334ee..a4c1310 100644
--- a/src/components/sections/why-us-section.tsx
+++ b/src/components/sections/why-us-section.tsx
@@ -51,8 +51,8 @@ export function WhyUsSection() {
     <section id="why-us" className="relative py-20 md:py-28 bg-[var(--color-bg-section)] bg-texture-dots overflow-hidden">
       {/* Decorative large numbers background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
-        <span className="absolute -top-24 -left-12 text-[20rem] font-bold text-[var(--color-brand-primary)]/[0.02] leading-none select-none font-calligraphy">睿</span>
-        <span className="absolute -bottom-32 -right-8 text-[16rem] font-bold text-[var(--color-primary)]/[0.02] leading-none select-none">新</span>
+        <span className="absolute -top-24 -left-12 text-[20rem] font-bold text-[var(--color-brand)]/[0.02] leading-none select-none font-calligraphy">睿</span>
+        <span className="absolute -bottom-32 -right-8 text-[16rem] font-bold text-[var(--color-brand)]/[0.02] leading-none select-none">新</span>
       </div>
       <div className="container-wide relative z-10">
         <motion.div
@@ -62,12 +62,12 @@ export function WhyUsSection() {
           transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
           className="mb-14"
         >
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
-            <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
-            <span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">核心优势</span>
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-bg)] border border-[var(--color-brand)]/10 mb-4">
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
+            <span className="text-xs font-medium tracking-wider text-[var(--color-brand)]">核心优势</span>
           </div>
           <h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
-            为什么选择<span className="text-[var(--color-brand-primary)] font-calligraphy">我们</span>
+            为什么选择<span className="text-[var(--color-brand)] font-calligraphy">我们</span>
           </h2>
           <p className="text-base text-[var(--color-text-muted)]">
             我们不是一家&ldquo;做完就跑&rdquo;的外包公司，而是愿意与您一起成长的数字化转型同行者
@@ -84,27 +84,27 @@ export function WhyUsSection() {
                 whileInView={{ opacity: 1, y: 0, scale: 1 }}
                 viewport={{ once: true, margin: '-60px' }}
                 transition={{ duration: 0.5, delay: idx * 0.08, ease: [0.16, 1, 0.3, 1] }}
-                className="relative group p-6 md:p-8 rounded-2xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.25)] transition-all duration-300"
+                className="relative group p-6 md:p-8 rounded-2xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-rgb),0.25)] transition-all duration-300"
               >
                 <div className="flex items-start justify-between mb-4">
                   <div
                     className="w-11 h-11 rounded-xl flex items-center justify-center"
                     style={{
-                      backgroundColor: idx === 0 ? 'var(--color-brand-primary-bg)' :
+                      backgroundColor: idx === 0 ? 'var(--color-brand-bg)' :
                                          idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.08)' :
                                          idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.08)' :
                                          idx === 3 ? 'rgba(var(--color-accent-cyan-rgb), 0.08)' :
-                                         'var(--color-brand-primary-bg)',
+                                         'var(--color-brand-bg)',
                     }}
                   >
                     <Icon
                       className="w-5 h-5"
                       style={{
-                        color: idx === 0 ? 'var(--color-brand-primary)' :
+                        color: idx === 0 ? 'var(--color-brand)' :
                                idx === 1 ? 'var(--color-accent-blue)' :
                                idx === 2 ? 'var(--color-accent-purple)' :
                                idx === 3 ? 'var(--color-accent-cyan)' :
-                               'var(--color-brand-primary)',
+                               'var(--color-brand)',
                       }}
                       strokeWidth={1.8}
                     />
@@ -113,11 +113,11 @@ export function WhyUsSection() {
                     <div
                       className="text-2xl font-bold leading-none"
                       style={{
-                        color: idx === 0 ? 'var(--color-brand-primary)' :
+                        color: idx === 0 ? 'var(--color-brand)' :
                                idx === 1 ? 'var(--color-accent-blue)' :
                                idx === 2 ? 'var(--color-accent-purple)' :
                                idx === 3 ? 'var(--color-accent-cyan)' :
-                               'var(--color-brand-primary)',
+                               'var(--color-brand)',
                       }}
                     >{pillar.stat}</div>
                     <div className="text-[10px] text-[var(--color-text-subtle)] mt-0.5">{pillar.statLabel}</div>
@@ -169,8 +169,8 @@ export function WhyUsSection() {
                 key={tech.name}
                 className="group flex flex-col items-center gap-1.5"
               >
-                <div className="px-4 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] group-hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] group-hover:bg-[var(--color-brand-primary-bg)]/30 transition-all duration-300">
-                  <span className="text-sm font-mono font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand-primary)] transition-colors duration-300 tracking-wider">
+                <div className="px-4 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] group-hover:border-[rgba(var(--color-brand-rgb),0.2)] group-hover:bg-[var(--color-brand-bg)]/30 transition-all duration-300">
+                  <span className="text-sm font-mono font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand)] transition-colors duration-300 tracking-wider">
                     {tech.abbr}
                   </span>
                 </div>