diff --git a/website/src/assets/images/Carousel/Points-1.png b/website/src/assets/images/Carousel/Points-1.png
deleted file mode 100644
index 0ca1a66..0000000
Binary files a/website/src/assets/images/Carousel/Points-1.png and /dev/null differ
diff --git a/website/src/assets/images/Carousel/Points-2.png b/website/src/assets/images/Carousel/Points-2.png
deleted file mode 100644
index c8ff710..0000000
Binary files a/website/src/assets/images/Carousel/Points-2.png and /dev/null differ
diff --git a/website/src/assets/images/Carousel/Points-3.png b/website/src/assets/images/Carousel/Points-3.png
deleted file mode 100644
index e22ee5f..0000000
Binary files a/website/src/assets/images/Carousel/Points-3.png and /dev/null differ
diff --git a/website/src/assets/images/Carousel/Points-4.png b/website/src/assets/images/Carousel/Points-4.png
deleted file mode 100644
index 8b2ff0a..0000000
Binary files a/website/src/assets/images/Carousel/Points-4.png and /dev/null differ
diff --git a/website/src/assets/images/Carousel/Points-5.png b/website/src/assets/images/Carousel/Points-5.png
deleted file mode 100644
index f8ef48b..0000000
Binary files a/website/src/assets/images/Carousel/Points-5.png and /dev/null differ
diff --git a/website/src/components/HeroSection.jsx b/website/src/components/HeroSection.jsx
index da42e24..3256734 100644
--- a/website/src/components/HeroSection.jsx
+++ b/website/src/components/HeroSection.jsx
@@ -199,23 +199,23 @@ export default function HeroSection() {
         {/* Heading */}
         <h1 className="text-center"
           style={{ animation: 'fadeInUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both' }}>
-          <span className="block text-5xl md:text-8xl lg:text-[110px] font-black hero-main-title">
+          <span className="block text-5xl md:text-8xl lg:text-[120px] font-black hero-main-title">
             智慧教育
           </span>
-          <span className="block mt-3 text-3xl md:text-[42px] lg:text-[48px] font-extralight hero-sec-title">
+          <span className="block mt-6 md:mt-15 text-3xl md:text-[42px] lg:text-[108px] font-extralight hero-sec-title">
             赋能未来
           </span>
         </h1>
 
         {/* Divider */}
-        <div className="flex items-center justify-center mt-2 mb-2"
+        <div className="flex items-center justify-center mt-6 mb-6"
           style={{ animation: 'fadeIn 1s ease-out 1s both' }}>
          
         </div>
 
         {/* Subtitle */}
         <div style={{ animation: 'fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both' }}>
-          <p className="text-lg md:text-xl max-w-xs mx-auto leading-[2] hero-desc">
+          <p className="text-lg lg:text-[38px] md:text-xl mx-auto leading-[2] hero-desc whitespace-nowrap">
             让校园管理更简单、更智能
           </p>
         </div>
diff --git a/website/src/components/RosePieChart.jsx b/website/src/components/RosePieChart.jsx
index e271a48..a6156c3 100644
--- a/website/src/components/RosePieChart.jsx
+++ b/website/src/components/RosePieChart.jsx
@@ -56,7 +56,7 @@ export default function RosePieChart({ onSelect, activeIndex, colors }) {
       },
       series: [{
         type: 'pie',
-        radius: ['20%', '68%'],
+        radius: ['25%', '75%'],
         center: ['50%', '50%'],
         startAngle: 90,
         padAngle: 3,
@@ -149,7 +149,7 @@ export default function RosePieChart({ onSelect, activeIndex, colors }) {
         transition: 'transform 1s cubic-bezier(0.4, 0, 0.2, 1)',
       }}
     >
-      <div ref={containerRef} className="w-full h-[520px] md:h-[600px]" />
+      <div ref={containerRef} className="w-full h-[600px] md:h-[720px]" />
     </div>
   );
 }
diff --git a/website/src/pages/Home.jsx b/website/src/pages/Home.jsx
index 60e8d38..0409674 100644
--- a/website/src/pages/Home.jsx
+++ b/website/src/pages/Home.jsx
@@ -4,9 +4,8 @@ import HeroSection from '../components/HeroSection'
 
 import ScrollReveal from '../components/ScrollReveal'
 import { products } from '../data/products'
