diff --git a/src/App.css b/src/App.css
index 7b19b14..30ba7ab 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,21 +4,122 @@
     box-sizing: border-box;
 }
 
+:root {
+    --primary: #FAE307;
+    --primary-deep: #d4c506;
+    --primary-soft: rgba(250, 227, 7, 0.8);
+}
+
 .app {
     width: 100%;
     min-height: 100vh;
-    background: #ffffff;
-    color: #1a1a1a;
+    background: #000000;
+    color: #f5f5f5;   
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* 整个页面的星星点点效果 */
+.app::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 120%;
+    height: 120%;
+    background-image: 
+        radial-gradient(circle at 20% 30%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 60% 70%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 50% 50%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 80% 10%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 90% 40%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 33% 60%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 55% 80%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 10% 90%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 25% 15%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 70% 25%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 40% 85%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 15% 50%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 85% 60%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 75% 90%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 5% 70%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 45% 20%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 95% 80%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 35% 45%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 65% 5%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 50% 95%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 12% 25%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 38% 65%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 68% 35%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 88% 75%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 22% 85%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 72% 15%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 42% 45%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 92% 55%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 18% 65%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 58% 25%, var(--primary) 2px, transparent 2px);
+    background-size: 120% 120%;
+    opacity: 0.6;
+    animation: starMove1 20s linear infinite, twinkle 3s ease-in-out infinite;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.app::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 120%;
+    height: 120%;
+    background-image: 
+        radial-gradient(circle at 30% 40%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 50% 20%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 80% 50%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 20% 80%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 90% 15%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 40% 10%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 60% 60%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 10% 40%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 70% 85%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 25% 55%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 85% 30%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 5% 25%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 55% 90%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 95% 70%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 15% 60%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 75% 35%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 45% 75%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 35% 5%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 65% 45%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 50% 65%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 28% 35%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 48% 85%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 78% 25%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 8% 75%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 52% 15%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 82% 65%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 32% 55%, var(--primary) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 62% 85%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 92% 25%, var(--primary) 1px, transparent 1px),
+        radial-gradient(circle at 18% 45%, var(--primary) 2px, transparent 2px);
+    background-size: 120% 120%;
+    opacity: 0.4;
+    animation: starMove2 25s linear infinite reverse, twinkle 4s ease-in-out infinite reverse;
+    z-index: 0;
+    pointer-events: none;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px;
+    position: relative;
+    z-index: 1;
 }
 
 /* Hero 区 */
@@ -27,11 +128,59 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #000000;
     color: #ffffff;
     text-align: center;
     padding: 80px 0;
-    animation: fadeIn 1s ease-out;
+    position: relative;
+    overflow: hidden;
+    animation: fadeIn 0.9s ease-out;
+}
+
+
+@keyframes starMove1 {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(5%, 3%);
+    }
+    50% {
+        transform: translate(-3%, 8%);
+    }
+    75% {
+        transform: translate(-8%, 3%);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes starMove2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(-4%, -5%);
+    }
+    50% {
+        transform: translate(6%, -2%);
+    }
+    75% {
+        transform: translate(3%, 6%);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes twinkle {
+    0%, 100% {
+        opacity: 0.4;
+    }
+    50% {
+        opacity: 0.9;
+    }
 }
 
 @keyframes fadeIn {
@@ -49,6 +198,15 @@
     line-height: 1.2;
     margin-bottom: 24px;
     letter-spacing: -0.02em;
+
+    position: relative;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    border-right: 2px solid rgba(250, 227, 7, 0.9);
+    animation:
+        typing 4s steps(24, end) 0.5s forwards,
+        blink-caret 0.8s step-end infinite;
 }
 
 .hero-subtitle {
@@ -106,35 +264,87 @@
     padding: 16px 32px;
     font-size: 18px;
     font-weight: 600;
-    background: #ffffff;
-    color: #667eea;
+    background: radial-gradient(circle at 0 0, #ffffff 0, var(--primary) 55%, var(--primary-deep) 100%);
+    color: #17130a;
     border: none;
-    border-radius: 12px;
+    border-radius: 999px;
     cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.22s ease-out;
+    box-shadow:
+        0 8px 22px rgba(0, 0, 0, 0.35),
+        0 0 22px rgba(250, 227, 7, 0.6);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    mix-blend-mode: screen;
+    pointer-events: none;
+}
+
+
+.btn-primary::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    mix-blend-mode: screen;
+    pointer-events: none;
 }
 
 .btn-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    box-shadow:
+        0 12px 30px rgba(0, 0, 0, 0.45),
+        0 0 32px rgba(250, 227, 7, 0.85);
+    filter: brightness(1.03);
 }
 
