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/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>
   );
-}
+}