chore: sync marketing pages, CMS extensions, tests and project docs

同步工作区剩余变更，主要包括：
- 营销页面组件与布局持续优化（about/news/services/solutions/team 等）
- 详情页四层叙事组件、布局组件、UI 组件调整
- CMS 数据模型、API 路由、权限、工作流、站内通知、媒体管理扩展
- 新增/补充单元测试与 E2E 测试（cms-workflow.spec.ts 等）
- ESLint 9 迁移、jest/tsconfig 配置更新、依赖调整
- 新增 ADR、CMS 评估文档、Release Review / Acceptance 报告
- 移除水墨装饰组件与大体积未使用字体文件

src/components/admin/admin-layout.tsx

@@ -21,6 +21,7 @@ import {
   Users,
   Phone,
   Shield,
+  UserCog,
 } from 'lucide-react';
 
 const menuItems = [
@@ -61,6 +62,13 @@ const menuItems = [
       { label: '媒体库', href: '/admin/media', icon: Image },
     ],
   },
+  {
+    label: '系统管理',
+    icon: Shield,
+    children: [
+      { label: '角色权限', href: '/admin/roles', icon: UserCog },
+    ],
+  },
 ];
 
 export function AdminLayout({ children }: { children: React.ReactNode }) {

src/components/content/sections.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { MethodologyFramework } from './sections';
+
+describe('MethodologyFramework', () => {
+  const layers = [
+    {
+      title: '诊断',
+      description: '业务现状诊断',
+      items: ['访谈', '数据分析'],
+    },
+    {
+      title: '设计',
+      description: '解决方案设计',
+      items: ['架构设计'],
+    },
+  ];
+
+  it('renders title and subtitle', () => {
+    render(<MethodologyFramework title="方法论" subtitle="分层推进" layers={layers} />);
+    expect(screen.getByText('方法论')).toBeInTheDocument();
+    expect(screen.getByText('分层推进')).toBeInTheDocument();
+  });
+
+  it('renders all layers and items', () => {
+    render(<MethodologyFramework title="方法论" layers={layers} />);
+    expect(screen.getByText('诊断')).toBeInTheDocument();
+    expect(screen.getByText('设计')).toBeInTheDocument();
+    expect(screen.getByText('业务现状诊断')).toBeInTheDocument();
+    expect(screen.getByText('数据分析')).toBeInTheDocument();
+  });
+
+  it('renders without subtitle', () => {
+    const { container } = render(<MethodologyFramework title="方法论" layers={layers} />);
+    expect(container.querySelector('h2')).toHaveTextContent('方法论');
+  });
+});
+
+

src/components/content/sections.tsx

@@ -327,6 +327,8 @@ export interface DataProofSectionProps {
 }
 
 export function DataProofSection({ title, subtitle, metrics }: DataProofSectionProps) {
+  if (!metrics || metrics.length === 0) return null;
+
   return (
     <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">

src/components/content/testimonials.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from '@jest/globals';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TestimonialSection, LogoWall } from './testimonials';
+
+describe('TestimonialSection', () => {
+  const testimonials = [
+    {
+      quote: '服务非常专业',
+      author: '张三',
+      title: 'CEO',
+      company: 'A 公司',
+      industry: '科技',
+    },
+    {
+      quote: '交付准时',
+      author: '李四',
+      title: 'CTO',
+      company: 'B 公司',
+      industry: '制造',
+    },
+  ];
+
+  it('renders title and subtitle', () => {
+    render(<TestimonialSection title="客户评价" subtitle="来自客户的真实反馈" testimonials={testimonials} />);
+    expect(screen.getByText('客户评价')).toBeInTheDocument();
+    expect(screen.getByText('来自客户的真实反馈')).toBeInTheDocument();
+  });
+
+  it('renders first testimonial by default', () => {
+    render(<TestimonialSection title="客户评价" testimonials={testimonials} />);
+    expect(screen.getByText('张三')).toBeInTheDocument();
+    expect(screen.getByText('科技')).toBeInTheDocument();
+  });
+
+  it('switches testimonial on dot click', () => {
+    render(<TestimonialSection title="客户评价" testimonials={testimonials} />);
+    const dots = screen.getAllByRole('button');
+    fireEvent.click(dots[1]!);
+    expect(screen.getByText('李四')).toBeInTheDocument();
+    expect(screen.getByText('制造')).toBeInTheDocument();
+  });
+
+  it('renders without subtitle', () => {
+    const { container } = render(<TestimonialSection title="客户评价" testimonials={testimonials} />);
+    expect(container.querySelector('h2')).toHaveTextContent('客户评价');
+  });
+});
+
+describe('LogoWall (testimonials)', () => {
+  it('renders logo wall', () => {
+    render(<LogoWall title="合作企业" logos={[{ name: 'A 公司' }, { name: 'B 公司', industry: '制造' }]} />);
+    expect(screen.getByText('合作企业')).toBeInTheDocument();
+    expect(screen.getByText('A 公司')).toBeInTheDocument();
+  });
+});

src/components/detail/brand-elements.tsx

@@ -101,49 +101,6 @@ export function CalligraphyText({
   );
 }
 
-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;

src/components/detail/detail-cross-recommend.tsx

@@ -34,25 +34,28 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
   if (items.length === 0) return null;
 
   return (
-    <section className="bg-white py-16 lg:py-20">
-      <div className="container-wide">
-        <motion.h2
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
+    <section className="bg-bg-secondary py-16 sm:py-20 md:py-28">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
-          className="mb-2 text-center text-2xl font-bold text-ink"
+          transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+          className="mb-12"
         >
-          {title}
-        </motion.h2>
-        <motion.p
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ delay: 0.1 }}
-          className="mx-auto mb-8 max-w-2xl text-center text-sm text-text-muted"
-        >
-          探索更多可能，发现与您需求相关的产品、方案和服务
-        </motion.p>
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-px bg-brand" />
+            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+              {title}
+            </span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-ink tracking-tight leading-[0.95]">
+            探索更多可能
+          </h2>
+          <p className="text-text-secondary mt-3">
+            发现与您需求相关的产品、方案和服务
+          </p>
+        </motion.div>
 
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {items.map((item, index) => {
@@ -67,10 +70,10 @@ 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-border-primary bg-bg-secondary/50 p-5 transition-all hover:border-border-secondary hover:bg-white hover:shadow-md"
+                className="bain-card flex items-start gap-4 p-5 group"
               >
                 <div
-                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
+                  className="flex h-10 w-10 shrink-0 items-center justify-center"
                   style={{ backgroundColor: config.bg, color: config.color }}
                 >
                   <Icon className="h-5 w-5" />
@@ -100,4 +103,4 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
       </div>
     </section>
   );
-}
+}

src/components/detail/detail-cta-section.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowRight, MessageCircle, Download } from 'lucide-react';
+import { ArrowRight, MessageCircle } from 'lucide-react';
 import type { HeroTheme } from '@/lib/constants/hero-themes';
