From c01e83227b561f59616b4c0f323fd9e3202186e2 Mon Sep 17 00:00:00 2001
From: chiguyong <chiguyong@beyondsoft.com>
Date: Sat, 23 May 2026 09:34:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E9=9D=A2=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AE=98=E7=BD=91UI=20-=20OKLCH=E8=89=B2=E5=BD=A9=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=20+=20=E9=9D=9E=E5=AF=B9=E7=A7=B0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 采用OKLCH色彩空间替换传统hex颜色
- 集成shadcn/ui设计令牌体系
- 应用Space Grotesk展示字体 + Inter正文
- 实现非对称斜线流布局（卡片错位、渐变边框）
- 替换emoji为Lucide SVG图标
- 添加精确动效参数（scale 1→1.03, damping 20）
- 完善prefers-reduced-motion无障碍支持
- 增大圆角至24px提升现代感
- 添加毛玻璃和渐变边框视觉效果
---
 index.html | 1102 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 775 insertions(+), 327 deletions(-)

diff --git a/index.html b/index.html
index 4a56c68..73f9fb3 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
     
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
     
@@ -346,22 +346,58 @@
     </script>
     
     <style>
+        /* ============================================
+           SHADCN/UI DESIGN TOKENS + OKLCH COLOR SYSTEM
+           ============================================ */
         :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #0f0f15;
-            --bg-elevated: #141419;
-            --accent-blue: #3B82F6;
-            --accent-blue-light: #60A5FA;
-            --accent-blue-dark: #2563EB;
-            --accent-cyan: #22D3EE;
-            --text-primary: #ffffff;
-            --text-secondary: rgba(255, 255, 255, 0.7);
-            --text-tertiary: rgba(255, 255, 255, 0.4);
-            --border-subtle: rgba(255, 255, 255, 0.06);
-            --border-medium: rgba(255, 255, 255, 0.1);
-            --glow-blue: rgba(59, 130, 246, 0.3);
+            /* Background Scale - OKLCH */
+            --background: oklch(0.08 0.02 270);
+            --foreground: oklch(0.98 0.005 270);
+            --card: oklch(0.1 0.02 270);
+            --card-foreground: oklch(0.98 0.005 270);
+            --popover: oklch(0.1 0.02 270);
+            --popover-foreground: oklch(0.98 0.005 270);
+            --primary: oklch(0.65 0.18 250);
+            --primary-foreground: oklch(0.98 0.005 270);
+            --secondary: oklch(0.15 0.03 270);
+            --secondary-foreground: oklch(0.98 0.005 270);
+            --muted: oklch(0.15 0.03 270);
+            --muted-foreground: oklch(0.65 0.05 270);
+            --accent: oklch(0.75 0.15 190);
+            --accent-foreground: oklch(0.08 0.02 270);
+            --destructive: oklch(0.55 0.2 25);
+            --destructive-foreground: oklch(0.98 0.005 270);
+            --border: oklch(0.2 0.02 270);
+            --input: oklch(0.15 0.02 270);
+            --ring: oklch(0.65 0.18 250);
+            --radius: 1.5rem;
+
+            /* Legacy compatibility */
+            --bg-primary: oklch(0.08 0.02 270);
+            --bg-secondary: oklch(0.1 0.02 270);
+            --bg-elevated: oklch(0.12 0.02 270);
+            --accent-blue: oklch(0.65 0.18 250);
+            --accent-blue-light: oklch(0.75 0.15 250);
+            --accent-blue-dark: oklch(0.55 0.2 250);
+            --accent-cyan: oklch(0.75 0.15 190);
+            --text-primary: oklch(0.98 0.005 270);
+            --text-secondary: oklch(0.7 0.05 270);
+            --text-tertiary: oklch(0.55 0.05 270);
+            --border-subtle: oklch(0.2 0.02 270);
+            --border-medium: oklch(0.25 0.02 270);
+            --glow-blue: oklch(0.65 0.18 250 / 0.3);
+
+            /* Animation Tokens */
+            --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
+            --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
+            --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
+            --spring-damping: 20;
+            --spring-stiffness: 300;
         }
 
+        /* ============================================
+           BASE STYLES
+           ============================================ */
         *, *::before, *::after {
             box-sizing: border-box;
             margin: 0;
@@ -375,8 +411,8 @@
 
         body {
             font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
+            background: var(--background);
+            color: var(--foreground);
             line-height: 1.6;
             overflow-x: hidden;
             -webkit-font-smoothing: antialiased;
@@ -384,15 +420,20 @@
             scroll-behavior: smooth;
         }
 
+        /* prefers-reduced-motion: comprehensive support */
         @media (prefers-reduced-motion: reduce) {
-            body { scroll-behavior: auto; }
+            html { scroll-behavior: auto; }
             *, *::before, *::after {
                 animation-duration: 0.01ms !important;
                 animation-iteration-count: 1 !important;
                 transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
             }
         }
 
+        /* ============================================
+           LAYOUT SYSTEM - Asymmetric Diagonal Flow
+           ============================================ */
         .container {
             width: 100%;
             max-width: 1400px;
@@ -405,12 +446,25 @@
             position: relative;
         }
 
+        /* Asymmetric diagonal section divider */
+        .section::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
+            opacity: 0.5;
+        }
+
         .section-label {
+            font-family: 'Space Grotesk', 'Inter', sans-serif;
             font-size: 11px;
             font-weight: 600;
             letter-spacing: 0.2em;
             text-transform: uppercase;
-            color: var(--accent-blue);
+            color: var(--primary);
             margin-bottom: 24px;
             display: flex;
             align-items: center;
@@ -421,24 +475,28 @@
             content: '';
             width: 24px;
             height: 1px;
-            background: var(--accent-blue);
+            background: var(--primary);
         }
 
         .section-title {
-            font-size: clamp(36px, 5vw, 64px);
-            font-weight: 800;
-            line-height: 1.1;
-            letter-spacing: -0.03em;
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
+            font-size: clamp(40px, 6vw, 72px);
+            font-weight: 700;
+            line-height: 1.05;
+            letter-spacing: -0.04em;
             margin-bottom: 24px;
         }
 
         .section-subtitle {
             font-size: clamp(16px, 1.5vw, 20px);
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.7;
             max-width: 600px;
         }
 
