diff --git a/src/components/sections/hero-section.tsx b/src/components/sections/hero-section.tsx
index 6c1f2cb..b383c3c 100644
--- a/src/components/sections/hero-section.tsx
+++ b/src/components/sections/hero-section.tsx
@@ -4,14 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
-import { ArrowRight, Sparkles, Code2, Cloud, Shield, BarChart3 } from 'lucide-react';
-
-const iconMap = {
-  Code: Code2,
-  Cloud: Cloud,
-  BarChart3: BarChart3,
-  Shield: Shield,
-};
+import { ArrowRight, Sparkles } from 'lucide-react';
 
 export function HeroSection() {
   const [isVisible, setIsVisible] = useState(false);
@@ -63,16 +56,16 @@ export function HeroSection() {
     <section 
       id="home" 
       ref={sectionRef}
-      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-white dark:bg-[var(--color-bg-primary)]"
+      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-[var(--color-bg-primary)]"
     >
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl animate-pulse-glow" />
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-[var(--color-tech-purple)]/5 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '1s' }} />
-        <div className="absolute top-1/2 right-1/3 w-64 h-64 bg-[var(--color-tech-cyan)]/5 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '2s' }} />
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/10 rounded-full blur-3xl animate-pulse-glow" />
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-[var(--color-tech-purple)]/10 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '1s' }} />
+        <div className="absolute top-1/2 right-1/3 w-64 h-64 bg-[var(--color-tech-cyan)]/10 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '2s' }} />
       </div>
 
       <div className="absolute inset-0 pointer-events-none">
-        <svg className="absolute w-full h-full opacity-10">
+        <svg className="absolute w-full h-full opacity-5">
           <defs>
             <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
               <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--color-tech-blue)" strokeWidth="0.5" />
@@ -90,7 +83,7 @@ export function HeroSection() {
             transition={{ duration: 0.6 }}
             className="mb-6"
           >
-            <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">
+            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[rgba(0,217,255,0.05)] text-[var(--color-tech-blue)] text-sm font-medium">
               <Sparkles className="w-4 h-4" />
               科技创新 · 智慧未来
             </span>
@@ -100,18 +93,18 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight mb-6"
+            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] leading-tight tracking-tight mb-6"
           >
             <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
             <br />
-            <span className="text-gray-600 dark:text-gray-300">企业数字化转型服务商</span>
+            <span className="text-[var(--color-text-secondary)]">企业数字化转型服务商</span>
           </motion.h1>
 
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
+            className="text-lg sm:text-xl text-[var(--color-text-tertiary)] mb-8 max-w-2xl mx-auto leading-relaxed"
           >
             {COMPANY_INFO.description}
           </motion.p>
@@ -145,7 +138,7 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.4 }}
-            className="pt-12 border-t border-gray-200 dark:border-gray-800"
+            className="pt-12 border-t border-[var(--color-border-primary)]"
           >
             <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
               {STATS.map((stat, index) => (
@@ -161,7 +154,7 @@ export function HeroSection() {
         </div>
       </div>
 
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
     </section>
   );
 }
@@ -188,7 +181,7 @@ function StatItem({ stat, index, shouldAnimate }: {
           `0${suffix}`
         )}
       </div>
-      <div className="text-sm text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+      <div className="text-sm text-[var(--color-text-muted)] group-hover:text-[var(--color-text-tertiary)] transition-colors">
         {stat.label}
       </div>
     </motion.div>