feat(content): deepen Bain differentiation across product, solution and service pages

- Replace decorative numbering and side-stripe borders with structured copy
- Add scenario positioning, capability metrics and verifiable dimensions
- Refine service timelines, deliverables and case-study narratives
- Update content constants to support CMS seeding

src/app/(marketing)/about/about-content-v4.tsx

@@ -55,7 +55,7 @@ function HeroSection({ data }: { data: AboutData }) {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
+            className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
           >
             {data.heroSubtitle || ''}
           </motion.div>

src/app/(marketing)/cases/[slug]/client.tsx

@@ -41,6 +41,11 @@ export function CaseDetailClient({ item }: CaseDetailClientProps) {
           role: `${data.testimonial.role}，${data.testimonial.company}`,
         }
       : undefined,
+    projectDuration: data.projectDuration,
+    departments: data.departments,
+    dataScale: data.dataScale,
+    businessProblem: data.businessProblem,
+    verified: data.verified,
   };
 
   return (

src/app/(marketing)/contact/contact-content-v3.tsx

@@ -220,7 +220,7 @@ function ContactFormContent({ data }: { data: ContactData }) {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-              className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
+              className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
             >
               {data.heroSubtitle || ''}
             </motion.div>

src/app/(marketing)/home-content-v13.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useRef, useState } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
 
 import { Badge } from '@/components/ui/badge';
@@ -57,12 +57,29 @@ function MagneticButton({ children, href, variant = 'primary', className }: { ch
 
 function HeroSection({ heroData }: { heroData?: Record<string, any> | null }) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ['start start', 'end start'],
-  });
-  const y = useTransform(scrollYProgress, [0, 1], [0, 160]);
-  const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.15]);
+  const scrollProgress = useMotionValue(0);
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+
+    const updateProgress = () => {
+      const rect = element.getBoundingClientRect();
+      const raw = rect.height > 0 ? -rect.top / rect.height : 0;
+      scrollProgress.set(Math.max(0, Math.min(1, raw)));
+    };
+
+    updateProgress();
+    window.addEventListener('scroll', updateProgress, { passive: true });
+    window.addEventListener('resize', updateProgress);
+    return () => {
+      window.removeEventListener('scroll', updateProgress);
+      window.removeEventListener('resize', updateProgress);
+    };
+  }, [scrollProgress]);
+
+  const y = useTransform(scrollProgress, [0, 1], [0, 160]);
+  const opacity = useTransform(scrollProgress, [0, 0.7], [1, 0.15]);
 
   const headingTop = heroData?.headingTop || '';
   const headingBottom = heroData?.headingBottom || '';
@@ -376,6 +393,51 @@ function ServicesSection({ services }: { services?: Record<string, any>[] }) {
   );
 }
 