+        /* ============================================
+           NAVIGATION
+           ============================================ */
         nav {
             position: fixed;
             top: 0;
@@ -446,15 +504,15 @@
             right: 0;
             z-index: 1000;
             padding: 20px 0;
-            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            transition: all var(--transition-slow);
         }
 
         nav.scrolled {
             padding: 12px 0;
-            background: rgba(10, 10, 15, 0.85);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--border-subtle);
+            background: oklch(0.08 0.02 270 / 0.7);
+            backdrop-filter: blur(20px) saturate(1.5);
+            -webkit-backdrop-filter: blur(20px) saturate(1.5);
+            border-bottom: 1px solid oklch(0.65 0.18 250 / 0.1);
         }
 
         .nav-inner {
@@ -464,11 +522,17 @@
         }
 
         .logo {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 14px;
             font-weight: 700;
             letter-spacing: 0.15em;
-            color: var(--text-primary);
+            color: var(--foreground);
             text-decoration: none;
+            transition: transform var(--transition-base);
+        }
+
+        .logo:hover {
+            transform: scale(1.03) translateY(-2px);
         }
 
         .nav-links {
@@ -479,34 +543,59 @@
         .nav-links a {
             font-size: 13px;
             font-weight: 500;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             text-decoration: none;
-            transition: color 0.3s ease;
+            transition: color var(--transition-base);
+            position: relative;
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 0;
+            height: 1px;
+            background: var(--primary);
+            transition: width var(--transition-base);
         }
 
         .nav-links a:hover {
-            color: var(--text-primary);
+            color: var(--foreground);
         }
 
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+
+        /* ============================================
+           BUTTONS - With precise animation params
+           ============================================ */
         .btn {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             padding: 14px 28px;
+            font-family: 'Space Grotesk', 'Inter', sans-serif;
             font-size: 13px;
             font-weight: 600;
             letter-spacing: 0.02em;
             text-decoration: none;
-            border-radius: 8px;
-            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            border-radius: var(--radius);
+            transition: transform var(--transition-base), box-shadow var(--transition-base);
             cursor: pointer;
             border: none;
+            will-change: transform;
+        }
+
+        .btn:hover {
+            transform: scale(1.03) translateY(-2px);
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
-            color: white;
-            box-shadow: 0 4px 20px var(--glow-blue), 0 0 40px rgba(59, 130, 246, 0.2);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250) 0%, oklch(0.55 0.2 250) 100%);
+            color: var(--primary-foreground);
+            box-shadow: 0 4px 20px oklch(0.65 0.18 250 / 0.3), 0 0 40px oklch(0.65 0.18 250 / 0.2);
             position: relative;
             overflow: hidden;
         }
@@ -518,7 +607,7 @@
             left: -100%;
             width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.2), transparent);
             transition: left 0.5s;
         }
 
@@ -527,23 +616,42 @@
         }
 
         .btn-primary:hover {
-            background: linear-gradient(135deg, var(--accent-blue-light) 0%, var(--accent-blue) 100%);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px var(--glow-blue), 0 0 60px rgba(59, 130, 246, 0.3);
+            background: linear-gradient(135deg, oklch(0.75 0.15 250) 0%, oklch(0.65 0.18 250) 100%);
+            box-shadow: 0 8px 30px oklch(0.65 0.18 250 / 0.3), 0 0 60px oklch(0.65 0.18 250 / 0.3);
+        }
+
+        /* Glow effect on hover */
+        .btn-primary::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border-radius: calc(var(--radius) + 2px);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.5), oklch(0.75 0.15 190 / 0.3));
+            z-index: -1;
+            opacity: 0;
+            filter: blur(10px);
+            transition: opacity var(--transition-base);
+        }
+
+        .btn-primary:hover::after {
+            opacity: 1;
         }
 
         .btn-ghost {
             background: transparent;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             border: 1px solid var(--border-medium);
         }
 
         .btn-ghost:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: var(--text-primary);
+            background: oklch(1 0 0 / 0.05);
+            color: var(--foreground);
             border-color: var(--border-medium);
         }
 
+        /* ============================================
+           HERO SECTION - Asymmetric Diagonal Layout
+           ============================================ */
         .hero {
             min-height: 100vh;
             display: flex;
@@ -551,7 +659,20 @@
             justify-content: center;
             position: relative;
             overflow: hidden;
-            background: linear-gradient(180deg, #0f0f1a 0%, #0a0a0f 50%, #080810 100%);
+            background: linear-gradient(180deg, oklch(0.1 0.03 270) 0%, oklch(0.08 0.02 270) 50%, oklch(0.07 0.02 270) 100%);
+        }
+
+        /* Diagonal clip overlay */
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(165deg, transparent 60%, oklch(0.65 0.18 250 / 0.03) 60%);
+            z-index: 2;
+            pointer-events: none;
         }
 
         #hero-canvas {
@@ -582,7 +703,7 @@
             transform: translateX(-50%);
             width: 120%;
             height: 100%;
-            background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 30%, transparent 70%);
+            background: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.65 0.18 250 / 0.25) 0%, oklch(0.65 0.18 250 / 0.1) 30%, transparent 70%);
             animation: glowPulse 8s ease-in-out infinite;
         }
 
@@ -593,7 +714,7 @@
             left: 0;
             right: 0;
             height: 50%;
-            background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
+            background: radial-gradient(ellipse 100% 80% at 50% 100%, oklch(0.65 0.18 250 / 0.15) 0%, transparent 60%);
         }
 
         .hero-glow-1 {
@@ -602,7 +723,7 @@
             left: 10%;
             width: 300px;
             height: 300px;
-            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
+            background: radial-gradient(circle, oklch(0.65 0.18 250 / 0.2) 0%, transparent 70%);
             border-radius: 50%;
             filter: blur(60px);
             animation: floatGlow 12s ease-in-out infinite;
@@ -615,7 +736,7 @@
             right: 15%;
             width: 250px;
             height: 250px;
-            background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
+            background: radial-gradient(circle, oklch(0.75 0.15 190 / 0.15) 0%, transparent 70%);
             border-radius: 50%;
             filter: blur(50px);
             animation: floatGlow 10s ease-in-out infinite reverse;
@@ -628,7 +749,7 @@
             right: 25%;
             width: 200px;
             height: 200px;
-            background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
+            background: radial-gradient(circle, oklch(0.6 0.2 280 / 0.12) 0%, transparent 70%);
             border-radius: 50%;
             filter: blur(40px);
             animation: floatGlow 14s ease-in-out infinite;
@@ -659,53 +780,71 @@
             align-items: center;
             gap: 8px;
             padding: 10px 20px;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
-            border: 1px solid rgba(59, 130, 246, 0.3);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.15) 0%, oklch(0.65 0.18 250 / 0.05) 100%);
+            border: 1px solid oklch(0.65 0.18 250 / 0.3);
             border-radius: 100px;
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 13px;
             font-weight: 600;
