diff --git a/src/components/sections/services-section.tsx b/src/components/sections/services-section.tsx
index eebaadd..4f7ea6e 100644
--- a/src/components/sections/services-section.tsx
+++ b/src/components/sections/services-section.tsx
@@ -20,27 +20,25 @@ export function ServicesSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="services" className="py-24 bg-white" ref={ref}>
+    <section id="services" className="py-24 bg-[var(--color-bg-secondary)]" ref={ref}>
       <div className="container-custom">
-        {/* Section Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           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-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
             核心业务
           </span>
-          <h2 className="text-3xl sm:text-4xl font-bold text-[#1A1A1A] mb-4">
-            专业服务，<span className="text-[#C41E3A]">助力发展</span>
+          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+            专业服务，<span className="tech-gradient-text">助力发展</span>
           </h2>
-          <p className="text-lg text-[#4A4A4A]">
+          <p className="text-lg text-gray-400">
             我们提供全方位的技术解决方案，帮助企业实现数字化转型
           </p>
         </motion.div>
 
-        {/* Services Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {SERVICES.map((service, index) => {
             const Icon = iconMap[service.icon];
@@ -51,15 +49,15 @@ export function ServicesSection() {
                 animate={isInView ? { opacity: 1, y: 0 } : {}}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
               >
-                <Card className="h-full 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 group cursor-pointer">
                   <CardHeader>
-                    <div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
-                      {Icon && <Icon className="w-6 h-6 text-white" />}
+                    <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--color-tech-blue)]/30 transition-all duration-300">
+                      {Icon && <Icon className="w-7 h-7 text-white" />}
                     </div>
-                    <CardTitle className="text-xl text-[#1A1A1A]">{service.title}</CardTitle>
+                    <CardTitle>{service.title}</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <CardDescription className="text-base text-[#6B6B6B]">
+                    <CardDescription className="text-base">
                       {service.description}
                     </CardDescription>
                   </CardContent>
@@ -69,7 +67,6 @@ export function ServicesSection() {
           })}
         </div>
 
-        {/* CTA */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}