-import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
 
 interface DetailCTASectionProps {
   theme: HeroTheme;
@@ -21,48 +20,54 @@ export function DetailCTASection({
   secondaryAction,
 }: DetailCTASectionProps) {
   return (
-    <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" />
+    <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-brand-section">
+      {/* 背景纹理 */}
+      <div className="absolute inset-0 pointer-events-none opacity-[0.04]"
+        style={{
+          backgroundImage: `radial-gradient(circle at 25% 25%, rgba(255,255,255,0.3) 1px, transparent 1px)`,
+          backgroundSize: '48px 48px',
+        }}
+      />
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-1/3 right-1/4 w-[500px] h-[500px] bg-white/[0.03] rounded-full blur-[140px]" />
+      </div>
 
-      <div className="container-wide relative">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
         <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"
+          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+          className="max-w-3xl"
         >
-          <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">
+          {/* 标签 */}
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-8 border border-white/20">
             <MessageCircle className="w-4 h-4" />
             免费咨询
           </div>
 
-          <h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-ink mb-6`}>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-white tracking-tight leading-[0.95] mb-10">
             {title}
           </h2>
-          
-          <p className="text-lg md:text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
+
+          <p className="text-lg md:text-xl text-white/70 max-w-2xl leading-relaxed mb-12">
             {description}
           </p>
 
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
-            <motion.a
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-5">
+            <a
               href={primaryAction.href}
-              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"
+              className="group inline-flex items-center gap-3 px-10 py-4 bg-white text-brand font-bold text-base hover:bg-white/90 transition-all duration-200"
             >
               <span>{primaryAction.label}</span>
-              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-            </motion.a>
+              <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
+            </a>
 
             {secondaryAction && (
               <a
                 href={secondaryAction.href}
-                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"
+                className="group inline-flex items-center gap-2.5 px-8 py-4 text-white/80 font-semibold text-sm border border-white/30 hover:border-white/60 hover:text-white hover:bg-white/10 transition-all duration-200"
               >
-                <Download className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-0.5" />
                 {secondaryAction.label}
               </a>
             )}
@@ -73,7 +78,7 @@ export function DetailCTASection({
             whileInView={{ opacity: 1 }}
             viewport={{ once: true }}
             transition={{ delay: 0.5, duration: 0.6 }}
-            className="mt-10 text-sm text-text-muted"
+            className="mt-10 text-sm text-white/50"
           >
             平均响应时间 &lt; 2小时 · 7×24小时技术支持 · 无需预付费用
           </motion.p>
@@ -81,4 +86,4 @@ export function DetailCTASection({
       </div>
     </section>
   );
-}
+}

src/components/detail/detail-hero.tsx

@@ -13,6 +13,8 @@ interface DetailHeroProps {
   description?: string;
   primaryAction?: { label: string; href: string };
   secondaryAction?: { label: string; href: string };
+  /** Bain 式变体：'light' | 'brand'（深红背景） */
+  variant?: 'light' | 'brand';
 }
 
 export function DetailHero({
@@ -23,11 +25,26 @@ export function DetailHero({
   description,
   primaryAction,
   secondaryAction,
+  variant = 'light',
 }: DetailHeroProps) {
   const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide';
+  const isBrand = variant === 'brand';
+
+  const bgClass = isBrand
+    ? 'bg-brand-section text-white'
+    : 'bg-white text-ink';
 
   return (
-    <section className="relative min-h-[700px] flex items-center overflow-hidden bg-white">
+    <section className={`relative min-h-[700px] flex items-center overflow-hidden ${bgClass}`}>
+      {/* 品牌色背景纹理 */}
+      {isBrand && (
+        <div className="absolute inset-0 pointer-events-none opacity-[0.04]"
+          style={{
+            backgroundImage: `radial-gradient(circle at 25% 25%, rgba(255,255,255,0.3) 1px, transparent 1px)`,
+            backgroundSize: '48px 48px',
+          }}
+        />
+      )}
       <div className={`container-wide relative z-10 ${theme.layout === 'wide' ? 'py-36 lg:py-44' : 'py-32 lg:py-40'}`}>
         <motion.div
           initial="hidden"

src/components/detail/detail-product-value.tsx

@@ -15,7 +15,6 @@ import {
   Users,
   type LucideIcon,
 } from 'lucide-react';
-import { TiltCard, InkGlowCard } from './micro-interactions';
 import type { Product } from '@/lib/constants/products';
 
 interface ProductValueSectionProps {
@@ -36,76 +35,24 @@ function FeatureTags({ text }: { text: string }) {
     <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
+        {tags.map((tag) => (
+          <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"
+            className="px-3 py-1.5 bg-bg-secondary text-text-secondary text-xs font-medium border border-border-primary"
           >
             {tag}
-          </motion.span>
+          </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;
@@ -143,208 +90,132 @@ function MetricCard({
   }
 
   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="bain-card p-8">
       <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'
-          }`}
-        >
+        <div className={`w-12 h-12 flex items-center justify-center mb-5 ${
+          accent
+            ? 'bg-brand 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">
+        <div ref={ref} className="text-3xl sm:text-4xl font-black text-brand tabular-nums leading-none mb-1">
           {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>
+        <h3 className="text-sm font-semibold text-ink mb-1.5">{metric}</h3>
+        <p className="text-sm text-text-secondary leading-relaxed">{description}</p>
       </div>
-    </TiltCard>
+    </div>
   );
 }
 
 export function ProductValueSection({ product }: ProductValueSectionProps) {
   return (
-    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
-      <div className="container-wide relative">
+    <section className="relative bg-white py-20 sm:py-28 md:py-36 overflow-hidden">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 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"
+          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+          className="mb-16 sm:mb-20"
         >
-          <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 }}
-              />
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-px bg-brand" />
+            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+              产品功能
             </span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95] max-w-3xl">
+            {product.title}
+            <span className="text-brand"> 核心能力</span>
           </h2>
-
-          <p className="text-lg md:text-xl text-text-secondary max-w-2xl mx-auto leading-relaxed">
+          <p className="text-lg text-text-secondary max-w-2xl mt-6 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 className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-16">
+          {product.features.map((feature, index) => {
+            const Icon = featureIcons[index % featureIcons.length]!;
+            return (
+              <motion.div
+                key={feature}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.5,
+                  delay: index * 0.06,
+                  ease: [0.22, 1, 0.36, 1],
+                }}
+                className="bain-card p-6"
+              >
+                <div className="flex items-start gap-4">
+                  <div className={`shrink-0 w-11 h-11 flex items-center justify-center ${
+                    index === 0
+                      ? 'bg-brand text-white'
+                      : 'bg-bg-secondary text-text-secondary'
+                  }`}>
+                    <Icon className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0 pt-1">
+                    <FeatureTags text={feature} />
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+
+        {/* 核心优势 + 技术规格：不对称布局 */}
+        <div className="asymmetric-wide-narrow">
+          {/* 核心优势 */}
+          <div>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-px bg-brand" />
+              <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                核心优势
+              </span>
             </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              {product.features.map((feature, index) => {
-                const Icon = featureIcons[index % featureIcons.length]!;
-
-                return (
-                  <InkGlowCard
-                    key={feature}
-                    active={index === 0}
-                    className="group p-6 hover:border-brand/20"
-                  >
-                    <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>
-                );
-              })}
-            </div>
-          </motion.div>
-
-          <motion.div
-            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"
-          >
-            <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={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,
-                      },
-                    },
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{
+                    duration: 0.4,
+                    delay: index * 0.06,
+                    ease: [0.22, 1, 0.36, 1],
                   }}
-                  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"
+                  className="bain-card p-5 flex items-start gap-3"
                 >
-                  <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>
+                  <CheckCircle2 className="w-5 h-5 text-brand mt-0.5 shrink-0" />
+                  <p className="text-sm font-medium text-text-secondary leading-relaxed">{benefit}</p>
                 </motion.div>
               ))}
             </div>
+          </div>
 
-            <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" />
+          {/* 技术规格 */}
+          <div>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-px bg-brand" />
+              <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
                 技术规格
-              </h4>
-              <ul className="space-y-3.5">
+              </span>
+            </div>
+            <div className="bain-card p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <Shield className="w-5 h-5 text-brand" />
+                <h4 className="font-bold text-ink text-sm">技术保障</h4>
+              </div>
+              <ul className="space-y-3">
                 {product.specs.slice(0, 5).map((spec, index) => (
                   <motion.li
                     key={index}
@@ -352,21 +223,22 @@ export function ProductValueSection({ product }: ProductValueSectionProps) {
                     whileInView={{ opacity: 1, x: 0 }}
                     viewport={{ once: true }}
                     transition={{
-                      delay: 0.6 + index * 0.05,
+                      delay: 0.3 + index * 0.05,
                       duration: 0.35,
-                      ease: [0.22, 1, 0.36, 1] as const,
+                      ease: [0.22, 1, 0.36, 1],
                     }}
-                    className="flex items-start gap-3 text-sm text-text-secondary group/item"
+                    className="flex items-start gap-3 text-sm text-text-secondary"
                   >
-                    <ArrowRight className="w-4 h-4 text-brand mt-0.5 shrink-0 group-hover/item:translate-x-1 transition-transform" />
+                    <ArrowRight className="w-4 h-4 text-brand mt-0.5 shrink-0" />
                     <span>{spec}</span>
                   </motion.li>
                 ))}
               </ul>
-            </motion.div>
-          </motion.div>
+            </div>
+          </div>
         </div>
 
+        {/* 数据证明 */}
         {product.dataProofs && product.dataProofs.length > 0 && (
           <motion.div
             initial={{ opacity: 0, y: 32 }}
@@ -375,17 +247,22 @@ export function ProductValueSection({ product }: ProductValueSectionProps) {
             transition={{ duration: 0.75, delay: 0.2 }}
             className="mt-24"
           >
-            <div className="text-center mb-14">
-              <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
+            <div className="mb-12">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-px bg-brand" />
+                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                  效果数据
+                </span>
+              </div>
+              <h3 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95]">
                 用真实效果证明价值
               </h3>
             </div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7 max-w-5xl mx-auto">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl">
               {product.dataProofs.map((proof, index) => {
                 const icons: LucideIcon[] = [TrendingUp, Clock, Award, Users];
                 const Icon = icons[index % icons.length]!;
-
                 return (
                   <MetricCard
                     key={proof.metric}
@@ -399,21 +276,9 @@ export function ProductValueSection({ product }: ProductValueSectionProps) {
                 );
               })}
             </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>
   );
-}
+}

src/components/detail/detail-trust-section.tsx

@@ -5,7 +5,6 @@ import { useRef, useEffect, useState } from 'react';
 import { CaseStudyCard } from './detail-case-study';
 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[];
@@ -55,7 +54,7 @@ function AnimatedCounter({ value, duration = 2000 }: { value: string; duration?:
   }, [isInView, value, duration]);
 
   return (
-    <div ref={ref} className="text-4xl md:text-5xl font-bold text-ink">
+    <div ref={ref} className="text-3xl sm:text-4xl font-black text-brand tabular-nums leading-none">
       {displayValue}
     </div>
   );
@@ -71,29 +70,31 @@ export function DetailTrustSection({
   if (!hasContent) return null;
 
   return (
-    <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">
+    <section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-white">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
         {dataProofs.length > 0 && (
           <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"
+              transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+              className="mb-12"
             >
-              <h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
-                用真实效果证明价值
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-px bg-brand" />
+                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                  用真实效果证明价值
+                </span>
+              </div>
+              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95]">
+                来自真实客户的使用数据，
+                <br />
+                让效果可衡量、可验证
               </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">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl">
               {dataProofs.map((proof, index) => (
                 <motion.div
                   key={proof.metric}
@@ -101,22 +102,15 @@ export function DetailTrustSection({
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: '-60px' }}
                   transition={{
-                    ...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
-                    delay: index * DESIGN_SYSTEM.animation.delay.stagger,
+                    duration: 0.5,
+                    delay: index * 0.08,
+                    ease: [0.22, 1, 0.36, 1],
                   }}
-                  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'
-                  }`}
+                  className="bain-card p-8 sm:p-10"
                 >
                   <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>
+                  <p className="text-sm font-semibold text-ink mt-2 mb-1">{proof.metric}</p>
+                  <p className="text-sm text-text-secondary leading-relaxed">{proof.description}</p>
                 </motion.div>
               ))}
             </div>
