From 9309e3e76ade1d6ded48f21fb2a67d07977507f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=BD=98?=
 <16176807+xaioppan@user.noreply.gitee.com>
Date: Thu, 18 Jun 2026 14:41:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E5=AD=97=E4=BD=93=20?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/index.html                            |   3 +-
 website/src/components/CertificateCard.jsx    | 188 ++++++++
 .../src/components/CertificateCarousel.jsx    |  94 ++++
 website/src/components/ContactForm.jsx        |  36 +-
 website/src/components/Footer.jsx             |   8 +-
 website/src/components/Navbar.jsx             |  14 +-
 website/src/pages/Contact.jsx                 |  94 ++--
 website/src/pages/Home.jsx                    | 431 ++++++++----------
 website/src/pages/ProductPage.jsx             | 197 +++++---
 9 files changed, 688 insertions(+), 377 deletions(-)
 create mode 100644 website/src/components/CertificateCard.jsx
 create mode 100644 website/src/components/CertificateCarousel.jsx

diff --git a/website/index.html b/website/index.html
index 2703a1d..60a0e25 100644
--- a/website/index.html
+++ b/website/index.html
@@ -4,10 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
+ 
     <!-- ===== GEO: 语义化 meta 标签 ===== -->
     <meta name="description" content="广西讯驰是专注智慧教育领域的科技企业，为职业院校和高校提供实习就业管理、科研管理、智慧党建、实训管理平台等数字化解决方案，已服务150+所院校、覆盖5万+学生。" />
     <meta name="keywords" content="智慧教育,实习管理平台,科研管理系统,智慧党建,实训管理平台,广西讯驰,职业院校信息化" />
+      <meta name="baidu-site-verification" content="codeva-N8Wnw7Njp2" />
     <title>广西讯驰 - 智慧教育数字化解决方案 | 校企益邦 · 科研管理 · 智慧党建 · 实训管理平台</title>
 
     <!-- ===== GEO: Schema.org JSON-LD 结构化数据——AI 直接解析企业信息 ===== -->