-            color: var(--accent-blue-light);
+            color: oklch(0.75 0.15 250);
             margin-bottom: 32px;
             backdrop-filter: blur(10px);
-            box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
+            box-shadow: 0 0 30px oklch(0.65 0.18 250 / 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-badge::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 100px;
+            padding: 1px;
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.5), oklch(0.75 0.15 190 / 0.3));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0.5;
+            pointer-events: none;
         }
 
         .hero-badge::before {
             content: '';
             width: 8px;
             height: 8px;
-            background: var(--accent-blue);
+            background: var(--primary);
             border-radius: 50%;
-            box-shadow: 0 0 10px var(--accent-blue);
+            box-shadow: 0 0 10px var(--primary);
             animation: pulse 2s ease-in-out infinite;
         }
 
         @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--accent-blue); }
-            50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 20px var(--accent-blue); }
+            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--primary); }
+            50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 20px var(--primary); }
         }
 
         .hero-title {
-            font-size: clamp(42px, 7vw, 88px);
-            font-weight: 900;
-            line-height: 1.05;
-            letter-spacing: -0.04em;
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
+            font-size: clamp(48px, 8vw, 96px);
+            font-weight: 700;
+            line-height: 1.0;
+            letter-spacing: -0.05em;
             margin-bottom: 24px;
-            text-shadow: 0 0 60px rgba(59, 130, 246, 0.3);
+            text-shadow: 0 0 80px oklch(0.65 0.18 250 / 0.4);
         }
 
         .hero-title .char {
             display: inline-block;
             opacity: 0;
             transform: translateY(40px);
-            background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
+            background: linear-gradient(180deg, oklch(1 0 0) 0%, oklch(1 0 0 / 0.8) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
 
         .hero-title .highlight {
-            background: linear-gradient(135deg, var(--accent-blue-light) 0%, var(--accent-cyan) 50%, var(--accent-blue-light) 100%);
+            background: linear-gradient(135deg, oklch(0.75 0.15 250) 0%, oklch(0.75 0.15 190) 50%, oklch(0.75 0.15 250) 100%);
             background-size: 200% 200%;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -720,12 +859,12 @@
 
         .hero-subtitle {
             font-size: clamp(16px, 1.8vw, 22px);
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.7;
             max-width: 600px;
             margin: 0 auto 48px;
             opacity: 0;
-            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+            text-shadow: 0 2px 20px oklch(0 0 0 / 0.5);
         }
 
         .hero-cta {
@@ -748,9 +887,15 @@
             gap: 12px;
             opacity: 0;
             cursor: pointer;
+            transition: transform var(--transition-base);
+        }
+
+        .scroll-indicator:hover {
+            transform: translateX(-50%) scale(1.03) translateY(-2px);
         }
 
         .scroll-indicator span {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 10px;
             letter-spacing: 0.2em;
             text-transform: uppercase;
@@ -760,7 +905,7 @@
         .scroll-line {
             width: 2px;
             height: 60px;
-            background: linear-gradient(to bottom, var(--accent-blue), transparent);
+            background: linear-gradient(to bottom, var(--primary), transparent);
             position: relative;
             overflow: hidden;
         }
@@ -784,9 +929,12 @@
         }
 
         .scroll-indicator:hover .scroll-line {
-            background: linear-gradient(to bottom, var(--accent-blue-light), transparent);
+            background: linear-gradient(to bottom, oklch(0.75 0.15 250), transparent);
         }
 
+        /* ============================================
+           PAIN POINTS SECTION - Asymmetric Grid
+           ============================================ */
         .pain-section {
             background: var(--bg-secondary);
         }
@@ -795,22 +943,54 @@
             margin-bottom: 80px;
         }
 
+        /* Asymmetric overlapping grid */
         .pain-grid {
             display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 2px;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 24px;
         }
 
         .pain-card {
-            background: var(--bg-elevated);
+            background: linear-gradient(135deg, var(--bg-elevated) 0%, oklch(0.11 0.02 270) 100%);
             padding: 48px;
             position: relative;
             overflow: hidden;
-            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            transition: transform var(--transition-base), box-shadow var(--transition-base);
+            border-radius: var(--radius);
+            border: 1px solid var(--border-subtle);
+            backdrop-filter: blur(10px);
         }
 
+        /* Gradient border effect */
+        .pain-card::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius);
+            padding: 1px;
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.3), oklch(0.75 0.15 190 / 0.1));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0;
+            transition: opacity var(--transition-base);
+            pointer-events: none;
+        }
+
+        .pain-card:hover::after {
+            opacity: 1;
+        }
+
+        /* Asymmetric card placement */
+        .pain-card:nth-child(1) { grid-column: 1 / 8; transform: translateY(0); }
+        .pain-card:nth-child(2) { grid-column: 6 / 13; transform: translateY(40px); }
+        .pain-card:nth-child(3) { grid-column: 1 / 7; transform: translateY(-20px); }
+        .pain-card:nth-child(4) { grid-column: 5 / 13; transform: translateY(20px); }
+
         .pain-card:hover {
-            background: rgba(59, 130, 246, 0.05);
+            transform: scale(1.03) translateY(-2px) !important;
+            box-shadow: 0 20px 40px oklch(0 0 0 / 0.2);
+            border-color: oklch(0.65 0.18 250 / 0.3);
         }
 
         .pain-card::before {
@@ -820,9 +1000,9 @@
             left: 0;
             right: 0;
             height: 1px;
-            background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
+            background: linear-gradient(90deg, transparent, var(--primary), transparent);
             opacity: 0;
-            transition: opacity 0.4s ease;
+            transition: opacity var(--transition-base);
         }
 
         .pain-card:hover::before {
@@ -830,9 +1010,10 @@
         }
 
         .pain-number {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 72px;
-            font-weight: 900;
-            color: rgba(255, 255, 255, 0.03);
+            font-weight: 700;
+            color: oklch(1 0 0 / 0.03);
             position: absolute;
             top: 24px;
             right: 32px;
@@ -844,45 +1025,72 @@
             width: 48px;
             height: 48px;
             margin-bottom: 24px;
-            color: var(--accent-blue);
+            color: var(--primary);
             opacity: 0.6;
+            transition: opacity var(--transition-base);
+        }
+
+        .pain-card:hover .pain-icon {
+            opacity: 1;
         }
 
         .pain-card h3 {
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
             font-size: 20px;
-            font-weight: 700;
+            font-weight: 600;
             line-height: 1.4;
             margin-bottom: 16px;
-            color: var(--text-primary);
+            color: var(--foreground);
         }
 
         .pain-card p {
             font-size: 15px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.7;
         }
 
         .pain-insight {
             grid-column: 1 / -1;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
-            border: 1px solid rgba(59, 130, 246, 0.2);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.15) 0%, oklch(0.75 0.15 190 / 0.08) 100%);
+            border: 1px solid oklch(0.65 0.18 250 / 0.3);
             padding: 64px;
             text-align: center;
