diff --git a/website/css/custom.css b/website/css/custom.css
index efd09be..b35c8ce 100644
--- a/website/css/custom.css
+++ b/website/css/custom.css
@@ -22,6 +22,26 @@
     --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     --neon-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
     --neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.5);
+    
+    /* 新增设计规范变量 */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 3.75rem;
+    
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-base: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+    --spacing-3xl: 4rem;
 }
 
 * {
@@ -36,6 +56,7 @@ body {
     color: var(--text-dark);
     background-color: #ffffff;
     overflow-x: hidden;
+    font-size: var(--font-size-base);
 }
 
 /* 顶部联系栏 */
@@ -137,6 +158,8 @@ body {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
+    display: flex;
+    align-items: center;
 }
 
 .hero-section::before {
@@ -187,6 +210,21 @@ body {
     color: white;
 }
 
+.hero-content h1 {
+    font-size: var(--font-size-5xl);
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.hero-content p {
+    font-size: var(--font-size-xl);
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 600px;
+}
+
 .hero-badge .badge {
     border-radius: 25px;
     font-weight: 500;
@@ -232,6 +270,8 @@ body {
     position: relative;
     overflow: hidden;
     text-decoration: none;
+    font-size: var(--font-size-base);
+    line-height: 1.5;
 }
 
 .btn-primary {
@@ -381,7 +421,7 @@ body {
 }
 
 .stat-number {
-    font-size: 2.5rem;
+    font-size: var(--font-size-4xl);
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--primary-color);
@@ -389,7 +429,7 @@ body {
 }
 
 .stat-label {
-    font-size: 1rem;
+    font-size: var(--font-size-base);
     color: var(--text-muted);
     font-weight: 500;
 }
@@ -420,6 +460,19 @@ body {
     .floating-card {
         display: none;
     }
+    
+    /* 移动端新增响应式类 */
+    .text-center-mobile {
+        text-align: center;
+    }
+    
+    .d-block-mobile {
+        display: block;
+    }
+    
+    .d-flex-mobile {
+        display: flex;
+    }
 }
 
 @media (max-width: 576px) {
@@ -438,6 +491,15 @@ body {
     .brand-text .brand-subtitle {
         font-size: 0.7rem;
     }
+    
+    /* 超小屏幕优化 */
+    .text-sm-center {
+        text-align: center;
+    }
+    
+    .d-block-sm {
+        display: block;
+    }
 }
 
 /* 工具类 */
@@ -449,6 +511,192 @@ body {
     backdrop-filter: blur(10px);
 }
 
+/* 新增工具类 */
+.text-center {
+    text-align: center;
+}
+
+.text-primary {
+    color: var(--primary-color) !important;
+}
+
+.text-secondary {
+    color: var(--secondary-color) !important;
+}
+
+.text-success {
+    color: var(--success-color) !important;
+}
+
+.text-warning {
+    color: var(--warning-color) !important;
+}
+
+.text-danger {
+    color: var(--danger-color) !important;
+}
+
+.text-muted {
+    color: var(--text-muted) !important;
+}
+
+.bg-primary {
+    background-color: var(--primary-color) !important;
+}
+
+.bg-secondary {
+    background-color: var(--secondary-color) !important;
+}
+
+.bg-success {
+    background-color: var(--success-color) !important;
+}
+
+.bg-warning {
+    background-color: var(--warning-color) !important;
+}
+
+.bg-danger {
+    background-color: var(--danger-color) !important;
+}
+
+.bg-light {
+    background-color: var(--light-color) !important;
+}
+
+.bg-dark {
+    background-color: var(--dark-color) !important;
+}
+
+.rounded {
+    border-radius: var(--border-radius) !important;
+}
+
+.rounded-circle {
+    border-radius: 50% !important;
+}
+
+.shadow {
+    box-shadow: var(--box-shadow) !important;
+}
+
+.shadow-sm {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.border-0 {
+    border: 0 !important;
+}
+
+.border {
+    border: 1px solid #dee2e6 !important;
+}
+
+.border-top {
+    border-top: 1px solid #dee2e6 !important;
+}
+
+.border-bottom {
+    border-bottom: 1px solid #dee2e6 !important;
+}
+
+.border-primary {
+    border-color: var(--primary-color) !important;
+}
+
+.border-secondary {
+    border-color: var(--secondary-color) !important;
+}
+
+.border-success {
+    border-color: var(--success-color) !important;
+}
+
+.border-warning {
+    border-color: var(--warning-color) !important;
+}
+
+.border-danger {
+    border-color: var(--danger-color) !important;
+}
+
+.d-flex {
+    display: flex !important;
+}
+
+.align-items-center {
+    align-items: center !important;
+}
+
+.justify-content-center {
+    justify-content: center !important;
+}
+
+.justify-content-between {
+    justify-content: space-between !important;
+}
+
+.flex-wrap {
+    flex-wrap: wrap !important;
+}
+
+.w-100 {
+    width: 100% !important;
+}
+
+.h-100 {
+    height: 100% !important;
+}
+
+.m-0 {
+    margin: 0 !important;
+}
+
+.mt-0 {
+    margin-top: 0 !important;
+}
+
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+.ms-0 {
+    margin-left: 0 !important;
+}
+
+.me-0 {
+    margin-right: 0 !important;
+}
+
+.p-0 {
+    padding: 0 !important;
+}
+
+.pt-0 {
+    padding-top: 0 !important;
+}
+
+.pb-0 {
+    padding-bottom: 0 !important;
+}
+
+.ps-0 {
+    padding-left: 0 !important;
+}
+
+.pe-0 {
+    padding-right: 0 !important;
+}
+
+.mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
 /* 加载动画 */
 .loading-spinner {
     display: inline-block;
@@ -540,12 +788,138 @@ body {
     }
 }
 
+/* 新增动画效果 */
+.slide-in-left {
+    animation: slideInLeft 0.5s ease-out forwards;
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.slide-in-right {
+    animation: slideInRight 0.5s ease-out forwards;
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.bounce {
+    animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.rotate {
+    animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.flip-horizontal {
+    animation: flipHorizontal 0.8s ease-in-out;
+}
+
+@keyframes flipHorizontal {
+    0% {
+        transform: rotateY(0);
+    }
+    50% {
+        transform: rotateY(180deg);
+    }
+    100% {
+        transform: rotateY(360deg);
+    }
+}
+
 /* 图片优化 */
 img {
     max-width: 100%;
     height: auto;
 }
 
+/* 图片悬停效果 */
+.img-hover-zoom {
+    overflow: hidden;
+    border-radius: var(--border-radius);
+}
+
+.img-hover-zoom img {
+    transition: transform 0.5s ease;
+    transform-origin: center center;
+}
+
+.img-hover-zoom:hover img {
+    transform: scale(1.1);
+}
+
+/* 图片圆角效果 */
+.img-rounded {
+    border-radius: var(--border-radius);
+}
+
+.img-circle {
+    border-radius: 50%;
+}
+
+/* 图片边框 */
+.img-bordered {
+    border: 3px solid var(--primary-color);
+}
+
+.img-shadow {
+    box-shadow: var(--box-shadow);
+}
+
 /* 滚动条样式 */
 ::-webkit-scrollbar {
     width: 8px;
@@ -566,6 +940,32 @@ img {
     background: var(--primary-dark);
 }
 
+/* 火狐滚动条 */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) #f1f1f1;
+}
+
+/* 自定义滚动条样式 */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: linear-gradient(var(--primary-color), var(--primary-dark));
+    border-radius: 10px;
+    border: 2px solid #f1f1f1;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-dark);
+}
+
 /* 火狐浏览器滚动条 */
 * {
     scrollbar-width: thin;
@@ -587,6 +987,7 @@ img {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: var(--text-light);
     border: none;
+    cursor: pointer;
 }
 
 .back-to-top:hover {
@@ -600,6 +1001,23 @@ img {
     font-size: 1.25rem;
 }
 
+/* 新增返回顶部按钮动画 */
+.back-to-top-animate {
+    animation: fadeInUp 0.5s ease-out;
+}
+
+/* 返回顶部按钮位置变化 */
+.back-to-top-left {
+    right: auto;
+    left: 30px;
+}
+
+.back-to-top-center {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 /* 导航栏动画 */
 @keyframes slideDown {
     from {
@@ -623,16 +1041,54 @@ img {
     }
 }
 
+/* 新增导航栏动画 */
+.navbar-fade-in {
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.navbar-slide-down {
+    animation: slideDown 0.3s ease-out;
+}
+
+.navbar-slide-up {
+    animation: slideUp 0.3s ease-out;
+}
+
 /* 按钮点击效果 */
 .btn:active {
     transform: scale(0.95);
 }
 
+.btn-hover-effect {
+    transition: all 0.3s ease;
+}
+
+.btn-hover-effect:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn-hover-effect:active {
+    transform: scale(0.95);
+}
+
 /* 卡片悬停增强 */
 .card {
     transition: var(--transition);
     border: none;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius);
+    position: relative;
+    overflow: hidden;
 }
 
 .card:hover {
@@ -640,6 +1096,24 @@ img {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
 
+.card-hover-effect {
+    transition: all 0.3s ease;
+}
+
+.card-hover-effect:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+}
+
+.card-tilt-effect {
+    transform-style: preserve-3d;
+    transition: transform 0.3s ease;
+}
+
+.card-tilt-effect:hover {
+    transform: rotateY(5deg) rotateX(5deg);
+}
+
 /* 进度条样式 */
 .progress {
     height: 8px;
@@ -651,6 +1125,7 @@ img {
 .progress-bar {
     border-radius: 10px;
     background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    transition: width 0.6s ease;
 }
 
 .progress-bar.bg-success {
@@ -669,6 +1144,20 @@ img {
     background: linear-gradient(90deg, var(--danger-color), #e57373);
 }
 
+/* 新增进度条动画 */
+.progress-animated .progress-bar {
+    animation: progressAnimation 2s ease-in-out;
+}
+
+@keyframes progressAnimation {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
 /* 数字统计增强 */
 .count-up {
     font-weight: 700;
@@ -676,6 +1165,26 @@ img {
     text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
 }
 
+/* 功能图标样式 */
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(76, 175, 80, 0.1);
+    border-radius: 50%;
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin: 0 auto 1rem;
+    transition: var(--transition);
+}
+
+.feature-icon:hover {
+    background: rgba(76, 175, 80, 0.2);
+    transform: scale(1.1);
+}
+
 /* 面包屑导航样式 */
 .breadcrumb {
     background-color: transparent;
@@ -684,7 +1193,7 @@ img {
 }
 
 .breadcrumb-item {
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
 }
 
 .breadcrumb-item a {
@@ -727,6 +1236,7 @@ img.lazy.loaded {
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     transition: var(--transition);
+    font-size: var(--font-size-base);
 }
 
 .form-control:focus {
@@ -1001,4 +1511,13 @@ img.lazy.loaded {
     .transform-3d:hover {
         transform: rotateY(10deg) rotateX(10deg) scale(1.05);
     }
+    
+    /* 大屏幕新增类 */
+    .text-lg-left {
+        text-align: left;
+    }
+    
+    .d-lg-flex {
+        display: flex;
+    }
 }
diff --git a/website/css/responsive.css b/website/css/responsive.css
index c2eab06..e41407f 100644
--- a/website/css/responsive.css
+++ b/website/css/responsive.css
@@ -131,6 +131,37 @@
     .chart-container {
         height: 250px;
     }
+    
+    /* 移动端新增优化 */
+    .mobile-container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .mobile-section {
+        padding: 2rem 0;
+    }
+    
+    .mobile-card {
+        margin-bottom: 1rem;
+        border-radius: 12px;
+    }
+    
+    .mobile-text-center {
+        text-align: center;
+    }
+    
+    .mobile-mb-3 {
+        margin-bottom: 1rem;
+    }
+    
+    .mobile-mt-3 {
+        margin-top: 1rem;
+    }
+    
+    .mobile-p-3 {
+        padding: 1rem;
+    }
 }
 
 /* 平板设备优化 */
@@ -154,6 +185,19 @@
     .demo-sidebar {
         margin-bottom: 2rem;
     }
+    
+    /* 平板新增优化 */
+    .tablet-container {
+        max-width: 720px;
+    }
+    
+    .tablet-section {
+        padding: 3rem 0;
+    }
+    
+    .tablet-card {
+        margin-bottom: 1.5rem;
+    }
 }
 
 /* 大屏幕优化 */
@@ -177,6 +221,23 @@
     .metric-number {
         font-size: 3rem;
     }
+    
+    /* 大屏幕新增优化 */
+    .desktop-container {
+        max-width: 1400px;
+    }
+    
+    .desktop-section {
+        padding: 5rem 0;
+    }
+    
+    .desktop-card {
+        transition: all 0.3s ease;
+    }
+    
+    .desktop-card:hover {
+        transform: translateY(-10px);
+    }
 }
 
 /* 触摸设备优化 */