diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx
index ebba9b7..e36444e 100644
--- a/src/components/sections/products-section.tsx
+++ b/src/components/sections/products-section.tsx
@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { ArrowRight, Check, TrendingUp } from 'lucide-react';
 import { PRODUCTS } from '@/lib/constants';
 
@@ -13,7 +14,7 @@ export function ProductsSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="products" className="py-24 bg-[#FAF8F8]" ref={ref}>
+    <section id="products" className="py-24 bg-[var(--color-bg-primary)]" ref={ref}>
       <div className="container-custom">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -21,13 +22,13 @@ export function ProductsSection() {
           transition={{ duration: 0.6 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
+          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-purple)]/30 bg-[var(--color-tech-purple)]/5 text-[var(--color-tech-purple)] text-sm font-medium mb-4">
             产品服务
           </span>
-          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
-            我们的<span className="text-[#C41E3A]">产品</span>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
+            我们的<span className="tech-gradient-text">产品</span>
           </h2>
-          <p className="text-lg text-[#4A4A4A]">
+          <p className="text-lg text-gray-400">
             自主研发的企业级产品，助力企业高效运营，实现数字化转型
           </p>
         </motion.div>
@@ -40,51 +41,49 @@ export function ProductsSection() {
               animate={isInView ? { opacity: 1, y: 0 } : {}}
               transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
             >
-              <Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
+              <Card className="h-full flex flex-col group cursor-pointer">
                 <CardHeader>
-                  <span className="inline-block px-3 py-1 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium w-fit mb-3">
+                  <Badge variant="secondary" className="w-fit mb-3">
                     {product.category}
-                  </span>
-                  <CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
+                  </Badge>
+                  <CardTitle>{product.title}</CardTitle>
                 </CardHeader>
                 <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-4 flex-1 text-[#6B6B6B]">
+                  <CardDescription className="text-base leading-relaxed mb-4 flex-1">
                     {product.description}
                   </CardDescription>
                   
-                  {/* 核心功能 */}
                   <div className="mb-4">
-                    <p className="text-sm font-medium text-[#1A1A1A] mb-2">核心功能</p>
+                    <p className="text-sm font-medium text-white mb-2">核心功能</p>
                     <div className="flex flex-wrap gap-1.5">
                       {product.features.slice(0, 4).map((feature, idx) => (
                         <span 
                           key={idx} 
-                          className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F0F0] text-[#4A4A4A] rounded"
+                          className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-gray-300 rounded border border-gray-700"
                         >
-                          <Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
+                          <Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
                           {feature}
                         </span>
                       ))}
                     </div>
                   </div>
 
-                  {/* 核心价值 */}
                   <div className="mb-4">
-                    <p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
-                      <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
+                    <p className="text-sm font-medium text-white mb-2 flex items-center">
+                      <TrendingUp className="w-4 h-4 mr-1 text-[var(--color-tech-blue)]" />
                       核心价值
                     </p>
                     <ul className="space-y-1">
                       {product.benefits.map((benefit, idx) => (
-                        <li key={idx} className="text-xs text-[#6B6B6B] flex items-start">
-                          <span className="text-[#C41E3A] mr-1.5">•</span>
+                        <li key={idx} className="text-xs text-gray-400 flex items-start">
+                          <span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
                           {benefit}
                         </li>
                       ))}
                     </ul>
                   </div>
 
-                  <Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
+                  <Button variant="outline" className="w-full mt-auto">
                     了解详情
                     <ArrowRight className="ml-2 w-4 h-4" />
                   </Button>
@@ -94,24 +93,29 @@ export function ProductsSection() {
           ))}
         </div>
 
-        {/* 底部CTA */}
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.6, delay: 0.5 }}
           className="mt-20 text-center"
         >
-          <div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
-            <h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
-              需要定制化解决方案？
-            </h3>
-            <p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
-              我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
-            </p>
-            <Button size="lg">
-              联系我们
-              <ArrowRight className="ml-2 w-4 h-4" />
-            </Button>
+          <div className="bg-gradient-to-r from-[var(--color-bg-secondary)] to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-800 relative overflow-hidden">
+            <div className="absolute inset-0 pointer-events-none">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl" />
+              <div className="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-tech-purple)]/5 rounded-full blur-3xl" />
+            </div>
+            <div className="relative z-10">
+              <h3 className="text-2xl sm:text-3xl font-bold text-white mb-4">
+                需要定制化解决方案？
+              </h3>
+              <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
+                我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
+              </p>
+              <Button size="lg">
+                联系我们
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+            </div>
           </div>
         </motion.div>
       </div>