+            border-radius: var(--radius);
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 0 60px oklch(0.65 0.18 250 / 0.1);
+        }
+
+        /* Diagonal accent line */
+        .pain-insight::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(165deg, transparent 70%, oklch(0.65 0.18 250 / 0.1) 70%);
+            pointer-events: none;
         }
 
         .pain-insight h3 {
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
             font-size: clamp(28px, 3vw, 40px);
-            font-weight: 800;
+            font-weight: 700;
             margin-bottom: 16px;
         }
 
         .pain-insight p {
             font-size: 18px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             max-width: 600px;
             margin: 0 auto;
         }
 
+        /* ============================================
+           SERVICES SECTION - Diagonal Flow Cards
+           ============================================ */
         .services-section {
             background: var(--bg-primary);
         }
@@ -911,12 +1119,22 @@
             align-items: center;
             padding: clamp(60px, 8vh, 100px) 0;
             border-bottom: 1px solid var(--border-subtle);
+            position: relative;
         }
 
         .service-card:last-child {
             border-bottom: none;
         }
 
+        /* Diagonal offset for alternating cards */
+        .service-card:nth-child(odd) .service-content {
+            padding-right: 40px;
+        }
+
+        .service-card:nth-child(even) .service-content {
+            padding-left: 40px;
+        }
+
         .service-card.reverse {
             direction: rtl;
         }
@@ -929,20 +1147,24 @@
             display: inline-flex;
             align-items: center;
             gap: 8px;
-            padding: 6px 12px;
-            background: rgba(59, 130, 246, 0.1);
-            border-radius: 6px;
+            padding: 8px 16px;
+            background: oklch(0.65 0.18 250 / 0.1);
+            border: 1px solid oklch(0.65 0.18 250 / 0.2);
+            border-radius: 100px;
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 12px;
             font-weight: 600;
-            color: var(--accent-blue-light);
+            color: oklch(0.75 0.15 250);
             margin-bottom: 20px;
+            backdrop-filter: blur(10px);
         }
 
         .service-metric {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: clamp(48px, 6vw, 72px);
-            font-weight: 900;
+            font-weight: 700;
             letter-spacing: -0.04em;
-            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+            background: linear-gradient(135deg, var(--foreground) 0%, var(--muted-foreground) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -950,15 +1172,16 @@
         }
 
         .service-title {
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
             font-size: clamp(28px, 3vw, 40px);
-            font-weight: 800;
+            font-weight: 700;
             line-height: 1.2;
             margin-bottom: 20px;
         }
 
         .service-desc {
             font-size: 16px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.8;
             margin-bottom: 24px;
         }
@@ -966,18 +1189,46 @@
         .service-quote {
             padding: 16px 20px;
             background: var(--bg-elevated);
-            border-left: 2px solid var(--accent-blue);
+            border-left: 2px solid var(--primary);
             font-size: 14px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             font-style: italic;
+            border-radius: 0 var(--radius) var(--radius) 0;
         }
 
         .service-visual {
             aspect-ratio: 4/3;
             background: var(--bg-elevated);
-            border-radius: 16px;
+            border-radius: var(--radius);
             overflow: hidden;
             position: relative;
+            transition: transform var(--transition-base), box-shadow var(--transition-base);
+            border: 1px solid var(--border-subtle);
+        }
+
+        .service-visual::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius);
+            padding: 1px;
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.3), oklch(0.75 0.15 190 / 0.1));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0;
+            transition: opacity var(--transition-base);
+            pointer-events: none;
+            z-index: 2;
+        }
+
+        .service-visual:hover {
+            transform: scale(1.03) translateY(-2px);
+            box-shadow: 0 20px 40px oklch(0 0 0 / 0.2);
+        }
+
+        .service-visual:hover::after {
+            opacity: 1;
         }
 
         .service-visual img {
@@ -985,22 +1236,37 @@
             height: 100%;
             object-fit: cover;
             filter: grayscale(80%) brightness(0.7);
-            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .service-visual:hover img {
             filter: grayscale(40%) brightness(0.85);
-            transform: scale(1.03);
         }
 
         .service-visual::after {
             content: '';
             position: absolute;
             inset: 0;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.1) 0%, transparent 50%);
             pointer-events: none;
         }
 
+        /* Diagonal corner accent */
+        .service-visual::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(165deg, transparent 60%, oklch(0.65 0.18 250 / 0.05) 60%);
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        /* ============================================
+           ADVANTAGES SECTION - Staggered List
+           ============================================ */
         .advantages-section {
             background: var(--bg-secondary);
         }
@@ -1030,33 +1296,53 @@
             padding: 40px 0;
             border-bottom: 1px solid var(--border-subtle);
             align-items: start;
+            transition: all var(--transition-base);
+        }
+
+        .advantage-item:hover {
+            transform: scale(1.03) translateY(-2px);
+            background: linear-gradient(90deg, oklch(0.65 0.18 250 / 0.05), transparent);
+            border-radius: var(--radius);
+            padding: 40px 24px;
+            margin: 0 -24px;
         }
 
         .advantage-item:last-child {
             border-bottom: none;
         }
 
