diff --git a/website/css/custom.css b/website/css/custom.css
index b35c8ce..11c08e1 100644
--- a/website/css/custom.css
+++ b/website/css/custom.css
@@ -1521,3 +1521,655 @@ img.lazy.loaded {
         display: flex;
     }
 }
+
+/* 新增移动端专用工具类 */
+@media (max-width: 767.98px) {
+    .mobile-only {
+        display: block !important;
+    }
+    
+    .desktop-only {
+        display: none !important;
+    }
+    
+    .mobile-text-center {
+        text-align: center !important;
+    }
+    
+    .mobile-mb-2 {
+        margin-bottom: 0.5rem !important;
+    }
+    
+    .mobile-mb-3 {
+        margin-bottom: 1rem !important;
+    }
+    
+    .mobile-mt-3 {
+        margin-top: 1rem !important;
+    }
+    
+    .mobile-p-3 {
+        padding: 1rem !important;
+    }
+    
+    .mobile-w-100 {
+        width: 100% !important;
+    }
+    
+    .mobile-flex-column {
+        flex-direction: column !important;
+    }
+    
+    .mobile-gap-2 {
+        gap: 0.5rem !important;
+    }
+    
+    .mobile-gap-3 {
+        gap: 1rem !important;
+    }
+}
+
+/* 新增大屏幕专用工具类 */
+@media (min-width: 1200px) {
+    .mobile-only {
+        display: none !important;
+    }
+    
+    .desktop-only {
+        display: block !important;
+    }
+    
+    .desktop-text-left {
+        text-align: left !important;
+    }
+    
+    .desktop-w-75 {
+        width: 75% !important;
+    }
+    
+    .desktop-mx-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}
+
+/* 新增暗色模式支持 */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --dark-bg: #121212;
+        --dark-card-bg: #1e1e1e;
+        --dark-text: #ffffff;
+        --dark-text-secondary: #b0b0b0;
+        --dark-border: #333333;
+    }
+    
+    body {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+    
+    .card {
+        background-color: var(--dark-card-bg);
+        border-color: var(--dark-border);
+    }
+    
+    .navbar {
+        background-color: rgba(18, 18, 18, 0.95) !important;
+    }
+    
+    .btn-primary {
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    }
+    
+    .form-control {
+        background-color: var(--dark-card-bg);
+        border-color: var(--dark-border);
+        color: var(--dark-text);
+    }
+    
+    .form-control:focus {
+        background-color: var(--dark-card-bg);
+        border-color: var(--primary-color);
+        color: var(--dark-text);
+    }
+}
+
+/* 新增打印样式优化 */
+@media print {
+    .no-print {
+        display: none !important;
+    }
+    
+    .print-only {
+        display: block !important;
+    }
+    
+    .print-w-100 {
+        width: 100% !important;
+    }
+    
+    .print-mb-3 {
+        margin-bottom: 1rem !important;
+    }
+    
+    body {
+        background-color: white;
+        color: black;
+    }
+    
+    .card {
+        border: 1px solid #000;
+        box-shadow: none;
+    }
+}
+
+/* 新增动画效果类 */
+.animate-fade-in {
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.animate-slide-up {
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.animate-slide-down {
+    animation: slideDown 0.5s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* 新增交互动画类 */
+.interactive-hover {
+    transition: all 0.3s ease;
+}
+
+.interactive-hover:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.interactive-press:active {
+    transform: scale(0.98);
+}
+
+/* 新增表单增强样式 */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-label {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+.form-control-lg {
+    padding: 1rem 1.25rem;
+    font-size: 1.1rem;
+}
+
+.form-control-sm {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+.form-text {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* 新增导航栏增强样式 */
+.navbar-brand:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+}
+
+.navbar-nav .nav-link {
+    position: relative;
+}
+
+.navbar-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: var(--primary-color);
+    transition: all 0.3s ease;
+    transform: translateX(-50%);
+}
+
+.navbar-nav .nav-link:hover::after,
+.navbar-nav .nav-link.active::after {
+    width: 80%;
+}
+
+/* 新增卡片增强样式 */
+.card-hover {
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.card-hover:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+
+.card-img-top {
+    transition: transform 0.3s ease;
+}
+
+.card-hover:hover .card-img-top {
+    transform: scale(1.05);
+}
+
+/* 新增按钮增强样式 */
+.btn-pill {
+    border-radius: 50px;
+}
+
+.btn-square {
+    border-radius: 0;
+}
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon i {
+    margin-right: 0.5rem;
+}
+
+.btn-icon.btn-icon-end i {
+    margin-right: 0;
+    margin-left: 0.5rem;
+}
+
+.btn-shadow {
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.btn-shadow:hover {
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+}
+
+/* 新增布局工具类 */
+.container-fluid {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container-sm {
+    max-width: 540px;
+}
+
+.container-md {
+    max-width: 720px;
+}
+
+.container-lg {
+    max-width: 960px;
+}
+
+.container-xl {
+    max-width: 1140px;
+}
+
+.container-xxl {
+    max-width: 1320px;
+}
+
+/* 新增间距工具类 */
+.gap-0 {
+    gap: 0 !important;
+}
+
+.gap-1 {
+    gap: 0.25rem !important;
+}
+
+.gap-2 {
+    gap: 0.5rem !important;
+}
+
+.gap-3 {
+    gap: 1rem !important;
+}
+
+.gap-4 {
+    gap: 1.5rem !important;
+}
+
+.gap-5 {
+    gap: 3rem !important;
+}
+
+/* 新增文字工具类 */
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.text-shadow-sm {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.text-shadow-md {
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.text-shadow-lg {
+    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* 新增背景工具类 */
+.bg-gradient-primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
+}
+
+.bg-gradient-secondary {
+    background: linear-gradient(135deg, var(--secondary-color), #1565c0) !important;
+}
+
+.bg-gradient-success {
+    background: linear-gradient(135deg, var(--success-color), #3d8b40) !important;
+}
+
+.bg-gradient-warning {
+    background: linear-gradient(135deg, var(--warning-color), #e68a00) !important;
+}
+
+.bg-gradient-danger {
+    background: linear-gradient(135deg, var(--danger-color), #d32f2f) !important;
+}
+
+.bg-pattern {
+    background-image: radial-gradient(circle, rgba(76, 175, 80, 0.1) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+/* 新增边框工具类 */
+.border-dashed {
+    border-style: dashed !important;
+}
+
+.border-dotted {
+    border-style: dotted !important;
+}
+
+.border-2 {
+    border-width: 2px !important;
+}
+
+.border-3 {
+    border-width: 3px !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;
+}
+
+/* 新增阴影工具类 */
+.shadow-none {
+    box-shadow: none !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;
+}
+
+.shadow-xl {
+    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 新增圆角工具类 */
+.rounded-sm {
+    border-radius: 0.25rem !important;
+}
+
+.rounded-lg {
+    border-radius: 1rem !important;
+}
+
+.rounded-xl {
+    border-radius: 2rem !important;
+}
+
+.rounded-top {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+}
+
+.rounded-bottom {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.rounded-left {
+    border-top-left-radius: var(--border-radius) !important;
+    border-bottom-left-radius: var(--border-radius) !important;
+}
+
+.rounded-right {
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+}
+
+/* 新增定位工具类 */
+.position-relative {
+    position: relative !important;
+}
+
+.position-absolute {
+    position: absolute !important;
+}
+
+.position-fixed {
+    position: fixed !important;
+}
+
+.top-0 {
+    top: 0 !important;
+}
+
+.bottom-0 {
+    bottom: 0 !important;
+}
+
+.start-0 {
+    left: 0 !important;
+}
+
+.end-0 {
+    right: 0 !important;
+}
+
+.translate-middle {
+    transform: translate(-50%, -50%) !important;
+}
+
+/* 新增Flexbox工具类 */
+.flex-fill {
+    flex: 1 1 auto !important;
+}
+
+.flex-row-reverse {
+    flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+    flex-direction: column-reverse !important;
+}
+
+.justify-content-evenly {
+    justify-content: space-evenly !important;
+}
+
+.align-items-start {
+    align-items: flex-start !important;
+}
+
+.align-items-end {
+    align-items: flex-end !important;
+}
+
+.align-self-start {
+    align-self: flex-start !important;
+}
+
+.align-self-end {
+    align-self: flex-end !important;
+}
+
+.align-self-center {
+    align-self: center !important;
+}
+
+.align-self-baseline {
+    align-self: baseline !important;
+}
+
+.align-self-stretch {
+    align-self: stretch !important;
+}
+
+/* 新增显示工具类 */
+.d-inline {
+    display: inline !important;
+}
+
+.d-inline-block {
+    display: inline-block !important;
+}
+
+.d-block {
+    display: block !important;
+}
+
+.d-grid {
+    display: grid !important;
+}
+
+.d-table {
+    display: table !important;
+}
+
+.d-table-row {
+    display: table-row !important;
+}
+
+.d-table-cell {
+    display: table-cell !important;
+}
+
+.d-none {
+    display: none !important;
+}
+
+/* 新增溢出工具类 */
+.overflow-auto {
+    overflow: auto !important;
+}
+
+.overflow-hidden {
+    overflow: hidden !important;
+}
+
+.overflow-visible {
+    overflow: visible !important;
+}
+
+.overflow-scroll {
+    overflow: scroll !important;
+}
+
+/* 新增可见性工具类 */
+.visible {
+    visibility: visible !important;
+}
+
+.invisible {
+    visibility: hidden !important;
+}
+
+/* 新增z-index工具类 */
+.z-index-0 {
+    z-index: 0 !important;
+}
+
+.z-index-1 {
+    z-index: 1 !important;
+}
+
+.z-index-2 {
+    z-index: 2 !important;
+}
+
+.z-index-3 {
+    z-index: 3 !important;
+}
+
+.z-index-1000 {
+    z-index: 1000 !important;
+}
+
+.z-index-9999 {
+    z-index: 9999 !important;
+}
diff --git a/website/css/responsive.css b/website/css/responsive.css
index e41407f..57243a0 100644
--- a/website/css/responsive.css
+++ b/website/css/responsive.css
@@ -1,6 +1,100 @@
 /* 移动端响应式优化样式 */
 
-/* 移动设备优先设计 */
+/* 超小屏幕设备 (小于576px) */
+@media (max-width: 575.98px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .hero-section {
+        padding: 80px 0 30px;
+    }
+    
+    .hero-title {
+        font-size: 1.75rem;
+    }
+    
+    .hero-features .col-6 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    
+    .hero-stats .col-4 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    
+    .hero-stats .col-4:nth-child(3) {
+        flex: 0 0 100%;
+        max-width: 100%;
+        margin-top: 0.5rem;
+    }
+    
+    .btn {
+        font-size: 0.9rem;
+        padding: 0.6rem 1.2rem;
+    }
+    
+    .modal-dialog {
+        margin: 0.5rem;
+    }
+    
+    .demo-header {
+        padding: 2rem 0;
+        padding-top: 120px;
+    }
+    
+    .demo-header h1 {
+        font-size: 2rem;
+    }
+    
+    .demo-nav-item {
+        font-size: 0.85rem;
+        padding: 0.75rem;
+    }
+    
+    .metric-number {
+        font-size: 1.75rem;
+    }
+    
+    .chart-container {
+        height: 200px;
+    }
+    
+    /* 超小屏幕新增优化 */
+    .xs-container {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    
+    .xs-section {
+        padding: 1.5rem 0;
+    }
+    
+    .xs-card {
+        margin-bottom: 0.75rem;
+        border-radius: 8px;
+    }
+    
+    .xs-text-center {
+        text-align: center;
+    }
+    
+    .xs-mb-2 {
+        margin-bottom: 0.5rem;
+    }
+    
+    .xs-mt-2 {
+        margin-top: 0.5rem;
+    }
+    
+    .xs-p-2 {
+        padding: 0.5rem;
+    }
+}
+
+/* 移动设备优先设计 (小于768px) */
 @media (max-width: 767.98px) {
     /* 导航栏优化 */
     .navbar {
@@ -164,7 +258,7 @@
     }
 }
 
-/* 平板设备优化 */
+/* 平板设备优化 (768px 到 991.98px) */
 @media (min-width: 768px) and (max-width: 991.98px) {
     .hero-title {
         font-size: 2.5rem;
@@ -198,9 +292,57 @@
     .tablet-card {
         margin-bottom: 1.5rem;
     }
+    
+    .tablet-text-left {
+        text-align: left;
+    }
+    
+    .tablet-d-flex {
+        display: flex;
+    }
 }
 
-/* 大屏幕优化 */
+/* 中等屏幕设备优化 (992px 到 1199.98px) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    .container {
+        max-width: 960px;
+    }
+    
+    .hero-title {
+        font-size: 3rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.25rem;
+    }
+    
+    .dashboard-card {
+        padding: 1.5rem;
+    }
+    
+    .metric-number {
+        font-size: 2.5rem;
+    }
+    
+    /* 中等屏幕新增优化 */
+    .md-container {
+        max-width: 960px;
+    }
+    
+    .md-section {
+        padding: 4rem 0;
+    }
+    
+    .md-card {
+        transition: all 0.3s ease;
+    }
+    
+    .md-card:hover {
+        transform: translateY(-5px);
+    }
+}
+
+/* 大屏幕优化 (1200px 及以上) */
 @media (min-width: 1200px) {
     .container {
         max-width: 1200px;
@@ -238,6 +380,38 @@
     .desktop-card:hover {
         transform: translateY(-10px);
     }
+    
+    .desktop-text-left {
+        text-align: left;
+    }
+    
+    .desktop-d-flex {
+        display: flex;
+    }
+}
+
+/* 超大屏幕优化 (1400px 及以上) */
+@media (min-width: 1400px) {
+    .container {
+        max-width: 1320px;
+    }
+    
+    .hero-title {
+        font-size: 4.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.5rem;
+    }
+    
+    /* 超大屏幕新增优化 */
+    .xxl-container {
+        max-width: 1500px;
+    }
+    
+    .xxl-section {
+        padding: 6rem 0;
+    }
 }
 
 /* 触摸设备优化 */
@@ -356,69 +530,6 @@
     }
 }
 
-/* 超小屏幕设备 */
-@media (max-width: 575.98px) {
-    .container {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-    
-    .hero-section {
-        padding: 80px 0 30px;
-    }
-    
-    .hero-title {
-        font-size: 1.75rem;
-    }
-    
-    .hero-features .col-6 {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-    
-    .hero-stats .col-4 {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-    
-    .hero-stats .col-4:nth-child(3) {
-        flex: 0 0 100%;
-        max-width: 100%;
-        margin-top: 0.5rem;
-    }
-    
-    .btn {
-        font-size: 0.9rem;
-        padding: 0.6rem 1.2rem;
-    }
-    
-    .modal-dialog {
-        margin: 0.5rem;
-    }
-    
-    .demo-header {
-        padding: 2rem 0;
-        padding-top: 120px;
-    }
-    
-    .demo-header h1 {
-        font-size: 2rem;
-    }
-    
-    .demo-nav-item {
-        font-size: 0.85rem;
-        padding: 0.75rem;
-    }
-    
-    .metric-number {
-        font-size: 1.75rem;
-    }
-    
-    .chart-container {
-        height: 200px;
-    }
-}
-
 /* 打印样式优化 */
 @media print {
     .navbar,
diff --git a/website/index.html b/website/index.html
index e994b62..22c8819 100644
--- a/website/index.html
+++ b/website/index.html
@@ -40,6 +40,7 @@
     <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
     <!-- 自定义样式 -->
     <link href="css/custom.css" rel="stylesheet">
+    <link href="css/responsive.css" rel="stylesheet">
 </head>
 <body>
 <!-- 导航栏 -->
@@ -90,8 +91,6 @@
         </div>
     </nav>
 
-
-
     <!-- 英雄区域 -->
     <section class="hero-section bg-dark text-white py-5">
         <div class="container py-5">
@@ -196,7 +195,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 text-center border-0">
+                    <div class="card h-100 text-center border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-users"></i>
                         </div>
@@ -208,7 +207,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 text-center border-0">
+                    <div class="card h-100 text-center border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-clipboard-list"></i>
                         </div>
@@ -220,7 +219,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 text-center border-0">
+                    <div class="card h-100 text-center border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-search"></i>
                         </div>
@@ -232,7 +231,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 text-center border-0">
+                    <div class="card h-100 text-center border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-truck"></i>
                         </div>
@@ -288,7 +287,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0">
+                    <div class="card solution-card h-100 border-0 card-hover">
                         <div class="card-body">
                             <h5 class="card-title">大型养殖企业</h5>
                             <p class="card-text">针对年采购量超过1000头的大型养殖企业，提供集团化采购管理解决方案。</p>
@@ -303,7 +302,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0">
+                    <div class="card solution-card h-100 border-0 card-hover">
                         <div class="card-body">
                             <h5 class="card-title">中小型牧场</h5>
                             <p class="card-text">针对年采购量在100-1000头的中小型牧场，提供简化版采购管理方案。</p>
@@ -318,7 +317,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0">
+                    <div class="card solution-card h-100 border-0 card-hover">
                         <div class="card-body">
                             <h5 class="card-title">贸易商</h5>
                             <p class="card-text">针对活牛贸易商，提供订单管理和交易撮合解决方案。</p>
@@ -345,7 +344,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-4">
-                    <div class="card case-card h-100 border-0">
+                    <div class="card case-card h-100 border-0 card-hover">
                         <img src="images/case1.jpg" class="card-img-top" alt="XX牧业集团" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-primary mb-2">大型企业</span>
@@ -357,7 +356,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card case-card h-100 border-0">
+                    <div class="card case-card h-100 border-0 card-hover">
                         <img src="images/case2.jpg" class="card-img-top" alt="YY生态牧场" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-success mb-2">中型企业</span>
@@ -369,7 +368,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card case-card h-100 border-0">
+                    <div class="card case-card h-100 border-0 card-hover">
                         <img src="images/case3.jpg" class="card-img-top" alt="ZZ活牛贸易平台" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-info mb-2">贸易商</span>
@@ -397,7 +396,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-4">
-                    <div class="card news-card h-100 border-0">
+                    <div class="card news-card h-100 border-0 card-hover">
                         <img src="images/news1.jpg" class="card-img-top" alt="产品更新" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-primary mb-2">产品更新</span>
@@ -409,7 +408,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card news-card h-100 border-0">
+                    <div class="card news-card h-100 border-0 card-hover">
                         <img src="images/news2.jpg" class="card-img-top" alt="行业资讯" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-success mb-2">行业资讯</span>
@@ -421,7 +420,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card news-card h-100 border-0">
+                    <div class="card news-card h-100 border-0 card-hover">
                         <img src="images/news3.jpg" class="card-img-top" alt="客户案例" loading="lazy">
                         <div class="card-body">
                             <span class="badge bg-info mb-2">客户案例</span>
diff --git a/website/product.html b/website/product.html
index 8beda59..dd24b1b 100644
--- a/website/product.html
+++ b/website/product.html
@@ -32,6 +32,7 @@
     <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
     <!-- 自定义样式 -->
     <link href="css/custom.css" rel="stylesheet">
+    <link href="css/responsive.css" rel="stylesheet">
 </head>
 <body>
     <!-- 导航栏 -->
@@ -111,7 +112,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <img src="images/product-banner.jpg" alt="产品介绍" class="img-fluid rounded shadow" loading="lazy">
+                    <img src="images/product-banner.jpg" alt="产品介绍" class="img-fluid rounded shadow img-hover-zoom" loading="lazy">
                 </div>
             </div>
         </div>
@@ -127,7 +128,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
                                 <i class="fas fa-user-tie"></i>
@@ -144,7 +145,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
                                 <i class="fas fa-user"></i>
@@ -161,7 +162,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
                                 <i class="fas fa-truck-loading"></i>
@@ -178,7 +179,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
                                 <i class="fas fa-user-shield"></i>
@@ -210,7 +211,7 @@
                     <div class="process-timeline">
                         <div class="row g-4">
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             1
@@ -227,7 +228,7 @@
                             </div>
                             
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             2
@@ -244,7 +245,7 @@
                             </div>
                             
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             3
@@ -261,7 +262,7 @@
                             </div>
                             
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             4
@@ -278,7 +279,7 @@
                             </div>
                             
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             5
@@ -295,7 +296,7 @@
                             </div>
                             
                             <div class="col-md-6 col-lg-4">
-                                <div class="card border-0 shadow-sm h-100">
+                                <div class="card border-0 shadow-sm h-100 card-hover">
                                     <div class="card-body">
                                         <div class="process-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto">
                                             6
@@ -327,7 +328,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-users"></i>
                         </div>
@@ -344,7 +345,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-clipboard-list"></i>
                         </div>
@@ -361,7 +362,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-search"></i>
                         </div>
@@ -378,7 +379,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-truck"></i>
                         </div>
@@ -395,7 +396,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-file-invoice-dollar"></i>
                         </div>
@@ -412,7 +413,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="feature-icon">
                             <i class="fas fa-chart-line"></i>
                         </div>
@@ -441,7 +442,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-3">
-                    <div class="text-center">
+                    <div class="text-center card-hover">
                         <div class="feature-icon mx-auto mb-4">
                             <i class="fas fa-bolt"></i>
                         </div>
@@ -451,7 +452,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="text-center">
+                    <div class="text-center card-hover">
                         <div class="feature-icon mx-auto mb-4">
                             <i class="fas fa-shield-alt"></i>
                         </div>
@@ -461,7 +462,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="text-center">
+                    <div class="text-center card-hover">
                         <div class="feature-icon mx-auto mb-4">
                             <i class="fas fa-mobile-alt"></i>
                         </div>
@@ -471,7 +472,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="text-center">
+                    <div class="text-center card-hover">
                         <div class="feature-icon mx-auto mb-4">
                             <i class="fas fa-plug"></i>
                         </div>
diff --git a/website/solutions.html b/website/solutions.html
index 93911cc..0b4a16a 100644
--- a/website/solutions.html
+++ b/website/solutions.html
@@ -34,6 +34,7 @@
     <link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
     <!-- 自定义样式 -->
     <link href="css/custom.css" rel="stylesheet">
+    <link href="css/responsive.css" rel="stylesheet">
 </head>
 <body>
     <!-- 导航栏 -->
@@ -113,7 +114,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <img src="images/solution-banner.jpg" alt="解决方案" class="img-fluid rounded shadow" loading="lazy">
+                    <img src="images/solution-banner.jpg" alt="解决方案" class="img-fluid rounded shadow img-hover-zoom" loading="lazy">
                 </div>
             </div>
         </div>
@@ -129,7 +130,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0 shadow-sm">
+                    <div class="card solution-card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body">
                             <div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
                                 <i class="fas fa-tractor"></i>
@@ -150,7 +151,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0 shadow-sm">
+                    <div class="card solution-card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body">
                             <div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
                                 <i class="fas fa-home"></i>
@@ -171,7 +172,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-4">
-                    <div class="card solution-card h-100 border-0 shadow-sm">
+                    <div class="card solution-card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body">
                             <div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
                                 <i class="fas fa-exchange-alt"></i>
@@ -204,7 +205,7 @@
             
             <div class="row g-4">
                 <div class="col-lg-3 col-md-6">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
                                 <i class="fas fa-seedling"></i>
@@ -222,7 +223,7 @@
                 </div>
                 
                 <div class="col-lg-3 col-md-6">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
                                 <i class="fas fa-building"></i>
@@ -240,7 +241,7 @@
                 </div>
                 
                 <div class="col-lg-3 col-md-6">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
                                 <i class="fas fa-city"></i>
@@ -258,7 +259,7 @@
                 </div>
                 
                 <div class="col-lg-3 col-md-6">
-                    <div class="card h-100 border-0 shadow-sm">
+                    <div class="card h-100 border-0 shadow-sm card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
                                 <i class="fas fa-industry"></i>
@@ -288,7 +289,7 @@
             
             <div class="row g-4">
                 <div class="col-lg-4 col-md-6">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="card-body">
                             <div class="d-flex align-items-center mb-3">
                                 <img src="images/case-logo-1.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
@@ -309,7 +310,7 @@
                 </div>
                 
                 <div class="col-lg-4 col-md-6">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="card-body">
                             <div class="d-flex align-items-center mb-3">
                                 <img src="images/case-logo-2.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
@@ -330,7 +331,7 @@
                 </div>
                 
                 <div class="col-lg-4 col-md-6">
-                    <div class="card h-100 border-0">
+                    <div class="card h-100 border-0 card-hover">
                         <div class="card-body">
                             <div class="d-flex align-items-center mb-3">
                                 <img src="images/case-logo-3.jpg" alt="客户logo" class="rounded-circle me-3" width="50" height="50">
@@ -451,7 +452,7 @@
             
             <div class="row g-4">
                 <div class="col-md-6 col-lg-3">
-                    <div class="card border-0 shadow-sm h-100">
+                    <div class="card border-0 shadow-sm h-100 card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
                                 <i class="fas fa-comments"></i>
@@ -463,7 +464,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card border-0 shadow-sm h-100">
+                    <div class="card border-0 shadow-sm h-100 card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
                                 <i class="fas fa-cogs"></i>
@@ -475,7 +476,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card border-0 shadow-sm h-100">
+                    <div class="card border-0 shadow-sm h-100 card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
                                 <i class="fas fa-graduation-cap"></i>
@@ -487,7 +488,7 @@
                 </div>
                 
                 <div class="col-md-6 col-lg-3">
-                    <div class="card border-0 shadow-sm h-100">
+                    <div class="card border-0 shadow-sm h-100 card-hover">
                         <div class="card-body text-center">
                             <div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
                                 <i class="fas fa-sync-alt"></i>