+.btn-primary:active {
+    transform: translateY(0);
+    box-shadow:
+        0 6px 16px rgba(0, 0, 0, 0.35),
+        0 0 20px rgba(250, 227, 7, 0.7);
+}
+
+
 .btn-secondary {
     padding: 16px 32px;
     font-size: 18px;
     font-weight: 600;
     background: transparent;
     color: #ffffff;
-    border: 2px solid rgba(255, 255, 255, 0.5);
-    border-radius: 12px;
+    border: 1px solid rgba(250, 227, 7, 0.6);
+    border-radius: 999px;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.22s ease-out;
+    position: relative;
+    overflow: hidden;
+}
+
+
+.btn-secondary::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent 0, rgba(250, 227, 7, 0.28) 40%, transparent 100%);
+    transform: translateX(-120%);
+    transition: transform 0.25s ease-out;
+}
+
+.btn-secondary:hover::before {
+    transform: translateX(0%);
 }
 
 .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.8);
+    background: rgba(250, 227, 7, 0.12);
+    border-color: rgba(250, 227, 7, 0.9);
 }
 
 /* Section 通用样式 */
@@ -142,6 +352,9 @@
     padding: 120px 0;
     scroll-margin-top: 80px;
     animation: fadeInUp 0.8s ease-out;
+    background: transparent;
+    position: relative;
+    z-index: 1;
 }
 
 @keyframes fadeInUp {
@@ -154,9 +367,26 @@
         transform: translateY(0);
     }
 }