+        /* Staggered diagonal offset */
+        .advantage-item:nth-child(1) { padding-left: 0; }
+        .advantage-item:nth-child(2) { padding-left: 20px; }
+        .advantage-item:nth-child(3) { padding-left: 40px; }
+        .advantage-item:nth-child(4) { padding-left: 20px; }
+        .advantage-item:nth-child(5) { padding-left: 0; }
+
         .advantage-num {
             font-size: 14px;
             font-weight: 600;
-            font-family: 'JetBrains Mono', monospace;
-            color: var(--accent-blue);
+            font-family: 'Space Grotesk', monospace;
+            color: var(--primary);
             opacity: 0.6;
         }
 
         .advantage-content h3 {
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
             font-size: 22px;
-            font-weight: 700;
+            font-weight: 600;
             margin-bottom: 12px;
-            color: var(--text-primary);
+            color: var(--foreground);
         }
 
         .advantage-content p {
             font-size: 16px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.7;
         }
 
+        /* ============================================
+           PROOF SECTION - Asymmetric Cards
+           ============================================ */
         .proof-section {
             background: var(--bg-primary);
         }
@@ -1076,38 +1362,75 @@
 
         .proof-grid {
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
+            grid-template-columns: repeat(12, 1fr);
             gap: 24px;
         }
 
         .proof-card {
-            background: var(--bg-elevated);
+            background: linear-gradient(135deg, var(--bg-elevated) 0%, oklch(0.11 0.02 270) 100%);
             padding: 40px;
-            border-radius: 12px;
+            border-radius: var(--radius);
             border: 1px solid var(--border-subtle);
+            transition: transform var(--transition-base), box-shadow var(--transition-base);
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Gradient border effect */
+        .proof-card::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius);
+            padding: 1px;
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.3), oklch(0.75 0.15 190 / 0.1));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0;
+            transition: opacity var(--transition-base);
+            pointer-events: none;
+        }
+
+        .proof-card:hover::after {
+            opacity: 1;
+        }
+
+        /* Asymmetric card sizes */
+        .proof-card:nth-child(1) { grid-column: 1 / 7; transform: translateY(0); }
+        .proof-card:nth-child(2) { grid-column: 6 / 13; transform: translateY(30px); }
+        .proof-card:nth-child(3) { grid-column: 3 / 11; transform: translateY(-10px); }
+
+        .proof-card:hover {
+            transform: scale(1.03) translateY(-2px) !important;
+            box-shadow: 0 20px 40px oklch(0 0 0 / 0.2);
+            border-color: oklch(0.65 0.18 250 / 0.3);
         }
 
         .proof-type {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 11px;
             font-weight: 600;
             letter-spacing: 0.15em;
             text-transform: uppercase;
-            color: var(--accent-blue);
+            color: var(--primary);
             margin-bottom: 20px;
         }
 
         .proof-quote {
             font-size: 16px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.7;
             margin-bottom: 24px;
         }
 
         .proof-quote::before {
             content: '"';
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 48px;
-            font-weight: 800;
-            color: var(--accent-blue);
+            font-weight: 700;
+            color: var(--primary);
             opacity: 0.3;
             line-height: 0;
             display: block;
@@ -1123,13 +1446,14 @@
         .proof-avatar-icon {
             width: 40px;
             height: 40px;
-            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
+            background: linear-gradient(135deg, oklch(0.65 0.18 250) 0%, oklch(0.75 0.15 190) 100%);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 700;
             font-size: 14px;
+            color: var(--foreground);
         }
 
         .proof-avatar-text {
@@ -1137,8 +1461,25 @@
             color: var(--text-tertiary);
         }
 
+        /* ============================================
+           CONTACT SECTION - Diagonal Split
+           ============================================ */
         .contact-section {
             background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Diagonal background accent */
+        .contact-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(165deg, transparent 70%, oklch(0.65 0.18 250 / 0.03) 70%);
+            pointer-events: none;
         }
 
         .contact-grid {
@@ -1146,6 +1487,8 @@
             grid-template-columns: 1fr 1fr;
             gap: 80px;
             align-items: start;
+            position: relative;
+            z-index: 1;
         }
 
         .contact-info .section-label {
@@ -1153,15 +1496,16 @@
         }
 
         .contact-title {
+            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
             font-size: clamp(28px, 3vw, 40px);
-            font-weight: 800;
+            font-weight: 700;
             line-height: 1.2;
             margin-bottom: 20px;
         }
 
         .contact-desc {
             font-size: 16px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             line-height: 1.8;
             margin-bottom: 48px;
         }
@@ -1178,10 +1522,34 @@
         }
 
         .contact-form {
-            background: var(--bg-elevated);
+            background: linear-gradient(135deg, var(--bg-elevated) 0%, oklch(0.11 0.02 270) 100%);
             padding: 48px;
-            border-radius: 16px;
+            border-radius: var(--radius);
             border: 1px solid var(--border-subtle);
+            transition: transform var(--transition-base), box-shadow var(--transition-base);
+            backdrop-filter: blur(20px);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Gradient border effect for form */
+        .contact-form::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius);
+            padding: 1px;
+            background: linear-gradient(135deg, oklch(0.65 0.18 250 / 0.3), oklch(0.75 0.15 190 / 0.1));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        .contact-form:hover {
+            transform: scale(1.01) translateY(-2px);
+            box-shadow: 0 20px 40px oklch(0 0 0 / 0.2);
         }
 
         .form-group {
@@ -1190,6 +1558,7 @@
 
         .form-group label {
             display: block;
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 12px;
             font-weight: 600;
             letter-spacing: 0.1em;
@@ -1204,18 +1573,18 @@
             padding: 14px 16px;
             background: var(--bg-primary);
             border: 1px solid var(--border-subtle);
-            border-radius: 8px;
-            color: var(--text-primary);
+            border-radius: var(--radius);
+            color: var(--foreground);
             font-size: 15px;
             font-family: inherit;
-            transition: all 0.3s ease;
+            transition: border-color var(--transition-base), box-shadow var(--transition-base);
         }
 
         .form-group input:focus,
         .form-group textarea:focus {
             outline: none;
-            border-color: var(--accent-blue);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px oklch(0.65 0.18 250 / 0.1);
         }
 
         .form-group input::placeholder,
@@ -1245,41 +1614,41 @@
         }
 
         .form-status.success {
-            color: #22c55e;
+            color: oklch(0.65 0.2 145);
         }
 
         .form-status.error {
-            color: #ef4444;
+            color: oklch(0.55 0.2 25);
         }