diff --git a/website/src/components/CertificateCard.jsx b/website/src/components/CertificateCard.jsx
new file mode 100644
index 0000000..f705cbe
--- /dev/null
+++ b/website/src/components/CertificateCard.jsx
@@ -0,0 +1,188 @@
+import React from 'react'
+import ScrollReveal from './ScrollReveal'
+import { Award, Leaf, Shield, Lock, Wrench } from 'lucide-react'
+
+/* ─── 证书数据 — 统一蓝色 ─── */
+const certificates = [
+  {
+    id: 'iso9001',
+    icon: Award,
+    code: 'ISO 9001',
+    name: '质量管理体系认证',
+
+    date: '2024年3月',
+    color: '#004ec4',
+    sealColor: '#004ec4',
+  },
+  {
+    id: 'iso14001',
+    icon: Leaf,
+    code: 'ISO 14001',
+    name: '环境管理体系认证',
+    
+    date: '2024年3月',
+    color: '#004ec4',
+    sealColor: '#004ec4',
+  },
+  {
+    id: 'iso45001',
+    icon: Shield,
+    code: 'ISO 45001',
+    name: '职业健康安全管理体系认证',
+ 
+    date: '2024年3月',
+    color: '#004ec4',
+    sealColor: '#004ec4',
+  },
+  {
+    id: 'iso27001',
+    icon: Lock,
+    code: 'ISO 27001',
+    name: '信息安全管理体系认证',
+  
+    date: '2024年3月',
+    color: '#004ec4',
+    sealColor: '#004ec4',
+  },
+  {
+    id: 'iso20000',
+    icon: Wrench,
+    code: 'ISO 20000',
+    name: '信息技术服务管理体系认证',
+  
+    date: '2024年3月',
+    color: '#004ec4',
+    sealColor: '#004ec4',
+  },
+]
+
+export default function CertificateCard({ certificate, index, scale = 1 }) {
+  const { icon: Icon, code, name, desc,  color } = certificate
+
+  return (
+    <ScrollReveal delay={index * 0.08}>
+      <div className="group relative transition-all duration-500 w-[260px] h-[380px] sm:w-[300px] sm:h-[440px] md:w-[360px] md:h-[500px]"
+        style={{ transform: `scale(${scale})` }}
+      >
+        {/* ── 外阴影 ── */}
+        <div className="absolute inset-0 rounded-sm translate-y-1.5 translate-x-1 opacity-25 group-hover:opacity-35 transition-opacity duration-500"
+          style={{ background: `linear-gradient(135deg, ${color}40, ${color}15)` }}
+        />
+
+        {/* ── 证书主体 ── */}
+        <div className="relative rounded-sm h-full flex flex-col"
+          style={{ backgroundColor: '#faf7ed' }}
+        >
+          {/* 外层粗边框 */}
+          <div className="absolute inset-0 border-[3px] rounded-sm"
+            style={{ borderColor: `${color}50` }}
+          />
+
+          {/* 中层装饰线 */}
+          <div className="absolute inset-[3px] border rounded-sm"
+            style={{ borderColor: `${color}25` }}
+          />
+
+          {/* 内层双线框 */}
+          <div className="absolute inset-[7px] border rounded-sm"
+            style={{ borderColor: `${color}18` }}
+          />
+          <div className="absolute inset-[9px] border rounded-sm"
+            style={{ borderColor: `${color}0f` }}
+          />
+
+          {/* 四边中点装饰 */}
+          <BorderCenterOrnament position="top" color={color} />
+          <BorderCenterOrnament position="bottom" color={color} />
+          <BorderCenterOrnament position="left" color={color} />
+          <BorderCenterOrnament position="right" color={color} />
+
+          {/* 内容区 */}
+          <div className="relative px-6 py-6 sm:px-8 sm:py-8 md:px-10 md:py-10 flex-1 flex flex-col items-center text-center justify-center">
+
+            {/* 认证图标 */}
+            <div className="relative mb-3 sm:mb-4">
+              <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-full border-2 flex items-center justify-center group-hover:scale-110 transition-transform duration-500"
+                style={{ borderColor: `${color}40`, backgroundColor: `${color}08` }}
+              >
+                <Icon className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" style={{ color }} strokeWidth={1.5} />
+              </div>
+
+            </div>
+
+            {/* 认证编号 */}
+            <div className="text-base sm:text-lg md:text-xl font-black tracking-[0.15em] mb-1 sm:mb-2" style={{ color }}>
+              {code}
+            </div>
+
+            {/* 认证名称 */}
+            <div className="text-sm sm:text-base font-bold text-[#1e293b] mb-3 sm:mb-4 leading-tight">
+              {name}
+            </div>
+
+            {/* 分隔线 — 带花纹 */}
+            <div className="flex items-center gap-2 mb-3 sm:mb-4 w-full max-w-[120px] sm:max-w-[140px] md:max-w-[160px]">
+              <div className="flex-1 h-px" style={{ background: `linear-gradient(90deg, transparent, ${color}50)` }} />
+              <div className="flex gap-0.5">
+                <div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}60` }} />
+                <div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}40` }} />
+                <div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}60` }} />
+              </div>
+              <div className="flex-1 h-px" style={{ background: `linear-gradient(90deg, ${color}50, transparent)` }} />
+            </div>
+
+            {/* 证明文字 */}
+            <p className="text-xs sm:text-sm text-[#64748b] leading-relaxed mb-4 sm:mb-5 max-w-[240px] sm:max-w-[280px] md:max-w-[320px]">
+              {desc}
+            </p>
+
+           
+      
+          </div>
+
+          {/* 底部蓝色线条 */}
+          <div className="relative h-1.5 bg-gradient-to-r from-blue-600 to-blue-800">
+            {/* 折角 */}
+            <div className="absolute left-0 top-0 w-1.5 h-1.5"
+              style={{ background: 'linear-gradient(135deg, #faf7ed 50%, transparent 50%)' }}
+            />
+            <div className="absolute right-0 top-0 w-1.5 h-1.5"
+              style={{ background: 'linear-gradient(225deg, #faf7ed 50%, transparent 50%)' }}
+            />
+          </div>
+        </div>
+
+        {/* hover 顶部高光线 */}
+        <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-t-sm"
+          style={{ background: `linear-gradient(90deg, transparent, ${color}, transparent)` }}
+        />
+      </div>
+    </ScrollReveal>
+  )
+}
+
+/* ─── 边框中点装饰 ─── */
+function BorderCenterOrnament({ position, color }) {
+  const posMap = {
+    'top':    'top-[3px] left-1/2 -translate-x-1/2',
+    'bottom': 'bottom-[3px] left-1/2 -translate-x-1/2',
+    'left':   'left-[3px] top-1/2 -translate-y-1/2',
+    'right':  'right-[3px] top-1/2 -translate-y-1/2',
+  }
+  const isHorizontal = position === 'top' || position === 'bottom'
+
+  return (
+    <div className={`absolute ${posMap[position]} flex ${isHorizontal ? 'flex-row' : 'flex-col'} items-center gap-0.5`}
+      style={{ opacity: 0.5 }}
+    >
+      <div className="w-2 h-2 rounded-full border" style={{ borderColor: `${color}40`, backgroundColor: `${color}10` }} />
+      <div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}50` }} />
+      <div className="w-2 h-2 rounded-full border" style={{ borderColor: `${color}40`, backgroundColor: `${color}10` }} />
+    </div>
+  )
+}
+
+export { certificates }
+
+
+
diff --git a/website/src/components/CertificateCarousel.jsx b/website/src/components/CertificateCarousel.jsx
new file mode 100644
index 0000000..9175af0
--- /dev/null
+++ b/website/src/components/CertificateCarousel.jsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import CertificateCard, { certificates } from './CertificateCard'
+
+export default function CertificateCarousel() {
+  const [active, setActive] = useState(2) // 从中间开始 (ISO 45001)
+  const [isMobile, setIsMobile] = useState(false)
+
+  // 检测是否为移动端
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768)
+    check()
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  const next = useCallback(() => {
+    setActive(prev => (prev + 1) % certificates.length)
+  }, [])
+
+  // 自动轮播
+  useEffect(() => {
+    const timer = setInterval(next, 3000)
+    return () => clearInterval(timer)
+  }, [next])
+
+  const goTo = (index) => setActive(index)
+
+  // 响应式参数
+  const containerHeight = isMobile ? 'h-[360px]' : 'h-[600px]'
+  const translateXBase = isMobile ? 140 : 260
+  const scaleCenter = 1.0
+  const scaleNear = isMobile ? 0.8 : 0.7
+  const scaleFar = isMobile ? 0.5 : 0.4
+
+  return (
+    <div className="relative max-w-4xl mx-auto">
+      {/* 证书展示区 */}
+      <div className={`relative ${containerHeight} flex items-center justify-center`}>
+        {certificates.map((cert, i) => {
+          let offset = i - active
+
+          // 循环环绕：取最短路径
+          if (offset > 2) offset = offset - certificates.length
+          if (offset < -2) offset = offset + certificates.length
+
+          const absOffset = Math.abs(offset)
+
+          let scale = scaleCenter
+          if (absOffset === 1) scale = scaleNear
+          if (absOffset >= 2) scale = scaleFar
+
+          let opacity = 1
+          if (absOffset === 1) opacity = 0.6
+          if (absOffset >= 2) opacity = 0
+
+          let translateX = offset * translateXBase
+
+          let zIndex = 10 - absOffset
+
+          return (
+            <div
+              key={cert.id}
+              className="absolute transition-all duration-500 ease-in-out cursor-pointer"
+              style={{
+                transform: `translateX(${translateX}px) scale(${scale})`,
+                opacity,
+                zIndex,
+                filter: absOffset >= 2 ? 'blur(2px)' : 'none',
+              }}
+              onClick={() => goTo(i)}
+            >
+              <CertificateCard certificate={cert} index={i} scale={isMobile ? 0.7 : 1} />
+            </div>
+          )
+        })}
+      </div>
+
+      {/* 底部指示点 */}
+      <div className="flex justify-center gap-2 mt-4">
+        {certificates.map((cert, i) => (
+          <button
+            key={cert.id}
+            onClick={() => goTo(i)}
+            className={`w-2 h-2 rounded-full transition-all duration-300 ${
+              i === active
+                ? 'bg-[#004ec4] w-6'
+                : 'bg-[#004ec4]/30 hover:bg-[#004ec4]/50'
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/website/src/components/ContactForm.jsx b/website/src/components/ContactForm.jsx
index ed849c4..df6bfb0 100644
--- a/website/src/components/ContactForm.jsx
+++ b/website/src/components/ContactForm.jsx
@@ -37,7 +37,7 @@ export default function ContactForm() {
     setShowModal(false);
   }
 
-  const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
+  const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
 
   return (
     <>
@@ -46,21 +46,21 @@ export default function ContactForm() {
           <div 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-5 h-[2px] rounded-full bg-[#043b8f]" />
-                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Inquiry</span>
+                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Inquiry</span>
               </div>
-              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 在线咨询
               </h2>
-              <p className="text-[#475569] text-lg md:text-xl mt-5 max-w-xl leading-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
+              <p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md:mt-5 max-w-xl leading-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
             </div>
           </div>
 
           <div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden max-w-3xl mx-auto">
             <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
-              style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
-            <div className="absolute top-0 right-0 w-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
-            <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
+              style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+            <div className="absolute top-0 right-0 w-28 h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
+            <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#004ec4]/[0.15] rounded-tr-3xl" />
 
             <div className="relative z-10">
               <form onSubmit={handleSubmit} className="space-y-8">
@@ -91,7 +91,7 @@ export default function ContactForm() {
                     关注产品 <span className="text-[#94a3b8] text-sm">(可选)</span>
                   </label>
                   <select id="product" name="product" value={form.product} onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow bg-white text-[#64748b]">
+                    className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow bg-white text-[#64748b]">
                     <option value="">请选择关注的产品</option>
                     {productOptions.map((product) => (
                       <option key={product} value={product}>{product}</option>
@@ -107,8 +107,8 @@ export default function ContactForm() {
 
                 <button
                   type="submit"
-                  className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#043b8f]/20"
-                  style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}
+                  className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#004ec4]/30"
+                  style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}
                 >
                   提交咨询
                 </button>
@@ -123,8 +123,8 @@ export default function ContactForm() {
           <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={closeModal} />
           <div className="relative bg-white rounded-2xl p-8 md:p-10 max-w-md w-full shadow-2xl overflow-hidden">
             <div className="absolute top-0 left-0 right-0 h-[2px]"
-              style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
-            <div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.02] rounded-bl-full" />
+              style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+            <div className="absolute top-0 right-0 w-20 h-20 bg-[#004ec4]/[0.06] rounded-bl-full" />
 
             <button onClick={closeModal}
               className="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center hover:bg-gray-100 transition-colors">
@@ -132,16 +132,16 @@ export default function ContactForm() {
             </button>
 
             <div className="relative z-10 text-center">
-              <div className="w-16 h-16 rounded-full bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mx-auto mb-6">
-                <CheckCircle className="w-8 h-8 text-[#043b8f]" />
+              <div className="w-16 h-16 rounded-full bg-[#004ec4]/[0.12] border border-[#004ec4]/20 flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-[#004ec4]" />
               </div>
               <h3 className="text-xl font-bold text-[#0f172a] mb-3">提交成功</h3>
               <p className="text-[#64748b] text-base leading-relaxed mb-8">
-                感谢您的咨询！我们将在 <span className="font-bold text-[#043b8f]">1 个工作日</span> 内与您联系
+                感谢您的咨询！我们将在 <span className="font-bold text-[#004ec4]">1 个工作日</span> 内与您联系
               </p>
               <button onClick={closeModal}
-                className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#043b8f]/20"
-                style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}>
+                className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#004ec4]/30"
+                style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}>
                 我知道了
               </button>
             </div>
diff --git a/website/src/components/Footer.jsx b/website/src/components/Footer.jsx
index b3ce125..f3e522d 100644
--- a/website/src/components/Footer.jsx
+++ b/website/src/components/Footer.jsx
@@ -20,16 +20,16 @@ export default function Footer() {
           <div className="md:px-8">
             <div className="flex items-center justify-center gap-2.5 mb-3 whitespace-nowrap">
               <img src="/favicon.ico" alt="讯驰" className="w-8 h-8" />
-              <span className="text-lg font-bold text-white tracking-tight">讯驰科技</span>
+              <span className="text-base sm:text-lg font-bold text-white tracking-tight">讯驰科技</span>
             </div>
-            <p className="text-white/60 text-xs leading-loose mb-4">智慧校园解决方案提供商</p>
+            <p className="text-white/60 text-xs sm:text-sm leading-loose mb-4">智慧校园解决方案提供商</p>
             <div className="flex items-start justify-center gap-2 mb-3">
               <MapPin className="w-3.5 h-3.5 text-white/50 mt-0.5 shrink-0" />
-              <span className="text-white/70 text-xs leading-loose">南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房</span>
+              <span className="text-white/70 text-xs sm:text-sm leading-loose">南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房</span>
             </div>
             <div className="flex items-center justify-center gap-2">
               <Phone className="w-3.5 h-3.5 text-white/50 shrink-0" />
-              <span className="text-white/70 text-xs">0771-3864294</span>
+              <span className="text-white/70 text-xs sm:text-sm">0771-3864294</span>
             </div>
           </div>
 
diff --git a/website/src/components/Navbar.jsx b/website/src/components/Navbar.jsx
index 1f44311..d8fbce7 100644
--- a/website/src/components/Navbar.jsx
+++ b/website/src/components/Navbar.jsx
@@ -86,7 +86,7 @@ export default function Navbar() {
               <Link to="/" className="flex items-center gap-3 group">
                 <img src="/favicon.ico" alt="讯驰" className="w-[100px] h-auto" />
                 <div className="flex flex-col leading-tight">
-                  <span className={`text-xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
+                  <span className={`text-3xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
                   <span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/80 transition-colors duration-500`}>XUNCHI TECH</span>
                 </div>
               </Link>
@@ -97,10 +97,10 @@ export default function Navbar() {
                   <Link
                     key={item.to}
                     to={item.to}
-                    className={`relative px-4 font-medium rounded-sm transition-all duration-300 nav-item ${
+                    className={`relative px-5 font-medium rounded-sm transition-all duration-300 nav-item ${
                       location.pathname === item.to
-                        ? 'nav-active-tab text-white font-semibold text-base'
-                        : 'text-white hover:text-white text-sm py-3'
+                        ? 'nav-active-tab text-white font-semibold text-xl'
+                        : 'text-white hover:text-white text-lg py-3'
                     }`}
                   >
                     {item.label}
@@ -115,7 +115,7 @@ export default function Navbar() {
             <div className={`hidden lg:flex items-center shrink-0 transition-colors duration-500`}>
               <a
                 href="tel:07713864294"
-                className="flex items-center gap-1.5 text-sm font-medium text-white hover:text-white transition-all duration-300"
+                className="flex items-center gap-1.5 text-lg font-medium text-white hover:text-white transition-all duration-300"
               >
                 <Phone className="w-3.5 h-3.5" />
                 0771-3864294
@@ -144,7 +144,7 @@ export default function Navbar() {
               <Link
                 key={item.to}
                 to={item.to}
-                className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
+                className={`block px-4 py-3 rounded-xl text-lg font-medium transition-colors ${
                   location.pathname === item.to
                     ? 'text-white bg-white/[0.06]'
                     : 'text-white/50 hover:bg-white/[0.04]'
@@ -154,7 +154,7 @@ export default function Navbar() {
               </Link>
             ))}
             <div className="pt-3 mt-2 border-t border-white/[0.06]">
-              <a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#043b8f] text-base font-medium">
+              <a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#f3f3f4] text-base font-medium">
                 <Phone className="w-4 h-4" />
                 0771-3864294
               </a>
diff --git a/website/src/pages/Contact.jsx b/website/src/pages/Contact.jsx
index fbce1dc..1f581d9 100644
--- a/website/src/pages/Contact.jsx
+++ b/website/src/pages/Contact.jsx
@@ -30,9 +30,9 @@ export default function Contact() {
         {/* Black overlay */}
         <div className="absolute inset-0 bg-black/50" />
         <div className="relative max-w-4xl mx-auto px-6 text-center pt-32">
-          <h1 className="text-4xl md:text-6xl font-bold mb-10 hero-product-title">携手合作</h1>
-            <h1 className="text-4xl md:text-6xl font-bold mb-10 hero-product-title">共建智慧校园</h1>
-          <p className="text-xl md:text-2xl max-w-2xl mx-auto leading-loose hero-product-slogan">
+          <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">携手合作</h1>
+            <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">共建智慧校园</h1>
+          <p className="text-base xs:text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto leading-loose hero-product-slogan">
             诚邀广西各界教育伙伴，共同为职业院校提供优质的数字化解决方案
           </p>
         </div>
@@ -45,15 +45,15 @@ export default function Contact() {
           <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-5 h-[2px] rounded-full bg-[#043b8f]" />
-                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Contact</span>
+                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Contact</span>
               </div>
-              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 联系方式
               </h2>
             </div>
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
             {[
               { icon: MapPin, title: '公司地址', text: '南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房' },
               { icon: Phone, title: '联系电话', text: '0771-3864294' },
@@ -62,21 +62,20 @@ export default function Contact() {
               const Icon = item.icon
               return (
                 <ScrollReveal key={i} delay={i * 0.08}>
-                  <div className="relative bg-[#fafbfc] rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
+                  <div className="relative bg-[#fafbfc] rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/5 transition-all duration-500 group 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-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
-                    <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
-
+                      style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+                    <div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
+                
                     <div className="relative z-10">
-                      <div className="flex items-center gap-3 mb-5">
-                        <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[#043b8f]/[0.06] border border-[#043b8f]/10">
-                          <Icon className="w-5 h-5 text-[#043b8f]" />
+                      <div className="flex items-center gap-3 mb-4 md:mb-5">
+                        <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-xl flex items-center justify-center bg-[#004ec4]/[0.12] border border-[#004ec4]/20">
+                          <Icon className="w-4 h-4 sm:w-5 sm:h-5 text-[#004ec4]" />
                         </div>
-                        <div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
+                        <div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 to-transparent" />
                       </div>
-                      <h3 className="text-xl font-bold text-[#0f172a] mb-3">{item.title}</h3>
-                      <p className="text-[#64748b] text-sm leading-relaxed">{item.text}</p>
+                      <h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
+                      <p className="text-[#64748b] text-sm sm:text-base leading-relaxed">{item.text}</p>
                     </div>
                   </div>
                 </ScrollReveal>
@@ -92,34 +91,33 @@ export default function Contact() {
           <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-5 h-[2px] rounded-full bg-[#043b8f]" />
-                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Partnership</span>
+                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Partnership</span>
               </div>
-              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 成为代理商
               </h2>
-              <p className="text-[#475569] text-lg md:text-xl mt-5 max-w-xl leading-[2]">
+              <p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md:mt-5 max-w-xl leading-[1.8] md:leading-[2]">
                 诚邀广西各地区具有教育行业资源的合作伙伴，共享职业院校信息化发展机遇
               </p>
             </div>
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-14 max-w-3xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-10 md:mb-14 max-w-3xl mx-auto">
             {agentBenefits.map((item, i) => {
               return (
                 <ScrollReveal key={i} delay={i * 0.05}>
-                  <div className="relative bg-white rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
+                  <div className="relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/5 transition-all duration-500 group 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-32 h-32 bg-[#043b8f]/[0.02] rounded-bl-full" />
-                    <div className="absolute bottom-0 left-0 w-20 h-20 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
-
+                      style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+                    <div className="absolute top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 bg-[#004ec4]/[0.06] rounded-bl-full" />
+               
                     <div className="relative z-10">
-                      <div className="flex items-center gap-3 mb-4">
-                        <span className="flex items-center justify-center w-8 h-8 rounded-md bg-[#043b8f]/[0.06] text-xs font-black text-[#043b8f]">0{i + 1}</span>
-                        <div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
+                      <div className="flex items-center gap-3 mb-3 md:mb-4">
+                        <span className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-md bg-[#004ec4]/[0.12] text-xs font-black text-[#004ec4]">0{i + 1}</span>
+                        <div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 to-transparent" />
                       </div>
-                      <h3 className="text-xl font-bold text-[#0f172a] mb-3">{item.title}</h3>
-                      <p className="text-[#64748b] text-lg leading-relaxed">{item.desc}</p>
+                      <h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
+                      <p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">{item.desc}</p>
                     </div>
                   </div>
                 </ScrollReveal>
@@ -129,18 +127,18 @@ export default function Contact() {
 
           <ScrollReveal>
             <div className="max-w-3xl mx-auto">
-              <div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden">
+              <div className="relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 border border-gray-100 overflow-hidden">
                 <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
-                  style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
-                <div className="absolute top-0 right-0 w-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
-                <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
+                  style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
+                <div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
+
                 <div className="relative z-10">
-                  <h3 className="text-2xl md:text-3xl font-black text-[#0f172a] mb-10 tracking-tight leading-[1.1]">合作基本要求</h3>
-                  <div className="space-y-6">
+                  <h3 className="text-xl sm:text-2xl md:text-3xl font-black text-[#0f172a] mb-6 md:mb-10 tracking-tight leading-[1.1]">合作基本要求</h3>
+                  <div className="space-y-4 md:space-y-6">
                     {requirements.map((req, i) => (
-                      <div key={i} className="flex items-center gap-5">
-                        <span className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#043b8f]/[0.06] text-sm font-black text-[#043b8f] shrink-0">{i + 1}</span>
-                        <span className="text-[#334155] text-lg leading-relaxed">{req}</span>
+                      <div key={i} className="flex items-center gap-4 md:gap-5">
+                        <span className="flex items-center justify-center w-7 h-7 sm:w-9 sm:h-9 rounded-lg bg-[#004ec4]/[0.12] text-xs sm:text-sm font-black text-[#004ec4] shrink-0">{i + 1}</span>
+                        <span className="text-[#334155] text-sm sm:text-base md:text-lg leading-relaxed">{req}</span>
                       </div>
                     ))}
                   </div>
@@ -164,22 +162,22 @@ export default function Contact() {
         />
         <div className="relative max-w-3xl mx-auto text-center">
           <ScrollReveal>
-            <h2 className="text-4xl md:text-6xl font-bold text-white mb-8">携手讯驰 共建智慧校园</h2>
+            <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 md:mb-8">携手讯驰 共建智慧校园</h2>
 
-            <p className="text-white text-md mb-14 max-w-xl mx-auto leading-relaxed">
+            <p className="text-white text-sm xs:text-base sm:text-lg mb-10 md:mb-14 max-w-xl mx-auto leading-relaxed">
               获取产品演示与个性化方案，迈出数字化转型第一步
             </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <div className="flex flex-col sm:flex-row gap-3 xs:gap-4 justify-center">
               <Link
                 to="/"
-                className="inline-flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
               >
                 返回首页
-                <ArrowRight className="w-4 h-4" />
+                <ArrowRight className="w-3.5 h-3.5 xs:w-4 xs:h-4" />
               </Link>
               <a
                 href="tel:07713864294"
-                className="inline-flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
+                className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
               >
                 致电 0771-3864294
               </a>
diff --git a/website/src/pages/Home.jsx b/website/src/pages/Home.jsx
index 0409674..6d507ee 100644
--- a/website/src/pages/Home.jsx
+++ b/website/src/pages/Home.jsx
@@ -1,13 +1,12 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Link } from 'react-router-dom';
 import HeroSection from '../components/HeroSection'
-
 import ScrollReveal from '../components/ScrollReveal'
+import CertificateCarousel from '../components/CertificateCarousel'
 import { products } from '../data/products'
-import hunBg from '../assets/images/hun.jpg'
-import { ArrowRight, Shield, Award } from 'lucide-react'
+import { ArrowRight, MapPin, Award, Headphones, Shield } from 'lucide-react'
 import StatNumber from '../components/StatNumber'
-
+import hunBg from '../assets/images/hun.jpg'
 /* ─── Section 3: 数据亮点 ─── */
 const stats = [
   { num: '40', suffix: '+', label: '软件著作权' },
@@ -42,41 +41,6 @@ const capabilities = [
 
 
 
-/* ─── Section 7: 客户认可 ─── */
-const customerCards = [
-  {
-    type: 'featured',
-    icon: Award,
-    title: 'AAA级信用企业',
-    subtitle: '高新技术企业',
-    featured: true,
-  },
-  {
-    type: 'school',
-    icon: Shield,
-    title: 'ISO 9001\n质量管理体系',
-  },
-  {
-    type: 'video',
-    icon: Shield,
-    title: 'ISO 14001\n环境管理体系',
-  },
-  {
-    type: 'satisfaction',
-    icon: Shield,
-    title: 'ISO 45001\n职业健康安全管理',
-  },
-  {
-    type: 'satisfaction',
-    icon: Shield,
-    title: 'ISO 27001\n信息安全管理体系',
-  },
-  {
-    type: 'satisfaction',
-    icon: Shield,
-    title: 'ISO 20000\n信息技术服务管理',
-  },
-]
 
 
 
@@ -85,20 +49,21 @@ const customerCards = [
 
 export default function Home() {
   const [activeCapability, setActiveCapability] = useState(0)
-  const [tagRadius, setTagRadius] = useState(68)
+  const [activeStep, setActiveStep] = useState(0)
+  const [lightPos, setLightPos] = useState(0) // 光点位置（立即移动）
+  const timerRef = useRef(null)
   const activeColor = products[activeCapability]?.themeColor || '#043b8f'
 
+  const handleStepClick = (i) => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    setLightPos(i) // 光点立即开始滑动
+    timerRef.current = setTimeout(() => {
+      setActiveStep(i) // 700ms 后节点变色
+    }, 700)
+  }
+
   useEffect(() => {
-    const updateRadius = () => {
-      const w = window.innerWidth
-      if (w < 480) setTagRadius(40)
-      else if (w < 768) setTagRadius(48)
-      else if (w < 1024) setTagRadius(54)
-      else setTagRadius(60)
-    }
-    updateRadius()
-    window.addEventListener('resize', updateRadius)
-    return () => window.removeEventListener('resize', updateRadius)
+    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
   }, [])
 
   return (
@@ -132,22 +97,22 @@ export default function Home() {
       {/* ─── 4. 开放能力区（白底） ─── */}
       <section id="products" className="py-20 px-4 bg-white">
         <div className="max-w-7xl mx-auto">
-          <ScrollReveal className="text-center mb-14">
+          <ScrollReveal className="text-center mb-8 md: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-base xs:text-lg md:text-xl lg:text-2xl mx-auto md:whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
+            <h2 className="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
+            <p className="text-[#64748b] text-sm xs:text-base md:text-lg lg:text-xl xl:text-2xl mx-auto max-w-3xl md:whitespace-nowrap mb-4 leading-relaxed px-2">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
           </ScrollReveal>
 
           {/* Tab bar */}
           <ScrollReveal>
-            <div className="flex  justify-center  gap-1 mb-26">
+            <div className="flex flex-wrap justify-center gap-1 sm:gap-1.5 mb-8 md:mb-26">
               {products.map((p, i) => {
                 const isActive = activeCapability === i
                 return (
                 <button
                   key={p.slug}
                   onClick={() => setActiveCapability(i)}
-                  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"
+                  className="flex items-center justify-center gap-1 xs:gap-2 sm:gap-3 px-2 xs:px-3 sm:px-5 md:px-7 py-2 xs:py-2.5 sm:py-3.5 rounded-lg text-xs xs:text-sm sm:text-base md:text-lg lg:text-xl font-bold transition-all border w-[calc(50%-0.25rem)] xs:w-[calc(50%-0.375rem)] sm:w-auto"
                   style={{
                     color: isActive ? p.themeColor : '#475569',
                     borderColor: isActive ? p.themeColor : '#e5e7eb',
@@ -155,7 +120,7 @@ export default function Home() {
                   onMouseEnter={(e) => { if (!isActive) { e.target.style.color = p.themeColor; e.target.style.borderColor = p.themeColor; } }}
                   onMouseLeave={(e) => { if (!isActive) { e.target.style.color = '#475569'; e.target.style.borderColor = '#e5e7eb'; } }}
                 >
-                  <p.icon className="w-4 h-4 xs:w-5 xs:h-5" style={{ color: isActive ? p.themeColor : p.themeColor }} />
+                  <p.icon className="w-3 h-3 xs:w-4 xs:h-4 sm:w-5 sm:h-5" style={{ color: isActive ? p.themeColor : p.themeColor }} />
                   {p.name}
                 </button>
                 )
@@ -165,84 +130,74 @@ export default function Home() {
 
           {/* Left-right layout */}
           <ScrollReveal>
-            <div className="flex flex-col lg:flex-row gap-8 lg:gap-24 lg:items-center mb-32 mt-8">
+            <div className="flex flex-col mb-16 md:mb-32 mt-4 md:mt-8 bg-white rounded-2xl md:rounded-3xl border border-gray-200 shadow-lg overflow-hidden">
+              {/* ── 窗口标题栏（macOS 风格） ── */}
+              <div className="flex items-center gap-2 px-4 py-2.5 md:px-5 md:py-3 bg-gray-100 border-b border-gray-200">
+                <div className="w-3 h-3 rounded-full bg-red-400 flex-shrink-0" />
+                <div className="w-3 h-3 rounded-full bg-yellow-400 flex-shrink-0" />
+                <div className="w-3 h-3 rounded-full bg-green-400 flex-shrink-0" />
+                <span className="text-xs text-gray-400 ml-2 font-medium truncate">
+                  {capabilities[activeCapability].title} — 产品详情
+                </span>
+              </div>
+              {/* ── 内容区 ── */}
+              <div className="flex flex-col lg:flex-row gap-6 md:gap-8 lg:gap-12 xl:gap-24 lg:items-stretch p-6 sm:p-8 md:p-10 lg:p-12 bg-gradient-to-br from-gray-50 to-white lg:h-[520px]">
               {/* Left: visual — 产品图片 */}
-              <div className="w-full lg:w-1/2 lg:max-w-xl">
+              <div className="w-full lg:w-1/2 lg:max-w-xl flex items-center justify-center">
                 {products[activeCapability]?.heroImage && (
-                  <img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto" />
+                  <img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto max-h-full object-contain" />
                 )}
               </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>
+              {/* Right: text — 纯文字布局 */}
+              <div className="w-full lg:w-1/2 lg:max-w-xl flex flex-col justify-center">
+                {/* 顶部装饰线 + 标签 */}
+                <div className="flex items-center gap-3 mb-3 md:mb-4">
+                  <span className="w-6 md:w-8 h-[2px] rounded-full" style={{ backgroundColor: activeColor + '66' }} />
+                  <span className="text-xs sm:text-sm md:text-lg font-bold tracking-[0.22em] uppercase" style={{ color: activeColor + '99' }}>
+                    Core Capability
+                  </span>
+                </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
+                {/* 标题 */}
+                <h3 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-2">
+                  {capabilities[activeCapability].title}
+                </h3>
+
+                {/* 副标题 */}
+                <p className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold mb-4 md:mb-5" style={{ color: activeColor + 'aa' }}>
+                  {capabilities[activeCapability].sub}
+                </p>
+
+                {/* 正文 */}
+                <p className="text-[#334155] text-sm sm:text-base md:text-lg lg:text-xl leading-[1.7] md:leading-[1.8] font-medium mb-4 md:mb-6">
+                  {capabilities[activeCapability].desc}
+                </p>
+
+                {/* Tags — 只展示前 3 个 */}
+                {capabilities[activeCapability].tip && (
+                  <div className="flex flex-wrap items-center gap-1.5 md:gap-2 pt-4 md:pt-5 border-t border-gray-100">
+                    {capabilities[activeCapability].tip.split('、').slice(0, 3).map((t, ti) => (
+                      <span key={ti} className="px-2 md:px-3 py-1 text-xs sm:text-sm md: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>
-
-                    {/* 标题 */}
-                    <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 className="mt-auto pt-4 md:pt-5 flex justify-end">
+                  <Link to={`/product/${capabilities[activeCapability].slug}`}
+                    className="inline-flex items-center gap-1.5 px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-sm md:text-base font-semibold transition-all duration-300 hover:brightness-110"
+                    style={{ color: '#fff', backgroundColor: activeColor }}>
+                    查看全部
+                    <svg className="w-3 h-3 md:w-3.5 md: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>
           </ScrollReveal>
 
           {/* Bottom button */}
@@ -258,107 +213,137 @@ export default function Home() {
         </div>
       </section>
 
-      {/* ─── 5. 企业级解决方案区（深色） ─── */}
-      <section className="py-20 px-4 relative overflow-hidden"
-        style={{ background: `linear-gradient(180deg, rgba(0,10,30,0.7) 0%, rgba(0,20,50,0.5) 50%, rgba(0,10,30,0.7) 100%), url(${hunBg}) center/cover no-repeat` }}>
+      {/* ─── 5. 为什么选择讯驰 ─── */}
+      <section className="py-20 md:py-32 px-4 sm:px-6 md:px-10 relative overflow-hidden"
+        style={{
+          background: `linear-gradient(135deg, rgba(10,22,40,0.75), rgba(15,31,58,0.75)), url(${hunBg}) center/cover no-repeat`,
+        }}>
+        {/* 大型光晕 */}
+        <div className="absolute top-0 left-1/4 w-[800px] h-[800px] rounded-full opacity-[0.04]"
+          style={{ background: 'radial-gradient(circle, #004ec4, transparent 60%)' }}
+        />
+        <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] rounded-full opacity-[0.04]"
+          style={{ background: 'radial-gradient(circle, #2563eb, transparent 60%)' }}
+        />
 
-        <div className="relative max-w-5xl mx-auto text-center">
+        <div className="relative max-w-7xl mx-auto">
+          {/* 标题 */}
           <ScrollReveal>
-            <p className="text-[10px] xs:text-xs text-white/80 tracking-[0.3em] uppercase mb-4 font-semibold">Why Choose Us</p>
-            <h2 className="text-3xl xs:text-4xl md:text-6xl font-black mb-6 leading-tight text-white"
-              style={{
-                textShadow: '0 4px 30px rgba(59,130,246,0.3), 0 2px 4px rgba(0,0,0,0.4)',
-              }}>为什么选择讯驰</h2>
-            <div className="flex items-center justify-center gap-3 mb-16">
-              <span className="w-12 h-px bg-gradient-to-r from-transparent to-white/60" />
-              <p className="text-white text-base xs:text-lg sm:text-xl md:text-2xl font-medium tracking-wider">AAA级信用企业 · 高新技术企业</p>
-              <span className="w-12 h-px bg-gradient-to-l from-transparent to-white/60" />
+            <div className="text-center mb-12 md:mb-20">
+              <div className="flex flex-col items-center">
+                <div className="inline-flex items-center gap-2 md:gap-3 mb-4 md:mb-5">
+                  <span className="w-6 md:w-8 h-[2px] rounded-full bg-white/30" />
+                  <span className="text-[10px] md:text-[11px] font-bold tracking-[0.22em] uppercase text-white/60">Why Choose Us</span>
+                  <span className="w-6 md:w-8 h-[2px] rounded-full bg-white/30" />
+                </div>
+                <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white tracking-tight leading-[1.1] mb-3 md:mb-4"
+                  style={{ textShadow: '0 4px 60px rgba(59,130,246,0.25), 0 2px 8px rgba(0,0,0,0.5)' }}>
+                  为什么选择讯驰
+                </h2>
+                <p className="text-white/50 text-sm xs:text-base md:text-lg font-medium tracking-wider">
+                  AAA级信用企业 · 高新技术企业 · 16年行业深耕
+                </p>
+              </div>
             </div>
           </ScrollReveal>
 
-          {/* Surrounding tags */}
-          <ScrollReveal>
-            <div className="relative w-[280px] h-[280px] xs:w-[320px] xs:h-[320px] md:w-[420px] md:h-[420px] lg:w-[500px] lg:h-[500px] mx-auto mb-16">
-              {/* Outer rings */}
-              <div className="absolute inset-0 rounded-full border border-white/[0.08]" />
-              <div className="absolute inset-6 xs:inset-8 md:inset-10 lg:inset-12 rounded-full border border-white/[0.06]" />
-              <div className="absolute inset-12 xs:inset-16 md:inset-20 lg:inset-24 rounded-full border border-white/[0.04]" />
-
-              {/* Orbiting dots */}
-              <div className="absolute w-2 h-2 rounded-full bg-[#004ec4]"
-                style={{ top: '8%', left: '50%', transform: 'translateX(-50%)', boxShadow: '0 0 10px rgba(0,78,196,0.6)' }} />
-              <div className="absolute w-1.5 h-1.5 rounded-full bg-[#f08519]"
-                style={{ bottom: '12%', right: '15%', boxShadow: '0 0 8px rgba(240,133,25,0.6)' }} />
-
-              {/* Tags around circle */}
-              {[
-                { text: '深耕广西，扎根本土', angle: 250 },
-                { text: '产品成熟，实战验证', angle: 300 },
-                { text: '贴心服务，全程陪伴', angle: 55 },
-                { text: '数据安全，合规可靠', angle: 120 },
-              ].map((tag, i) => {
-                const rad = (tag.angle * Math.PI) / 180
-                const r = tagRadius
-                const x = 50 + r * Math.sin(rad)
-                const y = 50 - r * Math.cos(rad)
-                const colors = [
-                  { bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
-                  { bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
-                  { bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
-                  { bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
-                ]
-                return (
-                  <div
-                    key={i}
-                    className="absolute whitespace-nowrap"
-                    style={{
-                      left: `${x}%`,
-                      top: `${y}%`,
-                      transform: 'translate(-50%, -50%)',
-                    }}
-                  >
-                    {/* 书签主体 */}
-                    <div
-                      className="relative px-3 py-2 xs:px-4 xs:py-2.5 md:px-6 md:py-3.5 lg:px-7 lg:py-4 text-xs xs:text-sm md:text-base lg:text-lg font-bold text-white/95 overflow-hidden"
-                      style={{
-                        background: colors[i].bg,
-                        borderRadius: '12px 12px 4px 4px',
-                        border: `1px solid ${colors[i].border}`,
-                        backdropFilter: 'blur(12px)',
-                        boxShadow: `0 0 25px ${colors[i].glow}, 0 6px 16px rgba(0,0,0,0.25)`,
-                      }}
+          {/* 4 大优势 — 响应式不换行 */}
+          <div className="flex flex-wrap md:flex-nowrap justify-center gap-2 sm:gap-4 md:gap-6 lg:gap-10 mb-12 md:mb-16">
+            {[
+              { icon: MapPin, title: '深耕广西'  },
+              { icon: Award, title: '产品成熟'},
+              { icon: Headphones, title: '贴心服务'},
+              { icon: Shield, title: '数据安全' },
+            ].map((item, i) => {
+              const Icon = item.icon
+              return (
+                <ScrollReveal key={i} delay={i * 0.1}>
+                  <div className="group relative block w-[42vw] sm:w-[42vw] md:w-48 lg:w-56 xl:w-64 2xl:w-72 cursor-pointer flex-shrink-0" onClick={() => handleStepClick(i)}>
+                    <div className="relative bg-white/[0.04] border border-white/[0.06] rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 lg:p-8 text-center transition-all duration-500 hover:bg-white/[0.08] hover:border-[#004ec4]/40 hover:-translate-y-1 h-36 sm:h-44 md:h-52 lg:h-56 xl:h-60 2xl:h-64 flex flex-col items-center justify-center"
+                      style={{ boxShadow: '0 8px 40px rgba(0,0,0,0.2)' }}
                     >
-                      {/* 顶部高光条 */}
-                      <div className="absolute top-0 left-0 right-0 h-[2px]"
-                        style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)' }}
+                      {/* hover 高光线 */}
+                      <div className="absolute top-0 left-6 right-6 md:left-8 md:right-8 h-[2px] opacity-0 group-hover:opacity-100 transition-all duration-700 rounded-full"
+                        style={{ background: 'linear-gradient(90deg, transparent, #004ec4 20%, #004ec4 80%, transparent)' }}
                       />
-                      {/* 左侧折角 */}
-                      <div className="absolute top-0 left-0 w-4 h-4"
-                        style={{
-                          background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 50%, transparent 50%)',
-                          borderRadius: '12px 0 0 0',
-                        }}
-                      />
-                      {i < 2
-                        ? <>{tag.text}<span className="inline-block w-1.5 h-1.5 xs:w-2 xs:h-2 rounded-full bg-white/80 ml-1.5 xs:ml-2 align-middle" /></>
-                        : <><span className="inline-block w-1.5 h-1.5 xs:w-2 xs:h-2 rounded-full bg-white/80 mr-1.5 xs:mr-2 align-middle" />{tag.text}</>
-                      }
+                      {/* 图标 */}
+                      <div className="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-xl md:rounded-2xl bg-gradient-to-br from-[#004ec4]/25 to-[#004ec4]/5 flex items-center justify-center mx-auto mb-3 sm:mb-4 md:mb-5 group-hover:from-[#004ec4]/35 group-hover:to-[#004ec4]/15 group-hover:scale-105 group-hover:shadow-xl group-hover:shadow-[#004ec4]/15 transition-all duration-500">
+                        <Icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 lg:w-8 lg:h-8" style={{ color: '#74b0ff' }} strokeWidth={1.5} />
+                      </div>
+                      {/* 标题 */}
+                      <h3 className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-bold text-white mb-1 md:mb-2">{item.title}</h3>
+                      {/* 描述 */}
+                      <p className="text-[10px] sm:text-xs md:text-sm text-white/45 leading-relaxed">{item.desc}</p>
                     </div>
                   </div>
-                )
-              })}
-            </div>
-          </ScrollReveal>
+                </ScrollReveal>
+              )
+            })}
+          </div>
 
-          {/* Bottom button */}
-          <ScrollReveal>
+
+            {/* ── 流动光速时间线 ── */}
+            <div className="relative max-w-2xl mx-auto mt-12 md:mt-20 mb-12 md:mb-20 px-4">
+              {/* 光束外层光晕 */}
+              <div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-4 rounded-full"
+                style={{
+                  background: 'linear-gradient(90deg, transparent, rgba(0,78,196,0.08) 15%, rgba(0,78,196,0.15) 50%, rgba(0,78,196,0.08) 85%, transparent)',
+                  filter: 'blur(6px)',
+                }}
+              />
+              {/* 光束中层 */}
+              <div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-1.5 rounded-full"
+                style={{
+                  background: 'linear-gradient(90deg, transparent, rgba(59,130,246,0.2) 10%, rgba(96,165,250,0.5) 30%, rgba(147,197,253,0.7) 50%, rgba(96,165,250,0.5) 70%, rgba(59,130,246,0.2) 90%, transparent)',
+                  filter: 'blur(3px)',
+                }}
+              />
+              {/* 光束核心 */}
+              <div className="relative h-1 rounded-full"
+                style={{
+                  background: 'linear-gradient(90deg, transparent, rgba(59,130,246,0.4) 10%, rgba(147,197,253,0.8) 30%, #93c5fd 50%, rgba(147,197,253,0.8) 70%, rgba(59,130,246,0.4) 90%, transparent)',
+                  boxShadow: '0 0 12px rgba(59,130,246,0.3), 0 0 24px rgba(59,130,246,0.1)',
+                }}>
+                {/* 流动光点 */}
+                <div className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-all duration-700 ease-out"
+                  style={{
+                    left: `${12 + lightPos * 25}%`,
+                    background: '#e0f2fe',
+                    boxShadow: '0 0 12px #93c5fd, 0 0 28px #60a5fa, 0 0 56px #3b82f6, 0 0 84px #1d4ed8',
+                  }}
+                />
+                {/* 4 个节点标记 */}
+                {[0, 1, 2, 3].map(n => (
+                  <div key={n} className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 transition-all duration-500"
+                    style={{
+                      left: `${12 + n * 25}%`,
+                      borderColor: n <= activeStep ? '#93c5fd' : 'rgba(147,197,253,0.25)',
+                      background: n <= activeStep ? '#3b82f6' : 'rgba(10,22,40,0.9)',
+                      boxShadow: n <= activeStep ? '0 0 10px rgba(147,197,253,0.7), 0 0 20px rgba(59,130,246,0.4)' : '0 0 4px rgba(0,78,196,0.2)',
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+
+
+
+
+
+
+
+
+
+
+
+          {/* 底部按钮 */}
+          <ScrollReveal className="text-center">
             <Link
               to="/contact"
-              className="inline-flex items-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-full text-sm xs:text-base font-medium text-white border border-white/20 hover:bg-white/10 hover:border-white/40 transition-all duration-300"
-              style={{ boxShadow: '0 4px 20px rgba(0,0,0,0.2)' }}
+              className="inline-flex items-center gap-2 md:gap-3 px-6 sm:px-8 md:px-10 py-3 md:py-4 rounded-24 text-sm md:text-base font-bold text-white bg-[#1266e5cb] hover:bg-[#005ce6] transition-all duration-300 hover:shadow-2xl hover:shadow-[#004ec4]/30 hover:scale-105"
             >
-              获取解决方案
-              <ArrowRight className="w-4 h-4" />
+              获取专属解决方案
+              <ArrowRight className="w-5 h-5" />
             </Link>
           </ScrollReveal>
         </div>
@@ -382,24 +367,10 @@ export default function Home() {
           </ScrollReveal>
 
 
-          {/* 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.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>
-                    <h3 className="text-base md:text-lg font-bold text-[#0f172a] leading-snug whitespace-pre-line">{card.title}</h3>
-                  </div>
-                </ScrollReveal>
-              )
-            })}
-          </div>
+          {/* 5 个 ISO 认证证书 — 轮播图 */}
+          <ScrollReveal>
+            <CertificateCarousel />
+          </ScrollReveal>
         </div>
       </section>
 
diff --git a/website/src/pages/ProductPage.jsx b/website/src/pages/ProductPage.jsx
index 8f4b955..c24552e 100644
--- a/website/src/pages/ProductPage.jsx
+++ b/website/src/pages/ProductPage.jsx
@@ -1,4 +1,5 @@
 import { useParams, Link } from "react-router-dom"
+import { useState, useEffect, useRef } from "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"
@@ -16,6 +17,21 @@ const iconMap = {
 export default function ProductPage() {
   const { slug } = useParams()
   const product = getProduct(slug)
+  const [activeStep, setActiveStep] = useState(0)
+  const [lightPos, setLightPos] = useState(0)
+  const timerRef = useRef(null)
+
+  const handleStepClick = (i) => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    setLightPos(i)
+    timerRef.current = setTimeout(() => {
+      setActiveStep(i)
+    }, 700)
+  }
+
+  useEffect(() => {
+    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
+  }, [])
 
   if (!product) {
     return (
@@ -50,28 +66,27 @@ export default function ProductPage() {
     >
       {/* ── Hero ── */}
       <div className="relative -mt-[70px]">
-        <section className="relative overflow-hidden flex items-center justify-center " style={{ backgroundColor: product.themeColor }}>
-          {/* Desktop: left image + right card */}
-          <div className="hidden md:flex items-center justify-between gap-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-[760px]">
+        <section className="relative overflow-hidden" style={{ backgroundColor: product.themeColor }}>
+          {/* Desktop: grid 布局 — 统一宽度/高度/间距 */}
+          <div className="hidden md:grid grid-cols-2 gap-12 lg:gap-20 xl:gap-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-[760px] items-center">
             {/* Image - left */}
-            <div className="w-[55%] flex items-center justify-center">
+            <div className="flex items-center justify-center">
               {product.heroImage && (
-                <img src={product.heroImage} alt="" className={`w-full h-auto object-contain`} />
+                <img src={product.heroImage} alt="" className="w-full h-auto object-contain" />
               )}
             </div>
             {/* Content - right */}
-            <div className="w-[45%] flex flex-col items-between justify-center gap-2 shrink-0">
-
-              <h1 className="text-4xl md:text-6xl font-extrabold text-center mb-5 tracking-tight leading-[1.1] text-white hero-product-title whitespace-nowrap">
+            <div className="flex flex-col items-center justify-center gap-5 md:gap-6">
+              <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-center tracking-tight leading-[1.1] text-white hero-product-title">
                 {product.name}
               </h1>
-              <p className="text-2xl md:text-3xl text-center mb-8 leading-relaxed text-white/80 hero-product-slogan whitespace-nowrap">
+              <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl text-center leading-relaxed text-white/80 hero-product-slogan">
                 {product.slogan}
               </p>
               {product.stats && (
-                <div className="flex gap-4 justify-center mt-6">
+                <div className="grid grid-flow-col auto-cols-fr gap-5 md:gap-6 w-full mt-6 md:mt-8">
                   {product.stats.map((s, i) => (
-                    <div key={i} className="flex-1 rounded-2xl p-4 text-center border border-white/20 bg-white/10">
+                    <div key={i} className="rounded-2xl p-4 text-center border border-white/20 bg-white/10">
                       <div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
                         <StatNumber target={s.num} suffix={s.suffix} />
                       </div>
@@ -86,27 +101,27 @@ export default function ProductPage() {
           {/* Mobile: stacked layout */}
           <div className="md:hidden flex flex-col items-center px-6 pt-32 pb-16">
             {product.heroImage && (
-              <img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
+              <img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-8 sm:mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
             )}
             <div className="text-center w-full">
-                <span className="inline-block px-4 py-1.5 rounded-full text-xs font-bold tracking-wider uppercase mb-5"
+                <span className="inline-block px-3 sm:px-4 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-bold tracking-wider uppercase mb-4 sm:mb-5"
                   style={{ backgroundColor: product.themeColor + '18', color: product.themeColor }}>
                   智慧教育解决方案
                 </span>
-                <h1 className="text-3xl font-extrabold mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
+                <h1 className="text-2xl xs:text-3xl sm:text-4xl font-extrabold mb-3 sm:mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
                   {product.name}
                 </h1>
-                <p className="text-xl mb-6 leading-relaxed text-white/80 hero-product-slogan">
+                <p className="text-base xs:text-lg sm:text-xl mb-5 sm:mb-6 leading-relaxed text-white/80 hero-product-slogan">
                   {product.slogan}
                 </p>
                 {product.stats && (
-                  <div className="flex gap-3 mt-4">
+                  <div className="grid grid-cols-3 gap-2 sm:gap-3 mt-3 sm:mt-4">
                     {product.stats.map((s, i) => (
-                      <div key={i} className="flex-1 rounded-2xl p-3 text-center border border-white/20 bg-white/10">
-                        <div className="text-xl font-extrabold tracking-tight text-white">
+                      <div key={i} className="rounded-xl sm:rounded-2xl p-2 sm:p-3 text-center border border-white/20 bg-white/10">
+                        <div className="text-lg xs:text-xl sm:text-2xl font-extrabold tracking-tight text-white">
                           <StatNumber target={s.num} suffix={s.suffix} />
                         </div>
-                        <div className="text-[11px] text-white/60 mt-1 font-medium">{s.label}</div>
+                        <div className="text-[10px] xs:text-[11px] sm:text-xs text-white/60 mt-1 font-medium">{s.label}</div>
                       </div>
                     ))}
                   </div>
@@ -162,22 +177,22 @@ export default function ProductPage() {
               </div>
 
               {/* ── 内容区 ── */}
-              <div className="relative p-8 md:p-10 lg:p-14">
+              <div className="relative p-6 sm:p-8 md:p-10 lg:p-14">
                 {/* 顶部装饰线 + 标签 */}
-                <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">
+                <div className="flex items-center gap-3 mb-4 md:mb-5">
+                  <span className="w-8 md:w-10 h-[2px] rounded-full bg-[var(--theme)]/40" />
+                  <span className="text-xs sm:text-sm md:text-base font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">
                     Brief
                   </span>
                 </div>
 
                 {/* 标题 */}
-                <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-6">
+                <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-4 md:mb-6">
                   产品简介
                 </h2>
 
                 {/* 正文 */}
-                <p className="text-[#334155] text-lg md:text-xl leading-[1.9] font-medium">
+                <p className="text-[#334155] text-sm sm:text-base md:text-lg lg:text-xl leading-[1.7] md:leading-[1.9] font-medium">
                   {product.brief}
                 </p>
 
@@ -187,7 +202,7 @@ export default function ProductPage() {
                     {product.tags.map((tag, i) => (
                       <span
                         key={i}
-                        className="px-5 py-2 text-lg font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
+                        className="px-3 sm:px-5 py-1.5 sm:py-2 text-sm sm:text-base md: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)`,
@@ -215,10 +230,10 @@ export default function ProductPage() {
               Pain Points & Solutions
               <span className="w-8 h-px bg-[var(--theme)]/40" />
             </span>
-            <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.8] mb-4 whitespace-pre-line">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.3] md:leading-[1.8] mb-3 md:mb-4 whitespace-pre-line">
               {product.painPointsTitle || `${product.name}\n解决的核心问题`}
             </h2>
-            <p className="mt-4 text-[#64748b] text-lg max-w-2xl mx-auto">
+            <p className="mt-3 md:mt-4 text-[#64748b] text-sm sm:text-base md:text-lg max-w-2xl mx-auto">
               直击业务痛点，提供经过实战验证的完整解决方案
             </p>
           </div>
@@ -260,12 +275,12 @@ export default function ProductPage() {
                       {/* ── 痛点书签卡 ── */}
                       <div className="relative">
                         <div className="relative bg-white rounded-2xl shadow-[0_6px_28px_-8px_rgba(239,68,68,0.15)] border border-red-200 overflow-visible">
-                          <div className="absolute -top-5 md:-top-6 left-6 md:left-8 px-4 md:px-5 py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl bg-red-400 shadow-[0_-2px_8px_rgba(239,68,68,0.2)]">
-                            <span className="text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">痛点</span>
+                          <div className="absolute -top-4 sm:-top-5 md:-top-6 left-4 sm:left-6 md:left-8 px-3 sm:px-4 md:px-5 py-1 sm:py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl bg-red-400 shadow-[0_-2px_8px_rgba(239,68,68,0.2)]">
+                            <span className="text-xs sm:text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">痛点</span>
                           </div>
                           <div className="absolute left-0 top-0 bottom-0 w-1.5 bg-red-400 rounded-l-2xl" />
-                          <div className="pl-8 md:pl-10 pr-6 md:pr-8 py-6 md:py-8 pt-10 md:pt-12">
-                            <p className="text-[#1e293b] text-base md:text-lg leading-[1.9] font-bold">
+                          <div className="pl-6 sm:pl-8 md:pl-10 pr-4 sm:pr-6 md:pr-8 py-4 sm:py-5 md:py-8 pt-8 sm:pt-10 md:pt-12">
+                            <p className="text-[#1e293b] text-sm sm:text-base md:text-lg leading-[1.7] md:leading-[1.9] font-bold">
                               {item.title}
                             </p>
                           </div>
@@ -276,14 +291,14 @@ export default function ProductPage() {
                       <div className="relative">
                         <div className="relative bg-white rounded-2xl shadow-[0_6px_28px_-8px_rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.15)] border overflow-visible"
                           style={{ borderColor: `${product.themeColor}30` }}>
-                          <div className="absolute -top-5 md:-top-6 left-6 md:left-8 px-4 md:px-5 py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
+                          <div className="absolute -top-4 sm:-top-5 md:-top-6 left-4 sm:left-6 md:left-8 px-3 sm:px-4 md:px-5 py-1 sm:py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
                             style={{ backgroundColor: product.themeColor }}>
-                            <span className="text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">解决方案</span>
+                            <span className="text-xs sm:text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">解决方案</span>
                           </div>
                           <div className="absolute left-0 top-0 bottom-0 w-1.5 rounded-l-2xl"
                             style={{ backgroundColor: product.themeColor }} />
-                          <div className="pl-8 md:pl-10 pr-6 md:pr-8 py-6 md:py-8 pt-10 md:pt-12">
-                            <p className="text-[#1e293b] text-base md:text-lg leading-[1.9] font-bold">
+                          <div className="pl-6 sm:pl-8 md:pl-10 pr-4 sm:pr-6 md:pr-8 py-4 sm:py-5 md:py-8 pt-8 sm:pt-10 md:pt-12">
+                            <p className="text-[#1e293b] text-sm sm:text-base md:text-lg leading-[1.7] md:leading-[1.9] font-bold">
                               {item.desc}
                             </p>
                           </div>
@@ -308,15 +323,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-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-3xl xs:text-4xl sm:text-5xl 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-lg font-extrabold text-[#0f172a]">适用对象</span>
-                  <div className="flex flex-wrap justify-center gap-3">
+                  <span className="text-sm sm:text-base md:text-lg font-extrabold text-[#0f172a]">适用对象</span>
+                  <div className="flex flex-wrap justify-center gap-2 md:gap-3">
                   {product.target.split('、').map((t, i) => (
-                    <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>
+                    <span key={i} className="px-3 sm:px-5 py-1.5 sm:py-2 rounded-lg text-sm sm:text-base md: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>
@@ -474,7 +489,7 @@ export default function ProductPage() {
                   <span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
                   <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Product Showcase</span>
                 </div>
-                <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                   产品展示
                 </h2>
               </div>
@@ -495,10 +510,10 @@ export default function ProductPage() {
                 <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 className="text-3xl xs:text-4xl sm:text-5xl 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 className="mt-3 md:mt-4 text-[#64748b] text-sm sm:text-base md:text-lg max-w-2xl mx-auto">
                 全面适配国产信创生态，赋能教育信息化自主可控
               </p>
             </div>
@@ -511,7 +526,7 @@ export default function ProductPage() {
               { 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="group relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 lg: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 }}
                   />
@@ -522,22 +537,22 @@ export default function ProductPage() {
                     }}
                   />
                   <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"
+                    <div className="mb-5 md:mb-7">
+                      <div className="w-16 h-16 sm:w-20 sm:h-20 md:w-[88px] md: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 }} />
+                        <item.icon className="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md: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">
+                    <h3 className="text-lg sm:text-xl md:text-2xl font-extrabold text-[#0f172a] mb-2 md: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">
+                    <div className="w-8 md:w-10 h-[3px] rounded-full mb-3 md:mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
+                    <p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">
                       {item.desc}
                     </p>
                   </div>
@@ -558,20 +573,20 @@ 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-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                 为什么选择我们
               </h2>
             </div>
           </ScrollReveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
             {[
               { icon: Shield, title: '安全可靠', desc: '等保三级认证，银行级加密存储，多机房容灾备份' },
               { icon: Clock, title: '快速部署', desc: 'SaaS 即开即用，私有化部署最快 3 天交付上线' },
               { icon: Headphones, title: '专属服务', desc: '7×24 小时响应，专属客户经理全程陪伴' },
             ].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="group relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 lg: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 cursor-pointer" onClick={() => handleStepClick(i)}>
                   {/* 顶部品牌色条 — hover 时滑入 */}
                   <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 }}
@@ -586,28 +601,28 @@ export default function ProductPage() {
 
                   <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"
+                    <div className="mb-5 md:mb-7">
+                      <div className="w-16 h-16 sm:w-20 sm:h-20 md:w-[88px] md: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 }} />
+                        <item.icon className="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md: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">
+                    <h3 className="text-lg sm:text-xl md:text-2xl font-extrabold text-[#0f172a] mb-2 md:mb-3 tracking-tight">
                       {item.title}
                     </h3>
 
                     {/* 分隔线 */}
-                    <div className="w-10 h-[3px] rounded-full mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
+                    <div className="w-8 md:w-10 h-[3px] rounded-full mb-3 md:mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
 
                     {/* 描述 */}
-                    <p className="text-[#64748b] text-lg leading-relaxed">
+                    <p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">
                       {item.desc}
                     </p>
                   </div>
@@ -615,6 +630,50 @@ export default function ProductPage() {
               </ScrollReveal>
             ))}
           </div>
+
+          {/* ── 流动光速时间线 ── */}
+          <div className="relative max-w-md mx-auto mt-8 md:mt-24 mb-4">
+            {/* 光束外层光晕 */}
+            <div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-4 rounded-full"
+              style={{
+                background: `linear-gradient(90deg, transparent, ${product.themeColor}15, ${product.themeColor}25, ${product.themeColor}15, transparent)`,
+                filter: 'blur(6px)',
+              }}
+            />
+            {/* 光束中层 */}
+            <div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-1.5 rounded-full"
+              style={{
+                background: `linear-gradient(90deg, transparent, ${product.themeColor}30, ${product.themeColor}60, ${product.themeColor}30, transparent)`,
+                filter: 'blur(3px)',
+              }}
+            />
+            {/* 光束核心 */}
+            <div className="relative h-1 rounded-full"
+              style={{
+                background: `linear-gradient(90deg, transparent, ${product.themeColor}60, ${product.themeColor}, ${product.themeColor}60, transparent)`,
+                boxShadow: `0 0 12px ${product.themeColor}40, 0 0 24px ${product.themeColor}20`,
+              }}>
+              {/* 流动光点 */}
+              <div className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-all duration-700 ease-out"
+                style={{
+                  left: `${15 + lightPos * 35}%`,
+                  background: '#ffffff',
+                  boxShadow: `0 0 12px ${product.themeColor}, 0 0 28px ${product.themeColor}, 0 0 56px ${product.themeColor}, 0 0 84px ${product.themeColor}`,
+                }}
+              />
+              {/* 3 个节点标记 */}
+              {[0, 1, 2].map(n => (
+                <div key={n} className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 transition-all duration-500"
+                  style={{
+                    left: `${15 + n * 35}%`,
+                    borderColor: n <= activeStep ? product.themeColor : `${product.themeColor}40`,
+                    background: n <= activeStep ? product.themeColor : '#ffffff',
+                    boxShadow: n <= activeStep ? `0 0 10px ${product.themeColor}80, 0 0 20px ${product.themeColor}40` : `0 0 4px ${product.themeColor}20`,
+                  }}
+                />
+              ))}
+            </div>
+          </div>
         </div>
       </section>
 
@@ -628,7 +687,7 @@ export default function ProductPage() {
                   <span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
                   <span className="text-sm font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
                 </div>
-                <h2 className="text-5xl md:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                   常见问题
                 </h2>
               </div>
@@ -640,18 +699,18 @@ export default function ProductPage() {
                   <details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-300 overflow-hidden">
                     <div className="absolute top-0 left-0 w-1 h-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] group-open:bg-[var(--theme)] transition-colors duration-300" />
                     <div className="absolute top-0 right-0 w-24 h-24 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
-                    <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-xl font-bold text-[#0f172a]">{item.q}</h3>
+                    <summary className="relative flex items-center justify-between px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 cursor-pointer list-none select-none">
+                      <div className="flex items-center gap-3 md:gap-4 pr-4">
+                        <span className="flex items-center justify-center w-7 h-7 sm:w-8 sm: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-base sm:text-lg md: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)]" />
+                      <div className="w-7 h-7 sm:w-8 sm: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-3.5 h-3.5 sm:w-4 sm:h-4 text-[var(--theme)]" />
                       </div>
                     </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-xl leading-relaxed">{item.a}</p>
+                    <div className="relative px-4 sm:px-6 md:px-8 pb-5 sm:pb-6 md:pb-7">
+                      <div className="ml-10 sm:ml-12 pl-4 sm: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-3 sm:py-4 pr-3 sm:pr-4">
+                        <p className="text-[#64748b] text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed">{item.a}</p>
                       </div>
                     </div>
                   </details>