+@keyframes typing {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+@keyframes blink-caret {
+    0%, 100% {
+        border-color: rgba(250, 227, 7, 0);
+    }
+    50% {
+        border-color: rgba(250, 227, 7, 0.9);
+    }
+}
 
 .section-alt {
-    background: #f8f9fa;
+    background: transparent;
 }
 
 .section-title {
@@ -166,13 +396,13 @@
     margin-bottom: 24px;
     text-align: center;
     letter-spacing: -0.02em;
-    color: #1a1a1a;
+    color: #fdfdfd;
 }
 
 .section-subtitle {
     font-size: 20px;
     line-height: 1.8;
-    color: #666666;
+    color: rgba(245, 245, 245, 0.78);  
     text-align: center;
     max-width: 800px;
     margin: 0 auto 64px;
@@ -181,7 +411,7 @@
 .section-desc {
     font-size: 18px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
     text-align: center;
     max-width: 900px;
     margin: 0 auto 64px;
@@ -190,7 +420,7 @@
 .section-summary {
     font-size: 22px;
     line-height: 1.8;
-    color: #333333;
+    color: #f5f5f5;;
     text-align: center;
     max-width: 700px;
     margin: 64px auto 0;
@@ -207,28 +437,32 @@
 
 .pain-point {
     padding: 32px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
 }
 
 .pain-point:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    border-color: rgba(250, 227, 7, 0.3);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .pain-point h3 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 16px;
-    color: #667eea;
+    color: var(--primary);
 }
 
 .pain-point p {
     font-size: 16px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
 }
 
 /* 功能卡片网格 */
@@ -241,29 +475,33 @@
 
 .feature-card {
     padding: 40px 32px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
-    border-top: 4px solid #667eea;
+    border-top: 4px solid var(--primary);
+    backdrop-filter: blur(10px);
 }
 
 .feature-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    border-color: rgba(250, 227, 7, 0.3);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .feature-card h3 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 16px;
-    color: #1a1a1a;
+    color: #fdfdfd;
 }
 
 .feature-card p {
     font-size: 16px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
 }
 
 /* 场景卡片 */
@@ -276,30 +514,34 @@
 
 .scenario-card {
     padding: 48px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
     max-width: 900px;
     margin: 0 auto;
+    backdrop-filter: blur(10px);
 }
 
 .scenario-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    transform: translateY(-6px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    border-color: rgba(250, 227, 7, 0.3);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .scenario-card h3 {
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 12px;
-    color: #1a1a1a;
+    color: #fdfdfd;
 }
 
 .scenario-label {
     display: inline-block;
     padding: 6px 16px;
-    background: #667eea;
+    background: var(--primary);
     color: #ffffff;
     border-radius: 20px;
     font-size: 14px;
@@ -310,7 +552,7 @@
 .scenario-desc {
     font-size: 18px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
 }
 
 /* 功能列表 */
@@ -326,29 +568,33 @@
 
 .function-item {
     padding: 32px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
-    border-left: 4px solid #667eea;
+    border-left: 4px solid var(--primary);
+    backdrop-filter: blur(10px);
 }
 
 .function-item:hover {
     transform: translateX(8px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    border-color: rgba(250, 227, 7, 0.3);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .function-item h3 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 12px;
-    color: #1a1a1a;
+    color: #fdfdfd;
 }
 
 .function-item p {
     font-size: 16px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
 }
 
 /* 愿景列表 */
@@ -362,7 +608,7 @@
 .vision-list li {
     font-size: 20px;
     line-height: 2;
-    color: #333333;
+    color: #f5f5f5;;
     padding: 16px 0;
     padding-left: 32px;
     position: relative;
@@ -379,7 +625,7 @@
 .vision-motto {
     font-size: 24px;
     line-height: 1.8;
-    color: #667eea;
+    color: var(--primary-soft);       
     text-align: center;
     max-width: 700px;
     margin: 64px auto 0;
@@ -399,27 +645,29 @@
 
 .faq-item {
     padding: 32px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
 }
 
 .faq-item h3 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 16px;
-    color: #1a1a1a;
+    color: #fdfdfd;
 }
 
 .faq-item p {
     font-size: 16px;
     line-height: 1.8;
-    color: #666666;
+    color:  rgba(245, 245, 245, 0.78);
 }
 
 /* CTA 区块 */
 .cta-section {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: transparent;
     color: #ffffff;
 }
 
@@ -431,27 +679,15 @@
     color: rgba(255, 255, 255, 0.9);
 }
 
-.cta-section .btn-primary {
-    background: #ffffff;
-    color: #667eea;
-}
-
-.cta-section .btn-secondary {
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.5);
-}
-
-.cta-section .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.8);
-}
 
 /* Footer */
 .footer {
     padding: 48px 0;
-    background: #1a1a1a;
+    background: transparent;
     color: #ffffff;
     text-align: center;
+    position: relative;
+    z-index: 1;
 }
 
 .footer-brand {
@@ -533,4 +769,26 @@
     .section-title {
         font-size: 28px;
     }
+
+    @keyframes soft-float {
+        0% {
+            transform: translateY(0);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+        50% {
+            transform: translateY(-4px);
+            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
+        }
+        100% {
+            transform: translateY(0);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+    }
+    .feature-card:nth-child(1),
+    .feature-card:nth-child(2),
+    .feature-card:nth-child(3) {
+        animation: soft-float 7s ease-in-out infinite;
+        animation-delay: calc((var(--i, 0)) * 0.6s);
+    }
+
 }
diff --git a/src/index.css b/src/index.css
index 0348663..dffdd64 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,12 +7,20 @@
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    
+    --primary: #FAE307;
+    --primary-deep: #C9B600;
+    --primary-soft: #FFF7A8;
+    --bg-dark: #050509;
+    --text-main: #1A1A1A;
 }
 
 body {
     margin: 0;
     min-width: 320px;
     min-height: 100vh;
+    background: #000000;
+    color: #f5f5f5;
 }
 
 #root {