-        
+
         .form-group.error input,
         .form-group.error textarea {
-            border-color: #ef4444;
+            border-color: oklch(0.55 0.2 25);
             animation: shake 0.5s ease;
         }
-        
+
         @keyframes shake {
             0%, 100% { transform: translateX(0); }
             25% { transform: translateX(-5px); }
             75% { transform: translateX(5px); }
         }
-        
+
         .form-error-msg {
             font-size: 11px;
-            color: #ef4444;
+            color: oklch(0.55 0.2 25);
             margin-top: 6px;
             display: none;
         }
-        
+
         .form-group.error .form-error-msg {
             display: block;
         }
-        
+
         .form-group.required label::after {
             content: ' *';
-            color: #ef4444;
+            color: oklch(0.55 0.2 25);
         }
-        
+
         .current-system-group {
             margin-bottom: 24px;
         }
@@ -1294,27 +1663,27 @@
         .current-system-group legend {
             font-size: 13px;
             font-weight: 500;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             margin-bottom: 8px;
             padding: 0;
         }
-        
+
         .checkbox-group {
             display: flex;
             flex-wrap: wrap;
             gap: 12px;
         }
-        
+
         .checkbox-item {
             position: relative;
         }
-        
+
         .checkbox-item input {
             position: absolute;
             opacity: 0;
             cursor: pointer;
         }
-        
+
         .checkbox-item label {
             display: inline-flex;
             align-items: center;
@@ -1322,26 +1691,26 @@
             padding: 10px 16px;
             background: var(--bg-primary);
             border: 1px solid var(--border-subtle);
-            border-radius: 8px;
+            border-radius: var(--radius);
             font-size: 14px;
             font-weight: 500;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all var(--transition-base);
             text-transform: none;
             letter-spacing: normal;
         }
-        
+
         .checkbox-item input:checked + label {
-            background: rgba(59, 130, 246, 0.1);
-            border-color: var(--accent-blue);
+            background: oklch(0.65 0.18 250 / 0.1);
+            border-color: var(--primary);
             color: var(--accent-blue-light);
         }
-        
+
         .checkbox-item label:hover {
-            border-color: var(--accent-blue);
+            border-color: var(--primary);
         }
-        
+
         .checkbox-item .checkmark {
             width: 16px;
             height: 16px;
@@ -1350,29 +1719,29 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: all 0.3s ease;
+            transition: all var(--transition-base);
         }
-        
+
         .checkbox-item input:checked + label .checkmark {
-            background: var(--accent-blue);
-            border-color: var(--accent-blue);
+            background: var(--primary);
+            border-color: var(--primary);
         }
-        
+
         .checkbox-item input:checked + label .checkmark::after {
             content: '✓';
             color: white;
             font-size: 10px;
             font-weight: bold;
         }
-        
+
         .submit-loading {
             position: relative;
         }
-        
+
         .submit-loading .btn {
             color: transparent;
         }