+function TrustSection() {
+  const items = [
+    { title: '私有化部署', desc: '核心数据不出境，满足金融、医疗、政务合规要求' },
+    { title: '资深团队', desc: '平均 10 年以上企业级系统交付经验' },
+    { title: '全栈自研', desc: '从底层架构到前端交互，核心技术自主可控' },
+    { title: '长期陪跑', desc: '上线不是终点，持续迭代陪伴业务成长' },
+  ];
+
+  return (
+    <section className="relative py-20 sm:py-24 md:py-28 lg:py-32 overflow-hidden bg-bg-secondary">
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
+        <ScrollReveal className="mb-12 sm:mb-16 md: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.15em] font-medium text-brand">
+              值得信赖
+            </span>
+          </div>
+          <h2 className="font-sans text-xl sm:text-2xl md:text-3xl lg:text-4xl font-black text-ink tracking-tight leading-tight">
+            选择我们的理由
+          </h2>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
+          {items.map((item, i) => (
+            <StaggerReveal key={item.title} staggerDelay={0.05}>
+              <div className="bg-bg-secondary p-8 sm:p-10 h-full transition-all duration-300 hover:bg-white group">
+                <div className="flex items-start gap-4">
+                  <div className="w-8 h-8 flex items-center justify-center bg-brand/10 text-brand font-bold text-sm shrink-0 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
+                    {String(i + 1).padStart(2, '0')}
+                  </div>
+                  <div>
+                    <h3 className="text-base font-bold text-ink mb-2">{item.title}</h3>
+                    <p className="text-sm text-text-secondary leading-relaxed">{item.desc}</p>
+                  </div>
+                </div>
+              </div>
+            </StaggerReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function CasesSection({ cases }: { cases?: Record<string, any>[] }) {
   const hasValidData = cases?.length && cases[0]?.metrics;
   const CASES = hasValidData ? cases : [];
@@ -533,19 +595,23 @@ function CasesSection({ cases }: { cases?: Record<string, any>[] }) {
                     </div>
                   </div>
 
-                  <div className="px-10 sm:px-12 lg:px-16 pb-12 lg:pb-16 pt-10 border-t border-dark-border">
-                    <div className="flex items-start gap-4">
-                      <Quote className="w-8 h-8 shrink-0 mt-0.5 text-dark-text-muted" />
-                      <div>
-                        <p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
-                          &ldquo;{caseItem.quote}&rdquo;
-                        </p>
-                        <p className="text-xs text-dark-text-muted">
-                          — {caseItem.author}，{caseItem.company}
-                        </p>
+                  {caseItem.testimonial?.quote && (
+                    <div className="px-10 sm:px-12 lg:px-16 pb-12 lg:pb-16 pt-10 border-t border-dark-border">
+                      <div className="flex items-start gap-4">
+                        <Quote className="w-8 h-8 shrink-0 mt-0.5 text-dark-text-muted" />
+                        <div>
+                          <p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
+                            &ldquo;{caseItem.testimonial.quote}&rdquo;
+                          </p>
+                          <p className="text-xs text-dark-text-muted">
+                            — {caseItem.testimonial.author}
+                            {caseItem.testimonial.role && `，${caseItem.testimonial.role}`}
+                            {caseItem.testimonial.company && ` · ${caseItem.testimonial.company}`}
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  )}
                 </div>
               </article>
             </ScrollReveal>
@@ -663,6 +729,7 @@ export default function HomeContentV13({ services, cases, stats, heroData }: {
     <main>
       <HeroSection heroData={heroData} />
       <ServicesSection services={services} />
+      <TrustSection />
       <CasesSection cases={cases} />
       <ApproachStrip stats={stats} />
       <CTASection heroData={heroData} />

src/app/(marketing)/products/products-content-v3.tsx

@@ -3,22 +3,21 @@
 import { useRef, useState, useEffect } from 'react';
 import { motion, useInView } from 'framer-motion';
 import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
-import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
+import { EASE_OUT } from '@/components/ui/page-decoration';
 import { Button } from '@/components/ui/button';
-import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText, CheckCircle2 } from 'lucide-react';
+import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText } from 'lucide-react';
 import type { Product } from '@/lib/constants/products';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { cn } from '@/lib/utils';
 
 const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
 
 const PRODUCT_ICONS: Record<string, React.ReactNode> = {
-  '睿新ERP管理系统': <Package className="w-7 h-7" />,
-  '睿视商业智能分析平台': <BarChart3 className="w-7 h-7" />,
-  '睿新客户关系管理系统': <Users className="w-7 h-7" />,
-  '睿新协同办公平台': <Settings className="w-7 h-7" />,
-  '睿新内容管理系统': <FileText className="w-7 h-7" />,
-  '睿新供应链数字化平台': <Cpu className="w-7 h-7" />,
+  '睿新ERP管理系统': <Package className="w-5 h-5" />,
+  '睿新商业智能分析平台': <BarChart3 className="w-5 h-5" />,
+  '睿新客户关系管理系统': <Users className="w-5 h-5" />,
+  '睿新协同办公平台': <Settings className="w-5 h-5" />,
+  '睿新内容管理系统': <FileText className="w-5 h-5" />,
+  '睿新供应链数字化平台': <Cpu className="w-5 h-5" />,
 };
 
 function useCountUp(target: number, start: boolean, duration: number = 2000) {
@@ -80,25 +79,16 @@ function HeroSection() {
     <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 md:py-32 lg:py-40">
         <div className="max-w-4xl">
-          <motion.div
-            initial={{ opacity: 0, x: -50 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 1.1, ease: EASE_OUT }}
-            className="mb-10"
-          >
-            <SectionLabel>Product Matrix</SectionLabel>
-          </motion.div>
-
           <motion.h1
             initial={{ opacity: 0, y: 70 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
             className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-ink leading-[0.92] tracking-tighter mb-8 sm:mb-10 md:mb-12"
           >
-            <div className="block">覆盖企业数字化</div>
+            <div className="block">用自研产品组合</div>
             <div className="block mt-5">
               <span className="relative inline-block">
-                <span className="text-brand font-extrabold">全场景的</span>
+                <span className="text-brand font-extrabold">支撑企业</span>
                 <motion.span
                   className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
                   style={{ transformOrigin: 'left' }}
@@ -108,7 +98,7 @@ function HeroSection() {
                 />
               </span>
             </div>
-            <div className="block mt-5">产品矩阵</div>
+            <div className="block mt-5">核心系统升级</div>
           </motion.h1>
 
           <motion.p
@@ -154,90 +144,130 @@ function HeroSection() {
   );
 }
 
-function ProductCard({ product, index }: { product: Product; index: number }) {
-  const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-7 h-7" />;
-  
-  const colorMap: Record<string, { color: string; bg: string; border: string }> = {
-    enterprise: {
-      color: '#C41E3A',
-      bg: 'bg-brand-soft',
-      border: 'group-hover:border-brand/30',
-    },
-    specialized: {
-      color: '#3b82f6',
-      bg: 'bg-accent-blue-soft',
-      border: 'group-hover:border-accent-blue/30',
-    },
-  };
-  
-  const colors = colorMap[product.categoryId] ?? colorMap.enterprise!;
+function ProductCard({ product }: { product: Product }) {
+  const bundleLabel = product.bundle === 'enterprise' ? '企业套装' : '专业产品';
 
   return (
-    <a
+    <motion.a
       href={`/products/${product.id}`}
-      className="group relative block transition-all duration-600 hover:bg-bg-secondary overflow-hidden bg-white border border-border-primary hover:border-brand/30"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-60px' }}
+      transition={{ duration: 0.6, ease: EASE_OUT }}
+      className="group block overflow-hidden border border-border-primary hover:border-border-secondary bg-white hover:bg-bg-secondary transition-all duration-500 flex flex-col h-full"
     >
-      <div
-        className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
-        style={{ backgroundColor: colors.color }}
-      />
-
-      <div className="relative z-10 p-8 lg:p-10">
-        <div className="flex items-start justify-between mb-8">
-          <motion.div
-            whileHover={{ scale: 1.08, y: -3 }}
-            transition={EASE_SPRING}
-            className={cn('w-14 h-14 flex items-center justify-center rounded-2xl', colors.bg)}
-            style={{ color: colors.color }}
-          >
-            {productIcon}
-          </motion.div>
-          <span className="text-7xl font-bold text-text-muted/10 group-hover:text-text-muted/20 transition-all duration-500 tracking-tighter leading-none">
-            {String(index + 1).padStart(2, '0')}
-          </span>
+      <div className="p-6 sm:p-7 lg:p-8 flex flex-col flex-1">
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <div className="text-xs text-text-muted mb-1">{bundleLabel}</div>
+            <h3 className="text-lg font-bold text-text-primary">{product.title}</h3>
+          </div>
+          <span className="px-2 py-1 text-xs bg-brand/10 text-brand">{bundleLabel}</span>
         </div>
 
-        <div className="flex flex-wrap gap-2 mb-6">
-          {product.tags.slice(0, 2).map(tag => (
-            <span key={tag} className="px-2.5 py-1 text-xs text-text-muted border border-border-primary group-hover:border-border-secondary group-hover:text-text-secondary transition-all duration-300">
-              {tag}
-            </span>
-          ))}
-        </div>
-
-        <h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 group-hover:translate-x-1.5 transition-transform duration-500">
-          {product.title}
-        </h3>
-
-        <p className="text-text-secondary leading-relaxed mb-8 text-[15px]">
-          {product.description}
+        <p className="text-sm text-text-secondary mb-4 leading-relaxed flex-1">
+          {product.scenario || product.description}
         </p>
 
-        <div className="flex flex-wrap gap-2 mb-8">
-          {product.features.slice(0, 3).map((feature) => (
-            <span key={feature} className="flex items-center gap-1.5 text-xs text-text-muted">
-              <CheckCircle2 className="w-3.5 h-3.5 text-brand/70" />
-              {feature}
-            </span>
+        <div className="grid grid-cols-3 gap-2 mb-4">
+          {product.metrics?.map((m) => (
+            <div key={m.label} className="text-center p-2 bg-bg-secondary">
+              <div className="text-lg font-bold text-text-primary">{m.value}</div>
+              <div className="text-xs text-text-muted">{m.label}</div>
+            </div>
           ))}
         </div>
 
-        <motion.div
-          className="inline-flex items-center gap-2.5 text-sm font-bold"
-          style={{ color: colors.color }}
-          whileHover={{ x: 6 }}
-          transition={EASE_SPRING}
-        >
-          <span>了解详情</span>
-          <ArrowRight className="w-4 h-4" />
-        </motion.div>
+        <div className="flex flex-wrap gap-2">
+          {product.capabilities?.map((cap) => (
+            <span key={cap} className="px-2 py-1 text-xs border border-border-primary text-text-secondary">
+              {cap}
+            </span>
+          ))}
+        </div>
       </div>
-    </a>
+    </motion.a>
+  );
+}
+
+function BundleOverview({ products }: { products: Product[] }) {
+  const enterpriseProducts = products.filter((p) => p.bundle === 'enterprise');
+  const standaloneProducts = products.filter((p) => p.bundle === 'standalone');
+
+  return (
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
+      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
+
+      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
+        <ScrollReveal className="max-w-3xl mb-12 sm:mb-16 md:mb-20">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-6">
+            两套产品体系，<span className="text-brand">覆盖不同场景</span>
+          </h2>
+          <p className="text-lg text-text-secondary leading-relaxed">
+            企业套装以组合形式解决核心管理问题，专业产品聚焦独立场景深度赋能。
+          </p>
+        </ScrollReveal>
+
+        <div className="grid lg:grid-cols-2 gap-px bg-border-primary">
+          <div className="bg-bg-secondary p-8 sm:p-10 lg:p-12">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
+                <Package className="w-5 h-5" />
+              </div>
+              <h3 className="text-xl font-bold text-ink">企业套装</h3>
+              <span className="px-2 py-1 text-xs bg-brand/10 text-brand">6 款产品</span>
+            </div>
+            <p className="text-sm text-text-secondary leading-relaxed mb-6">
+              覆盖企业数字化核心场景，产品之间数据互通、能力互补，常以组合形式出现在行业解决方案中。
+            </p>
+            <div className="space-y-3">
+              {enterpriseProducts.map((p) => (
+                <div key={p.id} className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-white border border-border-primary flex items-center justify-center text-text-secondary">
+                    {PRODUCT_ICONS[p.title] || <Package className="w-4 h-4" />}
+                  </div>
+                  <div>
+                    <div className="text-sm font-medium text-ink">{p.title}</div>
+                    <div className="text-xs text-text-muted">{p.scenario}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-white p-8 sm:p-10 lg:p-12">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-xl bg-accent-blue-soft flex items-center justify-center text-accent-blue">
+                <Cpu className="w-5 h-5" />
+              </div>
+              <h3 className="text-xl font-bold text-ink">专业产品</h3>
+              <span className="px-2 py-1 text-xs bg-accent-blue/10 text-accent-blue">独立部署</span>
+            </div>
+            <p className="text-sm text-text-secondary leading-relaxed mb-6">
+              聚焦特定领域的高复杂度需求，以独立产品形态提供专业能力，满足安全与合规的严苛要求。
+            </p>
+            <div className="space-y-3">
+              {standaloneProducts.map((p) => (
+                <div key={p.id} className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-bg-secondary border border-border-primary flex items-center justify-center text-text-secondary">
+                    {PRODUCT_ICONS[p.title] || <Cpu className="w-4 h-4" />}
+                  </div>
+                  <div>
+                    <div className="text-sm font-medium text-ink">{p.title}</div>
+                    <div className="text-xs text-text-muted">{p.scenario}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }
 
 function EnterpriseProductsSection({ products }: { products: Product[] }) {
-  const enterpriseProducts = products.filter(p => p.categoryId === 'enterprise');
+  const enterpriseProducts = products.filter((p) => p.bundle === 'enterprise');
 
   return (
     <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
@@ -251,12 +281,9 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
               <div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
                 <Package className="w-8 h-8" />
               </div>
-              <div>
-                <SectionLabel>Enterprise Suite</SectionLabel>
-                <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
-                  企业套装
-                </h2>
-              </div>
+              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
+                企业套装
+              </h2>
             </div>
             <p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
               覆盖企业管理核心场景，从ERP到协同办公，六款产品互为补充，形成完整的企业数字化底座。
@@ -269,8 +296,8 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
           staggerDelay={0.08}
           delayChildren={0.05}
         >
-          {enterpriseProducts.map((product, index) => (
-            <ProductCard key={product.id} product={product} index={index} />
+          {enterpriseProducts.map((product) => (
+            <ProductCard key={product.id} product={product} />
           ))}
         </StaggerReveal>
       </div>
@@ -279,7 +306,7 @@ function EnterpriseProductsSection({ products }: { products: Product[] }) {
 }
 
 function SpecializedProductsSection({ products }: { products: Product[] }) {
-  const specializedProducts = products.filter(p => p.categoryId === 'specialized');
+  const specializedProducts = products.filter((p) => p.bundle === 'standalone');
 
   if (specializedProducts.length === 0) return null;
 
@@ -295,12 +322,9 @@ function SpecializedProductsSection({ products }: { products: Product[] }) {
               <div className="w-16 h-16 rounded-2xl bg-accent-blue-soft flex items-center justify-center text-accent-blue">
                 <Cpu className="w-8 h-8" />
               </div>
-              <div>
-                <SectionLabel>Specialized Products</SectionLabel>
-                <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
-                  专业产品
-                </h2>
-              </div>
+              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
+                专业产品
+              </h2>
             </div>
             <p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
               聚焦特定领域的深度产品，以独立部署和专业能力满足企业的专项需求。
@@ -313,8 +337,8 @@ function SpecializedProductsSection({ products }: { products: Product[] }) {
           staggerDelay={0.08}
           delayChildren={0.05}
         >
-          {specializedProducts.map((product, index) => (
-            <ProductCard key={product.id} product={product} index={index} />
+          {specializedProducts.map((product) => (
+            <ProductCard key={product.id} product={product} />
           ))}
         </StaggerReveal>
       </div>
@@ -337,15 +361,6 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
 
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
         <ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
-          <div className="flex justify-center mb-7">
-            <div className="flex items-center gap-5">
-              <div className="w-14 h-px bg-brand" />
-              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
-                Recommended Combos
-              </span>
-              <div className="w-14 h-px bg-brand" />
-            </div>
-          </div>
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
             推荐产品组合
           </h2>
@@ -361,18 +376,16 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
         >
           {SUITE_COMBOS.map((combo, idx) => {
             const comboProducts = combo.products
-              .map(pid => products.find(p => p.id === pid))
+              .map((pid) => products.find((p) => p.id === pid))
               .filter(Boolean);
 
             return (
               <a
                 key={idx}
                 href="/contact"
-                className="group relative p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
+                className="group p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
               >
-                <div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
-
-                <div className="relative z-10">
+                <div>
                   <div className="flex items-center gap-4 mb-6">
                     <div className="flex -space-x-3">
                       {comboProducts.map((p, pIdx) => p && (
@@ -424,16 +437,6 @@ function CTASection() {
 
       <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
         <ScrollReveal className="text-center max-w-3xl mx-auto">
-          <div className="flex justify-center mb-7">
-            <div className="flex items-center gap-5">
-              <div className="w-14 h-px bg-brand" />
-              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
-                Get Started
-              </span>
-              <div className="w-14 h-px bg-brand" />
-            </div>
-          </div>
-
           <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6 sm:mb-8">
             找到适合你的<br />
             <span className="text-brand">数字化方案</span>
@@ -467,6 +470,7 @@ export default function ProductsContentV3({ products: productsProp }: { products
   return (
     <main>
       <HeroSection />
+      <BundleOverview products={products} />
       <EnterpriseProductsSection products={products} />
       <SpecializedProductsSection products={products} />
       <SuiteCombosSection products={products} />

src/app/(marketing)/services/service-detail-content-v3.tsx

@@ -469,14 +469,12 @@ function RelatedServicesSection({ currentId }: { currentId: string }) {
 
         <div className="grid md:grid-cols-2 gap-6">
           <StaggerReveal staggerDelay={0.1}>
-            {related.map((s, i) => (
+            {related.map((s) => (
               <ServiceCard
                 key={s.id}
-                number={String(i + 1).padStart(2, '0')}
                 title={s.title}
                 description={s.desc}
                 href={`/services/${s.id}`}
-                color="brand"
               />
             ))}
           </StaggerReveal>

src/app/(marketing)/services/service-detail-content-v4.tsx

@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion';
 import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
+import { ScrollProgress } from '@/components/ui/scroll-progress';
 import type { Service, CaseStudy } from '@/lib/constants/services';
 
 const EASE_OUT = [0.22, 1, 0.36, 1] as const;
@@ -15,20 +16,11 @@ function DetailHero({ service }: { service: Service }) {
     <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
         <div className="max-w-4xl">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
-          >
-            Professional Services
-          </motion.div>
-
           <motion.h1
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
-            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
           >
             <div className="block">{service.title}</div>
             <div className="block mt-4 sm:mt-6">
@@ -123,9 +115,6 @@ function OverviewSection({ service }: { service: Service }) {
             transition={{ duration: 0.8, ease: EASE_OUT }}
             className="lg:col-span-5"
           >
-            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-              Overview
-            </div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
               解决什么问题
             </h2>
@@ -170,9 +159,6 @@ function FeaturesSection({ service }: { service: Service }) {
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Capabilities
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             核心能力
           </h2>
@@ -193,10 +179,8 @@ function FeaturesSection({ service }: { service: Service }) {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: '-60px' }}
                 transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
-                className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white"
+                className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white"
               >
-                <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
-
                 <div className="relative z-10">
                   <div className="text-3xl mb-6">{icon}</div>
                   <h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
@@ -231,9 +215,6 @@ function ProcessSection({ service }: { service: Service }) {
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Process
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             服务流程
           </h2>
@@ -252,13 +233,12 @@ function ProcessSection({ service }: { service: Service }) {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: '-60px' }}
                 transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
-                className="relative group p-6 sm:p-8 bg-white"
+                className="relative group p-6 sm:p-8 bg-white hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
               >
-                <div className={`text-4xl sm:text-5xl font-black font-mono mb-6 ${
-                  index === 0 ? 'text-brand' : 'text-ink/[0.06]'
-                }`}>
-                  0{index + 1}
-                </div>
+                <div
+                  className="w-2 h-2 rounded-full mb-6"
+                  style={{ backgroundColor: index === 0 ? '#C41E3A' : 'var(--color-border-primary)' }}
+                />
                 <h3 className="text-lg font-bold mb-2 text-ink group-hover:text-brand transition-colors duration-300">
                   {desc ? title : step.slice(0, 6)}
                 </h3>
@@ -287,9 +267,6 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Case Studies
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             真实案例，<br className="sm:hidden" />可衡量的成果
           </h2>
@@ -304,13 +281,12 @@ function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] })
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: '-60px' }}
               transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
-              className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
+              className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
             >
-              <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
 
               <div className="relative z-10">
                 <div className="flex items-center gap-3 mb-5">
-                  <span className="text-[11px] tracking-[0.25em] uppercase font-medium text-brand">
+                  <span className="text-xs font-medium text-brand">
                     {cs.industry}
                   </span>
                   <span className="text-border-primary">•</span>
@@ -383,6 +359,7 @@ function CTASection() {
 export default function ServiceDetailContentV4({ service }: { service: Service }) {
   return (
     <main className="min-h-screen bg-white text-ink">
+      <ScrollProgress />
       <DetailHero service={service} />
       <OverviewSection service={service} />
       <FeaturesSection service={service} />

src/app/(marketing)/services/services-content-v3.tsx

@@ -1,48 +1,53 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowUpRight, Code, BarChart3, Lightbulb, Puzzle, type LucideIcon } from 'lucide-react';
+import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
 import type { Service } from '@/lib/constants/services';
 
 const EASE_OUT = [0.22, 1, 0.36, 1] as const;
 
-/** Icon name-to-component mapping for CMS string-based icons */
-const ICON_MAP: Record<string, LucideIcon> = {
-  Lightbulb,
-  Code,
-  BarChart3,
-  Puzzle,
-};
-
 /** UI metadata keyed by service ID — presentation-only fields not stored in CMS */
-const SERVICE_UI_META: Record<string, { subtitle: string; metrics: { value: string; label: string }[] }> = {
-  consulting: { subtitle: 'Strategy Consulting', metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
-  software: { subtitle: 'Enterprise Software', metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
-  data: { subtitle: 'Technology Services', metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
-  solutions: { subtitle: 'AI Empowerment', metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
+const SERVICE_UI_META: Record<string, { metrics: { value: string; label: string }[] }> = {
+  consulting: { metrics: [{ value: '90%+', label: '方案落地率' }, { value: '50+', label: '咨询项目' }] },
+  software: { metrics: [{ value: '95%+', label: '准时交付率' }, { value: 'A+', label: '代码质量' }] },
+  data: { metrics: [{ value: '100+', label: '技术方案' }, { value: '24/7', label: '运维支持' }] },
+  solutions: { metrics: [{ value: '30+', label: 'AI 场景' }, { value: '85%', label: '效率提升' }] },
 };
 
 function mapServicesToCards(services: Service[]) {
-  return services.map((svc, i) => {
+  return services.map((svc) => {
     const uiMeta = SERVICE_UI_META[svc.id];
     return {
-      number: String(i + 1).padStart(2, '0'),
+      id: svc.id,
       title: svc.title,
-      subtitle: uiMeta?.subtitle ?? '',
-      desc: svc.description,
-      href: `/services/${svc.id}`,
-      icon: ICON_MAP[svc.icon] ?? Lightbulb,
-      highlights: svc.features?.slice(0, 4) ?? [],
+      description: svc.description,
+      capabilities: svc.capabilities?.slice(0, 4) ?? [],
       metrics: uiMeta?.metrics ?? [],
     };
   });
 }
 
 const SERVICE_PROCESS = [
-  { step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
-  { step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
-  { step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
-  { step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
+  {
+    phase: '需求分析',
+    duration: '2-3 周',
+    deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
+  },
+  {
+    phase: '方案设计',
+    duration: '4-6 周',
+    deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
+  },
+  {
+    phase: '敏捷交付',
+    duration: '3-6 个月',
+    deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
+  },
+  {
+    phase: '持续支持',
+    duration: '长期',
+    deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
+  },
 ];
 
 const SERVICE_MODES = [
@@ -68,20 +73,11 @@ function HeroSection() {
     <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
         <div className="max-w-4xl">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
-          >
-            Professional Services
-          </motion.div>
-
           <motion.h1
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
-            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
           >
             <div className="block">从规划到运维</div>
             <div className="block mt-4 sm:mt-6">
@@ -189,82 +185,56 @@ function ServicesGridSection({ services }: { services?: Service[] }) {
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Service Capabilities
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             四大核心服务，<br className="sm:hidden" />覆盖数字化全链路
           </h2>
         </motion.div>
 
         <div className="grid md:grid-cols-2 gap-px bg-border-primary">
-          {displayServices.map((service, i) => {
-            const Icon = service.icon;
-            return (
-              <motion.a
-                key={i}
-                href={service.href}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-60px' }}
-                transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
-                className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary bg-white border border-transparent hover:border-border-primary"
-              >
-                <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
+          {displayServices.map((service, i) => (
+            <motion.a
+              key={service.id}
+              href={`/services/${service.id}`}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-60px' }}
+              transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
+              className="group relative block p-8 sm:p-10 md:p-12 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-transparent hover:border-border-primary"
+            >
+              <div className="relative z-10">
+                <h3 className="text-xl sm:text-2xl font-bold text-ink group-hover:text-brand transition-colors duration-300 mb-3">
+                  {service.title}
+                </h3>
 
-                <div className="relative z-10">
-                  <div className="flex items-start justify-between mb-8">
-                    <div className={`w-12 h-12 flex items-center justify-center ${
-                      i === 0 ? 'text-brand' : 'text-text-secondary'
-                    }`}>
-                      <Icon className="w-6 h-6" strokeWidth={1.5} />
+                <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
+                  {service.description}
+                </p>
+
+                <ul className="space-y-2 mb-6">
+                  {service.capabilities.map((cap) => (
+                    <li key={cap} className="flex items-start gap-2 text-sm text-text-secondary">
+                      <CheckCircle2 className="w-4 h-4 text-brand shrink-0 mt-0.5" />
+                      {cap}
+                    </li>
+                  ))}
+                </ul>
+
+                <div className="flex gap-6 pt-5 border-t border-border-primary mb-6">
+                  {service.metrics.map((m) => (
+                    <div key={m.label}>
+                      <div className="text-xl font-bold text-ink">{m.value}</div>
+                      <div className="text-xs text-text-muted mt-1">{m.label}</div>
                     </div>
-                    <span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
-                      {service.number}
-                    </span>
-                  </div>
-
-                  <div className="mb-6">
-                    <div className="text-[11px] tracking-[0.3em] uppercase text-text-muted mb-3 font-semibold">
-                      {service.subtitle}
-                    </div>
-                    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300">
-                      {service.title}
-                    </h3>
-                  </div>
-
-                  <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
-                    {service.desc}
-                  </p>
-
-                  <div className="flex flex-wrap gap-2 mb-6">
-                    {service.highlights.map((h, j) => (
-                      <span
-                        key={j}
-                        className="px-3 py-1 text-xs text-text-secondary border border-border-primary group-hover:border-ink/20 group-hover:text-ink transition-all duration-300 font-medium"
-                      >
-                        {h}
-                      </span>
-                    ))}
-                  </div>
-
-                  <div className="flex items-center gap-8 pt-5 border-t border-border-primary mb-6">
-                    {service.metrics.map((m, j) => (
-                      <div key={j}>
-                        <div className="text-xl font-bold text-ink">{m.value}</div>
-                        <div className="text-xs text-text-muted mt-1">{m.label}</div>
-                      </div>
-                    ))}
-                  </div>
-
-                  <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
-                    <span>了解详情</span>
-                    <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
-                  </div>
+                  ))}
                 </div>
-              </motion.a>
-            );
-          })}
+
+                <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
+                  <span>了解详情</span>
+                  <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
+                </div>
+              </div>
+            </motion.a>
+          ))}
         </div>
       </div>
     </section>
@@ -284,33 +254,26 @@ function ProcessModesSection() {
             transition={{ duration: 0.8, ease: EASE_OUT }}
             className="lg:col-span-7"
           >
-            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-              Our Process
-            </div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
               我们的做事方式
             </h2>
 
-            <div className="space-y-0">
-              {SERVICE_PROCESS.map((item, idx) => (
-                <div
-                  key={item.step}
-                  className="relative pl-8 sm:pl-12 pb-8 sm:pb-10 last:pb-0"
-                >
-                  <div className="absolute left-0 top-3 bottom-0 w-px bg-border-primary last:hidden" />
-                  <div className={`absolute left-0 top-3 w-2.5 h-2.5 rounded-full -translate-x-1/2 ${
-                    idx === 0 ? 'bg-brand' : 'bg-text-muted'
-                  }`} />
+            <div className="relative">
+              {SERVICE_PROCESS.map((step) => (
+                <div key={step.phase} className="relative pl-8 sm:pl-12 pb-10 sm:pb-12 last:pb-0">
+                  <div className="absolute left-0 top-1.5 bottom-0 w-px bg-border-primary last:hidden" />
+                  <div className="absolute left-0 top-1.5 w-2.5 h-2.5 rounded-full -translate-x-1/2 bg-brand" />
 
-                  <div className="flex items-start gap-6">
-                    <div className="text-2xl sm:text-3xl font-black text-ink/[0.06] font-mono shrink-0 leading-none w-14">
-                      {item.step}
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg sm:text-xl font-bold text-ink mb-2">{item.title}</h3>
-                      <p className="text-text-secondary leading-relaxed text-sm sm:text-base">{item.desc}</p>
-                    </div>
+                  <div className="flex items-center gap-3 mb-3">
+                    <h3 className="text-lg sm:text-xl font-bold text-ink">{step.phase}</h3>
+                    <span className="text-xs text-text-muted">{step.duration}</span>
                   </div>
+                  <div className="text-xs text-text-muted mb-2">阶段产出</div>
+                  <ul className="space-y-1">
+                    {step.deliverables.map((d) => (
+                      <li key={d} className="text-sm text-text-secondary">{d}</li>
+                    ))}
+                  </ul>
                 </div>
               ))}
             </div>
@@ -324,9 +287,6 @@ function ProcessModesSection() {
             transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
             className="lg:col-span-5"
           >
-            <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-              Engagement Models
-            </div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-ink tracking-tight leading-[0.95] mb-10 sm:mb-14">
               合作方式
             </h2>
@@ -335,10 +295,8 @@ function ProcessModesSection() {
               {SERVICE_MODES.map((mode) => (
                 <div
                   key={mode.title}
-                  className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-ink/20 transition-all duration-300"
+                  className="group relative p-6 sm:p-7 border border-border-primary bg-white hover:bg-bg-secondary hover:border-brand/20 hover:shadow-md transition-all duration-300"
                 >
-                  <div className="absolute top-0 left-0 w-1 h-0 bg-brand group-hover:h-full transition-all duration-500" />
-
                   <div className="relative z-10">
                     <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors duration-300">
                       {mode.title}

src/app/(marketing)/solutions/solutions-content-v3.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Sparkles, Shield, Truck, type LucideIcon } from 'lucide-react';
+import { ArrowUpRight, Factory, ShoppingCart, Heart, GraduationCap, Shield, Truck, type LucideIcon } from 'lucide-react';
 import { type Solution } from '@/lib/constants/solutions';
 import type { Product } from '@/lib/constants/products';
 
@@ -21,20 +21,11 @@ function HeroSection() {
     <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
         <div className="max-w-4xl">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
-            className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
-          >
-            Industry Solutions
-          </motion.div>
-
           <motion.h1
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
-            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
           >
             <div className="block">深耕行业场景的</div>
             <div className="block mt-4 sm:mt-6">
@@ -59,9 +50,9 @@ function HeroSection() {
             transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
             className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
           >
-            端到端交付，推荐套装组合 + 配套服务包。
+            端到端交付可量化的业务成果。
             <br className="hidden sm:block" />
-            基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业量身定制最佳实践。
+            基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
           </motion.p>
 
           <motion.div
@@ -119,6 +110,9 @@ function HeroSection() {
 function SolutionCard({ solution, index, products }: { solution: Solution; index: number; products?: Product[] }) {
   const productLookup = products ?? [];
   const Icon = INDUSTRY_ICONS[solution.industry] || Factory;
+  const recommendedProductNames = (solution.recommendedProducts ?? [])
+    .map((pid) => productLookup.find((p) => p.id === pid)?.title)
+    .filter(Boolean) as string[];
 
   return (
     <motion.a
@@ -127,69 +121,41 @@ function SolutionCard({ solution, index, products }: { solution: Solution; index
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: '-60px' }}
       transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
-      className="group relative block transition-all duration-500 hover:bg-bg-secondary bg-white border border-border-primary hover:border-ink/20"
+      className="group relative block transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white border border-border-primary hover:border-brand/20"
     >
-      <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-500 origin-top bg-brand" />
-
       <div className="relative z-10 p-8 sm:p-10 md:p-12">
-        <div className="flex items-start justify-between mb-8">
-          <div className="w-12 h-12 flex items-center justify-center text-text-secondary group-hover:text-brand transition-colors duration-300">
-            <Icon className="w-6 h-6" strokeWidth={1.5} />
-          </div>
-          <span className="text-5xl sm:text-6xl font-black text-ink/[0.04] tracking-tighter leading-none">
-            {String(index + 1).padStart(2, '0')}
-          </span>
-        </div>
-
-        <div className="mb-6">
-          <span className="inline-block px-3 py-1 text-[11px] font-bold mb-4 text-brand border border-brand/20 bg-brand/[0.05]">
+        <div className="flex items-center gap-3 mb-6">
+          <Icon className="w-5 h-5 text-text-muted" strokeWidth={1.5} />
+          <h3 className="text-lg font-bold text-text-primary">
             {solution.industry}
-          </span>
-          <div className="text-text-muted text-sm tracking-widest uppercase mb-2">
-            {solution.subtitle}
-          </div>
-          <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-ink group-hover:text-brand transition-colors duration-300 leading-tight">
-            {solution.title}
           </h3>
         </div>
 
-        <p className="text-text-secondary leading-relaxed mb-6 text-[15px]">
-          {solution.description}
-        </p>
+        <div className="mb-4">
+          <div className="text-xs text-text-muted mb-2">核心痛点</div>
+          <p className="text-sm text-text-secondary leading-relaxed">
+            {solution.painPoints?.join('、')}
+          </p>
+        </div>
 
-        <div className="flex flex-col gap-2 mb-6">
-          {solution.challenges.slice(0, 2).map((challenge, idx) => (
-            <div key={idx} className="flex items-start gap-2.5 text-sm text-text-secondary">
-              <span className="text-brand mt-0.5 font-bold">•</span>
-              <span>{challenge}</span>
+        <div className="grid grid-cols-2 gap-2 mb-4">
+          {solution.outcomes?.map((o) => (
+            <div key={o.label} className="p-2 bg-bg-secondary">
+              <div className="text-base font-bold text-brand">{o.value}</div>
+              <div className="text-xs text-text-muted">{o.label}</div>
             </div>
           ))}
         </div>
 
-        <div className="pt-6 border-t border-border-primary">
-          <p className="text-[11px] text-text-muted mb-3 uppercase tracking-widest font-bold flex items-center gap-2">
-            <Sparkles className="w-3.5 h-3.5 text-brand" />
-            推荐产品组合
-          </p>
-          <div className="flex flex-wrap gap-2 mb-4">
-            {solution.suiteCombination.primaryProducts.map(pid => {
-              const prod = productLookup.find(p => p.id === pid);
-              return prod ? (
-                <span
-                  key={pid}
-                  className="px-3 py-1.5 text-xs font-medium text-ink bg-bg-secondary border border-border-primary"
-                >
-                  {prod.title.replace('睿新', '').replace('睿视 ', '')}
-                </span>
-              ) : null;
-            })}
-            <span className="px-3 py-1.5 text-xs font-bold text-brand border border-brand/20 bg-brand/[0.05]">
-              + 配套服务
-            </span>
+        <div className="pt-4 border-t border-border-primary">
+          <div className="text-xs text-text-muted mb-2">推荐产品组合</div>
+          <div className="flex flex-wrap gap-2">
+            {recommendedProductNames.map((name) => (
+              <span key={name} className="px-2 py-1 text-xs bg-bg-secondary text-text-secondary">
+                {name.replace('睿新', '')}
+              </span>
+            ))}
           </div>
-          <p className="text-sm text-text-muted leading-relaxed">
-            {solution.suiteCombination.rationale}
-          </p>
         </div>
 
         <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300 mt-6">
@@ -215,9 +181,6 @@ function SolutionsGridSection({ solutions, products }: { solutions: Solution[];
           transition={{ duration: 0.8, ease: EASE_OUT }}
           className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
         >
-          <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
-            Industry Expertise
-          </div>
           <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
             行业解决方案
           </h2>

src/app/globals.css

@@ -57,8 +57,8 @@ body {
   --color-text-secondary: #334155;
   --color-text-tertiary: #475569;
   --color-text-muted: #64748B;
-  --color-text-subtle: #94A3B8;
-  --color-text-placeholder: #94A3B8;
+  --color-text-subtle: #64748B;
+  --color-text-placeholder: #64748B;
   --color-text-hint: #CBD5E1;
   --color-text-inverse: #FFFFFF;