@@ -129,10 +123,10 @@ export function DetailTrustSection({
               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"
+              transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+              className="mb-12"
             >
-              <h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
+              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95]">
                 他们已经实现了转型突破
               </h2>
             </motion.div>
@@ -145,8 +139,9 @@ export function DetailTrustSection({
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: '-60px' }}
                   transition={{
-                    ...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
-                    delay: index * DESIGN_SYSTEM.animation.delay.stagger,
+                    duration: 0.5,
+                    delay: index * 0.08,
+                    ease: [0.22, 1, 0.36, 1],
                   }}
                 >
                   <CaseStudyCard study={study} index={index} />
@@ -161,7 +156,7 @@ export function DetailTrustSection({
             initial={{ opacity: 0, y: 24 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-80px' }}
-            transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
+            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
             className="text-center"
           >
             <h3 className="text-lg font-semibold text-text-secondary mb-6">资质认证</h3>
@@ -171,4 +166,4 @@ export function DetailTrustSection({
       </div>
     </section>
   );
-}
+}

src/components/detail/detail.test.tsx

@@ -123,15 +123,6 @@ jest.mock('./micro-interactions', () => ({
       {children}
     </button>
   ),
-  InkGlowCard: ({ children, className, active }: any) => (
-    <div
-      data-testid="ink-glow-card"
-      data-active={active}
-      className={className}
-    >
-      {children}
-    </div>
-  ),
   HoverLink: ({ children, href, className }: any) => (
     <a data-testid="hover-link" href={href} className={className}>{children}</a>
   ),
@@ -225,7 +216,7 @@ jest.mock('@/lib/constants/design-system', () => ({
 
 const mockHeroTheme = {
   id: 'erp',
-  name: 'ERP 水墨雅致',
+  name: 'ERP',
   gradientFrom: '#f8f6f3',
   gradientTo: '#f0ebe4',
   gradientAngle: 135,
@@ -404,14 +395,15 @@ describe('ProductValueSection', () => {
   it('should render product title and overview', async () => {
     const { ProductValueSection } = await import('./detail-product-value');
     render(<ProductValueSection product={mockProduct} />);
-    expect(screen.getByRole('heading', { name: /为企业打造的/ })).toHaveTextContent(mockProduct.title);
+    const heading = screen.getByRole('heading', { name: new RegExp(mockProduct.title) });
+    expect(heading).toHaveTextContent('核心能力');
     expect(screen.getByText(mockProduct.overview)).toBeInTheDocument();
   });
 
   it('should render feature items', async () => {
     const { ProductValueSection } = await import('./detail-product-value');
     render(<ProductValueSection product={mockProduct} />);
-    expect(screen.getByText('功能模块')).toBeInTheDocument();
+    expect(screen.getByText('产品功能')).toBeInTheDocument();
     // Features are rendered via FeatureTags which splits on "："
     expect(screen.getByText('财务管理')).toBeInTheDocument();
   });
@@ -444,12 +436,6 @@ describe('ProductValueSection', () => {
     expect(screen.queryByText('用真实效果证明价值')).not.toBeInTheDocument();
   });
 
-  it('should render ink glow cards for features', async () => {
-    const { ProductValueSection } = await import('./detail-product-value');
-    render(<ProductValueSection product={mockProduct} />);
-    const glowCards = screen.getAllByTestId('ink-glow-card');
-    expect(glowCards.length).toBeGreaterThanOrEqual(mockProduct.features.length);
-  });
 });
 
 describe('DetailTrustSection', () => {

src/components/detail/index.ts

@@ -17,6 +17,6 @@ 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 { TiltCard, PressableButton, HoverLink } from './micro-interactions';
 
-export { BrandSeal, CalligraphyText, InkDivider, SectionHeader } from './brand-elements';
+export { BrandSeal, CalligraphyText, SectionHeader } from './brand-elements';

src/components/detail/micro-interactions.tsx

@@ -156,72 +156,6 @@ export function PressableButton({
   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;

src/components/detail/service-value.tsx

@@ -10,8 +10,6 @@ import {
   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 {
@@ -22,164 +20,146 @@ 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
-          title={`为什么选择我们的${service.title}？`}
-          subtitle={service.overview}
-        />
+    <section className="relative bg-white py-20 sm:py-28 md:py-36 overflow-hidden">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-120px' }}
+          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+          className="mb-16 sm:mb-20"
+        >
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-px bg-brand" />
+            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+              服务能力
+            </span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95] max-w-3xl">
+            为什么选择我们的{service.title}？
+          </h2>
+          <p className="text-lg text-text-secondary max-w-2xl mt-6 leading-relaxed">
+            {service.overview}
+          </p>
+        </motion.div>
 
-        <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 className="mb-16">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-px bg-brand" />
+            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+              核心能力
+            </span>
           </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
             {service.features.map((feature, index) => {
               const Icon = icons[index % icons.length]!;
-
               return (
-                <InkGlowCard
+                <motion.div
                   key={feature}
-                  active={index === 0}
-                  className="group p-6 hover:border-brand/20"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{
+                    delay: index * 0.06,
+                    duration: 0.5,
+                    ease: [0.22, 1, 0.36, 1],
+                  }}
+                  className="bain-card p-6"
                 >
-                  <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 className="flex items-start gap-4">
+                    <div className={`shrink-0 w-11 h-11 flex items-center justify-center ${
+                      index === 0
+                        ? 'bg-brand text-white'
+                        : 'bg-bg-secondary text-text-secondary'
+                    }`}>
+                      <Icon className="w-5 h-5" />
                     </div>
-                  </motion.div>
-                </InkGlowCard>
+                    <p className="text-sm font-medium text-text-secondary leading-relaxed pt-2">
+                      {feature.split('：')[1] || feature}
+                    </p>
+                  </div>
+                </motion.div>
               );
             })}
           </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 className="asymmetric-wide-narrow">
+          {/* 服务优势 */}
+          <div>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-px bg-brand" />
+              <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                服务优势
+              </span>
             </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" />
+            <div className="space-y-4">
+              {service.benefits.map((benefit, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{
+                    delay: index * 0.06,
+                    duration: 0.4,
+                    ease: [0.22, 1, 0.36, 1],
+                  }}
+                  className="bain-card p-5 flex items-start gap-3"
+                >
+                  <CheckCircle2 className="w-5 h-5 text-brand mt-0.5 shrink-0" />
                   <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>
+                </motion.div>
+              ))}
             </div>
+          </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 && service.process.length > 0 && (
+            <div>
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-px bg-brand" />
+                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                  服务流程
+                </span>
+              </div>
+              <div className="space-y-4">
                 {service.process.map((step, index) => (
                   <motion.div
                     key={step}
-                    initial={{ opacity: 0, x: -30 }}
+                    initial={{ opacity: 0, x: 20 }}
                     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,
+                      delay: index * 0.08,
+                      duration: 0.45,
+                      ease: [0.22, 1, 0.36, 1],
                     }}
-                    className="relative flex gap-6 group"
+                    className="bain-card p-5"
                   >
-                    <div className="relative z-10 shrink-0 w-16 flex justify-center">
-                      <div className="w-4 h-4 rounded-full bg-brand group-hover:scale-110 transition-transform duration-300" />
+                    <div className="flex items-start gap-3">
+                      <div className="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center shrink-0 mt-0.5">
+                        <span className="text-xs font-bold">{index + 1}</span>
+                      </div>
+                      <div>
+                        <h4 className="font-bold text-ink text-sm mb-1">
+                          {step.split('：')[0]}
+                        </h4>
+                        <p className="text-xs text-text-secondary leading-relaxed">
+                          {step.split('：')[1] || step}
+                        </p>
+                      </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>
       </div>
     </section>
   );
-}
+}

src/components/detail/solution-value.tsx

@@ -7,8 +7,6 @@ import {
   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 {
@@ -17,32 +15,45 @@ interface SolutionValueSectionProps {
 
 export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
   return (
-    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
-      <div className="container-wide relative">
-        <SectionHeader
-          title={
-            <>
-              为<span className="text-brand">{solution.industry}</span>量身定制
-            </>
-          }
-          subtitle={solution.description}
-        />
+    <section className="relative bg-white py-20 sm:py-28 md:py-36 overflow-hidden">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-120px' }}
+          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
+          className="mb-16 sm:mb-20"
+        >
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-px bg-brand" />
+            <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+              行业方案
+            </span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-ink tracking-tight leading-[0.95] max-w-3xl">
+            为<span className="text-brand">{solution.industry}</span>量身定制
+          </h2>
+          <p className="text-lg text-text-secondary max-w-2xl mt-6 leading-relaxed">
+            {solution.description}
+          </p>
+        </motion.div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
+        {/* 痛点 + 方案：不对称布局 */}
+        <div className="asymmetric-wide-narrow mb-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 }}
+            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
           >
-            <div className="bg-brand-soft/30 rounded-2xl p-8 border border-brand/20">
+            <div className="bain-card p-8">
               <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 className="w-10 h-10 flex items-center justify-center bg-brand text-white">
+                  <Target className="w-5 h-5" />
                 </span>
                 行业痛点挑战
               </h3>
-
               <ul className="space-y-4">
                 {solution.challenges.map((challenge, index) => (
                   <motion.li
@@ -53,7 +64,7 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
                     transition={{
                       delay: index * 0.08,
                       duration: 0.45,
-                      ease: [0.22, 1, 0.36, 1] as const,
+                      ease: [0.22, 1, 0.36, 1],
                     }}
                     className="flex items-start gap-3 text-text-secondary"
                   >
@@ -65,20 +76,20 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
             </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 }}
+            transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
           >
-            <div className="bg-blue-50/50 rounded-2xl p-8 border border-blue-100/60">
+            <div className="bain-card p-8">
               <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 className="w-10 h-10 flex items-center justify-center bg-accent-blue text-white">
+                  <Lightbulb className="w-5 h-5" />
                 </span>
                 睿新致远解决方案
               </h3>
-
               <ul className="space-y-4">
                 {solution.solutions.map((solutionItem, index) => (
                   <motion.li
@@ -89,11 +100,11 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
                     transition={{
                       delay: 0.25 + index * 0.08,
                       duration: 0.45,
-                      ease: [0.22, 1, 0.36, 1] as const,
+                      ease: [0.22, 1, 0.36, 1],
                     }}
                     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" />
+                    <CheckCircle2 className="w-4 h-4 text-accent-blue mt-0.5 shrink-0" />
                     <span className="text-sm leading-relaxed">{solutionItem}</span>
                   </motion.li>
                 ))}
@@ -102,40 +113,52 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
           </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">
+            <div className="mb-12">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-px bg-brand" />
+                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                  价值主张
+                </span>
+              </div>
+              <h3 className="text-2xl sm:text-3xl md:text-4xl font-black text-ink tracking-tight leading-[0.95]">
                 {solution.valueProposition.headline}
               </h3>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-7">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               {solution.valueProposition.points.map((point, index) => (
-                <TiltCard
+                <motion.div
                   key={index}
-                  tiltAmount={6}
-                  className="p-7 rounded-2xl bg-white border border-border-primary hover:border-blue-200 hover:shadow-md transition-shadow"
+                  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],
+                  }}
+                  className="bain-card p-7"
                 >
-                  <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 className="w-12 h-12 flex items-center justify-center bg-accent-blue text-white mb-5">
+                    <TrendingUp className="w-6 h-6" />
                   </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>
+                </motion.div>
               ))}
             </div>
           </motion.div>
         )}
 
+        {/* 产品组合 */}
         {solution.suiteCombination && (
           <motion.div
             initial={{ opacity: 0, y: 32 }}
@@ -144,76 +167,66 @@ export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
             transition={{ duration: 0.75, delay: 0.4 }}
             className="mt-20"
           >
-            <InkDivider variant="subtle" />
+            <div className="mb-12">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-px bg-brand" />
+                <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
+                  产品组合
+                </span>
+              </div>
+              <h3 className="text-2xl sm:text-3xl font-black text-ink tracking-tight leading-[0.95]">
+                推荐搭配方案
+              </h3>
+            </div>
 
-            <div className="bg-bg-secondary rounded-2xl p-10 border border-border-primary">
+            <div className="bain-card p-8 sm:p-10">
               <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>
+                  <h4 className="text-sm font-bold text-ink mb-5 flex items-center gap-2.5">
+                    <span className="w-8 h-8 flex items-center justify-center bg-brand text-white text-xs font-bold">
+                      核
                     </span>
                     核心产品组合
                   </h4>
                   <div className="flex flex-wrap gap-3">
-                    {solution.suiteCombination.primaryProducts.map((product, index) => (
-                      <motion.span
+                    {solution.suiteCombination.primaryProducts.map((product) => (
+                      <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"
+                        className="px-4 py-2 bg-brand-soft/50 text-brand text-sm font-semibold border border-brand/20"
                       >
                         {product}
-                      </motion.span>
+                      </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>
+                  <h4 className="text-sm font-bold text-ink mb-5 flex items-center gap-2.5">
+                    <span className="w-8 h-8 flex items-center justify-center bg-accent-blue text-white text-xs font-bold">
+                      配
                     </span>
                     配套专业服务
                   </h4>
                   <div className="flex flex-wrap gap-3">
-                    {solution.suiteCombination.complementaryServices.map((service, index) => (
-                      <motion.span
+                    {solution.suiteCombination.complementaryServices.map((service) => (
+                      <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"
+                        className="px-4 py-2 bg-blue-50 text-blue-700 text-sm font-semibold border border-blue-200"
                       >
                         {service}
-                      </motion.span>
+                      </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"
-              >
+              <p className="mt-8 p-5 bg-bg-secondary text-sm text-text-secondary leading-relaxed">
                 <strong className="text-ink">组合逻辑：</strong>{solution.suiteCombination.rationale}
-              </motion.p>
+              </p>
             </div>
           </motion.div>
         )}
       </div>
     </section>
   );
-}
+}

src/components/layout/client-layout.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode } from 'react';
 import { PageTransition } from '@/components/ui/page-transition';
+import { Toaster } from '@/components/ui/sonner';
 
 interface ClientLayoutProps {
   children: ReactNode;
@@ -9,10 +10,13 @@ interface ClientLayoutProps {
 
 export function ClientLayout({ children }: ClientLayoutProps) {
   return (
-    <PageTransition>
-      <main id="main-content">
-        {children}
-      </main>
-    </PageTransition>
+    <>
+      <PageTransition>
+        <main id="main-content">
+          {children}
+        </main>
+      </PageTransition>
+      <Toaster position="top-center" richColors closeButton />
+    </>
   );
 }

src/components/layout/footer.tsx

@@ -105,7 +105,7 @@ export function Footer() {
         <div className="border-t border-gray-800 pt-6 pb-[calc(8rem+env(safe-area-inset-bottom,0px))] md:pb-8">
           <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
             <p className="text-gray-300 text-xs">
-              © {new Date().getFullYear()} {config.name}. All rights reserved.
+              © {new Date().getFullYear()} {config.name}. 版权所有.
             </p>
             <div className="flex gap-6">
               <StaticLink href="/privacy" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">

src/components/layout/header.test.tsx

@@ -245,6 +245,18 @@ describe('Header', () => {
       });
     });
 
+    it('should not double-toggle menu on Enter or Space keydown', () => {
+      render(<Header />);
+      const menuButton = screen.getByTestId('mobile-menu-button');
+
+      // Enter/Space 由原生 button 的 click 处理，keydown 不应再次 toggle
+      fireEvent.keyDown(menuButton, { key: 'Enter' });
+      expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
+
+      fireEvent.keyDown(menuButton, { key: ' ' });
+      expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
+    });
+
     it('should have proper navigation role', () => {
       render(<Header />);
       const nav = screen.getByTestId('desktop-navigation');

src/components/layout/header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { useSiteConfig, type NavigationItem } from '@/lib/site-config';
 import { MegaDropdown } from '@/components/layout/mega-dropdown';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
+import { cn } from '@/lib/utils';
 
 function HeaderContent() {
   const [isOpen, setIsOpen] = useState(false);
@@ -39,18 +40,18 @@ function HeaderContent() {
   }, [isOpen]);
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      setIsOpen(!isOpen);
-    }
+    // Escape 关闭菜单；Enter/Space 已由原生 button 的 onClick 处理，
+    // 此处不再拦截，避免键盘操作时重复触发 toggle。
     if (e.key === 'Escape' && isOpen) {
+      e.preventDefault();
       setIsOpen(false);
     }
   }, [isOpen]);
 
   const config = useSiteConfig();
 
-  const handleNavClick = useCallback((_e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
+  const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
+    e.preventDefault();
     setIsOpen(false);
     window.location.href = item.href;
   }, []);
@@ -85,10 +86,7 @@ function HeaderContent() {
           height: isScrolled ? 64 : 80,
         }}
         transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
-        className={`
-          fixed top-0 left-0 right-0 z-50
-          bg-white border-b border-border-primary
-        `}
+        className="fixed top-0 left-0 right-0 z-50 transition-colors duration-300 bg-white border-b border-border-primary"
       >
         <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
           <div className="flex items-center justify-between h-16 md:h-full">
@@ -125,30 +123,28 @@ function HeaderContent() {
                     onClose={() => setOpenDropdown((prev) => prev === item.id ? null : prev)}
                   />
                 ) : (
-                  <div key={item.id} className="px-1 py-2">
+                  <div key={item.id} className="relative -mx-2 px-2 py-2">
                     <StaticLink
                       href={item.href}
                       onClick={(e) => handleNavClick(e, item)}
-                      className={`
-                        relative block px-3 py-2 text-sm font-medium
-                        transition-all duration-300 ease-out
-                        ${isActive(item)
+                      className={cn(
+                        'relative inline-flex items-center px-3 py-2 text-sm font-medium',
+                        'transition-all duration-300 ease-out',
+                        isActive(item)
                           ? 'text-text-primary'
                           : 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
-                        }
-                      `}
+                      )}
                       aria-current={isActive(item) ? 'page' : undefined}
                     >
                       {item.label}
                       <span
-                        className={`
-                          absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand
-                          transition-all duration-300 ease-out
-                          ${isActive(item)
+                        className={cn(
+                          'absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand',
+                          'transition-all duration-300 ease-out',
+                          isActive(item)
                             ? 'opacity-100 scale-x-100'
                             : 'opacity-0 scale-x-0'
-                          }
-                        `}
+                        )}
                       />
                     </StaticLink>
                   </div>
@@ -160,6 +156,7 @@ function HeaderContent() {
               <Button
                 size="sm"
                 asChild
+                className=""
               >
                 <StaticLink href="/contact" data-testid="consult-button">
                   <MessageCircle className="w-4 h-4" />
@@ -257,28 +254,6 @@ function HeaderContent() {
   );
 }
 
-function HeaderFallback() {
-  return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
-      <div className="container-x">
-        <div className="flex items-center justify-between h-16">
-          <div className="h-8 w-24 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
-          <nav className="hidden md:flex items-center gap-1">
-            {[1, 2, 3, 4, 5, 6].map((i) => (
-              <div key={i} className="h-6 w-16 bg-bg-tertiary animate-skeleton-pulse rounded-sm mx-1" />
-            ))}
-          </nav>
-          <div className="h-9 w-20 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
-        </div>
-      </div>
-    </header>
-  );
-}
-
 export function Header() {
-  return (
-    <Suspense fallback={<HeaderFallback />}>
-      <HeaderContent />
-    </Suspense>
-  );
+  return <HeaderContent />;
 }

src/components/layout/mega-dropdown.tsx

@@ -38,12 +38,6 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
       <div className="-mx-2 px-2 py-2">
         <button
           onClick={onToggle}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              onToggle();
-            }
-          }}
           className={`
             relative flex items-center gap-1 px-3 py-2 text-sm font-medium
             transition-all duration-300 ease-out
@@ -96,16 +90,9 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
                   </div>
                   
                   <div className={`grid gap-2 ${group.items.length > 4 ? 'grid-cols-3' : 'grid-cols-2'}`}>
-                    {group.items.map((item) => (
-                      <StaticLink
-                        key={item.id}
-                        href={item.href}
-                        className={`block p-3 border transition-all duration-300 ease-out group ${
-                          item.href === '#'
-                            ? 'border-border-primary bg-bg-secondary cursor-not-allowed opacity-50'
-                            : 'border-transparent hover:border-border-primary hover:bg-bg-secondary'
-                        }`}
-                      >
+                    {group.items.map((item) => {
+                      const isPlaceholder = item.href === '#';
+                      const content = (
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2">
@@ -124,8 +111,30 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
                             <div className="text-xs text-text-secondary mt-1 leading-relaxed">{item.description}</div>
                           </div>
                         </div>
-                      </StaticLink>
-                    ))}
+                      );
+
+                      if (isPlaceholder) {
+                        return (
+                          <div
+                            key={item.id}
+                            className="block p-3 border border-border-primary bg-bg-secondary cursor-not-allowed opacity-50"
+                            aria-disabled="true"
+                          >
+                            {content}
+                          </div>
+                        );
+                      }
+
+                      return (
+                        <StaticLink
+                          key={item.id}
+                          href={item.href}
+                          className="block p-3 border border-transparent transition-all duration-300 ease-out group hover:border-border-primary hover:bg-bg-secondary"
+                        >
+                          {content}
+                        </StaticLink>
+                      );
+                    })}
                   </div>
                 </div>
               ))}

src/components/layout/mobile-menu.test.tsx

@@ -156,29 +156,33 @@ describe('MobileMenu', () => {
   });
 
   describe('Keyboard Navigation', () => {
-    it('should open menu with Enter key', () => {
+    it('should open menu with button click', () => {
       render(<MobileMenu />);
       const button = screen.getByRole('button', { name: '打开菜单' });
       fireEvent.click(button);
-      
+
       expect(screen.getByRole('navigation')).toBeInTheDocument();
     });
 
-    it('should open menu with Space key', () => {
+    it('should not double-toggle menu on Enter or Space keydown', () => {
       render(<MobileMenu />);
       const button = screen.getByRole('button', { name: '打开菜单' });
-      fireEvent.click(button);
-      
-      expect(screen.getByRole('navigation')).toBeInTheDocument();
+
+      // Enter/Space 由原生 button 的 click 处理，keydown 不应再次 toggle
+      fireEvent.keyDown(button, { key: 'Enter' });
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+
+      fireEvent.keyDown(button, { key: ' ' });
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
     });
 
     it('should close menu with Escape key', () => {
       render(<MobileMenu />);
       const button = screen.getByRole('button', { name: '打开菜单' });
       fireEvent.click(button);
-      
+
       fireEvent.keyDown(button, { key: 'Escape' });
-      
+
       expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
     });
   });

src/components/layout/mobile-menu.tsx

@@ -28,12 +28,11 @@ export function MobileMenu({ className }: MobileMenuProps) {
     };
   }, [isOpen]);
 
-  const handleKeyDown = (event: React.KeyboardEvent, action?: () => void) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      action?.();
-    }
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    // Escape 关闭菜单；Enter/Space 已由原生 button 的 onClick 处理，
+    // 此处不再拦截，避免键盘操作时重复触发 toggle。
     if (event.key === 'Escape' && isOpen) {
+      event.preventDefault();
       setIsOpen(false);
     }
   };
@@ -46,7 +45,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
     <div className={cn('lg:hidden', className)} ref={focusTrapRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        onKeyDown={(e) => handleKeyDown(e)}
+        onKeyDown={handleKeyDown}
         className="p-3 rounded-md hover:bg-[var(--color-brand-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
         aria-label={isOpen ? '关闭菜单' : '打开菜单'}
         aria-expanded={isOpen}
@@ -81,7 +80,6 @@ export function MobileMenu({ className }: MobileMenuProps) {
                       <div>
                         <button
                           onClick={() => toggleDropdown(item.dropdownKey!)}
-                          onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
                           className="flex items-center justify-between w-full text-left px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-bg)] hover:text-[var(--color-brand)] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-inset min-h-[48px]"
                           aria-expanded={expandedDropdown === item.dropdownKey}
                         >

src/components/sections/hero-section-v2.tsx

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { StaticLink } from '@/components/ui/static-link';
 import { Button } from '@/components/ui/button';
-import { HeroInkBackground } from '@/components/ui/hero-ink-background';
+
 import { COMPANY_INFO } from '@/lib/constants';
 import { ArrowRight, MessageSquare, Search, Rocket, Handshake } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
@@ -52,8 +52,6 @@ export function HeroSectionV2() {
       aria-labelledby="hero-heading"
       className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[var(--color-bg-primary)]"
     >
-      <HeroInkBackground />
-
       <div className="container-wide py-16 md:py-24 lg:py-32 relative z-10 flex-1 flex items-center">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center w-full">
           <div>
@@ -112,7 +110,7 @@ export function HeroSectionV2() {
           >
             <div
               ref={cardRef}
-              className="relative ink-glow-border rounded-2xl lg:opacity-95"
+              className="relative overflow-hidden rounded-2xl lg:opacity-95 border border-[var(--color-border-primary)]"
               style={
                 {
                   '--glow-start': 'var(--color-brand)',

src/components/sections/methodology-section.tsx

@@ -5,7 +5,7 @@ import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { METHODOLOGY } from '@/lib/constants/methodology';
 import { CheckCircle2 } from 'lucide-react';
-import { InkGlowCard } from '@/components/ui/ink-glow-card';
+import { Card } from '@/components/ui/card';
 
 const phaseBgOpacities = [0.1, 0.08, 0.12, 0.06];
 
@@ -38,9 +38,9 @@ export function MethodologySection() {
             {METHODOLOGY.map((phase, idx) => {
               const bgOpacity = phaseBgOpacities[idx % phaseBgOpacities.length];
               return (
-                <InkGlowCard
+                <Card
                   key={phase.id}
-                  index={idx}
+                  className="relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
                 >
                   <div className="p-6 md:p-8">
                     <div
@@ -78,7 +78,7 @@ export function MethodologySection() {
                       </ul>
                     </div>
                   </div>
-                </InkGlowCard>
+                </Card>
               );
             })}
           </div>

src/components/sections/product-card.tsx

@@ -43,8 +43,8 @@ export function ProductCard({
 
       {/* 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 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" aria-hidden="true">
           {icon}
         </div>
 

src/components/sections/sections.test.tsx

@@ -78,10 +78,6 @@ jest.mock('@/components/ui/brand-visuals', () => ({
   ),
 }));
 
-jest.mock('@/components/ui/hero-ink-background', () => ({
-  HeroInkBackground: () => <div data-testid="hero-ink-bg" />,
-}));
-
 jest.mock('next/link', () => ({
   __esModule: true,
   default: ({ children, href, className, ...props }: any) => (
@@ -354,12 +350,6 @@ describe('HeroSectionV2', () => {
     expect(screen.getAllByText('长期陪跑').length).toBeGreaterThanOrEqual(1);
   });
 
-  it('should render ink background', async () => {
-    const { HeroSectionV2 } = await import('./hero-section-v2');
-    render(<HeroSectionV2 />);
-    expect(screen.getByTestId('hero-ink-bg')).toBeInTheDocument();
-  });
-
   it('should provide CTA link to contact', async () => {
     const { HeroSectionV2 } = await import('./hero-section-v2');
     render(<HeroSectionV2 />);

src/components/ui/challenge-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowRight, Lock, TrendingUp, Shield } from 'lucide-react';
-import { InkGlowCard } from '@/components/ui/ink-glow-card';
+import { Card } from '@/components/ui/card';
 import type { LucideIcon } from 'lucide-react';
 
 interface ChallengeCardProps {
@@ -28,39 +28,38 @@ export function ChallengeCard({ title, description, scenario, href, index }: Cha
   const IconComponent = config.icon;
 
   return (
-    <InkGlowCard
-      index={index}
-      href={href}
-    >
-      <div className="p-6 md:p-8">
-        <div className="flex items-start justify-between mb-5">
-          <div
-            className="w-11 h-11 rounded-xl flex items-center justify-center"
-            style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${config.iconBgOpacity})` }}
-          >
-            <IconComponent
-              className="w-5 h-5 text-[var(--color-brand)]"
-              strokeWidth={1.8}
-            />
+    <a href={href}>
+      <Card className="group relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
+        <div className="p-6 md:p-8">
+          <div className="flex items-start justify-between mb-5">
+            <div
+              className="w-11 h-11 rounded-xl flex items-center justify-center"
+              style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${config.iconBgOpacity})` }}
+            >
+              <IconComponent
+                className="w-5 h-5 text-[var(--color-brand)]"
+                strokeWidth={1.8}
+              />
+            </div>
+            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
+              {String(index + 1).padStart(2, '0')}
+            </span>
+          </div>
+
+          <h3 className="text-xl font-semibold mb-3 leading-tight tracking-tight text-[var(--color-text-primary)]">
+            {title}
+          </h3>
+
+          <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-6 min-h-[3.5rem]">
+            {description}
+          </p>
+
+          <div className="flex items-center gap-2 text-sm font-medium text-[var(--color-brand)]">
+            <span>了解方案</span>
+            <ArrowRight className="w-4 h-4" />
           </div>
-          <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
-            {String(index + 1).padStart(2, '0')}
-          </span>
         </div>
-
-        <h3 className="text-xl font-semibold mb-3 leading-tight tracking-tight text-[var(--color-text-primary)]">
-          {title}
-        </h3>
-
-        <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-6 min-h-[3.5rem]">
-          {description}
-        </p>
-
-        <div className="flex items-center gap-2 text-sm font-medium text-[var(--color-brand)]">
-          <span>了解方案</span>
-          <ArrowRight className="w-4 h-4" />
-        </div>
-      </div>
-    </InkGlowCard>
+      </Card>
+    </a>
   );
 }

src/components/ui/hero-ink-background.tsx

@@ -1,295 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useMemo, useSyncExternalStore } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-
-const PARTICLE_COUNT = 12;
-
-interface Particle {
-  x: number;
-  y: number;
-  size: number;
-  duration: number;
-  delay: number;
-  opacity: number;
-}
-
-function generateParticles(): Particle[] {
-  const particles: Particle[] = [];
-  for (let i = 0; i < PARTICLE_COUNT; i++) {
-    particles.push({
-      x: Math.random() * 100,
-      y: Math.random() * 100,
-      size: Math.max(1.5, Math.random() * 3.5 + 0.5),
-      duration: 14 + Math.random() * 20,
-      delay: Math.random() * -20,
-      opacity: 0.15 + Math.random() * 0.35,
-    });
-  }
-  return particles;
-}
-
-function ParallaxLayer({ children }: { children: React.ReactNode }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ['start start', 'end start'],
-  });
-
-  const y = useTransform(scrollYProgress, [0, 1], [0, 120]);
-  const opacity = useTransform(scrollYProgress, [0, 0.6, 1], [1, 0.6, 0]);
-
-  return (
-    <motion.div
-      ref={containerRef}
-      className="pointer-events-none absolute inset-0 overflow-hidden"
-      style={{ y, opacity }}
-      aria-hidden="true"
-    >
-      {children}
-    </motion.div>
-  );
-}
-
-function InkCanvas({ shouldReduceMotion }: { shouldReduceMotion: boolean }) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    if (shouldReduceMotion || !canvasRef.current) {
-      return undefined;
-    }
-
-    const canvas = canvasRef.current;
-    const rawCtx = canvas.getContext('2d');
-    if (!rawCtx) {
-      return undefined;
-    }
-    const ctx = rawCtx;
-
-    let animFrameId: number;
-    let time = 0;
-
-    function resize() {
-      if (!canvasRef.current) {
-        return;
-      }
-      const dpr = window.devicePixelRatio || 1;
-      const rect = canvasRef.current.getBoundingClientRect();
-      canvas.width = rect.width * dpr;
-      canvas.height = rect.height * dpr;
-      ctx.scale(dpr, dpr);
-    }
-
-    resize();
-    window.addEventListener('resize', resize);
-
-    const inkBlobs = [
-      { cx: 0.18, cy: 0.35, r: 0.28, speed: 0.0004, phase: 0 },
-      { cx: 0.82, cy: 0.22, r: 0.22, speed: 0.0003, phase: 2 },
-      { cx: 0.55, cy: 0.78, r: 0.32, speed: 0.00035, phase: 4 },
-    ];
-
-    function draw() {
-      const w = canvas.getBoundingClientRect().width;
-      const h = canvas.getBoundingClientRect().height;
-      ctx.clearRect(0, 0, w, h);
-
-      inkBlobs.forEach((blob) => {
-        const pulse = Math.sin(time * blob.speed + blob.phase) * 0.08 + 1;
-        const rx = blob.r * w * pulse;
-        const ry = blob.r * h * pulse;
-        const gx = blob.cx * w + Math.sin(time * 0.0006 + blob.phase) * w * 0.03;
-        const gy = blob.cy * h + Math.cos(time * 0.0005 + blob.phase) * h * 0.03;
-
-        const grad = ctx.createRadialGradient(gx, gy, 0, gx, gy, Math.max(rx, ry));
-        grad.addColorStop(0, 'rgba(196, 30, 58, 0.045)');
-        grad.addColorStop(0.5, 'rgba(196, 30, 58, 0.02)');
-        grad.addColorStop(1, 'rgba(196, 30, 58, 0)');
-        ctx.fillStyle = grad;
-        ctx.fillRect(0, 0, w, h);
-      });
-
-      const particleGrad = ctx.createRadialGradient(w * 0.5, h * 0.4, 0, w * 0.5, h * 0.4, w * 0.6);
-      particleGrad.addColorStop(0, 'rgba(28, 28, 28, 0.025)');
-      particleGrad.addColorStop(1, 'rgba(28, 28, 28, 0)');
-      ctx.fillStyle = particleGrad;
-      ctx.fillRect(0, 0, w, h);
-
-      time += 16;
-      animFrameId = requestAnimationFrame(draw);
-    }
-
-    animFrameId = requestAnimationFrame(draw);
-
-    return () => {
-      cancelAnimationFrame(animFrameId);
-      window.removeEventListener('resize', resize);
-    };
-  }, [shouldReduceMotion]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      className="absolute inset-0 w-full h-full"
-      style={{ opacity: 0.8 }}
-    />
-  );
-}
-
-function InkParticles({ particles }: { particles: Particle[] }) {
-  return (
-    <svg className="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <filter id="ink-glow">
-          <feGaussianBlur stdDeviation="40" result="blur" />
-          <feColorMatrix
-            type="matrix"
-            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1.2 0"
-            in="blur"
-            result="glow"
-          />
-          <feMerge>
-            <feMergeNode in="glow" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-      <circle
-        cx="15%"
-        cy="40%"
-        r="18%"
-        fill="rgba(196, 30, 58, 0.03)"
-        filter="url(#ink-glow)"
-        style={{
-          transformOrigin: '15% 40%',
-          animation: 'inkBreatheA 10s ease-in-out infinite',
-        }}
-      />
-      <circle
-        cx="85%"
-        cy="25%"
-        r="14%"
-        fill="rgba(28, 28, 28, 0.025)"
-        filter="url(#ink-glow)"
-        style={{
-          transformOrigin: '85% 25%',
-          animation: 'inkBreatheB 13s ease-in-out infinite',
-        }}
-      />
-      <circle
-        cx="50%"
-        cy="85%"
-        r="22%"
-        fill="rgba(196, 30, 58, 0.025)"
-        filter="url(#ink-glow)"
-        style={{
-          transformOrigin: '50% 85%',
-          animation: 'inkBreatheC 11s ease-in-out infinite',
-        }}
-      />
-      {particles.map((p, i) => (
-        <circle
-          key={i}
-          cx={`${p.x}%`}
-          cy={`${p.y}%`}
-          r={p.size}
-          fill={`rgba(196, 30, 58, ${p.opacity})`}
-          style={{
-            transformOrigin: `${p.x}% ${p.y}%`,
-            animation: `particleFloat ${p.duration}s ease-in-out ${p.delay}s infinite`,
-          }}
-        />
-      ))}
-      <style>{`
-        @keyframes inkBreatheA {
-          0%, 100% { transform: scale(1); opacity: 1; }
-          50% { transform: scale(1.15); opacity: 0.7; }
-        }
-        @keyframes inkBreatheB {
-          0%, 100% { transform: scale(1); opacity: 0.9; }
-          50% { transform: scale(1.2); opacity: 0.5; }
-        }
-        @keyframes inkBreatheC {
-          0%, 100% { transform: scale(1); opacity: 0.8; }
-          50% { transform: scale(1.12); opacity: 0.5; }
-        }
-        @keyframes particleFloat {
-          0%, 100% {
-            transform: translate(0, 0) scale(1);
-            opacity: var(--base-opacity, 0.3);
-          }
-          25% {
-            transform: translate(12px, -20px) scale(1.1);
-            opacity: calc(var(--base-opacity, 0.3) * 1.5);
-          }
-          50% {
-            transform: translate(-8px, -35px) scale(0.9);
-            opacity: var(--base-opacity, 0.3);
-          }
-          75% {
-            transform: translate(15px, -15px) scale(1.05);
-            opacity: calc(var(--base-opacity, 0.3) * 1.2);
-          }
-        }
-      `}</style>
-    </svg>
-  );
-}
-
-function useIsMounted() {
-  return useSyncExternalStore(
-    (callback) => {
-      window.addEventListener('resize', callback);
-      return () => window.removeEventListener('resize', callback);
-    },
-    () => true,
-    () => false
-  );
-}
-
-export function HeroInkBackground() {
-  const shouldReduceMotion = useReducedMotion();
-  const mounted = useIsMounted();
-
-  const particles = useMemo(() => {
-    if (!mounted) {return [];}
-    return generateParticles();
-  }, [mounted]);
-
-  if (shouldReduceMotion) {
-    return (
-      <div
-        className="pointer-events-none absolute inset-0"
-        style={{
-          background:
-            'radial-gradient(ellipse at 18% 35%, rgba(196, 30, 58, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 82% 22%, rgba(28, 28, 28, 0.04) 0%, transparent 45%), radial-gradient(ellipse at 55% 78%, rgba(196, 30, 58, 0.03) 0%, transparent 40%)',
-        }}
-        aria-hidden="true"
-      />
-    );
-  }
-
-  if (!mounted) {
-    return (
-      <div
-        className="pointer-events-none absolute inset-0 relative"
-        style={{
-          background:
-            'radial-gradient(ellipse at 18% 35%, rgba(196, 30, 58, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 82% 22%, rgba(28, 28, 28, 0.04) 0%, transparent 45%)',
-        }}
-        aria-hidden="true"
-      />
-    );
-  }
-
-  return (
-    <div className="pointer-events-none absolute inset-0 relative" aria-hidden="true">
-      <ParallaxLayer>
-        <InkCanvas shouldReduceMotion={shouldReduceMotion} />
-        <InkParticles particles={particles} />
-      </ParallaxLayer>
-    </div>
-  );
-}

src/components/ui/index.ts

@@ -183,7 +183,6 @@ export { PageTransition, StaggerChildren } from './page-transition';
 export {
   EASE_OUT,
   GrainOverlay,
-  FloatingInkParticles,
   SectionLabel,
 } from './page-decoration';
 export {
@@ -192,11 +191,9 @@ export {
   GradientDivider,
   BrandStamp,
 } from './brand-visuals';
-export { InkGlowCard } from './ink-glow-card';
 export { ChallengeCard } from './challenge-card';
 export { ProductCard as UiProductCard } from './product-card';
 export { DetailSwipeNav } from './detail-swipe-nav';
-export { HeroInkBackground } from './hero-ink-background';
 export { FlipClock } from './flip-clock';
 export { AnimatedCounter } from './animated-counter';
 export { MetricCard } from './metric-card';

src/components/ui/ink-glow-card.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import { useRef, useState, useCallback, type ReactNode } from 'react';
-import { motion } from 'framer-motion';
-import { StaticLink } from '@/components/ui/static-link';
-
-interface InkGlowCardProps {
-  children: ReactNode;
-  index?: number;
-  className?: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-const DEFAULT_ACCENT_RGB = '196, 30, 58';
-
-export function InkGlowCard({
-  children,
-  index = 0,
-  className = '',
-  href,
-  onClick,
-}: InkGlowCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!cardRef.current) {return;}
-    const rect = cardRef.current.getBoundingClientRect();
-    setMousePos({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    });
-  }, []);
-
-  const content = (
-    <>
-      <div
-        className="absolute inset-0 pointer-events-none transition-opacity duration-500"
-        style={{
-          opacity: isHovered ? 1 : 0,
-          background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(${DEFAULT_ACCENT_RGB}, 0.04), transparent 40%)`,
-        }}
-      />
-      <div className="relative z-10">{children}</div>
-    </>
-  );
-
-  return (
-    <motion.div
-      ref={cardRef}
-      initial={{ opacity: 0, scale: 0.96, y: 16 }}
-      whileInView={{ opacity: 1, scale: 1, y: 0 }}
-      viewport={{ once: true, margin: '-60px' }}
-      transition={{
-        duration: 0.5,
-        delay: index * 0.08,
-        ease: [0.16, 1, 0.3, 1],
-      }}
-      className={`relative ink-glow-border rounded-2xl ${className}`}
-      style={
-        {
-          '--glow-start': 'var(--color-brand)',
-          '--glow-end': 'var(--color-warning)',
-        } as React.CSSProperties
-      }
-    >
-      {href ? (
-        <StaticLink
-          href={href}
-          className="relative block rounded-2xl bg-[var(--color-bg-primary)] overflow-hidden transition-all duration-500"
-          style={{
-            boxShadow: isHovered
-              ? `0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(${DEFAULT_ACCENT_RGB}, 0.12)`
-              : '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
-            transform: isHovered ? 'translateY(-6px)' : 'translateY(0)',
-          }}
-          onMouseMove={handleMouseMove}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          {content}
-        </StaticLink>
-      ) : (
-        <div
-          className="relative rounded-2xl bg-[var(--color-bg-primary)] overflow-hidden transition-all duration-500"
-          style={{
-            boxShadow: isHovered
-              ? `0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(${DEFAULT_ACCENT_RGB}, 0.12)`
-              : '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
-            transform: isHovered ? 'translateY(-6px)' : 'translateY(0)',
-          }}
-          onMouseMove={handleMouseMove}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          onClick={onClick}
-          role={onClick ? 'button' : undefined}
-          tabIndex={onClick ? 0 : undefined}
-        >
-          {content}
-        </div>
-      )}
-    </motion.div>
-  );
-}

src/components/ui/ink-wash/InkCard.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import { type ReactNode, useRef } from 'react';
-import { useMouseGlow } from '@/hooks/use-mouse-glow';
-import { cn } from '@/lib/utils';
-
-interface InkCardProps {
-  children: ReactNode;
-  className?: string;
-  /** Enable ink-glow border on hover */
-  glow?: boolean;
-  /** Enable mouse follow glow */
-  mouseFollow?: boolean;
-  /** Card padding variant */
-  padding?: 'none' | 'sm' | 'md' | 'lg';
-  /** Interactive - adds hover elevation */
-  interactive?: boolean;
-  onClick?: () => void;
-  href?: string;
-}
-
-const paddingMap = {
-  none: '',
-  sm: 'p-4 sm:p-5',
-  md: 'p-5 sm:p-6 md:p-7',
-  lg: 'p-6 sm:p-8 md:p-10',
-} as const;
-
-/**
- * 水墨雅致统一卡片组件
- * 融合 ink-glow-border + mouse-follow-glow + 宣纸底色
- */
-export function InkCard({
-  children,
-  className,
-  glow = true,
-  mouseFollow = true,
-  padding = 'md',
-  interactive = true,
-  onClick,
-  href,
-}: InkCardProps) {
-  const { glowStyle, handlers } = useMouseGlow({ radius: 350, opacity: 0.05 });
-  const anchorRef = useRef<HTMLAnchorElement>(null);
-  const divRef = useRef<HTMLDivElement>(null);
-
-  const cardClasses = cn(
-    'block relative rounded-2xl',
-    'bg-[var(--color-bg-primary)]',
-    'border border-[var(--color-border-primary)]',
-    glow && 'ink-glow-border',
-    interactive && 'transition-all duration-300 hover:border-[rgba(var(--color-brand-rgb),0.2)] hover:shadow-lg',
-    paddingMap[padding],
-    className,
-  );
-
-  const content = (
-    <>
-      {/* Mouse follow glow overlay */}
-      {mouseFollow && <div style={glowStyle} />}
-      {/* Card content */}
-      <div className="relative z-[1]">{children}</div>
-    </>
-  );
-
-  if (href) {
-    const isExternal = href.startsWith('http://') || href.startsWith('https://');
-    const handleLinkClick = !isExternal
-      ? (e: React.MouseEvent<HTMLAnchorElement>) => {
-          // 阻止 Next.js 客户端路由拦截（output: 'export' 模式下 RSC payload 不存在）
-          e.preventDefault();
-          window.location.href = href;
-        }
-      : undefined;
-
-    return (
-      <a
-        ref={anchorRef}
-        href={href}
-        className={cardClasses}
-        onClick={handleLinkClick}
-        {...handlers}
-        style={glow ? { '--glow-start': 'var(--color-text-muted)', '--glow-end': 'var(--color-border-primary)' } as React.CSSProperties : undefined}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <div
-      ref={divRef}
-      className={cardClasses}
-      onClick={onClick}
-      {...handlers}
-      style={glow ? { '--glow-start': 'var(--color-text-muted)', '--glow-end': 'var(--color-border-primary)' } as React.CSSProperties : undefined}
-    >
-      {content}
-    </div>
-  );
-}

src/components/ui/ink-wash/InkWashBackground.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-interface InkWashBackgroundProps {
-  /** Background variant */
-  variant?: 'hero' | 'section' | 'subtle';
-  className?: string;
-}
-
-/**
- * 水墨晕散背景组件
- * 用于 Hero 和各大 section 的水墨晕散效果
- */
-export function InkWashBackground({ variant = 'section', className }: InkWashBackgroundProps) {
-
-  if (variant === 'hero') {
-    return (
-      <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
-        {/* 主墨晕 */}
-        <div
-          className="absolute top-[10%] left-[15%] w-[600px] h-[600px] rounded-full"
-          style={{
-            background: 'radial-gradient(circle, rgba(var(--color-brand-rgb), 0.04) 0%, transparent 60%)',
-          }}
-        />
-        {/* 品牌红点缀 */}
-        <div
-          className="absolute bottom-[20%] right-[10%] w-[400px] h-[400px] rounded-full"
-          style={{
-            background: 'radial-gradient(circle, rgba(var(--color-brand-rgb), 0.025) 0%, transparent 55%)',
-          }}
-        />
-        {/* 宣纸纹理 */}
-        <div className="absolute inset-0 bg-paper-texture opacity-50" />
-      </div>
-    );
-  }
-
-  if (variant === 'subtle') {
-    return (
-      <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
-        <div className="absolute inset-0 bg-paper-texture opacity-30" />
-      </div>
-    );
-  }
-
-  // Default: section
-  return (
-    <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
-      <div
-        className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px]"
-        style={{
-          background: 'radial-gradient(ellipse at 50% 0%, rgba(var(--color-brand-rgb), 0.025) 0%, transparent 65%)',
-        }}
-      />
-      <div className="absolute inset-0 bg-paper-texture opacity-30" />
-    </div>
-  );
-}

src/components/ui/ink-wash/index.ts

@@ -1,2 +0,0 @@
-export { InkCard } from './InkCard';
-export { InkWashBackground } from './InkWashBackground';

src/components/ui/page-decoration.tsx

@@ -1,20 +1,9 @@
 'use client';
 
-import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
 export const EASE_OUT = [0.22, 1, 0.36, 1] as const;
 
-const DEFAULT_PARTICLES = [
-  { x: 15, y: 32, scale: 0.8, duration: 10, delay: 0, size: 3 },
-  { x: 82, y: 58, scale: 0.6, duration: 12, delay: 1.5, size: 2 },
-  { x: 45, y: 42, scale: 1.0, duration: 9, delay: 0.8, size: 4 },
-  { x: 75, y: 25, scale: 0.7, duration: 11, delay: 2.2, size: 2.5 },
-  { x: 25, y: 75, scale: 0.9, duration: 8.5, delay: 1.0, size: 3.5 },
-  { x: 58, y: 65, scale: 0.55, duration: 13, delay: 2.8, size: 2 },
-];
-
 export function GrainOverlay({ opacity = 0.025 }: { opacity?: number }) {
   return (
     <div
@@ -29,48 +18,6 @@ export function GrainOverlay({ opacity = 0.025 }: { opacity?: number }) {
   );
 }
 
-export function FloatingInkParticles({ particles = DEFAULT_PARTICLES }: { particles?: typeof DEFAULT_PARTICLES }) {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <div className="absolute inset-0 pointer-events-none">
-      {particles.map((particle, i) => (
-        <motion.div
-          key={i}
-          className="absolute rounded-full bg-white/[0.03]"
-          style={{
-            width: `${particle.size}px`,
-            height: `${particle.size}px`,
-            filter: 'blur(1px)',
-          }}
-          initial={{
-            x: `${particle.x}%`,
-            y: `${particle.y}%`,
-            scale: particle.scale,
-            opacity: 0,
-          }}
-          animate={
-            shouldReduceMotion
-              ? { opacity: 0.3 }
-              : {
-                  y: [`${particle.y + 12}%`, `${particle.y - 12}%`],
-                  opacity: [0, 0.35, 0],
-                  x: [`${particle.x - 2}%`, `${particle.x + 2}%`],
-                }
-          }
-          transition={{
-            duration: particle.duration,
-            repeat: Infinity,
-            repeatType: 'reverse',
-            delay: particle.delay,
-            ease: 'easeInOut' as const,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
 export function SectionLabel({
   children,
   className = '',

src/components/ui/product-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowUpRight, Database, Users, BarChart3, FileText, Truck, Building2 } from 'lucide-react';
-import { InkCard } from '@/components/ui/ink-wash/InkCard';
+import { Card } from '@/components/ui/card';
 import type { LucideIcon } from 'lucide-react';
 
 interface ProductCardProps {
@@ -45,72 +45,67 @@ export function ProductCard({ title, description, href, index, status }: Product
   const statusStyle = status ? statusConfig[status] : null;
 
   return (
-    <InkCard
-      href={href}
-      padding="md" // 使用统一的 padding 规范 (p-5 sm:p-6 md:p-7)
-      glow={true}
-      mouseFollow={true}
-      interactive={true}
-      className="group h-full"
-    >
-      {/* 产品图标 */}
-      <div className="flex items-start justify-between mb-4">
-        <div
-          className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
-          style={{ backgroundColor: config.color.bg }}
-        >
-          <IconComponent
-            className="w-5 h-5"
-            style={{ color: config.color.text }}
-            strokeWidth={1.8}
-          />
-        </div>
+    <a href={href}>
+      <Card className="group h-full relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
+        {/* 产品图标 */}
+        <div className="flex items-start justify-between mb-4">
+          <div
+            className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
+            style={{ backgroundColor: config.color.bg }}
+          >
+            <IconComponent
+              className="w-5 h-5"
+              style={{ color: config.color.text }}
+              strokeWidth={1.8}
+            />
+          </div>
 
-        {/* 状态标签 + 序号 */}
-        <div className="flex items-center gap-2 flex-shrink-0">
-          {status && statusStyle && (
-            <span
-              className="text-[10px] font-medium px-2 py-0.5 rounded-full border whitespace-nowrap"
-              style={{
-                backgroundColor: statusStyle.bg,
-                color: statusStyle.text,
-                borderColor: statusStyle.border,
-              }}
-            >
-              {status}
+          {/* 状态标签 + 序号 */}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {status && statusStyle && (
+              <span
+                className="text-[10px] font-medium px-2 py-0.5 rounded-full border whitespace-nowrap"
+                style={{
+                  backgroundColor: statusStyle.bg,
+                  color: statusStyle.text,
+                  borderColor: statusStyle.border,
+                }}
+              >
+                {status}
+              </span>
+            )}
+            <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
+              {String(index + 1).padStart(2, '0')}
             </span>
-          )}
-          <span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">
-            {String(index + 1).padStart(2, '0')}
-          </span>
+          </div>
         </div>
-      </div>
 
-      {/* 标题 */}
-      <h3 className="text-base font-semibold mb-2 leading-snug tracking-tight text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)] transition-colors">
-        {title}
-      </h3>
+        {/* 标题 */}
+        <h3 className="text-base font-semibold mb-2 leading-snug tracking-tight text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)] transition-colors">
+          {title}
+        </h3>
 
-      {/* 描述 */}
-      <p className="text-sm text-[var(--color-text-muted)] leading-relaxed line-clamp-3 mb-4">
-        {description}
-      </p>
+        {/* 描述 */}
+        <p className="text-sm text-[var(--color-text-muted)] leading-relaxed line-clamp-3 mb-4">
+          {description}
+        </p>
 
-      {/* 研发中/内测中 提示 */}
-      {(status === '研发中' || status === '内测中') && (
-        <div className="flex items-center gap-1.5 text-xs text-[var(--color-brand)]/70 mb-4 px-3 py-2 rounded-lg bg-[var(--color-brand-bg)]/50">
-          <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="32 16" />
-          </svg>
-          <span>{status === '研发中' ? '正在积极开发中，欢迎提前交流需求' : '即将上线，欢迎预约内测体验'}</span>
+        {/* 研发中/内测中 提示 */}
+        {(status === '研发中' || status === '内测中') && (
+          <div className="flex items-center gap-1.5 text-xs text-[var(--color-brand)]/70 mb-4 px-3 py-2 rounded-lg bg-[var(--color-brand-bg)]/50">
+            <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="32 16" />
+            </svg>
+            <span>{status === '研发中' ? '正在积极开发中，欢迎提前交流需求' : '即将上线，欢迎预约内测体验'}</span>
+          </div>
+        )}
+
+        {/* CTA 链接 */}
+        <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand)] transition-colors min-h-[44px] mt-auto">
+          <span>{status === '研发中' ? '了解规划' : status === '内测中' ? '申请内测' : '了解更多'}</span>
+          <ArrowUpRight className="w-4 h-4" strokeWidth={2} />
         </div>
-      )}
-
-      {/* CTA 链接 */}
-      <div className="flex items-center gap-1.5 text-sm font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand)] transition-colors min-h-[44px] mt-auto">
-        <span>{status === '研发中' ? '了解规划' : status === '内测中' ? '申请内测' : '了解更多'}</span>
-        <ArrowUpRight className="w-4 h-4" strokeWidth={2} />
-      </div>
-    </InkCard>
+      </Card>
+    </a>
   );
 }