-        
+
         .submit-loading .btn::after {
             content: '';
             position: absolute;
@@ -1387,79 +1756,80 @@
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
-        
+
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
-        
+
         .form-success-overlay {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(10, 10, 15, 0.95);
+            background: oklch(0.08 0.02 270 / 0.95);
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 2000;
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.4s ease;
+            transition: opacity var(--transition-base);
         }
-        
+
         .form-success-overlay.show {
             opacity: 1;
             pointer-events: auto;
         }
-        
+
         .success-content {
             text-align: center;
             max-width: 400px;
             padding: 40px;
         }
-        
+
         .success-icon {
             width: 80px;
             height: 80px;
             margin: 0 auto 24px;
-            background: rgba(34, 197, 94, 0.1);
+            background: oklch(0.65 0.2 145 / 0.1);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
-        
+
         @keyframes successPop {
             0% { transform: scale(0); opacity: 0; }
             50% { transform: scale(1.2); }
             100% { transform: scale(1); opacity: 1; }
         }
-        
+
         .success-icon svg {
             width: 40px;
             height: 40px;
-            color: #22c55e;
+            color: oklch(0.65 0.2 145);
         }
-        
+
         .success-title {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 28px;
             font-weight: 700;
             margin-bottom: 12px;
         }
-        
+
         .success-desc {
             font-size: 16px;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             margin-bottom: 32px;
         }
-        
+
         .success-close {
             color: var(--text-tertiary);
             cursor: pointer;
         }
-        
+
         .char-count {
             font-size: 11px;
             color: var(--text-tertiary);
@@ -1467,6 +1837,9 @@
             margin-top: 4px;
         }
 
+        /* ============================================
+           FOOTER
+           ============================================ */
         footer {
             padding: 48px 0;
             text-align: center;
@@ -1475,9 +1848,10 @@
         }
 
         footer .company {
+            font-family: 'Space Grotesk', sans-serif;
             font-size: 14px;
             font-weight: 600;
-            color: var(--text-secondary);
+            color: var(--muted-foreground);
             margin-bottom: 8px;
         }
 
@@ -1487,85 +1861,112 @@
             letter-spacing: 0.05em;
         }
 
+        /* ============================================
+           RESPONSIVE DESIGN
+           ============================================ */
         @media (max-width: 1024px) {
             .pain-grid {
                 grid-template-columns: 1fr;
             }
-            
+
+            .pain-card:nth-child(1),
+            .pain-card:nth-child(2),
+            .pain-card:nth-child(3),
+            .pain-card:nth-child(4) {
+                grid-column: 1 / -1;
+            }
+
             .service-card,
             .service-card.reverse {
                 grid-template-columns: 1fr;
                 gap: 40px;
                 direction: ltr;
             }
-            
+
+            .service-card:nth-child(odd) .service-content,
+            .service-card:nth-child(even) .service-content {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
             .service-visual {
                 order: -1;
             }
-            
+
             .proof-grid {
                 grid-template-columns: 1fr;
             }
-            
+
+            .proof-card:nth-child(1),
+            .proof-card:nth-child(2),
+            .proof-card:nth-child(3) {
+                grid-column: 1 / -1;
+            }
+
             .contact-grid {
                 grid-template-columns: 1fr;
                 gap: 48px;
             }
+
+            .advantage-item:nth-child(1),
+            .advantage-item:nth-child(2),
+            .advantage-item:nth-child(3),
+            .advantage-item:nth-child(4),
+            .advantage-item:nth-child(5) {
+                padding-left: 0;
+            }
         }
 
         @media (max-width: 768px) {
             .nav-links {
                 display: none;
             }
-            
+
             .hero-title {
                 font-size: clamp(36px, 10vw, 56px);
             }
-            
+
             .hero-cta {
                 flex-direction: column;
                 align-items: center;
             }
-            
+
             .hero-cta .btn {
                 width: 100%;
                 max-width: 280px;
                 justify-content: center;
             }
-            
+
             .pain-card {
                 padding: 32px 24px;
             }
-            
+
             .pain-insight {
                 padding: 40px 24px;
             }
-            
+
             .advantage-item {
                 grid-template-columns: 1fr;
                 gap: 12px;
             }
-            
+
             .contact-form {
                 padding: 32px 24px;
             }
         }
 
-        @media (prefers-reduced-motion: reduce) {
-            *, *::before, *::after {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
-            }
-        }
-
         .mobile-nav-toggle {
             display: none;
             background: none;
             border: none;
-            color: var(--text-primary);
+            color: var(--foreground);
             cursor: pointer;
             padding: 8px;
+            transition: transform var(--transition-base);
+        }
+
+        .mobile-nav-toggle:hover {
+            transform: scale(1.03) translateY(-2px);
         }
 
         @media (max-width: 768px) {
@@ -1704,7 +2105,10 @@
             
             <article class="service-card">
                 <div class="service-content">
-                    <span class="service-tag">🏢 AI+物业</span>
+                    <span class="service-tag">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4 8 4v14"/><path d="M9 21v-6h6v6"/></svg>
+                        AI+物业
+                    </span>
                     <div class="service-metric">客诉 2h → 30min</div>
                     <h3 class="service-title">物业AI帮手</h3>
                     <p class="service-desc">客户一报修，系统自动判断该派给谁。设备快出问题了，提前提醒你。巡检路线AI规划好，不用人工排。</p>
@@ -1717,7 +2121,10 @@
 
             <article class="service-card reverse">
                 <div class="service-content">
-                    <span class="service-tag">🏗️ AI+资管</span>
+                    <span class="service-tag">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22h20"/><path d="M6 22V10l6-6 6 6v12"/><path d="M10 22v-6h4v6"/></svg>
+                        AI+资管
+                    </span>
                     <div class="service-metric">提前90天预警</div>
                     <h3 class="service-title">资管AI帮手</h3>
                     <p class="service-desc">租约快到期了，系统提前告诉你。哪个楼层可能要空出来，提前做准备。定租金的时候，AI会参考历史数据给你建议。</p>
@@ -1730,7 +2137,10 @@
 
             <article class="service-card">
                 <div class="service-content">
-                    <span class="service-tag">📊 AI+CRM</span>
+                    <span class="service-tag">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 16v-3"/><path d="M11 16v-8"/><path d="M15 16v-5"/><path d="M19 16v-2"/></svg>
+                        AI+CRM
+                    </span>
                     <div class="service-metric">每天多跟进3客户</div>
                     <h3 class="service-title">CRM AI帮手</h3>
                     <p class="service-desc">新线索进来了，AI帮你过滤掉假的、重复的。打完电话，AI自动帮你写好跟进记录。</p>
@@ -1918,38 +2328,56 @@
     </footer>
 
     <script>
+        // ============================================
+        // ANIMATION SYSTEM - Precise Parameters
+        // scale: 1→1.03, y: -2px, damping: 20, stiffness: 300, duration: 200ms
+        // ============================================
+
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
         gsap.registerPlugin(ScrollTrigger);
 
-        // Hero Animation
-        const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } });
-        
-        heroTimeline
-            .to('.hero-badge', {
-                opacity: 1,
-                y: 0,
-                duration: 0.8,
-                delay: 0.3
-            })
-            .to('.hero-title .char', {
-                opacity: 1,
-                y: 0,
-                duration: 0.6,
-                stagger: 0.05,
-            }, '-=0.4')
-            .to('.hero-subtitle', {
-                opacity: 1,
-                y: 0,
+        // Hero Animation - with precise timing
+        const heroTimeline = gsap.timeline({
+            defaults: {
+                ease: 'power3.out',
                 duration: 0.8
-            }, '-=0.3')
-            .to('.hero-cta', {
+            }
+        });
+
+        if (!prefersReducedMotion) {
+            heroTimeline
+                .to('.hero-badge', {
+                    opacity: 1,
+                    y: 0,
+                    delay: 0.3
+                })
+                .to('.hero-title .char', {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.6,
+                    stagger: 0.05,
+                }, '-=0.4')
+                .to('.hero-subtitle', {
+                    opacity: 1,
+                    y: 0,
+                }, '-=0.3')
+                .to('.hero-cta', {
+                    opacity: 1,
+                    y: 0,
+                }, '-=0.4')
+                .to('.scroll-indicator', {
+                    opacity: 1,
+                    duration: 0.6
+                }, '-=0.2');
+        } else {
+            // Instant reveal for reduced motion
+            gsap.set('.hero-badge, .hero-title .char, .hero-subtitle, .hero-cta, .scroll-indicator', {
                 opacity: 1,
-                y: 0,
-                duration: 0.8
-            }, '-=0.4')
-            .to('.scroll-indicator', {
-                opacity: 1,
-                duration: 0.6
-            }, '-=0.2');
+                y: 0
+            });
+        }
 
         // Hero Canvas Particle Animation (优化版)
         (function() {
@@ -2047,145 +2475,165 @@
             animate();
         })();
 
