diff --git a/assets/css/solution.css b/assets/css/solution.css
new file mode 100644
index 0000000..8f52c6a
--- /dev/null
+++ b/assets/css/solution.css
@@ -0,0 +1,1109 @@
+        /* ========== 主色调覆盖 - rgba(0, 100, 255, 1) ========== */
+        :root {
+            --primary-color: rgba(0, 100, 255, 1);
+            --primary-color-dark: rgba(0, 80, 200, 1);
+            --primary-color-light: rgba(0, 100, 255, 0.8);
+        }
+
+        /* ========== Solution Page Styles ========== */
+
+        /* Hero Section */
+        .solution-hero {
+            position: relative;
+            min-height: 50vh;
+            display: flex;
+            align-items: center;
+            padding-top: 110px; /* header高度80px + 最小间距30px */
+            overflow: hidden;
+            background: url("../images/solution/neihe.png");
+        }
+
+        .solution-hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 60%;
+            height: 60%;
+            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
+            animation: blob 8s ease-in-out infinite;
+        }
+
+        .solution-hero::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 60%;
+            height: 60%;
+            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
+            animation: blob 8s ease-in-out infinite 2s;
+        }
+
+        @keyframes blob {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -30px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 10;
+        }
+
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 16px;
+            border-radius: 50px;
+            background: #0066ff;
+    
+            color: rgb(255, 255, 255);
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 24px;
+        }
+
+        .hero-badge .pulse-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: rgb(255, 255, 255);
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(1.2); }
+        }
+
+        .hero-title {
+            font-size: 38px;
+            font-weight: 700;
+            color: #fff;
+            line-height: 1.2;
+            margin-bottom: 24px;
+        }
+
+        .hero-title .gradient-text {
+            background: linear-gradient(90deg, rgba(0, 150, 255, 1), rgba(100, 200, 255, 1));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .hero-desc {
+            font-size: 18px;
+            color: #eef6ff;
+            line-height: 1.8;
+            max-width: 520px;
+            margin-bottom: 32px;
+        }
+
+        .hero-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+
+        .btn-primary-custom {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 28px;
+            background: rgba(0, 100, 255, 1);
+            color: #fff;
+            border-radius: 8px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
+        }
+
+        .btn-primary-custom:hover {
+            background: rgba(0, 80, 200, 1);
+            color: #fff;
+            transform: translateY(-2px);
+        }
+
+        .btn-outline-custom {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 28px;
+            background: transparent;
+            color: #fff;
+            border: 1px solid #475569;
+            border-radius: 8px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+
+        .btn-outline-custom:hover {
+            background: rgba(255, 255, 255, 0.05);
+            color: #fff;
+        }
+
+        /* Hero Stats Cards */
+        .hero-stats {
+            position: relative;
+            z-index: 10;
+        }
+
+        .stats-card-container {
+            
+            padding: 24px 24px 48px 24px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            position: relative;
+        }
+
+        .stat-item {
+            background: rgba(0, 50, 128, 0.5);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
+            height: 130px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .stat-item .stat-icon {
+            width: 40px;
+            height: 40px;
+            margin-bottom: 12px;
+        }
+
+        /* 覆盖 themify-icons 默认样式 */
+        .stat-item .stat-icon[class^="ti-"],
+        .stat-item .stat-icon[class*=" ti-"] {
+            font-size: 32px;
+            line-height: 1;
+            display: block;
+        }
+
+        .stat-item .stat-icon.blue { color: rgba(0, 150, 255, 1); }
+        .stat-item .stat-icon.cyan { color: rgba(0, 180, 255, 1); }
+        .stat-item .stat-icon.indigo { color: rgba(80, 120, 255, 1); }
+        .stat-item .stat-icon.green { color: #34d399; }
+
+        .stat-item .stat-number {
+            font-size: 28px;
+            font-weight: 700;
+            color: #fff;
+            margin-bottom: 4px;
+        }
+
+        .stat-item .stat-label {
+            font-size: 12px;
+            color: #94a3b8;
+        }
+
+        /* 风车叶片错开效果 - 使用transform不影响间距 */
+        .stat-item:nth-child(2),
+        .stat-item:nth-child(4) {
+            transform: translateY(24px);
+        }
+
+        .stats-center-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, calc(-50% + 12px));
+            width: 64px;
+            height: 64px;
+            background: rgba(0, 100, 255, 1);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
+            border: 4px solid rgba(0, 40, 100, 1);
+            z-index: 10;
+        }
+
+        .stats-center-icon i {
+            font-size: 24px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            line-height: 1;
+        }
+
+        /* 覆盖 flaticon 默认样式 */
+        .stats-center-icon [class^="flaticon-"]:before,
+        .stats-center-icon [class*=" flaticon-"]:before,
+        .stats-center-icon [class^="flaticon-"]:after,
+        .stats-center-icon [class*=" flaticon-"]:after {
+            font-family: Flaticon;
+            font-size: 28px;
+            font-style: normal;
+            margin-left: 0;
+        }
+
+        /* Pain Points Section */
+        .pain-points-section {
+            padding: 100px 0;
+            background: #fff;
+        }
+
+        .section-header {
+            text-align: center;
+            max-width: 700px;
+            margin: 0 auto 60px;
+        }
+
+        .section-header h2 {
+            font-size: 32px;
+            font-weight: 700;
+            color: #0f172a;
+            margin-bottom: 16px;
+        }
+
+        .section-header p {
+            font-size: 16px;
+            color: #64748b;
+        }
+
+        .pain-point-card {
+            height: 100%;
+            padding: 32px;
+            text-align: center;
+            background: #f8fafc;
+            border-radius: 16px;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+        }
+
+        .pain-point-card:hover {
+            background: #fff;
+            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
+            transform: translateY(-4px);
+        }
+
+        .pain-point-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 64px;
+            height: 64px;
+            background: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            margin-bottom: 24px;
+            transition: transform 0.3s ease;
+        }
+
+        .pain-point-card:hover .pain-point-icon {
+            transform: scale(1.1);
+        }
+
+        .pain-point-icon i {
+            font-size: 28px;
+        }
+
+        .pain-point-icon.red i { color: #0a7cff; }
+        .pain-point-icon.orange i { color: #00751d; }
+        .pain-point-icon.yellow i { color: #eab308; }
+        .pain-point-icon.purple i { color: #a855f7; }
+
+        .pain-point-card h3 {
+            font-size: 20px;
+            font-weight: 700;
+            color: #0f172a;
+            margin-bottom: 12px;
+            line-height: 1.4;
+            min-height: 2.8em;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            line-clamp: 2;
+            box-orient: vertical;
+        }
+
+        .pain-point-card p {
+            font-size: 14px;
+            color: #64748b;
+            line-height: 1.7;
+            margin: 0;
+        }
+
+        /* Solution Architecture Section */
+        .architecture-section {
+            padding: 100px 0;
+            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
+            color: #fff;
+            overflow: hidden;
+        }
+
+        .architecture-section > .container > .row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .architecture-section > .container > .row > .col-md-6 {
+            display: flex;
+            align-items: center;
+        }
+
+        .arch-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 20px;
+            margin-bottom: 32px;
+        }
+
+        .arch-step-number {
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 14px;
+        }
+
+        .arch-step-number.blue {
+            background: rgba(177, 208, 255, 0.2);
+            border: 1px solid rgba(0, 100, 255, 0.3);
+            color: rgb(255, 255, 255);
+        }
+
+        .arch-step-number.cyan {
+            background: rgba(177, 208, 255, 0.2);
+            border: 1px solid rgba(0, 100, 255, 0.3);
+            color: rgb(255, 255, 255);
+        }
+
+        .arch-step-number.indigo {
+            background: rgba(177, 208, 255, 0.2);
+            border: 1px solid rgba(0, 100, 255, 0.3);
+            color: rgb(255, 255, 255);
+        }
+
+        .arch-step-content h4 {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .arch-step-content h4.blue { color: rgb(255, 255, 255); }
+        .arch-step-content h4.cyan { color: rgb(255, 255, 255); }
+        .arch-step-content h4.indigo { color: rgb(255, 255, 255); }
+
+        .arch-step-content p {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.8);
+            margin: 0;
+        }
+
+        .arch-visual {
+            position: relative;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+
+        .arch-visual::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 150, 255, 0.1));
+            border-radius: 50%;
+            filter: blur(60px);
+            animation: pulse 4s ease-in-out infinite;
+        }
+
+        .arch-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            position: relative;
+        }
+
+        .arch-grid-item {
+            background: rgba(30, 41, 59, 0.8);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(71, 85, 105, 0.5);
+            border-radius: 16px;
+            padding: 24px;
+            text-align: center;
+            transition: transform 0.3s ease;
+        }
+
+        .arch-grid-item:hover {
+            transform: translateY(-8px);
+        }
+
+        .arch-grid-item:nth-child(2),
+        .arch-grid-item:nth-child(4) {
+            margin-top: 32px;
+        }
+
+        .arch-grid-item i {
+            font-size: 40px;
+            margin-bottom: 12px;
+        }
+
+        .arch-grid-item i.blue { color: rgba(0, 150, 255, 1); }
+        .arch-grid-item i.cyan { color: rgba(0, 180, 255, 1); }
+        .arch-grid-item i.indigo { color: rgba(100, 150, 255, 1); }
+        .arch-grid-item i.green { color: #34d399; }
+
+        .arch-grid-item span {
+            font-weight: 600;
+            font-size: 14px;
+        }
+
+        .arch-center-link {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 56px;
+            height: 56px;
+            background: #fff;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
+            z-index: 10;
+        }
+
+        .arch-center-link i {
+            font-size: 24px;
+            color: #003080;
+        }
+
+        /* Architecture Visual Image Container */
+        .arch-visual-container {
+            position: relative;
+            width: 100%;
+            max-width: 700px;
+            margin: 20px auto;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 10px ;
+            border: 1px solid rgba(71, 85, 105, 0.5);
+            backdrop-filter: blur(8px);
+            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .arch-visual-container::before {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
+            border-radius: 18px;
+            filter: blur(20px);
+            opacity: 0.5;
+            z-index: -1;
+            animation: pulse 4s ease-in-out infinite;
+        }
+
+        .arch-visual-container img {
+            width: 100%;
+            height: auto;
+            display: block;
+            border-radius: 8px;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Add hover effect */
+        .arch-visual-container:hover {
+            transform: translateY(-4px);
+            transition: transform 0.3s ease;
+            border-color: rgba(0, 150, 255, 0.6);
+        }
+
+        /* Responsive adjustments for the image container */
+        @media (max-width: 1200px) {
+            .arch-visual-container {
+                max-width: 540px;
+            }
+        }
+
+        @media (max-width: 991px) {
+            .arch-visual-container {
+                max-width: 480px;
+            }
+        }
+
+        @media (max-width: 767px) {
+            .arch-visual-container {
+                max-width: 100%;
+                margin: 24px auto 0;
+            }
+        }
+
+        /* Product Matrix Section */
+        .products-section {
+            padding: 100px 0;
+            background: #f8fafc;
+        }
+
+        .section-header-flex {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: flex-end;
+            margin-bottom: 48px;
+        }
+
+        .section-header-left {
+            max-width: 600px;
+        }
+
+        .section-label {
+            font-size: 12px;
+            font-weight: 700;
+            color: rgba(0, 100, 255, 1);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 8px;
+        }
+
+        .section-header-left h2 {
+            font-size: 32px;
+            font-weight: 700;
+            color: #0f172a;
+            margin-bottom: 12px;
+        }
+
+        .section-header-left p {
+            font-size: 16px;
+            color: #64748b;
+            margin: 0;
+        }
+
+        .view-all-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: rgba(0, 100, 255, 1);
+            font-weight: 600;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .view-all-link:hover {
+            color: rgba(0, 80, 200, 1);
+        }
+
+        /* 让同一行的产品卡片高度一致 */
+        .products-section .row {
+            display: flex;
+            flex-wrap: wrap;
+        }
+
+        .products-section .row > [class*="col-"] {
+            display: flex;
+            margin-bottom: 24px;
+        }
+
+        .product-card {
+            background: #fff;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 0;
+            width: 100%;
+        }
+
+        .product-card:hover {
+            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
+            transform: translateY(-4px);
+        }
+
+        .product-card-bar {
+            height: 4px;
+            width: 100%;
+        }
+
+        .product-card-bar.blue { background: rgba(0, 100, 255, 1); }
+        .product-card-bar.cyan { background: rgba(0, 120, 255, 1); }
+        .product-card-bar.indigo { background: rgba(50, 100, 255, 1); }
+        .product-card-bar.slate { background: rgba(0, 60, 150, 1); }
+        .product-card-bar.green { background: rgba(0, 80, 200, 1); }
+
+        .product-card-body {
+            padding: 28px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .product-tags {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 16px;
+        }
+
+        .product-tag {
+            font-size: 12px;
+            font-weight: 500;
+            padding: 4px 10px;
+            background: #f1f5f9;
+            color: #475569;
+            border-radius: 4px;
+        }
+
+        .product-card-body h3 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #0f172a;
+            margin-bottom: 12px;
+            transition: color 0.3s ease;
+        }
+
+        .product-card:hover h3 {
+            color: rgba(0, 100, 255, 1);
+        }
+
+        .product-card-body > p {
+            font-size: 14px;
+            color: #64748b;
+            line-height: 1.7;
+            flex: 1;
+            margin-bottom: 20px;
+        }
+
+        .product-card-footer {
+    
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .product-card-footer span {
+            font-size: 14px;
+            color: #94a3b8;
+            transition: color 0.3s ease;
+        }
+
+        .product-card:hover .product-card-footer span {
+            color: rgba(0, 100, 255, 1);
+        }
+
+        .product-card-arrow {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #f1f5f9;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .product-card-arrow i {
+            font-size: 14px;
+            color: #64748b;
+        }
+
+        .product-card:hover .product-card-arrow {
+            background: rgba(0, 100, 255, 1);
+        }
+
+        .product-card:hover .product-card-arrow i {
+            color: #fff;
+        }
+
+        /* Value Section */
+        .value-section {
+            padding: 70px 0;
+            background: #fff;
+        }
+
+        .value-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 28px;
+            background: #f8fafc;
+            border-radius: 16px;
+            transition: all 0.3s ease;
+            cursor: default;
+            margin-bottom: 16px;
+        }
+
+        .value-item:hover {
+            background: rgba(0, 100, 255, 1);
+        }
+
+        .value-item:hover *:not(.value-icon i) {
+            color: #fff !important;
+        }
+
+        .value-item:hover .value-icon i {
+            color: #fff;
+        }
+
+        .value-item:hover .value-icon {
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: none;
+        }
+
+        .value-icon {
+            flex-shrink: 0;
+            width: 64px;
+            height: 64px;
+            background: #fff;
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            margin-bottom: 20px;
+            transition: all 1.2s ease;
+        }
+
+        .value-icon i {
+            font-size: 28px;
+            color: rgba(0, 100, 255, 1);
+            transition: color 1.2s ease;
+        }
+
+        .value-content {
+            text-align: center;
+        }
+
+        .value-content h3 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #0f172a;
+            margin-bottom: 8px;
+            transition: color 1.2s ease;
+        }
+
+        .value-content p {
+            font-size: 14px;
+            color: #64748b;
+            line-height: 1.7;
+            margin: 0;
+            transition: color 1.2s ease;
+        }
+
+        @media (min-width: 768px) {
+            .value-item {
+                flex-direction: row;
+                text-align: left;
+            }
+
+            .value-icon {
+                margin-bottom: 0;
+                margin-right: 24px;
+            }
+
+            .value-content {
+                text-align: left;
+            }
+        }
+
+        /* Advantages Section */
+        .advantages-section {
+            padding: 100px 0;
+             background: url("../images/solution/bg.png");
+            color: #fff;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .advantages-section .row {
+            display: flex;
+            align-items: center;
+        }
+
+        @media (max-width: 767px) {
+            .advantages-section .row {
+                flex-direction: column;
+            }
+
+            .advantages-section .col-md-6 {
+                width: 100%;
+            }
+        }
+
+        .advantages-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 50%;
+            height: 100%;
+    
+        }
+
+        .advantage-item {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 32px;
+        }
+
+        .advantage-check {
+            flex-shrink: 0;
+            margin-top: 4px;
+        }
+
+        .advantage-check i {
+            font-size: 24px;
+            color: rgba(0, 150, 255, 1);
+        }
+
+        .advantage-item h4 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #fff;
+            margin-bottom: 8px;
+        }
+
+        .advantage-item p {
+            font-size: 14px;
+            color: #94a3b8;
+            margin: 0;
+            line-height: 1.7;
+        }
+
+        .stats-boxes {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            position: relative;
+        }
+
+        .stat-box {
+            background: rgba(0, 40, 100, 0.5);
+            padding: 28px;
+            border-radius: 16px;
+            text-align: center;
+            border: 1px solid rgba(0, 100, 255, 0.3);
+            transition: border-color 0.3s ease;
+        }
+
+        .stat-box:hover {
+            border-color: rgba(0, 150, 255, 1);
+        }
+
+        .stat-box.full-width {
+            grid-column: span 2;
+        }
+
+        .stat-box .stat-number {
+            font-size: 36px;
+            font-weight: 700;
+            color: rgb(255, 255, 255);
+            margin-bottom: 8px;
+        }
+
+        .stat-box .stat-label {
+            font-size: 14px;
+            color: #94a3b8;
+        }
+
+        /* Cases Section */
+        .cases-section {
+            padding: 100px 0;
+            background: #f8fafc;
+        }
+
+        .case-card-link {
+            display: block;
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .case-card-link:hover,
+        .case-card-link:focus {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .cases-section .row + .row {
+            margin-top: 30px;
+        }
+
+        .case-card {
+            background: #fff;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+            border: 1px solid #e2e8f0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .case-card-header {
+            position: relative;
+            padding: 28px;
+            display: flex;
+            align-items: flex-end;
+            overflow: hidden;
+        }
+
+        .case-card-header.blue {
+            background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
+        }
+
+        .case-card-header.cyan {
+            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
+        }
+
+        .case-card-header.teal {
+            background: linear-gradient(135deg, rgba(0, 110, 140, 1), rgba(0, 160, 190, 1));
+        }
+
+        .case-card-header.green {
+            background: linear-gradient(135deg, rgba(0, 120, 90, 1), rgba(40, 180, 120, 1));
+        }
+
+        .case-card-header.indigo {
+            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
+        }
+
+        .case-card-header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -10%;
+            width: 160px;
+            height: 160px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .case-card-header h3 {
+            position: relative;
+            font-size: 20px;
+            font-weight: 700;
+            color: #fff;
+            margin: 0;
+        }
+
+        .case-card-body {
+            padding: 28px;
+            flex: 1;
+        }
+
+        .case-project {
+            font-size: 14px;
+            font-weight: 600;
+            color: rgba(0, 100, 255, 1);
+            margin-bottom: 12px;
+        }
+
+        .case-card-body p {
+            font-size: 14px;
+            color: #64748b;
+            line-height: 1.7;
+            margin: 0;
+        }
+
+        /* Scroll Animation */
+        .reveal {
+            opacity: 0;
+            transform: translateY(40px);
+            transition: all 0.8s ease;
+        }
+
+        .reveal.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* Responsive */
+        @media (max-width: 991px) {
+            .hero-title {
+                font-size: 36px;
+            }
+
+            .hero-stats {
+                margin-top: 48px;
+            }
+        }
+
+        @media (max-width: 767px) {
+            .solution-hero {
+                min-height: auto;
+                padding: 110px 0 60px; /* header高度80px + 最小间距30px */
+            }
+
+            .hero-title {
+                font-size: 28px;
+            }
+
+            .hero-desc {
+                font-size: 16px;
+            }
+
+            .section-header h2,
+            .section-header-left h2 {
+                font-size: 24px;
+            }
+
+            .section-header-flex {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 16px;
+            }
+
+            .cases-section .row + .row {
+                margin-top: 24px;
+            }
+
+            .cases-section .col-md-4 + .col-md-4 {
+                margin-top: 24px;
+            }
+
+            .stat-box .stat-number {
+                font-size: 28px;
+            }
+        }
+
+        .value-grid {
+            display: flex;
+            flex-wrap: wrap;
+            margin: 0 -15px;
+        }
+
+        .value-grid-item {
+            width: 50%;
+            padding: 0 15px;
+            box-sizing: border-box;
+            display: flex;
+        }
+
+        .value-grid-item .value-item {
+            width: 100%;
+        }
+
+        @media (max-width: 767px) {
+            .value-grid-item {
+                width: 100%;
+            }
+        }
diff --git a/classiccase/beibuwan_shuttle_bus.html b/classiccase/beibuwan_shuttle_bus.html
index 182832a..21c35f1 100644
--- a/classiccase/beibuwan_shuttle_bus.html
+++ b/classiccase/beibuwan_shuttle_bus.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 北部湾防城港穿梭巴士
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 北部湾防城港有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/canal_logistics_supervision.html b/classiccase/canal_logistics_supervision.html
index ad3391b..33919eb 100644
--- a/classiccase/canal_logistics_supervision.html
+++ b/classiccase/canal_logistics_supervision.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 运河物流一体化船舶收费监管平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt;济宁港航建设有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/hede_global_supply_chain.html b/classiccase/hede_global_supply_chain.html
index 0937346..cf8c4b7 100644
--- a/classiccase/hede_global_supply_chain.html
+++ b/classiccase/hede_global_supply_chain.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 合德全球供应链平台项目
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 唐山港合德海运有限公司
                     </div>
                 </div>
             </div>
@@ -86,7 +86,7 @@
                 <div class="col col-xs-8">
                     <div class="project-single-content">
                         <div class="content-area">
-                            <h2 style="    margin-top: 50px;">合德全球供应链平台项目</h2>
+                            <h2 style="    margin-top: 50px;">唐山港合德海运有限公司</h2>
                             <p style="margin: 40px 0 30px 0;">唐山港合德海运有限公司，专注内外贸集装箱航线运营，主营国际国内水路运输、货运代理、船舶代理及无船承运业务。经营航线30余条，覆盖：外贸航线：美西、日韩、东南亚、中东、印巴等国际港口；内贸干线：广州、厦门、福州、泉州、漳州、温州、上海、宁波、乍浦、南京、太仓、江阴等口岸；环渤海支线：盘锦、锦州、秦皇岛、曹妃甸、天津、黄骅、潍坊、龙口等港口网络，实现渤海湾高效连接。</p>
 
                             <div class="challange-solution-section">
diff --git a/classiccase/huanghua_vehicle_analysis.html b/classiccase/huanghua_vehicle_analysis.html
index 637bfb8..42a38d2 100644
--- a/classiccase/huanghua_vehicle_analysis.html
+++ b/classiccase/huanghua_vehicle_analysis.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 黄骅港车辆路线分析平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 黄骅港
                     </div>
                 </div>
             </div>
diff --git a/classiccase/jiahua_shipping_system.html b/classiccase/jiahua_shipping_system.html
index db6c3e7..3ad63bd 100644
--- a/classiccase/jiahua_shipping_system.html
+++ b/classiccase/jiahua_shipping_system.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 嘉华航运业务管理系统
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 嘉华航运(香港)有限公司
                     </div>
                 </div>
             </div>
@@ -86,7 +86,7 @@
                 <div class="col col-xs-8">
                     <div class="project-single-content">
                         <div class="content-area">
-                            <h2 style="    margin-top: 50px;">嘉华航运业务管理系统</h2>
+                            <h2 style="    margin-top: 50px;">嘉华航运(香港)有限公司</h2>
                             <p style="margin: 40px 0 30px 0;">嘉华航运(香港)有限公司（Kawa Shipping），2023年成立的新兴国际航运企业，专注中东及北非市场。由土耳其与阿联酋企业共同持股，凭借资本与资源优势，成立一年即跻身国内发展最快的民营集装箱航运公司行列。航运网络覆盖华东、华北、华中及西南地区主要港口，中东航线占据显著优势。截至2024年9月，运营14艘集装箱船（3艘自有、11艘租赁），综合运力达20000 TEU。</p>
 
                             <div class="challange-solution-section">
diff --git a/classiccase/jinjiang_shipping_ecommerce.html b/classiccase/jinjiang_shipping_ecommerce.html
index 4b4bd9b..21c9fd0 100644
--- a/classiccase/jinjiang_shipping_ecommerce.html
+++ b/classiccase/jinjiang_shipping_ecommerce.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 锦江航运电子商务平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海锦江航运（集团）股份有限公司
                     </div>
                 </div>
             </div>
@@ -86,7 +86,7 @@
                 <div class="col col-xs-8">
                     <div class="project-single-content">
                         <div class="content-area">
-                            <h2 style="    margin-top: 50px;">锦江航运电子商务平台</h2>
+                            <h2 style="    margin-top: 50px;">上海锦江航运（集团）股份有限公司</h2>
                             <p style="margin: 40px 0 30px 0;">上海锦江航运（集团）股份有限公司（股票代码：601083）1983年成立的中国领先区域性集装箱航运企业，聚焦亚洲近洋市场，以上海为母港，形成"东北亚压舱石+东南亚增长极"战略布局。连续多年稳居上海-日本航线、上海-台湾航线市场占有率首位。作为上港集团（全球第一大港）控股子公司，业务深度融入长三角一体化及"一带一路"国家战略，是亚洲近洋市场"小而美"标杆企业。</p>
 
                             <div class="challange-solution-section">
diff --git a/classiccase/lianyungang_china_korea_ferry.html b/classiccase/lianyungang_china_korea_ferry.html
index becd23b..0dadfbb 100644
--- a/classiccase/lianyungang_china_korea_ferry.html
+++ b/classiccase/lianyungang_china_korea_ferry.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 连云港中韩轮渡综合业务管理平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 连云港中韩轮渡有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/mobile_machinery_dispatch.html b/classiccase/mobile_machinery_dispatch.html
index 9ecbf48..257a20d 100644
--- a/classiccase/mobile_machinery_dispatch.html
+++ b/classiccase/mobile_machinery_dispatch.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 流动机械智能调度指挥系统管理平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 秦皇岛港股份有限公司流动机械分公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/qinhuangdao_cargo_system.html b/classiccase/qinhuangdao_cargo_system.html
index 2ce89ad..44e1f7b 100644
--- a/classiccase/qinhuangdao_cargo_system.html
+++ b/classiccase/qinhuangdao_cargo_system.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 秦皇岛港杂货生产系统
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 秦皇岛港股份有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanggang_liandai_booking.html b/classiccase/shanggang_liandai_booking.html
index a49cc57..5deb0e7 100644
--- a/classiccase/shanggang_liandai_booking.html
+++ b/classiccase/shanggang_liandai_booking.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 上港联代订舱平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 上海上港联合国际船舶代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanggang_liandai_integration.html b/classiccase/shanggang_liandai_integration.html
index 81201db..58d6043 100644
--- a/classiccase/shanggang_liandai_integration.html
+++ b/classiccase/shanggang_liandai_integration.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 上港联代船货一体化平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 上海上港联合国际船舶代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanghai_hanghua_cloud.html b/classiccase/shanghai_hanghua_cloud.html
index 3563643..a28da6c 100644
--- a/classiccase/shanghai_hanghua_cloud.html
+++ b/classiccase/shanghai_hanghua_cloud.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海航华海运电商云服务平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海航华国际船务代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanghai_hanghua_ship_agent.html b/classiccase/shanghai_hanghua_ship_agent.html
index b2eb29f..6278d11 100644
--- a/classiccase/shanghai_hanghua_ship_agent.html
+++ b/classiccase/shanghai_hanghua_ship_agent.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海航华船代业务系统
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海航华国际船务代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanghai_penghua_platform.html b/classiccase/shanghai_penghua_platform.html
index 2ae8fde..bb3b2a0 100644
--- a/classiccase/shanghai_penghua_platform.html
+++ b/classiccase/shanghai_penghua_platform.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海鹏华综合业务管理平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海鹏华船务有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanghai_port_coastal_system.html b/classiccase/shanghai_port_coastal_system.html
index 93a40da..2b9329f 100644
--- a/classiccase/shanghai_port_coastal_system.html
+++ b/classiccase/shanghai_port_coastal_system.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海港船代内贸业务管理系统
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海港船务代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/shanghai_xinhai_freight.html b/classiccase/shanghai_xinhai_freight.html
index 5a3985b..4761c01 100644
--- a/classiccase/shanghai_xinhai_freight.html
+++ b/classiccase/shanghai_xinhai_freight.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海新海船货代业务管理系统
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 上海新海国际船舶代理有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/smart_wuzhou_port.html b/classiccase/smart_wuzhou_port.html
index 482e1a7..cc32fd9 100644
--- a/classiccase/smart_wuzhou_port.html
+++ b/classiccase/smart_wuzhou_port.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 智慧梧州港
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 梧州市港务发展集团有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/tangshan_bigdata_platform.html b/classiccase/tangshan_bigdata_platform.html
index d48703c..0fabd47 100644
--- a/classiccase/tangshan_bigdata_platform.html
+++ b/classiccase/tangshan_bigdata_platform.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 唐山基于大数据的一体化业务分析平台
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 唐山港口实业集团有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/tangshan_ore_terminal.html b/classiccase/tangshan_ore_terminal.html
index 271464e..4f9440b 100644
--- a/classiccase/tangshan_ore_terminal.html
+++ b/classiccase/tangshan_ore_terminal.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 唐山港矿石码头数字化港口项目
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 唐山港集团有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/tianjin_zhongyun_shipping.html b/classiccase/tianjin_zhongyun_shipping.html
index 9a479a0..f603c89 100644
--- a/classiccase/tianjin_zhongyun_shipping.html
+++ b/classiccase/tianjin_zhongyun_shipping.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 天津中运海运集团
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 天津中运海运集团有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/weihai_gate_yard.html b/classiccase/weihai_gate_yard.html
index 814eead..7ebfca7 100644
--- a/classiccase/weihai_gate_yard.html
+++ b/classiccase/weihai_gate_yard.html
@@ -71,7 +71,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 威海港大闸口堆场管理系统
+                        <a href="index.html">首页</a> &gt; <a href="classiccase.html">客户案例</a> &gt; 威海港通信息科技有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/yulong_terminal_system.html b/classiccase/yulong_terminal_system.html
index 245027e..ca26574 100644
--- a/classiccase/yulong_terminal_system.html
+++ b/classiccase/yulong_terminal_system.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 裕龙港务通用码头生产管理系统建设项目
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 山东裕龙港务有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/zhongshan_container_terminal.html b/classiccase/zhongshan_container_terminal.html
index 4b26c16..84abd23 100644
--- a/classiccase/zhongshan_container_terminal.html
+++ b/classiccase/zhongshan_container_terminal.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山集装箱码头系统
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山港航集团股份有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/zhongshan_port_service.html b/classiccase/zhongshan_port_service.html
index ed61651..510cb3d 100644
--- a/classiccase/zhongshan_port_service.html
+++ b/classiccase/zhongshan_port_service.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山港航港口客户服务平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山港航集团股份有限公司
                     </div>
                 </div>
             </div>
diff --git a/classiccase/zhongshan_xiaolan_remote.html b/classiccase/zhongshan_xiaolan_remote.html
index 5308aa9..f0e3678 100644
--- a/classiccase/zhongshan_xiaolan_remote.html
+++ b/classiccase/zhongshan_xiaolan_remote.html
@@ -73,7 +73,7 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山市小榄港货运联营有限公司智能远控对接平台
+                        <a href="index.html">首页</a> &gt; <a href="product_Logistics.html">产品中心</a> &gt; 中山市小榄港货运联营有限公司
                     </div>
                 </div>
             </div>
diff --git a/product_full_logistics_chain_cargo_agent.html b/product_full_logistics_chain_cargo_agent.html
index 2be9b59..c2bd20f 100644
--- a/product_full_logistics_chain_cargo_agent.html
+++ b/product_full_logistics_chain_cargo_agent.html
@@ -170,7 +170,7 @@
                     <div id="feature-panel-4" class="feature-highlight-panel" role="tabpanel">
                         <div class="feature-highlight-detail">
                             <div class="feature-highlight-copy">
-                                <h2>EDI自动对接：数据自动传，不用二次录入</h2>
+                                <h2>EDI自动对接：数据自动传，无需二次录入</h2>
                                 <p>系统对接船公司、海关、码头等外部系统，实现业务报文自动流转与状态回写。</p>
                                 <ul class="feature-highlight-points">
                                     <li>舱单自动发送海关，降低手工申报负担。</li>
diff --git a/product_full_logistics_chain_platform.html b/product_full_logistics_chain_platform.html
index ae17c78..71145dc 100644
--- a/product_full_logistics_chain_platform.html
+++ b/product_full_logistics_chain_platform.html
@@ -122,9 +122,9 @@
                                 <h2>数据自动流转：告别电话催问</h2>
                                 <p>平台打通订舱、拖车、报关、仓储各环节数据，一个环节完成后下游自动收到通知。</p>
                                 <ul class="feature-highlight-points">
-                                    <li>货代订舱后，拖车公司自动收到提货需求。</li>
-                                    <li>货物进港后，报关行自动收到状态更新并提前准备。</li>
-                                    <li>客户可通过公众号接收货物状态推送，减少电话查询。</li>
+                                    <li>客户线上发起货运委托，货代在线承接订单。</li>
+                                    <li>定制运输方案并报价，系统自动下发全链路作业指令至服务商。</li>
+                                    <li>多渠道同步运输状态，实现客户全程可视化追踪。</li>
                                 </ul>
                             </div>
                             <div class="feature-highlight-visual">
diff --git a/product_shipping_boat.html b/product_shipping_boat.html
index 43d2405..5b7b151 100644
--- a/product_shipping_boat.html
+++ b/product_shipping_boat.html
@@ -110,7 +110,7 @@
                 <div class="feature-highlight-panels">
                     <div id="feature-panel-1" class="feature-highlight-panel active" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>费用报销统一管理：省钱省事</h2><p>停用分散报销工具，所有费用在系统内统一处理，降低系统维护与流程管理成本。</p><ul class="feature-highlight-points"><li>财务人员无需在多个系统之间切换。</li><li>节省报销系统授权与维护费用。</li><li>流程统一后对账口径更清晰。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/feiyongbaoxiaotongyi.png" alt="统一报销管理"></div></div></div></div>
                     <div id="feature-panel-2" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>工作流统一审批：流程不乱</h2><p>审批流全部回归业务系统统一管理，强化集团标准化管控与审计可追溯能力。</p><ul class="feature-highlight-points"><li>各公司业务流程统一规范执行。</li><li>审批进度实时可查，减少催办成本。</li><li>审批记录集中归档，审计调阅更便捷。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/gongzuoliuchengtongyi.png" alt="统一流程审批"></div></div></div></div>
-                    <div id="feature-panel-3" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>业财数据自动对接：账目清晰</h2><p>通过中间库对接财务系统，业务与财务数据自动同步，减少手工转录和对账偏差。</p><ul class="feature-highlight-points"><li>业务单据自动生成财务凭证。</li><li>业务与财务数据口径统一。</li><li>缩短月末结账周期，提高财务效率。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/yecaiduidong.png" alt="业财数据对接"></div></div></div></div>
+                    <div id="feature-panel-3" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>业财数据自动对接：账目清晰</h2><p>多种方式对接财务系统，业务与财务数据自动同步，减少手工转录和对账偏差。</p><ul class="feature-highlight-points"><li>业务单据自动生成财务凭证。</li><li>业务与财务数据口径统一。</li><li>缩短月末结账周期，提高财务效率。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/yecaiduidong.png" alt="业财数据对接"></div></div></div></div>
                     <div id="feature-panel-4" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>船员薪资自动计算：省心准确</h2><p>内置计算引擎处理薪资、补贴、扣款等复杂规则，减少 Excel 手工核算风险。</p><ul class="feature-highlight-points"><li>降低人工算薪引起的多发少发问题。</li><li>计算结果可直接对接财务系统。</li><li>复杂场景规则由系统自动处理。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/chuanyuanxinzizidong.png" alt="船员薪资计算"></div></div></div></div>
                     <div id="feature-panel-5" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>证书到期自动预警：避免风险</h2><p>系统主动监控证书与关键节点，到期前预警并推送责任人，减少合规风险。</p><ul class="feature-highlight-points"><li>船舶与船员证书到期前自动提醒。</li><li>待办任务实时推送，减少遗漏。</li><li>流程推进从被动催办转向主动驱动。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/zhengshuyujing.png" alt="证书到期预警"></div></div></div></div>
                     <div id="feature-panel-6" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>体系文件无纸化管理：合规省力</h2><p>文件从生成、审批到归档全流程线上化，兼顾效率与审计合规要求。</p><ul class="feature-highlight-points"><li>模板化生成文件并附审批意见与电子签名。</li><li>电子化集中存储，支持快速检索调阅。</li><li>审计或体系认证支持一键导出打印。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuanboguanli/tixiwendangwuzhihua.png" alt="体系文件无纸化"></div></div></div></div>
diff --git a/product_shipping_company.html b/product_shipping_company.html
index 66aa6a4..7d4cb75 100644
--- a/product_shipping_company.html
+++ b/product_shipping_company.html
@@ -112,7 +112,7 @@
                     <div id="feature-panel-3" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>EDI无缝交换：数据自动对接</h2><p>与海关、海事、码头等外部系统自动交换报文，减少重复录入与手工对接误差。</p><ul class="feature-highlight-points"><li>舱单、报关单自动发送，减少二次输入。</li><li>海关/海事回执自动接收并同步状态。</li><li>支持 300+ 口岸节点对接，增强协同效率。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuangongsi/ediwufengjiaohuan.png" alt="EDI无缝交换"></div></div></div></div>
                     <div id="feature-panel-4" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>业财数据联动：业务发生财务同步</h2><p>业务、预算、结算与成本数据实时联动，缩短结算周期并提升财务可见性。</p><ul class="feature-highlight-points"><li>航次结束后收入与成本自动归集。</li><li>核算周期可从按月缩短至按周甚至按天。</li><li>船舶利用率、单箱成本等指标实时可查。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuangongsi/yecailiandong.png" alt="业财数据联动"></div></div></div></div>
                     <div id="feature-panel-5" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>决策数据看板：关键指标一眼看清</h2><p>通过 BI 看板沉淀船舶利用率、航线效益、成本结构等核心经营指标。</p><ul class="feature-highlight-points"><li>管理层无需等待报表即可查看实时运营数据。</li><li>航线盈亏图表化展示，经营问题更易识别。</li><li>支持按航线、船型、时间段下钻分析。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuangongsi/juecekanban.png" alt="决策数据看板"></div></div></div></div>
-                    <div id="feature-panel-6" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>全球合规适配：支持多币种多语言</h2><p>系统支持多语言界面、多币种结算和国际规则预置，提升跨境业务适配能力。</p><ul class="feature-highlight-points"><li>海外代理可切换英文界面，降低沟通成本。</li><li>多币种自动换算，减少汇率处理差错。</li><li>预置美线、欧线等申报规则，降低合规门槛。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuangongsi/quanqiuheguishipei.png" alt="全球合规适配"></div></div></div></div>
+                    <div id="feature-panel-6" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>全球合规适配：支持多币种多语言</h2><p>系统支持多语言界面、多币种结算和国际规则预置，提升跨境业务适配能力。</p><ul class="feature-highlight-points"><li>海外代理可切换英文界面，降低沟通成本。</li><li>多币种自动换算，减少汇率处理差错。</li><li>预置美线、日韩线、俄罗斯航线、中东印巴航线等申报规则，降低合规门槛。</li></ul></div><div class="feature-highlight-visual"><div class="feature-highlight-visual-card"><img src="assets/images/product/chuangongsi/quanqiuheguishipei.png" alt="全球合规适配"></div></div></div></div>
                 </div>
             </div>
         </section>
diff --git a/solution_inland_river_shipping.html b/solution_inland_river_shipping.html
index 5e246ab..88d34a2 100644
--- a/solution_inland_river_shipping.html
+++ b/solution_inland_river_shipping.html
@@ -28,1063 +28,8 @@
     <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/solution.css" rel="stylesheet">
 
-    <style>
-        /* ========== 主色调覆盖 - rgba(0, 100, 255, 1) ========== */
-        :root {
-            --primary-color: rgba(0, 100, 255, 1);
-            --primary-color-dark: rgba(0, 80, 200, 1);
-            --primary-color-light: rgba(0, 100, 255, 0.8);
-        }
-
-        /* ========== Solution Page Styles ========== */
-
-        /* Hero Section */
-        .solution-hero {
-            position: relative;
-            min-height: 50vh;
-            display: flex;
-            align-items: center;
-            padding-top: 110px; /* header高度80px + 最小间距30px */
-            overflow: hidden;
-            background: url("assets/images/solution/neihe.png");
-        }
-
-        .solution-hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite;
-        }
-
-        .solution-hero::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite 2s;
-        }
-
-        @keyframes blob {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 10;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 16px;
-            border-radius: 50px;
-            background: #0066ff;
-    
-            color: rgb(255, 255, 255);
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-top: 24px;
-        }
-
-        .hero-badge .pulse-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: rgb(255, 255, 255);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .hero-title {
-            font-size: 38px;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.2;
-            margin-bottom: 24px;
-        }
-
-        .hero-title .gradient-text {
-            background: linear-gradient(90deg, rgba(0, 150, 255, 1), rgba(100, 200, 255, 1));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .hero-desc {
-            font-size: 18px;
-            color: #eef6ff;
-            line-height: 1.8;
-            max-width: 520px;
-            margin-bottom: 32px;
-        }
-
-        .hero-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .btn-primary-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: rgba(0, 100, 255, 1);
-            color: #fff;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-        }
-
-        .btn-primary-custom:hover {
-            background: rgba(0, 80, 200, 1);
-            color: #fff;
-            transform: translateY(-2px);
-        }
-
-        .btn-outline-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: transparent;
-            color: #fff;
-            border: 1px solid #475569;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .btn-outline-custom:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: #fff;
-        }
-
-        /* Hero Stats Cards */
-        .hero-stats {
-            position: relative;
-            z-index: 10;
-        }
-
-        .stats-card-container {
-            
-            padding: 24px 24px 48px 24px;
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-item {
-            background: rgba(0, 50, 128, 0.5);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
-            height: 130px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .stat-item .stat-icon {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 12px;
-        }
-
-        /* 覆盖 themify-icons 默认样式 */
-        .stat-item .stat-icon[class^="ti-"],
-        .stat-item .stat-icon[class*=" ti-"] {
-            font-size: 32px;
-            line-height: 1;
-            display: block;
-        }
-
-        .stat-item .stat-icon.blue { color: rgba(0, 150, 255, 1); }
-        .stat-item .stat-icon.cyan { color: rgba(0, 180, 255, 1); }
-        .stat-item .stat-icon.indigo { color: rgba(80, 120, 255, 1); }
-        .stat-item .stat-icon.green { color: #34d399; }
-
-        .stat-item .stat-number {
-            font-size: 28px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 4px;
-        }
-
-        .stat-item .stat-label {
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        /* 风车叶片错开效果 - 使用transform不影响间距 */
-        .stat-item:nth-child(2),
-        .stat-item:nth-child(4) {
-            transform: translateY(24px);
-        }
-
-        .stats-center-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, calc(-50% + 12px));
-            width: 64px;
-            height: 64px;
-            background: rgba(0, 100, 255, 1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-            border: 4px solid rgba(0, 40, 100, 1);
-            z-index: 10;
-        }
-
-        .stats-center-icon i {
-            font-size: 24px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            line-height: 1;
-        }
-
-        /* 覆盖 flaticon 默认样式 */
-        .stats-center-icon [class^="flaticon-"]:before,
-        .stats-center-icon [class*=" flaticon-"]:before,
-        .stats-center-icon [class^="flaticon-"]:after,
-        .stats-center-icon [class*=" flaticon-"]:after {
-            font-family: Flaticon;
-            font-size: 28px;
-            font-style: normal;
-            margin-left: 0;
-        }
-
-        /* Pain Points Section */
-        .pain-points-section {
-            padding: 100px 0;
-            background: #fff;
-        }
-
-        .section-header {
-            text-align: center;
-            max-width: 700px;
-            margin: 0 auto 60px;
-        }
-
-        .section-header h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 16px;
-        }
-
-        .section-header p {
-            font-size: 16px;
-            color: #64748b;
-        }
-
-        .pain-point-card {
-            height: 100%;
-            padding: 32px;
-            text-align: center;
-            background: #f8fafc;
-            border-radius: 16px;
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-        }
-
-        .pain-point-card:hover {
-            background: #fff;
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
-            transform: translateY(-4px);
-        }
-
-        .pain-point-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .pain-point-card:hover .pain-point-icon {
-            transform: scale(1.1);
-        }
-
-        .pain-point-icon i {
-            font-size: 28px;
-        }
-
-        .pain-point-icon.red i { color: #0a7cff; }
-        .pain-point-icon.orange i { color: #00751d; }
-        .pain-point-icon.yellow i { color: #eab308; }
-        .pain-point-icon.purple i { color: #a855f7; }
-
-        .pain-point-card h3 {
-            font-size: 20px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            line-height: 1.4;
-            min-height: 2.8em;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            line-clamp: 2;
-            box-orient: vertical;
-        }
-
-        .pain-point-card p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Solution Architecture Section */
-        .architecture-section {
-            padding: 100px 0;
-            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
-            color: #fff;
-            overflow: hidden;
-        }
-
-        .architecture-section > .container > .row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-
-        .architecture-section > .container > .row > .col-md-6 {
-            display: flex;
-            align-items: center;
-        }
-
-        .arch-step {
-            display: flex;
-            align-items: flex-start;
-            gap: 20px;
-            margin-bottom: 32px;
-        }
-
-        .arch-step-number {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-        }
-
-        .arch-step-number.blue {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.cyan {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.indigo {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-content h4 {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .arch-step-content h4.blue { color: rgb(255, 255, 255); }
-        .arch-step-content h4.cyan { color: rgb(255, 255, 255); }
-        .arch-step-content h4.indigo { color: rgb(255, 255, 255); }
-
-        .arch-step-content p {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            margin: 0;
-        }
-
-        .arch-visual {
-            position: relative;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-
-        .arch-visual::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 150, 255, 0.1));
-            border-radius: 50%;
-            filter: blur(60px);
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .arch-grid-item {
-            background: rgba(30, 41, 59, 0.8);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            border-radius: 16px;
-            padding: 24px;
-            text-align: center;
-            transition: transform 0.3s ease;
-        }
-
-        .arch-grid-item:hover {
-            transform: translateY(-8px);
-        }
-
-        .arch-grid-item:nth-child(2),
-        .arch-grid-item:nth-child(4) {
-            margin-top: 32px;
-        }
-
-        .arch-grid-item i {
-            font-size: 40px;
-            margin-bottom: 12px;
-        }
-
-        .arch-grid-item i.blue { color: rgba(0, 150, 255, 1); }
-        .arch-grid-item i.cyan { color: rgba(0, 180, 255, 1); }
-        .arch-grid-item i.indigo { color: rgba(100, 150, 255, 1); }
-        .arch-grid-item i.green { color: #34d399; }
-
-        .arch-grid-item span {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .arch-center-link {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 56px;
-            height: 56px;
-            background: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
-            z-index: 10;
-        }
-
-        .arch-center-link i {
-            font-size: 24px;
-            color: #003080;
-        }
-
-        /* Architecture Visual Image Container */
-        .arch-visual-container {
-            position: relative;
-            width: 100%;
-            max-width: 700px;
-            margin: 20px auto;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            padding: 10px ;
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            backdrop-filter: blur(8px);
-            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .arch-visual-container::before {
-            content: '';
-            position: absolute;
-            inset: -2px;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
-            border-radius: 18px;
-            filter: blur(20px);
-            opacity: 0.5;
-            z-index: -1;
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-visual-container img {
-            width: 100%;
-            height: auto;
-            display: block;
-            border-radius: 8px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Add hover effect */
-        .arch-visual-container:hover {
-            transform: translateY(-4px);
-            transition: transform 0.3s ease;
-            border-color: rgba(0, 150, 255, 0.6);
-        }
-
-        /* Responsive adjustments for the image container */
-        @media (max-width: 1200px) {
-            .arch-visual-container {
-                max-width: 540px;
-            }
-        }
-
-        @media (max-width: 991px) {
-            .arch-visual-container {
-                max-width: 480px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .arch-visual-container {
-                max-width: 100%;
-                margin: 24px auto 0;
-            }
-        }
-
-        /* Product Matrix Section */
-        .products-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .section-header-flex {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: flex-end;
-            margin-bottom: 48px;
-        }
-
-        .section-header-left {
-            max-width: 600px;
-        }
-
-        .section-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: rgba(0, 100, 255, 1);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 8px;
-        }
-
-        .section-header-left h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-        }
-
-        .section-header-left p {
-            font-size: 16px;
-            color: #64748b;
-            margin: 0;
-        }
-
-        .view-all-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            color: rgba(0, 100, 255, 1);
-            font-weight: 600;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .view-all-link:hover {
-            color: rgba(0, 80, 200, 1);
-        }
-
-        /* 让同一行的产品卡片高度一致 */
-        .products-section .row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .products-section .row > [class*="col-"] {
-            display: flex;
-            margin-bottom: 24px;
-        }
-
-        .product-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 0;
-            width: 100%;
-        }
-
-        .product-card:hover {
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
-            transform: translateY(-4px);
-        }
-
-        .product-card-bar {
-            height: 4px;
-            width: 100%;
-        }
-
-        .product-card-bar.blue { background: rgba(0, 100, 255, 1); }
-        .product-card-bar.cyan { background: rgba(0, 120, 255, 1); }
-        .product-card-bar.indigo { background: rgba(50, 100, 255, 1); }
-        .product-card-bar.slate { background: rgba(0, 60, 150, 1); }
-        .product-card-bar.green { background: rgba(0, 80, 200, 1); }
-
-        .product-card-body {
-            padding: 28px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .product-tags {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 16px;
-        }
-
-        .product-tag {
-            font-size: 12px;
-            font-weight: 500;
-            padding: 4px 10px;
-            background: #f1f5f9;
-            color: #475569;
-            border-radius: 4px;
-        }
-
-        .product-card-body h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover h3 {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-body > p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            flex: 1;
-            margin-bottom: 20px;
-        }
-
-        .product-card-footer {
-    
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .product-card-footer span {
-            font-size: 14px;
-            color: #94a3b8;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover .product-card-footer span {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-arrow {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #f1f5f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .product-card-arrow i {
-            font-size: 14px;
-            color: #64748b;
-        }
-
-        .product-card:hover .product-card-arrow {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .product-card:hover .product-card-arrow i {
-            color: #fff;
-        }
-
-        /* Value Section */
-        .value-section {
-            padding: 70px 0;
-            background: #fff;
-        }
-
-        .value-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 28px;
-            background: #f8fafc;
-            border-radius: 16px;
-            transition: all 0.3s ease;
-            cursor: default;
-            margin-bottom: 16px;
-        }
-
-        .value-item:hover {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .value-item:hover *:not(.value-icon i) {
-            color: #fff !important;
-        }
-
-        .value-item:hover .value-icon i {
-            color: #fff;
-        }
-
-        .value-item:hover .value-icon {
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: none;
-        }
-
-        .value-icon {
-            flex-shrink: 0;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 20px;
-            transition: all 1.2s ease;
-        }
-
-        .value-icon i {
-            font-size: 28px;
-            color: rgba(0, 100, 255, 1);
-            transition: color 1.2s ease;
-        }
-
-        .value-content {
-            text-align: center;
-        }
-
-        .value-content h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 8px;
-            transition: color 1.2s ease;
-        }
-
-        .value-content p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-            transition: color 1.2s ease;
-        }
-
-        @media (min-width: 768px) {
-            .value-item {
-                flex-direction: row;
-                text-align: left;
-            }
-
-            .value-icon {
-                margin-bottom: 0;
-                margin-right: 24px;
-            }
-
-            .value-content {
-                text-align: left;
-            }
-        }
-
-        /* Advantages Section */
-        .advantages-section {
-            padding: 100px 0;
-             background: url("assets/images/solution/bg.png");
-            color: #fff;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .advantages-section .row {
-            display: flex;
-            align-items: center;
-        }
-
-        @media (max-width: 767px) {
-            .advantages-section .row {
-                flex-direction: column;
-            }
-
-            .advantages-section .col-md-6 {
-                width: 100%;
-            }
-        }
-
-        .advantages-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 50%;
-            height: 100%;
-    
-        }
-
-        .advantage-item {
-            display: flex;
-            gap: 16px;
-            margin-bottom: 32px;
-        }
-
-        .advantage-check {
-            flex-shrink: 0;
-            margin-top: 4px;
-        }
-
-        .advantage-check i {
-            font-size: 24px;
-            color: rgba(0, 150, 255, 1);
-        }
-
-        .advantage-item h4 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 8px;
-        }
-
-        .advantage-item p {
-            font-size: 14px;
-            color: #94a3b8;
-            margin: 0;
-            line-height: 1.7;
-        }
-
-        .stats-boxes {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-box {
-            background: rgba(0, 40, 100, 0.5);
-            padding: 28px;
-            border-radius: 16px;
-            text-align: center;
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            transition: border-color 0.3s ease;
-        }
-
-        .stat-box:hover {
-            border-color: rgba(0, 150, 255, 1);
-        }
-
-        .stat-box.full-width {
-            grid-column: span 2;
-        }
-
-        .stat-box .stat-number {
-            font-size: 36px;
-            font-weight: 700;
-            color: rgb(255, 255, 255);
-            margin-bottom: 8px;
-        }
-
-        .stat-box .stat-label {
-            font-size: 14px;
-            color: #94a3b8;
-        }
-
-        /* Cases Section */
-        .cases-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .case-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .case-card-header {
-            position: relative;
-            padding: 28px;
-            display: flex;
-            align-items: flex-end;
-            overflow: hidden;
-        }
-
-        .case-card-header.blue {
-            background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
-        }
-
-        .case-card-header.cyan {
-            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
-        }
-
-        .case-card-header.indigo {
-            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
-        }
-
-        .case-card-header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -10%;
-            width: 160px;
-            height: 160px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .case-card-header h3 {
-            position: relative;
-            font-size: 20px;
-            font-weight: 700;
-            color: #fff;
-            margin: 0;
-        }
-
-        .case-card-body {
-            padding: 28px;
-            flex: 1;
-        }
-
-        .case-project {
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(0, 100, 255, 1);
-            margin-bottom: 12px;
-        }
-
-        .case-card-body p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Scroll Animation */
-        .reveal {
-            opacity: 0;
-            transform: translateY(40px);
-            transition: all 0.8s ease;
-        }
-
-        .reveal.active {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Responsive */
-        @media (max-width: 991px) {
-            .hero-title {
-                font-size: 36px;
-            }
-
-            .hero-stats {
-                margin-top: 48px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .solution-hero {
-                min-height: auto;
-                padding: 110px 0 60px; /* header高度80px + 最小间距30px */
-            }
-
-            .hero-title {
-                font-size: 28px;
-            }
-
-            .hero-desc {
-                font-size: 16px;
-            }
-
-            .section-header h2,
-            .section-header-left h2 {
-                font-size: 24px;
-            }
-
-            .section-header-flex {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 16px;
-            }
-
-            .stat-box .stat-number {
-                font-size: 28px;
-            }
-        }
-    </style>
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
@@ -1344,28 +289,6 @@
                     <h2>数字化转型价值</h2>
                     <p>不仅是软件升级，更是管理模式的重构。</p>
                 </div>
-
-                <style>
-                    .value-grid {
-                        display: flex;
-                        flex-wrap: wrap;
-                        margin: 0 -15px;
-                    }
-                    .value-grid-item {
-                        width: 50%;
-                        padding: 0 15px;
-                        box-sizing: border-box;
-                        display: flex;
-                    }
-                    .value-grid-item .value-item {
-                        width: 100%;
-                    }
-                    @media (max-width: 767px) {
-                        .value-grid-item {
-                            width: 100%;
-                        }
-                    }
-                </style>
                 <div class="value-grid">
                     <div class="value-grid-item">
                         <div class="value-item reveal">
@@ -1500,36 +423,40 @@
 
                 <div class="row">
                     <div class="col-md-4">
-                        <div class="case-card reveal">
-                            <div class="case-card-header blue">
-                                <h3>济宁港航发展集团</h3>
+                        <a class="case-card-link" href="classiccase/canal_logistics_supervision.html">
+                            <div class="case-card reveal">
+                                <div class="case-card-header blue">
+                                    <h3>济宁港航建设有限公司</h3>
+                                </div>
+                                <div class="case-card-body">
+                                    <p>实现集团内贸、港、物系统融合，解决"散改集"痛点。助力煤炭等大宗商品线上交易与全链条监管，打造千亿级物流集团。</p>
+                                </div>
                             </div>
-                            <div class="case-card-body">
-                                <p>实现集团内贸、港、物系统融合，解决"散改集"痛点。助力煤炭等大宗商品线上交易与全链条监管，打造千亿级物流集团。</p>
-                    
-                            </div>
-                        
-                        </div>
+                        </a>
                     </div>
                     <div class="col-md-4">
-                        <div class="case-card reveal" style="transition-delay: 150ms;">
-                            <div class="case-card-header cyan">
-                                <h3>中山港航集团</h3>
+                        <a class="case-card-link" href="classiccase/zhongshan_port_service.html">
+                            <div class="case-card reveal" style="transition-delay: 150ms;">
+                                <div class="case-card-header cyan">
+                                    <h3>中山港航集团股份有限公司</h3>
+                                </div>
+                                <div class="case-card-body">
+                                    <p>连接海关、船公司。实现多码头集约化管理，作业单证电子化率100%，极大提升通关效率与服务体验。</p>
+                                </div>
                             </div>
-                            <div class="case-card-body">
-                                <p>连接海关、船公司。实现多码头集约化管理，作业单证电子化率100%，极大提升通关效率与服务体验。</p>
-                            </div>
-                        </div>
+                        </a>
                     </div>
                     <div class="col-md-4">
-                        <div class="case-card reveal" style="transition-delay: 300ms;">
-                            <div class="case-card-header indigo">
-                                <h3>北部湾港防城港码头</h3>
+                        <a class="case-card-link" href="classiccase/fangchenggang_railway_container.html">
+                            <div class="case-card reveal" style="transition-delay: 300ms;">
+                                <div class="case-card-header indigo">
+                                    <h3>北部湾港防城港码头有限公司</h3>
+                                </div>
+                                <div class="case-card-body">
+                                    <p>针对海铁联运场景，解决作业量激增难题。实现与铁路系统数据互通，理货智能化，显著提升联运效率。</p>
+                                </div>
                             </div>
-                            <div class="case-card-body">
-                                <p>针对海铁联运场景，解决作业量激增难题。实现与铁路系统数据互通，理货智能化，显著提升联运效率。</p>
-                            </div>
-                        </div>
+                        </a>
                     </div>
                 </div>
             </div>
diff --git a/solution_logistics_chain.html b/solution_logistics_chain.html
index 3a34609..0e4d23f 100644
--- a/solution_logistics_chain.html
+++ b/solution_logistics_chain.html
@@ -28,1074 +28,8 @@
     <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
-    <style>
-        /* ========== 主色调覆盖 - rgba(0, 100, 255, 1) ========== */
-        :root {
-            --primary-color: rgba(0, 100, 255, 1);
-            --primary-color-dark: rgba(0, 80, 200, 1);
-            --primary-color-light: rgba(0, 100, 255, 0.8);
-        }
+    <link href="assets/css/solution.css" rel="stylesheet">
 
-        /* ========== Solution Page Styles ========== */
-
-        /* Hero Section */
-        .solution-hero {
-            position: relative;
-            min-height: 50vh;
-            display: flex;
-            align-items: center;
-            padding-top: 110px; /* header高度80px + 最小间距30px */
-            overflow: hidden;
-            background: url("assets/images/solution/neihe.png");
-        }
-
-        .solution-hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite;
-        }
-
-        .solution-hero::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite 2s;
-        }
-
-        @keyframes blob {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 10;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 16px;
-            border-radius: 50px;
-            background: #0066ff;
-    
-            color: rgb(255, 255, 255);
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-top: 24px;
-        }
-
-        .hero-badge .pulse-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: rgb(255, 255, 255);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .hero-title {
-            font-size: 38px;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.2;
-            margin-bottom: 24px;
-        }
-
-        .hero-title .gradient-text {
-            background: linear-gradient(90deg, rgba(0, 150, 255, 1), rgba(100, 200, 255, 1));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .hero-desc {
-            font-size: 18px;
-            color: #eef6ff;
-            line-height: 1.8;
-            max-width: 520px;
-            margin-bottom: 32px;
-        }
-
-        .hero-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .btn-primary-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: rgba(0, 100, 255, 1);
-            color: #fff;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-        }
-
-        .btn-primary-custom:hover {
-            background: rgba(0, 80, 200, 1);
-            color: #fff;
-            transform: translateY(-2px);
-        }
-
-        .btn-outline-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: transparent;
-            color: #fff;
-            border: 1px solid #475569;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .btn-outline-custom:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: #fff;
-        }
-
-        /* Hero Stats Cards */
-        .hero-stats {
-            position: relative;
-            z-index: 10;
-        }
-
-        .stats-card-container {
-            
-            padding: 24px 24px 48px 24px;
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-item {
-            background: rgba(0, 50, 128, 0.5);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
-            height: 130px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .stat-item .stat-icon {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 12px;
-        }
-
-        /* 覆盖 themify-icons 默认样式 */
-        .stat-item .stat-icon[class^="ti-"],
-        .stat-item .stat-icon[class*=" ti-"] {
-            font-size: 32px;
-            line-height: 1;
-            display: block;
-        }
-
-        .stat-item .stat-icon.blue { color: rgba(0, 150, 255, 1); }
-        .stat-item .stat-icon.cyan { color: rgba(0, 180, 255, 1); }
-        .stat-item .stat-icon.indigo { color: rgba(80, 120, 255, 1); }
-        .stat-item .stat-icon.green { color: #34d399; }
-
-        .stat-item .stat-number {
-            font-size: 28px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 4px;
-        }
-
-        .stat-item .stat-label {
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        /* 风车叶片错开效果 - 使用transform不影响间距 */
-        .stat-item:nth-child(2),
-        .stat-item:nth-child(4) {
-            transform: translateY(24px);
-        }
-
-        .stats-center-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, calc(-50% + 12px));
-            width: 64px;
-            height: 64px;
-            background: rgba(0, 100, 255, 1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-            border: 4px solid rgba(0, 40, 100, 1);
-            z-index: 10;
-        }
-
-        .stats-center-icon i {
-            font-size: 24px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            line-height: 1;
-        }
-
-        /* 覆盖 flaticon 默认样式 */
-        .stats-center-icon [class^="flaticon-"]:before,
-        .stats-center-icon [class*=" flaticon-"]:before,
-        .stats-center-icon [class^="flaticon-"]:after,
-        .stats-center-icon [class*=" flaticon-"]:after {
-            font-family: Flaticon;
-            font-size: 28px;
-            font-style: normal;
-            margin-left: 0;
-        }
-
-        /* Pain Points Section */
-        .pain-points-section {
-            padding: 100px 0;
-            background: #fff;
-        }
-
-        .section-header {
-            text-align: center;
-            max-width: 700px;
-            margin: 0 auto 60px;
-        }
-
-        .section-header h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 16px;
-        }
-
-        .section-header p {
-            font-size: 16px;
-            color: #64748b;
-        }
-
-        .pain-point-card {
-            height: 100%;
-            padding: 32px;
-            text-align: center;
-            background: #f8fafc;
-            border-radius: 16px;
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-        }
-
-        .pain-point-card:hover {
-            background: #fff;
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
-            transform: translateY(-4px);
-        }
-
-        .pain-point-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .pain-point-card:hover .pain-point-icon {
-            transform: scale(1.1);
-        }
-
-        .pain-point-icon i {
-            font-size: 28px;
-        }
-
-        .pain-point-icon.red i { color: #0a7cff; }
-        .pain-point-icon.orange i { color: #00751d; }
-        .pain-point-icon.yellow i { color: #eab308; }
-        .pain-point-icon.purple i { color: #a855f7; }
-
-        .pain-point-card h3 {
-            font-size: 20px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            line-height: 1.4;
-            min-height: 2.8em;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            line-clamp: 2;
-            box-orient: vertical;
-        }
-
-        .pain-point-card p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Solution Architecture Section */
-        .architecture-section {
-            padding: 100px 0;
-            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
-            color: #fff;
-            overflow: hidden;
-        }
-
-        .architecture-section > .container > .row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-
-        .architecture-section > .container > .row > .col-md-6 {
-            display: flex;
-            align-items: center;
-        }
-
-        .arch-step {
-            display: flex;
-            align-items: flex-start;
-            gap: 20px;
-            margin-bottom: 32px;
-        }
-
-        .arch-step-number {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-        }
-
-        .arch-step-number.blue {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.cyan {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.indigo {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-content h4 {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .arch-step-content h4.blue { color: rgb(255, 255, 255); }
-        .arch-step-content h4.cyan { color: rgb(255, 255, 255); }
-        .arch-step-content h4.indigo { color: rgb(255, 255, 255); }
-
-        .arch-step-content p {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            margin: 0;
-        }
-
-        .arch-visual {
-            position: relative;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-
-        .arch-visual::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 150, 255, 0.1));
-            border-radius: 50%;
-            filter: blur(60px);
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .arch-grid-item {
-            background: rgba(30, 41, 59, 0.8);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            border-radius: 16px;
-            padding: 24px;
-            text-align: center;
-            transition: transform 0.3s ease;
-        }
-
-        .arch-grid-item:hover {
-            transform: translateY(-8px);
-        }
-
-        .arch-grid-item:nth-child(2),
-        .arch-grid-item:nth-child(4) {
-            margin-top: 32px;
-        }
-
-        .arch-grid-item i {
-            font-size: 40px;
-            margin-bottom: 12px;
-        }
-
-        .arch-grid-item i.blue { color: rgba(0, 150, 255, 1); }
-        .arch-grid-item i.cyan { color: rgba(0, 180, 255, 1); }
-        .arch-grid-item i.indigo { color: rgba(100, 150, 255, 1); }
-        .arch-grid-item i.green { color: #34d399; }
-
-        .arch-grid-item span {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .arch-center-link {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 56px;
-            height: 56px;
-            background: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
-            z-index: 10;
-        }
-
-        .arch-center-link i {
-            font-size: 24px;
-            color: #003080;
-        }
-
-        /* Architecture Visual Image Container */
-        .arch-visual-container {
-            position: relative;
-            width: 100%;
-            max-width: 700px;
-            margin: 20px auto;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            padding: 10px ;
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            backdrop-filter: blur(8px);
-            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .arch-visual-container::before {
-            content: '';
-            position: absolute;
-            inset: -2px;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
-            border-radius: 18px;
-            filter: blur(20px);
-            opacity: 0.5;
-            z-index: -1;
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-visual-container img {
-            width: 100%;
-            height: auto;
-            display: block;
-            border-radius: 8px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Add hover effect */
-        .arch-visual-container:hover {
-            transform: translateY(-4px);
-            transition: transform 0.3s ease;
-            border-color: rgba(0, 150, 255, 0.6);
-        }
-
-        /* Responsive adjustments for the image container */
-        @media (max-width: 1200px) {
-            .arch-visual-container {
-                max-width: 540px;
-            }
-        }
-
-        @media (max-width: 991px) {
-            .arch-visual-container {
-                max-width: 480px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .arch-visual-container {
-                max-width: 100%;
-                margin: 24px auto 0;
-            }
-        }
-
-        /* Product Matrix Section */
-        .products-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .section-header-flex {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: flex-end;
-            margin-bottom: 48px;
-        }
-
-        .section-header-left {
-            max-width: 600px;
-        }
-
-        .section-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: rgba(0, 100, 255, 1);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 8px;
-        }
-
-        .section-header-left h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-        }
-
-        .section-header-left p {
-            font-size: 16px;
-            color: #64748b;
-            margin: 0;
-        }
-
-        .view-all-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            color: rgba(0, 100, 255, 1);
-            font-weight: 600;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .view-all-link:hover {
-            color: rgba(0, 80, 200, 1);
-        }
-
-        /* 让同一行的产品卡片高度一致 */
-        .products-section .row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .products-section .row > [class*="col-"] {
-            display: flex;
-            margin-bottom: 24px;
-        }
-
-        .product-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 0;
-            width: 100%;
-        }
-
-        .product-card:hover {
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
-            transform: translateY(-4px);
-        }
-
-        .product-card-bar {
-            height: 4px;
-            width: 100%;
-        }
-
-        .product-card-bar.blue { background: rgba(0, 100, 255, 1); }
-        .product-card-bar.cyan { background: rgba(0, 120, 255, 1); }
-        .product-card-bar.indigo { background: rgba(50, 100, 255, 1); }
-        .product-card-bar.slate { background: rgba(0, 60, 150, 1); }
-        .product-card-bar.green { background: rgba(0, 80, 200, 1); }
-
-        .product-card-body {
-            padding: 28px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .product-tags {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 16px;
-        }
-
-        .product-tag {
-            font-size: 12px;
-            font-weight: 500;
-            padding: 4px 10px;
-            background: #f1f5f9;
-            color: #475569;
-            border-radius: 4px;
-        }
-
-        .product-card-body h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover h3 {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-body > p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            flex: 1;
-            margin-bottom: 20px;
-        }
-
-        .product-card-footer {
-    
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .product-card-footer span {
-            font-size: 14px;
-            color: #94a3b8;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover .product-card-footer span {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-arrow {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #f1f5f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .product-card-arrow i {
-            font-size: 14px;
-            color: #64748b;
-        }
-
-        .product-card:hover .product-card-arrow {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .product-card:hover .product-card-arrow i {
-            color: #fff;
-        }
-
-        /* Value Section */
-        .value-section {
-            padding: 70px 0;
-            background: #fff;
-        }
-
-        .value-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 28px;
-            background: #f8fafc;
-            border-radius: 16px;
-            transition: all 0.3s ease;
-            cursor: default;
-            margin-bottom: 16px;
-        }
-
-        .value-item:hover {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .value-item:hover *:not(.value-icon i) {
-            color: #fff !important;
-        }
-
-        .value-item:hover .value-icon i {
-            color: #fff;
-        }
-
-        .value-item:hover .value-icon {
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: none;
-        }
-
-        .value-icon {
-            flex-shrink: 0;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 20px;
-            transition: all 1.2s ease;
-        }
-
-        .value-icon i {
-            font-size: 28px;
-            color: rgba(0, 100, 255, 1);
-            transition: color 1.2s ease;
-        }
-
-        .value-content {
-            text-align: center;
-        }
-
-        .value-content h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 8px;
-            transition: color 1.2s ease;
-        }
-
-        .value-content p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-            transition: color 1.2s ease;
-        }
-
-        @media (min-width: 768px) {
-            .value-item {
-                flex-direction: row;
-                text-align: left;
-            }
-
-            .value-icon {
-                margin-bottom: 0;
-                margin-right: 24px;
-            }
-
-            .value-content {
-                text-align: left;
-            }
-        }
-
-        /* Advantages Section */
-        .advantages-section {
-            padding: 100px 0;
-             background: url("assets/images/solution/bg.png");
-            color: #fff;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .advantages-section .row {
-            display: flex;
-            align-items: center;
-        }
-
-        @media (max-width: 767px) {
-            .advantages-section .row {
-                flex-direction: column;
-            }
-
-            .advantages-section .col-md-6 {
-                width: 100%;
-            }
-        }
-
-        .advantages-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 50%;
-            height: 100%;
-    
-        }
-
-        .advantage-item {
-            display: flex;
-            gap: 16px;
-            margin-bottom: 32px;
-        }
-
-        .advantage-check {
-            flex-shrink: 0;
-            margin-top: 4px;
-        }
-
-        .advantage-check i {
-            font-size: 24px;
-            color: rgba(0, 150, 255, 1);
-        }
-
-        .advantage-item h4 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 8px;
-        }
-
-        .advantage-item p {
-            font-size: 14px;
-            color: #94a3b8;
-            margin: 0;
-            line-height: 1.7;
-        }
-
-        .stats-boxes {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-box {
-            background: rgba(0, 40, 100, 0.5);
-            padding: 28px;
-            border-radius: 16px;
-            text-align: center;
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            transition: border-color 0.3s ease;
-        }
-
-        .stat-box:hover {
-            border-color: rgba(0, 150, 255, 1);
-        }
-
-        .stat-box.full-width {
-            grid-column: span 2;
-        }
-
-        .stat-box .stat-number {
-            font-size: 36px;
-            font-weight: 700;
-            color: rgb(255, 255, 255);
-            margin-bottom: 8px;
-        }
-
-        .stat-box .stat-label {
-            font-size: 14px;
-            color: #94a3b8;
-        }
-
-        /* Cases Section */
-        .cases-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .case-card-link {
-            display: block;
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card-link:hover,
-        .case-card-link:focus {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .case-card-header {
-            position: relative;
-            padding: 28px;
-            display: flex;
-            align-items: flex-end;
-            overflow: hidden;
-        }
-
-        .case-card-header.blue {
-            background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
-        }
-
-        .case-card-header.cyan {
-            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
-        }
-
-        .case-card-header.indigo {
-            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
-        }
-
-        .case-card-header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -10%;
-            width: 160px;
-            height: 160px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .case-card-header h3 {
-            position: relative;
-            font-size: 20px;
-            font-weight: 700;
-            color: #fff;
-            margin: 0;
-        }
-
-        .case-card-body {
-            padding: 28px;
-            flex: 1;
-        }
-
-        .case-project {
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(0, 100, 255, 1);
-            margin-bottom: 12px;
-        }
-
-        .case-card-body p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Scroll Animation */
-        .reveal {
-            opacity: 0;
-            transform: translateY(40px);
-            transition: all 0.8s ease;
-        }
-
-        .reveal.active {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Responsive */
-        @media (max-width: 991px) {
-            .hero-title {
-                font-size: 36px;
-            }
-
-            .hero-stats {
-                margin-top: 48px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .solution-hero {
-                min-height: auto;
-                padding: 110px 0 60px; /* header高度80px + 最小间距30px */
-            }
-
-            .hero-title {
-                font-size: 28px;
-            }
-
-            .hero-desc {
-                font-size: 16px;
-            }
-
-            .section-header h2,
-            .section-header-left h2 {
-                font-size: 24px;
-            }
-
-            .section-header-flex {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 16px;
-            }
-
-            .stat-box .stat-number {
-                font-size: 28px;
-            }
-        }
-    </style>
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
@@ -1403,28 +337,6 @@
                     <h2>产品核心价值</h2>
                     <p>不仅是软件升级，更是物流企业的全面数字化转型。</p>
                 </div>
-
-                <style>
-                    .value-grid {
-                        display: flex;
-                        flex-wrap: wrap;
-                        margin: 0 -15px;
-                    }
-                    .value-grid-item {
-                        width: 50%;
-                        padding: 0 15px;
-                        box-sizing: border-box;
-                        display: flex;
-                    }
-                    .value-grid-item .value-item {
-                        width: 100%;
-                    }
-                    @media (max-width: 767px) {
-                        .value-grid-item {
-                            width: 100%;
-                        }
-                    }
-                </style>
                 <div class="value-grid">
                     <div class="value-grid-item">
                         <div class="value-item reveal">
@@ -1584,7 +496,7 @@
                         <a class="case-card-link" href="classiccase/hede_global_supply_chain.html">
                             <div class="case-card reveal">
                                 <div class="case-card-header teal">
-                                    <h3>合德全球供应链平台</h3>
+                                    <h3>唐山港合德海运有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为合德物流打造的全球供应链综合管理平台，实现从订舱到交付的全流程数字化管理，提升全球物流协同效率。</p>
@@ -1596,7 +508,7 @@
                         <a class="case-card-link" href="classiccase/shanggang_liandai_integration.html">
                             <div class="case-card reveal" style="transition-delay: 150ms;">
                                 <div class="case-card-header cyan">
-                                    <h3>上港联代船货一体化云平台</h3>
+                                    <h3>上海上港联合国际船舶代理有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为上港联代打造的船货代一体化云平台，整合船代与货代业务，实现业务协同、数据共享，大幅提升运营效率。</p>
@@ -1608,7 +520,7 @@
                         <a class="case-card-link" href="classiccase/jinjiang_shipping_ecommerce.html">
                             <div class="case-card reveal" style="transition-delay: 300ms;">
                                 <div class="case-card-header green">
-                                    <h3>锦江航运电子商务平台</h3>
+                                    <h3>上海锦江航运（集团）股份有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为锦江航运打造的电子商务平台，实现在线订舱、运价查询、货物跟踪等功能，提升客户服务体验与业务转化效率。</p>
@@ -1623,7 +535,7 @@
                         <a class="case-card-link" href="classiccase/rizhao_huahai_shipping.html">
                             <div class="case-card reveal" style="transition-delay: 100ms;">
                                 <div class="case-card-header indigo">
-                                    <h3>华海全国港口船货代理ERP系统</h3>
+                                    <h3>日照华海国际船舶代理有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为华海物流打造的全国港口船货代理ERP系统，覆盖全国多个港口，实现业务统一管理、财务实时核算、资源优化配置。</p>
@@ -1635,7 +547,7 @@
                         <a class="case-card-link" href="classiccase/lianyungang_china_korea_ferry.html">
                             <div class="case-card reveal" style="transition-delay: 200ms;">
                                 <div class="case-card-header teal">
-                                    <h3>连云港中韩轮渡平台</h3>
+                                    <h3>连云港中韩轮渡有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为连云港中韩轮渡打造的综合业务管理平台，整合客运、货运、代理等业务，实现全流程数字化管理与高效协同。</p>
@@ -1647,7 +559,7 @@
                         <a class="case-card-link" href="classiccase/shanghai_hanghua_ship_agent.html">
                             <div class="case-card reveal" style="transition-delay: 300ms;">
                                 <div class="case-card-header cyan">
-                                    <h3>上海航华船代业务系统</h3>
+                                    <h3>上海航华国际船务代理有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为上海航华打造的船代业务管理系统，实现船舶调度、港口作业、费用结算等业务的全流程数字化，提升作业效率。</p>
diff --git a/solution_port_supply_chain.html b/solution_port_supply_chain.html
index 499a608..6709bfe 100644
--- a/solution_port_supply_chain.html
+++ b/solution_port_supply_chain.html
@@ -28,1074 +28,8 @@
     <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
-    <style>
-        /* ========== 主色调覆盖 - rgba(0, 100, 255, 1) ========== */
-        :root {
-            --primary-color: rgba(0, 100, 255, 1);
-            --primary-color-dark: rgba(0, 80, 200, 1);
-            --primary-color-light: rgba(0, 100, 255, 0.8);
-        }
+    <link href="assets/css/solution.css" rel="stylesheet">
 
-        /* ========== Solution Page Styles ========== */
-
-        /* Hero Section */
-        .solution-hero {
-            position: relative;
-            min-height: 50vh;
-            display: flex;
-            align-items: center;
-            padding-top: 110px; /* header高度80px + 最小间距30px */
-            overflow: hidden;
-            background: url("assets/images/solution/neihe.png");
-        }
-
-        .solution-hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite;
-        }
-
-        .solution-hero::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite 2s;
-        }
-
-        @keyframes blob {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 10;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 16px;
-            border-radius: 50px;
-            background: #0066ff;
-    
-            color: rgb(255, 255, 255);
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-top: 24px;
-        }
-
-        .hero-badge .pulse-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: rgb(255, 255, 255);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .hero-title {
-            font-size: 38px;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.2;
-            margin-bottom: 24px;
-        }
-
-        .hero-title .gradient-text {
-            background: linear-gradient(90deg, rgba(0, 150, 255, 1), rgba(100, 200, 255, 1));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .hero-desc {
-            font-size: 18px;
-            color: #eef6ff;
-            line-height: 1.8;
-            max-width: 520px;
-            margin-bottom: 32px;
-        }
-
-        .hero-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .btn-primary-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: rgba(0, 100, 255, 1);
-            color: #fff;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-        }
-
-        .btn-primary-custom:hover {
-            background: rgba(0, 80, 200, 1);
-            color: #fff;
-            transform: translateY(-2px);
-        }
-
-        .btn-outline-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: transparent;
-            color: #fff;
-            border: 1px solid #475569;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .btn-outline-custom:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: #fff;
-        }
-
-        /* Hero Stats Cards */
-        .hero-stats {
-            position: relative;
-            z-index: 10;
-        }
-
-        .stats-card-container {
-            
-            padding: 24px 24px 48px 24px;
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-item {
-            background: rgba(0, 50, 128, 0.5);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
-            height: 130px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .stat-item .stat-icon {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 12px;
-        }
-
-        /* 覆盖 themify-icons 默认样式 */
-        .stat-item .stat-icon[class^="ti-"],
-        .stat-item .stat-icon[class*=" ti-"] {
-            font-size: 32px;
-            line-height: 1;
-            display: block;
-        }
-
-        .stat-item .stat-icon.blue { color: rgba(0, 150, 255, 1); }
-        .stat-item .stat-icon.cyan { color: rgba(0, 180, 255, 1); }
-        .stat-item .stat-icon.indigo { color: rgba(80, 120, 255, 1); }
-        .stat-item .stat-icon.green { color: #34d399; }
-
-        .stat-item .stat-number {
-            font-size: 28px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 4px;
-        }
-
-        .stat-item .stat-label {
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        /* 风车叶片错开效果 - 使用transform不影响间距 */
-        .stat-item:nth-child(2),
-        .stat-item:nth-child(4) {
-            transform: translateY(24px);
-        }
-
-        .stats-center-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, calc(-50% + 12px));
-            width: 64px;
-            height: 64px;
-            background: rgba(0, 100, 255, 1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-            border: 4px solid rgba(0, 40, 100, 1);
-            z-index: 10;
-        }
-
-        .stats-center-icon i {
-            font-size: 24px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            line-height: 1;
-        }
-
-        /* 覆盖 flaticon 默认样式 */
-        .stats-center-icon [class^="flaticon-"]:before,
-        .stats-center-icon [class*=" flaticon-"]:before,
-        .stats-center-icon [class^="flaticon-"]:after,
-        .stats-center-icon [class*=" flaticon-"]:after {
-            font-family: Flaticon;
-            font-size: 28px;
-            font-style: normal;
-            margin-left: 0;
-        }
-
-        /* Pain Points Section */
-        .pain-points-section {
-            padding: 100px 0;
-            background: #fff;
-        }
-
-        .section-header {
-            text-align: center;
-            max-width: 700px;
-            margin: 0 auto 60px;
-        }
-
-        .section-header h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 16px;
-        }
-
-        .section-header p {
-            font-size: 16px;
-            color: #64748b;
-        }
-
-        .pain-point-card {
-            height: 100%;
-            padding: 32px;
-            text-align: center;
-            background: #f8fafc;
-            border-radius: 16px;
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-        }
-
-        .pain-point-card:hover {
-            background: #fff;
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
-            transform: translateY(-4px);
-        }
-
-        .pain-point-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .pain-point-card:hover .pain-point-icon {
-            transform: scale(1.1);
-        }
-
-        .pain-point-icon i {
-            font-size: 28px;
-        }
-
-        .pain-point-icon.red i { color: #0a7cff; }
-        .pain-point-icon.orange i { color: #00751d; }
-        .pain-point-icon.yellow i { color: #eab308; }
-        .pain-point-icon.purple i { color: #a855f7; }
-
-        .pain-point-card h3 {
-            font-size: 20px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            line-height: 1.4;
-            min-height: 2.8em;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            line-clamp: 2;
-            box-orient: vertical;
-        }
-
-        .pain-point-card p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Solution Architecture Section */
-        .architecture-section {
-            padding: 100px 0;
-            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
-            color: #fff;
-            overflow: hidden;
-        }
-
-        .architecture-section > .container > .row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-
-        .architecture-section > .container > .row > .col-md-6 {
-            display: flex;
-            align-items: center;
-        }
-
-        .arch-step {
-            display: flex;
-            align-items: flex-start;
-            gap: 20px;
-            margin-bottom: 32px;
-        }
-
-        .arch-step-number {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-        }
-
-        .arch-step-number.blue {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.cyan {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.indigo {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-content h4 {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .arch-step-content h4.blue { color: rgb(255, 255, 255); }
-        .arch-step-content h4.cyan { color: rgb(255, 255, 255); }
-        .arch-step-content h4.indigo { color: rgb(255, 255, 255); }
-
-        .arch-step-content p {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            margin: 0;
-        }
-
-        .arch-visual {
-            position: relative;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-
-        .arch-visual::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 150, 255, 0.1));
-            border-radius: 50%;
-            filter: blur(60px);
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .arch-grid-item {
-            background: rgba(30, 41, 59, 0.8);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            border-radius: 16px;
-            padding: 24px;
-            text-align: center;
-            transition: transform 0.3s ease;
-        }
-
-        .arch-grid-item:hover {
-            transform: translateY(-8px);
-        }
-
-        .arch-grid-item:nth-child(2),
-        .arch-grid-item:nth-child(4) {
-            margin-top: 32px;
-        }
-
-        .arch-grid-item i {
-            font-size: 40px;
-            margin-bottom: 12px;
-        }
-
-        .arch-grid-item i.blue { color: rgba(0, 150, 255, 1); }
-        .arch-grid-item i.cyan { color: rgba(0, 180, 255, 1); }
-        .arch-grid-item i.indigo { color: rgba(100, 150, 255, 1); }
-        .arch-grid-item i.green { color: #34d399; }
-
-        .arch-grid-item span {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .arch-center-link {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 56px;
-            height: 56px;
-            background: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
-            z-index: 10;
-        }
-
-        .arch-center-link i {
-            font-size: 24px;
-            color: #003080;
-        }
-
-        /* Architecture Visual Image Container */
-        .arch-visual-container {
-            position: relative;
-            width: 100%;
-            max-width: 700px;
-            margin: 20px auto;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            padding: 10px ;
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            backdrop-filter: blur(8px);
-            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .arch-visual-container::before {
-            content: '';
-            position: absolute;
-            inset: -2px;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
-            border-radius: 18px;
-            filter: blur(20px);
-            opacity: 0.5;
-            z-index: -1;
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-visual-container img {
-            width: 100%;
-            height: auto;
-            display: block;
-            border-radius: 8px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Add hover effect */
-        .arch-visual-container:hover {
-            transform: translateY(-4px);
-            transition: transform 0.3s ease;
-            border-color: rgba(0, 150, 255, 0.6);
-        }
-
-        /* Responsive adjustments for the image container */
-        @media (max-width: 1200px) {
-            .arch-visual-container {
-                max-width: 540px;
-            }
-        }
-
-        @media (max-width: 991px) {
-            .arch-visual-container {
-                max-width: 480px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .arch-visual-container {
-                max-width: 100%;
-                margin: 24px auto 0;
-            }
-        }
-
-        /* Product Matrix Section */
-        .products-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .section-header-flex {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: flex-end;
-            margin-bottom: 48px;
-        }
-
-        .section-header-left {
-            max-width: 600px;
-        }
-
-        .section-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: rgba(0, 100, 255, 1);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 8px;
-        }
-
-        .section-header-left h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-        }
-
-        .section-header-left p {
-            font-size: 16px;
-            color: #64748b;
-            margin: 0;
-        }
-
-        .view-all-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            color: rgba(0, 100, 255, 1);
-            font-weight: 600;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .view-all-link:hover {
-            color: rgba(0, 80, 200, 1);
-        }
-
-        /* 让同一行的产品卡片高度一致 */
-        .products-section .row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .products-section .row > [class*="col-"] {
-            display: flex;
-            margin-bottom: 24px;
-        }
-
-        .product-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 0;
-            width: 100%;
-        }
-
-        .product-card:hover {
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
-            transform: translateY(-4px);
-        }
-
-        .product-card-bar {
-            height: 4px;
-            width: 100%;
-        }
-
-        .product-card-bar.blue { background: rgba(0, 100, 255, 1); }
-        .product-card-bar.cyan { background: rgba(0, 120, 255, 1); }
-        .product-card-bar.indigo { background: rgba(50, 100, 255, 1); }
-        .product-card-bar.slate { background: rgba(0, 60, 150, 1); }
-        .product-card-bar.green { background: rgba(0, 80, 200, 1); }
-
-        .product-card-body {
-            padding: 28px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .product-tags {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 16px;
-        }
-
-        .product-tag {
-            font-size: 12px;
-            font-weight: 500;
-            padding: 4px 10px;
-            background: #f1f5f9;
-            color: #475569;
-            border-radius: 4px;
-        }
-
-        .product-card-body h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover h3 {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-body > p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            flex: 1;
-            margin-bottom: 20px;
-        }
-
-        .product-card-footer {
-    
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .product-card-footer span {
-            font-size: 14px;
-            color: #94a3b8;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover .product-card-footer span {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-arrow {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #f1f5f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .product-card-arrow i {
-            font-size: 14px;
-            color: #64748b;
-        }
-
-        .product-card:hover .product-card-arrow {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .product-card:hover .product-card-arrow i {
-            color: #fff;
-        }
-
-        /* Value Section */
-        .value-section {
-            padding: 70px 0;
-            background: #fff;
-        }
-
-        .value-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 28px;
-            background: #f8fafc;
-            border-radius: 16px;
-            transition: all 0.3s ease;
-            cursor: default;
-            margin-bottom: 16px;
-        }
-
-        .value-item:hover {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .value-item:hover *:not(.value-icon i) {
-            color: #fff !important;
-        }
-
-        .value-item:hover .value-icon i {
-            color: #fff;
-        }
-
-        .value-item:hover .value-icon {
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: none;
-        }
-
-        .value-icon {
-            flex-shrink: 0;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 20px;
-            transition: all 1.2s ease;
-        }
-
-        .value-icon i {
-            font-size: 28px;
-            color: rgba(0, 100, 255, 1);
-            transition: color 1.2s ease;
-        }
-
-        .value-content {
-            text-align: center;
-        }
-
-        .value-content h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 8px;
-            transition: color 1.2s ease;
-        }
-
-        .value-content p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-            transition: color 1.2s ease;
-        }
-
-        @media (min-width: 768px) {
-            .value-item {
-                flex-direction: row;
-                text-align: left;
-            }
-
-            .value-icon {
-                margin-bottom: 0;
-                margin-right: 24px;
-            }
-
-            .value-content {
-                text-align: left;
-            }
-        }
-
-        /* Advantages Section */
-        .advantages-section {
-            padding: 100px 0;
-             background: url("assets/images/solution/bg.png");
-            color: #fff;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .advantages-section .row {
-            display: flex;
-            align-items: center;
-        }
-
-        @media (max-width: 767px) {
-            .advantages-section .row {
-                flex-direction: column;
-            }
-
-            .advantages-section .col-md-6 {
-                width: 100%;
-            }
-        }
-
-        .advantages-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 50%;
-            height: 100%;
-    
-        }
-
-        .advantage-item {
-            display: flex;
-            gap: 16px;
-            margin-bottom: 32px;
-        }
-
-        .advantage-check {
-            flex-shrink: 0;
-            margin-top: 4px;
-        }
-
-        .advantage-check i {
-            font-size: 24px;
-            color: rgba(0, 150, 255, 1);
-        }
-
-        .advantage-item h4 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 8px;
-        }
-
-        .advantage-item p {
-            font-size: 14px;
-            color: #94a3b8;
-            margin: 0;
-            line-height: 1.7;
-        }
-
-        .stats-boxes {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-box {
-            background: rgba(0, 40, 100, 0.5);
-            padding: 28px;
-            border-radius: 16px;
-            text-align: center;
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            transition: border-color 0.3s ease;
-        }
-
-        .stat-box:hover {
-            border-color: rgba(0, 150, 255, 1);
-        }
-
-        .stat-box.full-width {
-            grid-column: span 2;
-        }
-
-        .stat-box .stat-number {
-            font-size: 36px;
-            font-weight: 700;
-            color: rgb(255, 255, 255);
-            margin-bottom: 8px;
-        }
-
-        .stat-box .stat-label {
-            font-size: 14px;
-            color: #94a3b8;
-        }
-
-        /* Cases Section */
-        .cases-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .case-card-link {
-            display: block;
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card-link:hover,
-        .case-card-link:focus {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .case-card-header {
-            position: relative;
-            padding: 28px;
-            display: flex;
-            align-items: flex-end;
-            overflow: hidden;
-        }
-
-        .case-card-header.blue {
-            background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
-        }
-
-        .case-card-header.cyan {
-            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
-        }
-
-        .case-card-header.indigo {
-            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
-        }
-
-        .case-card-header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -10%;
-            width: 160px;
-            height: 160px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .case-card-header h3 {
-            position: relative;
-            font-size: 20px;
-            font-weight: 700;
-            color: #fff;
-            margin: 0;
-        }
-
-        .case-card-body {
-            padding: 28px;
-            flex: 1;
-        }
-
-        .case-project {
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(0, 100, 255, 1);
-            margin-bottom: 12px;
-        }
-
-        .case-card-body p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Scroll Animation */
-        .reveal {
-            opacity: 0;
-            transform: translateY(40px);
-            transition: all 0.8s ease;
-        }
-
-        .reveal.active {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Responsive */
-        @media (max-width: 991px) {
-            .hero-title {
-                font-size: 36px;
-            }
-
-            .hero-stats {
-                margin-top: 48px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .solution-hero {
-                min-height: auto;
-                padding: 110px 0 60px; /* header高度80px + 最小间距30px */
-            }
-
-            .hero-title {
-                font-size: 28px;
-            }
-
-            .hero-desc {
-                font-size: 16px;
-            }
-
-            .section-header h2,
-            .section-header-left h2 {
-                font-size: 24px;
-            }
-
-            .section-header-flex {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 16px;
-            }
-
-            .stat-box .stat-number {
-                font-size: 28px;
-            }
-        }
-    </style>
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
@@ -1348,24 +282,6 @@
                     <h2>数字化转型价值</h2>
                     <p>不仅是软件升级，更是运营模式的重构。</p>
                 </div>
-
-                <style>
-                    .value-grid {
-                        display: flex;
-                        flex-wrap: wrap;
-                        margin: 0 -15px;
-                    }
-                    .value-grid-item {
-                        width: 50%;
-                        padding: 0 15px;
-                        box-sizing: border-box;
-                    }
-                    @media (max-width: 767px) {
-                        .value-grid-item {
-                            width: 100%;
-                        }
-                    }
-                </style>
                 <div class="value-grid">
                     <div class="value-grid-item">
                         <div class="value-item reveal">
@@ -1501,7 +417,7 @@
                         <a class="case-card-link" href="classiccase/tangshan_ore_terminal.html">
                             <div class="case-card reveal">
                                 <div class="case-card-header blue">
-                                    <h3>唐山港京唐港区矿石码头</h3>
+                                    <h3>唐山港集团有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>针对25万吨级专业矿石码头打造的全流程数字化，涵盖智能卸船、堆取料机调度、视频AI理货等功能，实现生产全流程线上闭环管控。</p>
@@ -1513,7 +429,7 @@
                         <a class="case-card-link" href="classiccase/qinhuangdao_cargo_system.html">
                             <div class="case-card reveal" style="transition-delay: 150ms;">
                                 <div class="case-card-header cyan">
-                                    <h3>秦皇岛港</h3>
+                                    <h3>秦皇岛港股份有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>覆盖通用散杂货泊位，实现作业票无纸化、门机群智能调度、堆场动态优化，作业流转效率与资源利用水平显著提升。</p>
@@ -1525,7 +441,7 @@
                         <a class="case-card-link" href="classiccase/zhongshan_port_service.html">
                             <div class="case-card reveal" style="transition-delay: 300ms;">
                                 <div class="case-card-header indigo">
-                                    <h3>中山港航集团</h3>
+                                    <h3>中山港航集团股份有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为中山港航集团建设的企业级大数据分析平台，打通旗下多个码头、航运、物流公司数据，实现集团级经营驾驶舱与数据决策支持。</p>
diff --git a/solution_supply_chain.html b/solution_supply_chain.html
index 821685e..d65f0f2 100644
--- a/solution_supply_chain.html
+++ b/solution_supply_chain.html
@@ -28,1074 +28,8 @@
     <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
-    <style>
-        /* ========== 主色调覆盖 - rgba(0, 100, 255, 1) ========== */
-        :root {
-            --primary-color: rgba(0, 100, 255, 1);
-            --primary-color-dark: rgba(0, 80, 200, 1);
-            --primary-color-light: rgba(0, 100, 255, 0.8);
-        }
+    <link href="assets/css/solution.css" rel="stylesheet">
 
-        /* ========== Solution Page Styles ========== */
-
-        /* Hero Section */
-        .solution-hero {
-            position: relative;
-            min-height: 50vh;
-            display: flex;
-            align-items: center;
-            padding-top: 110px; /* header高度80px + 最小间距30px */
-            overflow: hidden;
-            background: url("assets/images/solution/neihe.png");
-        }
-
-        .solution-hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite;
-        }
-
-        .solution-hero::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
-            animation: blob 8s ease-in-out infinite 2s;
-        }
-
-        @keyframes blob {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 10;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 16px;
-            border-radius: 50px;
-            background: #0066ff;
-    
-            color: rgb(255, 255, 255);
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-top: 24px;
-        }
-
-        .hero-badge .pulse-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: rgb(255, 255, 255);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .hero-title {
-            font-size: 38px;
-            font-weight: 700;
-            color: #fff;
-            line-height: 1.2;
-            margin-bottom: 24px;
-        }
-
-        .hero-title .gradient-text {
-            background: linear-gradient(90deg, rgba(0, 150, 255, 1), rgba(100, 200, 255, 1));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .hero-desc {
-            font-size: 18px;
-            color: #eef6ff;
-            line-height: 1.8;
-            max-width: 520px;
-            margin-bottom: 32px;
-        }
-
-        .hero-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-
-        .btn-primary-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: rgba(0, 100, 255, 1);
-            color: #fff;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-        }
-
-        .btn-primary-custom:hover {
-            background: rgba(0, 80, 200, 1);
-            color: #fff;
-            transform: translateY(-2px);
-        }
-
-        .btn-outline-custom {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 28px;
-            background: transparent;
-            color: #fff;
-            border: 1px solid #475569;
-            border-radius: 8px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .btn-outline-custom:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: #fff;
-        }
-
-        /* Hero Stats Cards */
-        .hero-stats {
-            position: relative;
-            z-index: 10;
-        }
-
-        .stats-card-container {
-            
-            padding: 24px 24px 48px 24px;
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-item {
-            background: rgba(0, 50, 128, 0.5);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
-            height: 130px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .stat-item .stat-icon {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 12px;
-        }
-
-        /* 覆盖 themify-icons 默认样式 */
-        .stat-item .stat-icon[class^="ti-"],
-        .stat-item .stat-icon[class*=" ti-"] {
-            font-size: 32px;
-            line-height: 1;
-            display: block;
-        }
-
-        .stat-item .stat-icon.blue { color: rgba(0, 150, 255, 1); }
-        .stat-item .stat-icon.cyan { color: rgba(0, 180, 255, 1); }
-        .stat-item .stat-icon.indigo { color: rgba(80, 120, 255, 1); }
-        .stat-item .stat-icon.green { color: #34d399; }
-
-        .stat-item .stat-number {
-            font-size: 28px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 4px;
-        }
-
-        .stat-item .stat-label {
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        /* 风车叶片错开效果 - 使用transform不影响间距 */
-        .stat-item:nth-child(2),
-        .stat-item:nth-child(4) {
-            transform: translateY(24px);
-        }
-
-        .stats-center-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, calc(-50% + 12px));
-            width: 64px;
-            height: 64px;
-            background: rgba(0, 100, 255, 1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
-            border: 4px solid rgba(0, 40, 100, 1);
-            z-index: 10;
-        }
-
-        .stats-center-icon i {
-            font-size: 24px;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            line-height: 1;
-        }
-
-        /* 覆盖 flaticon 默认样式 */
-        .stats-center-icon [class^="flaticon-"]:before,
-        .stats-center-icon [class*=" flaticon-"]:before,
-        .stats-center-icon [class^="flaticon-"]:after,
-        .stats-center-icon [class*=" flaticon-"]:after {
-            font-family: Flaticon;
-            font-size: 28px;
-            font-style: normal;
-            margin-left: 0;
-        }
-
-        /* Pain Points Section */
-        .pain-points-section {
-            padding: 100px 0;
-            background: #fff;
-        }
-
-        .section-header {
-            text-align: center;
-            max-width: 700px;
-            margin: 0 auto 60px;
-        }
-
-        .section-header h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 16px;
-        }
-
-        .section-header p {
-            font-size: 16px;
-            color: #64748b;
-        }
-
-        .pain-point-card {
-            height: 100%;
-            padding: 32px;
-            text-align: center;
-            background: #f8fafc;
-            border-radius: 16px;
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-        }
-
-        .pain-point-card:hover {
-            background: #fff;
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
-            transform: translateY(-4px);
-        }
-
-        .pain-point-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .pain-point-card:hover .pain-point-icon {
-            transform: scale(1.1);
-        }
-
-        .pain-point-icon i {
-            font-size: 28px;
-        }
-
-        .pain-point-icon.red i { color: #0a7cff; }
-        .pain-point-icon.orange i { color: #00751d; }
-        .pain-point-icon.yellow i { color: #eab308; }
-        .pain-point-icon.purple i { color: #a855f7; }
-
-        .pain-point-card h3 {
-            font-size: 20px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            line-height: 1.4;
-            min-height: 2.8em;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            line-clamp: 2;
-            box-orient: vertical;
-        }
-
-        .pain-point-card p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Solution Architecture Section */
-        .architecture-section {
-            padding: 100px 0;
-            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
-            color: #fff;
-            overflow: hidden;
-        }
-
-        .architecture-section > .container > .row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-
-        .architecture-section > .container > .row > .col-md-6 {
-            display: flex;
-            align-items: center;
-        }
-
-        .arch-step {
-            display: flex;
-            align-items: flex-start;
-            gap: 20px;
-            margin-bottom: 32px;
-        }
-
-        .arch-step-number {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-        }
-
-        .arch-step-number.blue {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.cyan {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-number.indigo {
-            background: rgba(177, 208, 255, 0.2);
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgb(255, 255, 255);
-        }
-
-        .arch-step-content h4 {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .arch-step-content h4.blue { color: rgb(255, 255, 255); }
-        .arch-step-content h4.cyan { color: rgb(255, 255, 255); }
-        .arch-step-content h4.indigo { color: rgb(255, 255, 255); }
-
-        .arch-step-content p {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.8);
-            margin: 0;
-        }
-
-        .arch-visual {
-            position: relative;
-            max-width: 400px;
-            margin: 0 auto;
-        }
-
-        .arch-visual::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 150, 255, 0.1));
-            border-radius: 50%;
-            filter: blur(60px);
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .arch-grid-item {
-            background: rgba(30, 41, 59, 0.8);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            border-radius: 16px;
-            padding: 24px;
-            text-align: center;
-            transition: transform 0.3s ease;
-        }
-
-        .arch-grid-item:hover {
-            transform: translateY(-8px);
-        }
-
-        .arch-grid-item:nth-child(2),
-        .arch-grid-item:nth-child(4) {
-            margin-top: 32px;
-        }
-
-        .arch-grid-item i {
-            font-size: 40px;
-            margin-bottom: 12px;
-        }
-
-        .arch-grid-item i.blue { color: rgba(0, 150, 255, 1); }
-        .arch-grid-item i.cyan { color: rgba(0, 180, 255, 1); }
-        .arch-grid-item i.indigo { color: rgba(100, 150, 255, 1); }
-        .arch-grid-item i.green { color: #34d399; }
-
-        .arch-grid-item span {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .arch-center-link {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 56px;
-            height: 56px;
-            background: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
-            z-index: 10;
-        }
-
-        .arch-center-link i {
-            font-size: 24px;
-            color: #003080;
-        }
-
-        /* Architecture Visual Image Container */
-        .arch-visual-container {
-            position: relative;
-            width: 100%;
-            max-width: 700px;
-            margin: 20px auto;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            padding: 10px ;
-            border: 1px solid rgba(71, 85, 105, 0.5);
-            backdrop-filter: blur(8px);
-            box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .arch-visual-container::before {
-            content: '';
-            position: absolute;
-            inset: -2px;
-            background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
-            border-radius: 18px;
-            filter: blur(20px);
-            opacity: 0.5;
-            z-index: -1;
-            animation: pulse 4s ease-in-out infinite;
-        }
-
-        .arch-visual-container img {
-            width: 100%;
-            height: auto;
-            display: block;
-            border-radius: 8px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Add hover effect */
-        .arch-visual-container:hover {
-            transform: translateY(-4px);
-            transition: transform 0.3s ease;
-            border-color: rgba(0, 150, 255, 0.6);
-        }
-
-        /* Responsive adjustments for the image container */
-        @media (max-width: 1200px) {
-            .arch-visual-container {
-                max-width: 540px;
-            }
-        }
-
-        @media (max-width: 991px) {
-            .arch-visual-container {
-                max-width: 480px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .arch-visual-container {
-                max-width: 100%;
-                margin: 24px auto 0;
-            }
-        }
-
-        /* Product Matrix Section */
-        .products-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .section-header-flex {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: flex-end;
-            margin-bottom: 48px;
-        }
-
-        .section-header-left {
-            max-width: 600px;
-        }
-
-        .section-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: rgba(0, 100, 255, 1);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 8px;
-        }
-
-        .section-header-left h2 {
-            font-size: 32px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-        }
-
-        .section-header-left p {
-            font-size: 16px;
-            color: #64748b;
-            margin: 0;
-        }
-
-        .view-all-link {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            color: rgba(0, 100, 255, 1);
-            font-weight: 600;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .view-all-link:hover {
-            color: rgba(0, 80, 200, 1);
-        }
-
-        /* 让同一行的产品卡片高度一致 */
-        .products-section .row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .products-section .row > [class*="col-"] {
-            display: flex;
-            margin-bottom: 24px;
-        }
-
-        .product-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-            border: 1px solid #e2e8f0;
-            transition: all 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 0;
-            width: 100%;
-        }
-
-        .product-card:hover {
-            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
-            transform: translateY(-4px);
-        }
-
-        .product-card-bar {
-            height: 4px;
-            width: 100%;
-        }
-
-        .product-card-bar.blue { background: rgba(0, 100, 255, 1); }
-        .product-card-bar.cyan { background: rgba(0, 120, 255, 1); }
-        .product-card-bar.indigo { background: rgba(50, 100, 255, 1); }
-        .product-card-bar.slate { background: rgba(0, 60, 150, 1); }
-        .product-card-bar.green { background: rgba(0, 80, 200, 1); }
-
-        .product-card-body {
-            padding: 28px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .product-tags {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 16px;
-        }
-
-        .product-tag {
-            font-size: 12px;
-            font-weight: 500;
-            padding: 4px 10px;
-            background: #f1f5f9;
-            color: #475569;
-            border-radius: 4px;
-        }
-
-        .product-card-body h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 12px;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover h3 {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-body > p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            flex: 1;
-            margin-bottom: 20px;
-        }
-
-        .product-card-footer {
-    
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .product-card-footer span {
-            font-size: 14px;
-            color: #94a3b8;
-            transition: color 0.3s ease;
-        }
-
-        .product-card:hover .product-card-footer span {
-            color: rgba(0, 100, 255, 1);
-        }
-
-        .product-card-arrow {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #f1f5f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .product-card-arrow i {
-            font-size: 14px;
-            color: #64748b;
-        }
-
-        .product-card:hover .product-card-arrow {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .product-card:hover .product-card-arrow i {
-            color: #fff;
-        }
-
-        /* Value Section */
-        .value-section {
-            padding: 70px 0;
-            background: #fff;
-        }
-
-        .value-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 28px;
-            background: #f8fafc;
-            border-radius: 16px;
-            transition: all 0.3s ease;
-            cursor: default;
-            margin-bottom: 16px;
-        }
-
-        .value-item:hover {
-            background: rgba(0, 100, 255, 1);
-        }
-
-        .value-item:hover *:not(.value-icon i) {
-            color: #fff !important;
-        }
-
-        .value-item:hover .value-icon i {
-            color: #fff;
-        }
-
-        .value-item:hover .value-icon {
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: none;
-        }
-
-        .value-icon {
-            flex-shrink: 0;
-            width: 64px;
-            height: 64px;
-            background: #fff;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            margin-bottom: 20px;
-            transition: all 1.2s ease;
-        }
-
-        .value-icon i {
-            font-size: 28px;
-            color: rgba(0, 100, 255, 1);
-            transition: color 1.2s ease;
-        }
-
-        .value-content {
-            text-align: center;
-        }
-
-        .value-content h3 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #0f172a;
-            margin-bottom: 8px;
-            transition: color 1.2s ease;
-        }
-
-        .value-content p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-            transition: color 1.2s ease;
-        }
-
-        @media (min-width: 768px) {
-            .value-item {
-                flex-direction: row;
-                text-align: left;
-            }
-
-            .value-icon {
-                margin-bottom: 0;
-                margin-right: 24px;
-            }
-
-            .value-content {
-                text-align: left;
-            }
-        }
-
-        /* Advantages Section */
-        .advantages-section {
-            padding: 100px 0;
-             background: url("assets/images/solution/bg.png");
-            color: #fff;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .advantages-section .row {
-            display: flex;
-            align-items: center;
-        }
-
-        @media (max-width: 767px) {
-            .advantages-section .row {
-                flex-direction: column;
-            }
-
-            .advantages-section .col-md-6 {
-                width: 100%;
-            }
-        }
-
-        .advantages-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 50%;
-            height: 100%;
-    
-        }
-
-        .advantage-item {
-            display: flex;
-            gap: 16px;
-            margin-bottom: 32px;
-        }
-
-        .advantage-check {
-            flex-shrink: 0;
-            margin-top: 4px;
-        }
-
-        .advantage-check i {
-            font-size: 24px;
-            color: rgba(0, 150, 255, 1);
-        }
-
-        .advantage-item h4 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 8px;
-        }
-
-        .advantage-item p {
-            font-size: 14px;
-            color: #94a3b8;
-            margin: 0;
-            line-height: 1.7;
-        }
-
-        .stats-boxes {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            position: relative;
-        }
-
-        .stat-box {
-            background: rgba(0, 40, 100, 0.5);
-            padding: 28px;
-            border-radius: 16px;
-            text-align: center;
-            border: 1px solid rgba(0, 100, 255, 0.3);
-            transition: border-color 0.3s ease;
-        }
-
-        .stat-box:hover {
-            border-color: rgba(0, 150, 255, 1);
-        }
-
-        .stat-box.full-width {
-            grid-column: span 2;
-        }
-
-        .stat-box .stat-number {
-            font-size: 36px;
-            font-weight: 700;
-            color: rgb(255, 255, 255);
-            margin-bottom: 8px;
-        }
-
-        .stat-box .stat-label {
-            font-size: 14px;
-            color: #94a3b8;
-        }
-
-        /* Cases Section */
-        .cases-section {
-            padding: 100px 0;
-            background: #f8fafc;
-        }
-
-        .case-card-link {
-            display: block;
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card-link:hover,
-        .case-card-link:focus {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        .case-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .case-card-header {
-            position: relative;
-            padding: 28px;
-            display: flex;
-            align-items: flex-end;
-            overflow: hidden;
-        }
-
-        .case-card-header.blue {
-            background: linear-gradient(135deg, rgba(0, 60, 180, 1), rgba(0, 100, 255, 1));
-        }
-
-        .case-card-header.cyan {
-            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
-        }
-
-        .case-card-header.indigo {
-            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
-        }
-
-        .case-card-header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -10%;
-            width: 160px;
-            height: 160px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .case-card-header h3 {
-            position: relative;
-            font-size: 20px;
-            font-weight: 700;
-            color: #fff;
-            margin: 0;
-        }
-
-        .case-card-body {
-            padding: 28px;
-            flex: 1;
-        }
-
-        .case-project {
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(0, 100, 255, 1);
-            margin-bottom: 12px;
-        }
-
-        .case-card-body p {
-            font-size: 14px;
-            color: #64748b;
-            line-height: 1.7;
-            margin: 0;
-        }
-
-        /* Scroll Animation */
-        .reveal {
-            opacity: 0;
-            transform: translateY(40px);
-            transition: all 0.8s ease;
-        }
-
-        .reveal.active {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Responsive */
-        @media (max-width: 991px) {
-            .hero-title {
-                font-size: 36px;
-            }
-
-            .hero-stats {
-                margin-top: 48px;
-            }
-        }
-
-        @media (max-width: 767px) {
-            .solution-hero {
-                min-height: auto;
-                padding: 110px 0 60px; /* header高度80px + 最小间距30px */
-            }
-
-            .hero-title {
-                font-size: 28px;
-            }
-
-            .hero-desc {
-                font-size: 16px;
-            }
-
-            .section-header h2,
-            .section-header-left h2 {
-                font-size: 24px;
-            }
-
-            .section-header-flex {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 16px;
-            }
-
-            .stat-box .stat-number {
-                font-size: 28px;
-            }
-        }
-    </style>
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
@@ -1348,28 +282,6 @@
                     <h2>数字化转型价值</h2>
                     <p>不仅是软件升级，更是商业模式的重构。</p>
                 </div>
-
-                <style>
-                    .value-grid {
-                        display: flex;
-                        flex-wrap: wrap;
-                        margin: 0 -15px;
-                    }
-                    .value-grid-item {
-                        width: 50%;
-                        padding: 0 15px;
-                        box-sizing: border-box;
-                        display: flex;
-                    }
-                    .value-grid-item .value-item {
-                        width: 100%;
-                    }
-                    @media (max-width: 767px) {
-                        .value-grid-item {
-                            width: 100%;
-                        }
-                    }
-                </style>
                 <div class="value-grid">
                     <div class="value-grid-item">
                         <div class="value-item reveal">
@@ -1505,7 +417,7 @@
                         <a class="case-card-link" href="classiccase/qiaoyi_logistics.html">
                             <div class="case-card reveal">
                                 <div class="case-card-header blue">
-                                    <h3>侨益物流系统</h3>
+                                    <h3>侨益物流股份有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为粮食供应链打造的全流程数字化系统，实现从港口装卸、仓储管理到物流配送的全链条协同，提升粮食供应链的效率和透明度。</p>
@@ -1517,7 +429,7 @@
                         <a class="case-card-link" href="classiccase/smart_wuzhou_port.html">
                             <div class="case-card reveal" style="transition-delay: 150ms;">
                                 <div class="case-card-header cyan">
-                                    <h3>梧州供应链平台</h3>
+                                    <h3>梧州市港务发展集团有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>针对矿石供应链特点，打造集港口生产、物流协同、交易撮合于一体的综合服务平台，助力企业实现供应链数字化升级。</p>
@@ -1529,7 +441,7 @@
                         <a class="case-card-link" href="classiccase/tianjin_zhongyun_shipping.html">
                             <div class="case-card reveal" style="transition-delay: 300ms;">
                                 <div class="case-card-header indigo">
-                                    <h3>天津中运系统</h3>
+                                    <h3>天津中运海运集团有限公司</h3>
                                 </div>
                                 <div class="case-card-body">
                                     <p>为钢材供应链提供智能仓储、精准计量、全程物流可视化服务，实现钢材从生产到终端的全链条数字化管理。</p>