-import RosePieChart from '../components/RosePieChart'
 import hunBg from '../assets/images/hun.jpg'
-import { ArrowRight, Play, Users, Building2 } from 'lucide-react'
+import { ArrowRight, Shield, Award } from 'lucide-react'
 import StatNumber from '../components/StatNumber'
 
 /* ─── Section 3: 数据亮点 ─── */
@@ -45,36 +44,37 @@ const capabilities = [
 
 /* ─── Section 7: 客户认可 ─── */
 const customerCards = [
+  {
+    type: 'featured',
+    icon: Award,
+    title: 'AAA级信用企业',
+    subtitle: '高新技术企业',
+    featured: true,
+  },
   {
     type: 'school',
-    icon: Building2,
-    title: 'ISO 9001 质量管理体系',
-
+    icon: Shield,
+    title: 'ISO 9001\n质量管理体系',
   },
   {
     type: 'video',
-    icon: Play,
-    title: 'ISO 14001 环境管理体系',
-
+    icon: Shield,
+    title: 'ISO 14001\n环境管理体系',
   },
   {
     type: 'satisfaction',
-    icon: Users,
-    title: 'ISO 45001 职业健康安全管理体系',
-
-  },
-
-  {
-    type: 'satisfaction',
-    icon: Users,
-    title: 'ISO 27001 信息安全管理体系',
-
+    icon: Shield,
+    title: 'ISO 45001\n职业健康安全管理',
   },
   {
     type: 'satisfaction',
-    icon: Users,
-    title: 'ISO 20000 信息技术服务管理体系',
-
+    icon: Shield,
+    title: 'ISO 27001\n信息安全管理体系',
+  },
+  {
+    type: 'satisfaction',
+    icon: Shield,
+    title: 'ISO 20000\n信息技术服务管理',
   },
 ]
 
@@ -131,23 +131,23 @@ export default function Home() {
 
       {/* ─── 4. 开放能力区（白底） ─── */}
       <section id="products" className="py-20 px-4 bg-white">
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-7xl mx-auto">
           <ScrollReveal className="text-center mb-14">
             <p className="text-[10px] xs:text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Core Capabilities</p>
             <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-7xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
-            <p className="text-[#64748b] text-sm xs:text-base md:text-lg lg:text-xl mx-auto md:whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
+            <p className="text-[#64748b] text-base xs:text-lg md:text-xl lg:text-2xl mx-auto md:whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
           </ScrollReveal>
 
           {/* Tab bar */}
           <ScrollReveal>
-            <div className="flex justify-center gap-1 mb-12 flex-wrap">
+            <div className="flex  justify-center  gap-1 mb-26">
               {products.map((p, i) => {
                 const isActive = activeCapability === i
                 return (
                 <button
                   key={p.slug}
                   onClick={() => setActiveCapability(i)}
-                  className="flex items-center gap-1.5 xs:gap-2 px-3 xs:px-4 sm:px-6 py-2 xs:py-3 rounded-lg text-xs xs:text-sm font-medium transition-all border"
+                  className="flex items-center gap-2 xs:gap-3 px-4 xs:px-5 sm:px-7 py-2.5 xs:py-3.5 rounded-lg text-base xs:text-lg sm:text-xl font-bold transition-all border"
                   style={{
                     color: isActive ? p.themeColor : '#475569',
                     borderColor: isActive ? p.themeColor : '#e5e7eb',
@@ -165,114 +165,82 @@ export default function Home() {
 
           {/* Left-right layout */}
           <ScrollReveal>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-12">
-              {/* Left: visual */}
-              <div className="flex justify-center">
-                <RosePieChart onSelect={setActiveCapability} activeIndex={activeCapability} colors={products.map(p => p.themeColor)} />
+            <div className="flex flex-col lg:flex-row gap-8 lg:gap-24 lg:items-center mb-32 mt-8">
+              {/* Left: visual — 产品图片 */}
+              <div className="w-full lg:w-1/2 lg:max-w-xl">
+                {products[activeCapability]?.heroImage && (
+                  <img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto" />
+                )}
               </div>
 
-              {/* Right: text */}
-              <div className="space-y-3">
-                {(activeCapability !== null ? [capabilities[activeCapability]] : capabilities).map((c, i) => {
-                  const idx = activeCapability !== null ? activeCapability : i
-                  const color = products[idx]?.themeColor || '#043b8f'
-                  const isActive = activeCapability === idx
-                  return (
-                    <div key={idx} className="relative rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden border"
-                      style={isActive
-                        ? {
-                            backgroundColor: '#fff',
-                            borderColor: color + '20',
-                            boxShadow: `0 12px 40px -8px ${color}18, 0 4px 12px ${color}0a, 0 0 0 1px ${color}10`,
-                            transform: 'scale(1.02)',
-                            zIndex: 10,
-                            padding: '2rem',
-                          }
-                        : {
-                            backgroundColor: '#fafbfc',
-                            borderColor: 'transparent',
-                            boxShadow: 'none',
-                            transform: 'scale(0.97)',
-                            zIndex: 1,
-                            padding: '1.25rem',
-                            opacity: 0.55,
-                          }}
-                      onClick={() => setActiveCapability(idx)}
-                      onMouseEnter={(e) => { if (!isActive) { e.currentTarget.style.opacity = '0.8'; e.currentTarget.style.transform = 'scale(0.98)'; }}}
-                      onMouseLeave={(e) => { if (!isActive) { e.currentTarget.style.opacity = '0.55'; e.currentTarget.style.transform = 'scale(0.97)'; }}}>
-                      {/* Left accent line */}
-                      <div className="absolute top-0 left-0 bottom-0 w-1.5 rounded-l-2xl transition-all duration-500"
-                        style={{ backgroundColor: isActive ? color : 'transparent' }} />
-                      {/* Decorative corner blobs */}
-                      <div className="absolute top-0 right-0 w-32 h-32 rounded-bl-full opacity-0 group-hover:opacity-100 transition-all duration-700"
-                        style={{ backgroundColor: color + '06' }} />
-                      {/* Icon + label row */}
-                      <div className="flex items-center gap-3 mb-3">
-                        <span className="shrink-0 flex items-center justify-center rounded-xl transition-all duration-300"
-                          style={isActive
-                            ? { backgroundColor: color, boxShadow: `0 4px 12px ${color}30`, width: '2.5rem', height: '2.5rem' }
-                            : { backgroundColor: color + '08', width: '2rem', height: '2rem' }}>
-                          {React.createElement(products[idx].icon, {
-                            className: isActive ? "w-5 h-5" : "w-4 h-4",
-                            style: { color: isActive ? '#fff' : color + '60' }
-                          })}
-                        </span>
-                        <div className="flex-1 flex items-center gap-3">
-                          <span className="text-[10px] font-bold tracking-[0.2em] uppercase transition-all duration-300 whitespace-nowrap"
-                            style={{ color: isActive ? color + '80' : '#c0c7cf' }}>Core Capability</span>
-                          <div className="h-px flex-1 transition-all duration-300"
-                            style={{ background: isActive ? `linear-gradient(90deg, ${color}20, ${color}05, transparent)` : 'transparent' }} />
-                        </div>
-                      </div>
-                      {/* Title */}
-                      <h3 className="transition-all duration-300 tracking-tight"
-                        style={isActive
-                          ? { fontSize: 'clamp(1.25rem, 2.5vw, 1.875rem)', fontWeight: 800, color: '#0f172a' }
-                          : { fontSize: 'clamp(0.875rem, 1.5vw, 1rem)', fontWeight: 600, color: '#94a3b8' }}>{c.title}</h3>
-                      {/* Subtitle - only active */}
-                      {isActive && (
-                        <p className="text-sm xs:text-base mt-1.5 font-semibold"
-                          style={{ color: color + 'aa' }}>{c.sub}</p>
-                      )}
-                      {/* Divider */}
-                      <div className="my-4 h-[3px] rounded-full transition-all duration-500"
-                        style={{
-                          width: isActive ? '2.5rem' : '1.5rem',
-                          backgroundColor: isActive ? color : '#e2e8f0',
-                          opacity: isActive ? 0.5 : 0.6
-                        }} />
-                      {/* Description - only active */}
-                      {isActive && (
-                        <>
-                          <p className="text-sm xs:text-base text-[#334155] leading-[1.9]">{c.desc}</p>
-                          {/* Tags */}
-                          {c.tip && (
-                            <div className="mt-5 flex flex-wrap gap-2">
-                              {c.tip.split('、').map((t, ti) => (
-                                <span key={ti} className="px-3 py-1.5 text-xs font-semibold rounded-full"
-                                  style={{ color: color, backgroundColor: color + '0f', border: `1px solid ${color}1a` }}>
-                                  {t}
-                                </span>
-                              ))}
-                            </div>
-                          )}
-                          {/* View more link */}
-                          <div className="mt-6 flex justify-end">
-                            <Link to={`/product/${c.slug}`}
-                              onClick={(e) => e.stopPropagation()}
-                              className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-300 hover:shadow-sm"
-                              style={{ color: '#fff', backgroundColor: color }}
-                              onMouseEnter={(e) => { e.target.style.filter = 'brightness(1.1)'; }}
-                              onMouseLeave={(e) => { e.target.style.filter = 'brightness(1)'; }}>
-                              查看全部
-                              <svg className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
-                            </Link>
-                          </div>
-                        </>
-                      )}
+              {/* Right: text — 折角卡片（与产品简介样式一致） */}
+              <div className="w-full lg:w-1/2 lg:max-w-xl">
+                <div className="relative bg-white rounded-2xl shadow-[0_4px_32px_-8px_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.04)]">
+                  {/* ── 右上折角 ── */}
+                  <div className="absolute top-0 right-0 w-[100px] h-[100px] md:w-[130px] md:h-[130px] overflow-hidden rounded-tr-2xl z-20 pointer-events-none">
+                    <div className="absolute top-0 right-0 w-full h-full"
+                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: 'rgba(0,0,0,0.1)', filter: 'blur(4px)', transform: 'translate(2px, 2px)' }} />
+                    <div className="absolute top-0 right-0 w-full h-full"
+                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: `linear-gradient(225deg, ${activeColor} 0%, ${activeColor}cc 100%)` }} />
+                    <div className="absolute top-0 right-0 w-full h-full"
+                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: `linear-gradient(225deg, rgba(255,255,255,0.28) 0%, transparent 50%)` }} />
+                    <div className="absolute top-0 right-0 w-full h-full"
+                      style={{ background: `linear-gradient(225deg, transparent 37%, rgba(0,0,0,0.07) 39%, rgba(0,0,0,0.03) 41%, transparent 43%)` }} />
+                    {React.createElement(products[activeCapability].icon, {
+                      className: "absolute w-[16px] h-[16px] md:w-[20px] md:h-[20px] text-yellow-400 drop-shadow-sm",
+                      style: { top: '18px', right: '14px', transform: 'rotate(45deg)' },
+                      strokeWidth: 2.5
+                    })}
+                  </div>
+
+                  {/* ── 内容区 ── */}
+                  <div className="relative p-6 md:p-8 lg:p-10">
+                    {/* 顶部装饰线 + 标签 */}
+                    <div className="flex items-center gap-3 mb-4">
+                      <span className="w-8 h-[2px] rounded-full" style={{ backgroundColor: activeColor + '66' }} />
+                      <span className="text-base md:text-lg font-bold tracking-[0.22em] uppercase" style={{ color: activeColor + '99' }}>
+                        Core Capability
+                      </span>
                     </div>
-                  )
-                })}
+
+                    {/* 标题 */}
+                    <h3 className="text-3xl md:text-4xl lg:text-5xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-2">
+                      {capabilities[activeCapability].title}
+                    </h3>
+
+                    {/* 副标题 */}
+                    <p className="text-lg md:text-xl font-semibold mb-5" style={{ color: activeColor + 'aa' }}>
+                      {capabilities[activeCapability].sub}
+                    </p>
+
+                    {/* 正文 */}
+                    <p className="text-[#334155] text-lg md:text-xl leading-[1.8] font-medium mb-6">
+                      {capabilities[activeCapability].desc}
+                    </p>
+
+                    {/* Tags — 只展示前 3 个 */}
+                    {capabilities[activeCapability].tip && (
+                      <div className="flex flex-wrap items-center gap-2 pt-5 border-t border-gray-100">
+                        {capabilities[activeCapability].tip.split('、').slice(0, 3).map((t, ti) => (
+                          <span key={ti} className="px-3 py-1 text-base font-semibold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
+                            style={{ color: activeColor, borderColor: activeColor + '40', backgroundColor: activeColor + '0a' }}>
+                            {t}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* 查看全部 */}
+                    <div className="mt-5 flex justify-end">
+                      <Link to={`/product/${capabilities[activeCapability].slug}`}
+                        className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-base font-semibold transition-all duration-300 hover:brightness-110"
+                        style={{ color: '#fff', backgroundColor: activeColor }}>
+                        查看全部
+                        <svg className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
+                      </Link>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </ScrollReveal>
@@ -398,37 +366,35 @@ export default function Home() {
 
 
 
-      {/* ─── 7. 客户认可区（白底） ─── */}
-      <section className="py-20 px-4 bg-[#f8fafc]">
-        <div className="max-w-6xl mx-auto">
-          <ScrollReveal className="text-center mb-14">
-            <p className="text-[10px] xs:text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Recognition</p>
-            <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold text-[#0f172a] mb-4">资质与认证</h2>
-            <p className="text-[#64748b] text-sm xs:text-base max-w-xl mx-auto">AAA级信用企业 · 高新技术企业</p>
+      {/* ─── 7. 资质与认证 ─── */}
+      <section className="py-24 px-4 bg-gradient-to-b from-white via-[#f8fafc] to-white">
+        <div className="max-w-5xl mx-auto">
+          <ScrollReveal className="text-center mb-16">
+            <div className="flex flex-col items-center">
+              <div className="inline-flex items-center gap-3 mb-5">
+                <span className="w-8 h-[2px] rounded-full bg-[#004ec4]/40" />
+                <span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[#004ec4]/60">Recognition</span>
+                <span className="w-8 h-[2px] rounded-full bg-[#004ec4]/40" />
+              </div>
+              <h2 className="text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-4">资质与认证</h2>
+              <p className="text-[#64748b] text-base xs:text-lg font-medium">AAA级信用企业 · 高新技术企业</p>
+            </div>
           </ScrollReveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {customerCards.map((card, i) => {
+
+          {/* 5 个 ISO 认证 */}
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
+            {customerCards.slice(1).map((card, i) => {
               const Icon = card.icon
               return (
-                <ScrollReveal key={i} delay={i * 0.1}>
-                  <div className="group relative bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-500 hover:shadow-xl hover:shadow-[#043b8f]/5 hover:-translate-y-1 overflow-hidden">
-                    <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
-                      style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
-                    <div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    <div className="absolute bottom-0 left-0 w-14 h-14 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    {/* 图标 */}
-                    <div className="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 rounded-xl bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mb-5 group-hover:bg-[#043b8f]/10 transition-all duration-300">
-                      <Icon className="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-[#043b8f]" />
+                <ScrollReveal key={i} delay={i * 0.08}>
+                  <div className="group relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 text-center h-full flex flex-col items-center justify-center transition-all duration-500 hover:shadow-lg hover:shadow-[#004ec4]/6 hover:-translate-y-1">
+                    <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-t-2xl"
+                      style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+                    <div className="w-16 h-16 rounded-xl bg-[#004ec4]/[0.06] border border-[#004ec4]/10 flex items-center justify-center mb-5 group-hover:bg-[#004ec4]/10 group-hover:scale-110 transition-all duration-300">
+                      <Icon className="w-8 h-8 text-[#004ec4]" strokeWidth={1.5} />
                     </div>
-                    {/* 数字 */}
-                    <div className="text-3xl xs:text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#0f172a] to-[#334155] mb-1">{card.count}</div>
-                    {/* 标题 */}
-                    <h3 className="text-sm xs:text-base sm:text-lg font-bold text-[#0f172a] mb-3">{card.title}</h3>
-                    {/* 分隔线 */}
-                    <div className="w-8 h-px bg-gradient-to-r from-transparent via-[#043b8f]/20 to-transparent mb-3" />
-                    {/* 描述 */}
-                    <p className="text-sm text-[#64748b] leading-relaxed">{card.desc}</p>
+                    <h3 className="text-base md:text-lg font-bold text-[#0f172a] leading-snug whitespace-pre-line">{card.title}</h3>
                   </div>
                 </ScrollReveal>
               )
diff --git a/website/src/pages/ProductPage.jsx b/website/src/pages/ProductPage.jsx
index 62f8c1e..8f4b955 100644
--- a/website/src/pages/ProductPage.jsx
+++ b/website/src/pages/ProductPage.jsx
@@ -1,5 +1,5 @@
 import { useParams, Link } from "react-router-dom"
-import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle, GitBranch, FileStack, MessageCircleX, FileDigit, SearchCheck, Banknote, ChartBar, Bell, Layers, ScrollText, CalendarCheck, TrendingUp, Pyramid, Database, Activity, Star } from "lucide-react"
+import { ChevronDown, ArrowRight, Shield, Clock, Headphones, Cpu, Monitor, HardDrive, AlertCircle, GitBranch, FileStack, MessageCircleX, FileDigit, SearchCheck, Banknote, ChartBar, Bell, Layers, ScrollText, CalendarCheck, TrendingUp, Pyramid, Database, Activity, Star } from "lucide-react"
 import { getProduct } from "../data/products"
 import ScrollReveal from "../components/ScrollReveal"
 import StatNumber from "../components/StatNumber"
@@ -117,8 +117,8 @@ export default function ProductPage() {
       </div>
 
       {/* ── Brief / 产品简介 ── */}
-      <section className="py-24 md:py-32 px-6 bg-[#f8fafc]">
-        <div className="max-w-4xl mx-auto">
+      <section className="py-16 md:py-20 px-6 bg-[#f8fafc]">
+        <div className="max-w-5xl mx-auto">
           <ScrollReveal>
             {/* ═══ 折角卡片 ═══ */}
             <div className="relative bg-white rounded-2xl shadow-[0_4px_32px_-8px_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.04)]">
@@ -162,9 +162,9 @@ export default function ProductPage() {
               </div>
 
               {/* ── 内容区 ── */}
-              <div className="relative p-10 md:p-16 lg:p-20">
+              <div className="relative p-8 md:p-10 lg:p-14">
                 {/* 顶部装饰线 + 标签 */}
-                <div className="flex items-center gap-3 mb-7">
+                <div className="flex items-center gap-3 mb-5">
                   <span className="w-10 h-[2px] rounded-full bg-[var(--theme)]/40" />
                   <span className="text-sm md:text-base font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">
                     Brief
@@ -172,7 +172,7 @@ export default function ProductPage() {
                 </div>
 
                 {/* 标题 */}
-                <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-10">
+                <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-6">
                   产品简介
                 </h2>
 
@@ -183,11 +183,11 @@ export default function ProductPage() {
 
                 {/* ═══ 底部标签 ═══ */}
                 {product.tags && (
-                  <div className="flex flex-wrap items-center justify-center gap-3 mt-10 pt-10 border-t border-gray-100">
+                  <div className="flex flex-wrap items-center justify-center gap-3 mt-7 pt-7 border-t border-gray-100">
                     {product.tags.map((tag, i) => (
                       <span
                         key={i}
-                        className="px-5 py-2 text-sm font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
+                        className="px-5 py-2 text-lg font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
                         style={{
                           color: product.themeColor,
                           borderColor: `rgba(${r},${g},${b},0.25)`,
@@ -308,15 +308,15 @@ export default function ProductPage() {
                 <span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Core Features</span>
                 <span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
               </div>
-              <h2 className="text-3xl md:text-[2.75rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 核心功能
               </h2>
               {product.target && (
                 <div className="mt-6 flex flex-col items-center gap-4">
-                  <span className="text-xl font-extrabold text-[#0f172a]">适用对象</span>
+                  <span className="text-lg font-extrabold text-[#0f172a]">适用对象</span>
                   <div className="flex flex-wrap justify-center gap-3">
                   {product.target.split('、').map((t, i) => (
-                    <span key={i} className="px-5 py-2 rounded-lg text-base font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)]">{t.trim()}</span>
+                    <span key={i} className="px-5 py-2 rounded-lg text-lg font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)]">{t.trim()}</span>
                   ))}
                   </div>
                 </div>
@@ -485,6 +485,69 @@ export default function ProductPage() {
         </section>
       )}
 
+      {/* ── 国产化支持 ── */}
+      <section className="py-24 px-6 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <ScrollReveal className="mb-16 text-center">
+            <div className="flex flex-col items-center">
+              <div className="inline-flex items-center gap-3 mb-5">
+                <span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
+                <span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Localization</span>
+                <span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                国产化支持
+              </h2>
+              <p className="mt-4 text-[#64748b] text-lg max-w-2xl mx-auto">
+                全面适配国产信创生态，赋能教育信息化自主可控
+              </p>
+            </div>
+          </ScrollReveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {[
+              { icon: Cpu, title: '国产芯片兼容', desc: '全面适配鲲鹏、飞腾、龙芯等国产CPU架构，从底层保障系统安全可控' },
+              { icon: Monitor, title: '国产操作系统', desc: '完美运行于统信UOS、麒麟等国产操作系统，桌面端与服务端全覆盖' },
+              { icon: HardDrive, title: '国产数据库', desc: '支持达梦、人大金仓、GaussDB等国产数据库，数据存储自主可靠' },
+            ].map((item, i) => (
+              <ScrollReveal key={i} delay={i * 0.08}>
+                <div className="group relative bg-white rounded-2xl p-10 md:p-12 h-full border border-gray-100 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)] transition-all duration-500 overflow-hidden">
+                  <div className="absolute top-0 left-0 right-0 h-1 transition-all duration-500"
+                    style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)`, opacity: 0 }}
+                  />
+                  <div className="absolute bottom-0 left-0 right-0 h-[3px] transition-all duration-500"
+                    style={{
+                      background: `linear-gradient(90deg, transparent, ${product.themeColor}60, transparent)`,
+                      opacity: 0.5,
+                    }}
+                  />
+                  <div className="relative z-10 flex flex-col items-center text-center">
+                    <div className="mb-7">
+                      <div className="w-[88px] h-[88px] rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:shadow-lg"
+                        style={{
+                          background: `linear-gradient(135deg, ${product.themeColor}12, ${product.themeColor}08)`,
+                          border: `1px solid ${product.themeColor}20`,
+                          boxShadow: `0 4px 20px ${product.themeColor}15`,
+                        }}
+                      >
+                        <item.icon className="w-10 h-10 transition-all duration-500 group-hover:scale-110" strokeWidth={1.5} style={{ color: product.themeColor }} />
+                      </div>
+                    </div>
+                    <h3 className="text-2xl font-extrabold text-[#0f172a] mb-3 tracking-tight">
+                      {item.title}
+                    </h3>
+                    <div className="w-10 h-[3px] rounded-full mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
+                    <p className="text-[#64748b] text-lg leading-relaxed">
+                      {item.desc}
+                    </p>
+                  </div>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
       {/* ── Advantages ── */}
       <section className="py-24 md:py-32 px-6 bg-[#f8fafc]">
         <div className="max-w-5xl mx-auto">
@@ -495,7 +558,7 @@ export default function ProductPage() {
                 <span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Why Choose Us</span>
                 <span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
               </div>
-              <h2 className="text-3xl md:text-[2.75rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 为什么选择我们
               </h2>
             </div>
@@ -563,9 +626,9 @@ export default function ProductPage() {
               <div className="flex flex-col items-center">
                 <div className="inline-flex items-center gap-3 mb-5">
                   <span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
-                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
+                  <span className="text-sm font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
                 </div>
-                <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                <h2 className="text-5xl md:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                   常见问题
                 </h2>
               </div>
@@ -580,7 +643,7 @@ export default function ProductPage() {
                     <summary className="relative flex items-center justify-between px-8 py-6 cursor-pointer list-none select-none">
                       <div className="flex items-center gap-4 pr-4">
                         <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)] shrink-0">Q{i + 1}</span>
-                        <h3 className="text-lg font-bold text-[#0f172a]">{item.q}</h3>
+                        <h3 className="text-xl font-bold text-[#0f172a]">{item.q}</h3>
                       </div>
                       <div className="w-8 h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
                         <ChevronDown className="w-4 h-4 text-[var(--theme)]" />
@@ -588,7 +651,7 @@ export default function ProductPage() {
                     </summary>
                     <div className="relative px-8 pb-7">
                       <div className="ml-12 pl-5 border-l-2 border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-r-lg py-4 pr-4">
-                        <p className="text-[#64748b] text-lg leading-relaxed">{item.a}</p>
+                        <p className="text-[#64748b] text-xl leading-relaxed">{item.a}</p>
                       </div>
                     </div>
                   </details>