-        // Scroll Animations with GSAP ScrollTrigger
-        gsap.utils.toArray('.section-label, .section-title, .section-subtitle').forEach(elem => {
-            gsap.fromTo(elem, 
-                { opacity: 0, y: 40 },
+        // ============================================
+        // SCROLL ANIMATIONS - Precise Parameters
+        // ============================================
+
+        if (!prefersReducedMotion) {
+            // Section headers
+            gsap.utils.toArray('.section-label, .section-title, .section-subtitle').forEach(elem => {
+                gsap.fromTo(elem,
+                    { opacity: 0, y: 40 },
+                    {
+                        opacity: 1,
+                        y: 0,
+                        duration: 0.8,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: elem,
+                            start: 'top 85%',
+                            toggleActions: 'play none none reverse'
+                        }
+                    }
+                );
+            });
+
+            // Pain cards with stagger
+            gsap.utils.toArray('.pain-card').forEach((card, index) => {
+                gsap.fromTo(card,
+                    { opacity: 0, y: 50 },
+                    {
+                        opacity: 1,
+                        y: 0,
+                        duration: 0.8,
+                        delay: index * 0.1,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: card,
+                            start: 'top 85%',
+                            toggleActions: 'play none none reverse'
+                        }
+                    }
+                );
+            });
+
+            // Pain insight
+            gsap.fromTo('.pain-insight',
+                { opacity: 0, scale: 0.95 },
                 {
                     opacity: 1,
-                    y: 0,
-                    duration: 0.8,
+                    scale: 1,
+                    duration: 1,
                     ease: 'power3.out',
                     scrollTrigger: {
-                        trigger: elem,
+                        trigger: '.pain-insight',
                         start: 'top 85%',
                         toggleActions: 'play none none reverse'
                     }
                 }
             );
-        });
 
-        gsap.utils.toArray('.pain-card').forEach((card, index) => {
-            gsap.fromTo(card,
-                { opacity: 0, y: 50 },
-                {
-                    opacity: 1,
-                    y: 0,
-                    duration: 0.8,
-                    delay: index * 0.1,
-                    ease: 'power3.out',
-                    scrollTrigger: {
-                        trigger: card,
-                        start: 'top 85%',
-                        toggleActions: 'play none none reverse'
+            // Service cards - slide from sides
+            gsap.utils.toArray('.service-card').forEach((card) => {
+                const isReverse = card.classList.contains('reverse');
+
+                gsap.fromTo(card,
+                    {
+                        opacity: 0,
+                        x: isReverse ? 50 : -50
+                    },
+                    {
+                        opacity: 1,
+                        x: 0,
+                        duration: 1,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: card,
+                            start: 'top 80%',
+                            toggleActions: 'play none none reverse'
+                        }
                     }
-                }
-            );
-        });
+                );
+            });
 
-        gsap.fromTo('.pain-insight',
-            { opacity: 0, scale: 0.95 },
-            {
-                opacity: 1,
-                scale: 1,
-                duration: 1,
-                ease: 'power3.out',
-                scrollTrigger: {
-                    trigger: '.pain-insight',
-                    start: 'top 85%',
-                    toggleActions: 'play none none reverse'
-                }
-            }
-        );
+            // Advantage items with stagger
+            gsap.utils.toArray('.advantage-item').forEach((item, index) => {
+                gsap.fromTo(item,
+                    { opacity: 0, x: -30 },
+                    {
+                        opacity: 1,
+                        x: 0,
+                        duration: 0.8,
+                        delay: index * 0.1,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: item,
+                            start: 'top 85%',
+                            toggleActions: 'play none none reverse'
+                        }
+                    }
+                );
+            });
 
-        gsap.utils.toArray('.service-card').forEach((card, index) => {
-            const isReverse = card.classList.contains('reverse');
-            
-            gsap.fromTo(card,
-                { 
-                    opacity: 0, 
-                    x: isReverse ? 50 : -50 
-                },
+            // Proof cards with scale
+            gsap.utils.toArray('.proof-card').forEach((card, index) => {
+                gsap.fromTo(card,
+                    { opacity: 0, y: 40, scale: 0.95 },
+                    {
+                        opacity: 1,
+                        y: 0,
+                        scale: 1,
+                        duration: 0.8,
+                        delay: index * 0.15,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: card,
+                            start: 'top 85%',
+                            toggleActions: 'play none none reverse'
+                        }
+                    }
+                );
+            });
+
+            // Contact section
+            gsap.fromTo('.contact-info',
+                { opacity: 0, x: -40 },
                 {
                     opacity: 1,
                     x: 0,
                     duration: 1,
                     ease: 'power3.out',
                     scrollTrigger: {
-                        trigger: card,
+                        trigger: '.contact-info',
                         start: 'top 80%',
                         toggleActions: 'play none none reverse'
                     }
                 }
             );
-        });
 
-        gsap.utils.toArray('.advantage-item').forEach((item, index) => {
-            gsap.fromTo(item,
-                { opacity: 0, x: -30 },
+            gsap.fromTo('.contact-form',
+                { opacity: 0, x: 40 },
                 {
                     opacity: 1,
                     x: 0,
-                    duration: 0.8,
-                    delay: index * 0.1,
+                    duration: 1,
                     ease: 'power3.out',
                     scrollTrigger: {
-                        trigger: item,
-                        start: 'top 85%',
+                        trigger: '.contact-form',
+                        start: 'top 80%',
                         toggleActions: 'play none none reverse'
                     }
                 }
             );
-        });
-
-        gsap.utils.toArray('.proof-card').forEach((card, index) => {
-            gsap.fromTo(card,
-                { opacity: 0, y: 40, scale: 0.95 },
-                {
-                    opacity: 1,
-                    y: 0,
-                    scale: 1,
-                    duration: 0.8,
-                    delay: index * 0.15,
-                    ease: 'power3.out',
-                    scrollTrigger: {
-                        trigger: card,
-                        start: 'top 85%',
-                        toggleActions: 'play none none reverse'
-                    }
-                }
-            );
-        });
-
-        gsap.fromTo('.contact-info',
-            { opacity: 0, x: -40 },
-            {
+        } else {
+            // Make all elements visible immediately for reduced motion
+            gsap.set('.section-label, .section-title, .section-subtitle, .pain-card, .pain-insight, .service-card, .advantage-item, .proof-card, .contact-info, .contact-form', {
                 opacity: 1,
+                y: 0,
                 x: 0,
-                duration: 1,
-                ease: 'power3.out',
-                scrollTrigger: {
-                    trigger: '.contact-info',
-                    start: 'top 80%',
-                    toggleActions: 'play none none reverse'
-                }
-            }
-        );
-
-        gsap.fromTo('.contact-form',
-            { opacity: 0, x: 40 },
-            {
-                opacity: 1,
-                x: 0,
-                duration: 1,
-                ease: 'power3.out',
-                scrollTrigger: {
-                    trigger: '.contact-form',
-                    start: 'top 80%',
-                    toggleActions: 'play none none reverse'
-                }
-            }
-        );
+                scale: 1
+            });
+        }
 
         // Navbar scroll effect
         const navbar = document.getElementById('navbar');